html[dir='ltr'],
[data-sonner-toaster][dir='ltr'] {
  --toast-icon-margin-start: -3px;
  --toast-icon-margin-end: 4px;
  --toast-svg-margin-start: -1px;
  --toast-svg-margin-end: 0px;
  --toast-button-margin-start: auto;
  --toast-button-margin-end: 0;
  --toast-close-button-start: 0;
  --toast-close-button-end: unset;
  --toast-close-button-transform: translate(-35%, -35%);
}

html[dir='rtl'],
[data-sonner-toaster][dir='rtl'] {
  --toast-icon-margin-start: 4px;
  --toast-icon-margin-end: -3px;
  --toast-svg-margin-start: 0px;
  --toast-svg-margin-end: -1px;
  --toast-button-margin-start: 0;
  --toast-button-margin-end: auto;
  --toast-close-button-start: unset;
  --toast-close-button-end: 0;
  --toast-close-button-transform: translate(35%, -35%);
}

[data-sonner-toaster] {
  position: fixed;
  width: var(--width);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --gray1: hsl(0, 0%, 99%);
  --gray2: hsl(0, 0%, 97.3%);
  --gray3: hsl(0, 0%, 95.1%);
  --gray4: hsl(0, 0%, 93%);
  --gray5: hsl(0, 0%, 90.9%);
  --gray6: hsl(0, 0%, 88.7%);
  --gray7: hsl(0, 0%, 85.8%);
  --gray8: hsl(0, 0%, 78%);
  --gray9: hsl(0, 0%, 56.1%);
  --gray10: hsl(0, 0%, 52.3%);
  --gray11: hsl(0, 0%, 43.5%);
  --gray12: hsl(0, 0%, 9%);
  --border-radius: 8px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;
  z-index: 999999999;
  transition: transform 400ms ease;
}

@media (hover: none) and (pointer: coarse) {
  [data-sonner-toaster][data-lifted='true'] {
    transform: none;
  }
}

[data-sonner-toaster][data-x-position='right'] {
  right: var(--offset-right);
}

[data-sonner-toaster][data-x-position='left'] {
  left: var(--offset-left);
}

[data-sonner-toaster][data-x-position='center'] {
  left: 50%;
  transform: translateX(-50%);
}

[data-sonner-toaster][data-y-position='top'] {
  top: var(--offset-top);
}

[data-sonner-toaster][data-y-position='bottom'] {
  bottom: var(--offset-bottom);
}

[data-sonner-toast] {
  --y: translateY(100%);
  --lift-amount: calc(var(--lift) * var(--gap));
  z-index: var(--z-index);
  position: absolute;
  opacity: 0;
  transform: var(--y);
  touch-action: none;
  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
  box-sizing: border-box;
  outline: none;
  overflow-wrap: anywhere;
}

[data-sonner-toast][data-styled='true'] {
  padding: 16px;
  background: var(--normal-bg);
  border: 1px solid var(--normal-border);
  color: var(--normal-text);
  border-radius: var(--border-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  width: var(--width);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-sonner-toast]:focus-visible {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
}

[data-sonner-toast][data-y-position='top'] {
  top: 0;
  --y: translateY(-100%);
  --lift: 1;
  --lift-amount: calc(1 * var(--gap));
}

[data-sonner-toast][data-y-position='bottom'] {
  bottom: 0;
  --y: translateY(100%);
  --lift: -1;
  --lift-amount: calc(var(--lift) * var(--gap));
}

[data-sonner-toast][data-styled='true'] [data-description] {
  font-weight: 400;
  line-height: 1.4;
  color: #3f3f3f;
}

[data-rich-colors='true'][data-sonner-toast][data-styled='true'] [data-description] {
  color: inherit;
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-description] {
  color: hsl(0, 0%, 91%);
}

[data-sonner-toast][data-styled='true'] [data-title] {
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}

[data-sonner-toast][data-styled='true'] [data-icon] {
  display: flex;
  height: 16px;
  width: 16px;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--toast-icon-margin-start);
  margin-right: var(--toast-icon-margin-end);
}

[data-sonner-toast][data-promise='true'] [data-icon] > svg {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  animation: sonner-fade-in 300ms ease forwards;
}

[data-sonner-toast][data-styled='true'] [data-icon] > * {
  flex-shrink: 0;
}

[data-sonner-toast][data-styled='true'] [data-icon] svg {
  margin-left: var(--toast-svg-margin-start);
  margin-right: var(--toast-svg-margin-end);
}

[data-sonner-toast][data-styled='true'] [data-content] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Take the space the icon and the buttons leave, so a custom title or description
     isn't limited to the width of its text */
  flex: 1;
  min-width: 0;
}

[data-sonner-toast][data-styled='true'] [data-button] {
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
  font-size: 12px;
  color: var(--normal-bg);
  background: var(--normal-text);
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
  border: none;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 400ms, box-shadow 200ms;
}

[data-sonner-toast][data-styled='true'] [data-button]:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

[data-sonner-toast][data-styled='true'] [data-button]:first-of-type {
  margin-left: var(--toast-button-margin-start);
  margin-right: var(--toast-button-margin-end);
}

[data-sonner-toast][data-styled='true'] [data-cancel] {
  color: var(--normal-text);
  background: rgba(0, 0, 0, 0.08);
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-styled='true'] [data-cancel] {
  background: rgba(255, 255, 255, 0.3);
}

[data-sonner-toast][data-styled='true'] [data-close-button] {
  position: absolute;
  left: var(--toast-close-button-start);
  right: var(--toast-close-button-end);
  top: 0;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: var(--normal-text);
  background: var(--normal-bg);
  border: 1px solid var(--normal-border);
  transform: var(--toast-close-button-transform);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: opacity 100ms, background 200ms, border-color 200ms;
}

[data-sonner-toast][data-styled='true'] [data-close-button]:focus-visible {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
}

[data-sonner-toast][data-styled='true'] [data-disabled='true'] {
  cursor: not-allowed;
}

[data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
  background: var(--gray2);
  border-color: var(--gray5);
}

[data-sonner-toast][data-swiping='true']::before {
  content: '';
  position: absolute;
  left: -100%;
  right: -100%;
  height: 100%;
  z-index: -1;
}

[data-sonner-toast][data-y-position='top'][data-swiping='true']::before {
  bottom: 50%;
  transform: scaleY(3) translateY(50%);
}

[data-sonner-toast][data-y-position='bottom'][data-swiping='true']::before {
  top: 50%;
  transform: scaleY(3) translateY(-50%);
}

[data-sonner-toast][data-swiping='false'][data-removed='true']::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleY(2);
}

[data-sonner-toast][data-expanded='true']::after {
  content: '';
  position: absolute;
  left: 0;
  height: calc(var(--gap) + 1px);
  bottom: 100%;
  width: 100%;
}

[data-sonner-toast][data-mounted='true'] {
  --y: translateY(0);
  opacity: 1;
}

[data-sonner-toast][data-expanded='false'][data-front='false'] {
  --scale: var(--toasts-before) * 0.05 + 1;
  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
  height: var(--front-toast-height);
}

[data-sonner-toast] > * {
  transition: opacity 400ms;
}

[data-sonner-toast][data-x-position='right'] {
  right: 0;
}

[data-sonner-toast][data-x-position='left'] {
  left: 0;
}

[data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true'] > * {
  opacity: 0;
}

[data-sonner-toast][data-visible='false'] {
  opacity: 0;
  pointer-events: none;
}

[data-sonner-toast][data-mounted='true'][data-expanded='true'] {
  --y: translateY(calc(var(--lift) * var(--offset)));
  height: var(--initial-height);
}

[data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false'] {
  --y: translateY(calc(var(--lift) * -100%));
  opacity: 0;
}

[data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
  opacity: 0;
}

[data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
  --y: translateY(40%);
  opacity: 0;
  transition: transform 500ms, opacity 200ms;
}

[data-sonner-toast][data-removed='true'][data-front='false']::before {
  height: calc(var(--initial-height) + 20%);
}

[data-sonner-toast][data-swiping='true'] {
  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
  transition: none;
}

[data-sonner-toast][data-swiped='true'] {
  -webkit-user-select: none; /* Safari 3+ */
  user-select: none;
}

[data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
[data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

[data-sonner-toast][data-swipe-out='true'][data-swipe-direction='left'] {
  animation-name: swipe-out-left;
}

[data-sonner-toast][data-swipe-out='true'][data-swipe-direction='right'] {
  animation-name: swipe-out-right;
}

[data-sonner-toast][data-swipe-out='true'][data-swipe-direction='up'] {
  animation-name: swipe-out-up;
}

[data-sonner-toast][data-swipe-out='true'][data-swipe-direction='down'] {
  animation-name: swipe-out-down;
}

@keyframes swipe-out-left {
  from {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }

  to {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
    opacity: 0;
  }
}

@keyframes swipe-out-right {
  from {
    transform: var(--y) translateX(var(--swipe-amount-x));
    opacity: 1;
  }

  to {
    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
    opacity: 0;
  }
}

@keyframes swipe-out-up {
  from {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }

  to {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
    opacity: 0;
  }
}

@keyframes swipe-out-down {
  from {
    transform: var(--y) translateY(var(--swipe-amount-y));
    opacity: 1;
  }

  to {
    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
    opacity: 0;
  }
}

@media (max-width: 600px) {
  [data-sonner-toaster] {
    position: fixed;
    right: var(--mobile-offset-right);
    left: var(--mobile-offset-left);
    width: 100%;
  }

  [data-sonner-toaster][dir='rtl'] {
    left: calc(var(--mobile-offset-left) * -1);
  }

  [data-sonner-toaster] [data-sonner-toast] {
    left: 0;
    right: 0;
    width: calc(100% - var(--mobile-offset-left) * 2);
  }

  [data-sonner-toaster][data-x-position='left'] {
    left: var(--mobile-offset-left);
  }

  [data-sonner-toaster][data-y-position='bottom'] {
    bottom: var(--mobile-offset-bottom);
  }

  [data-sonner-toaster][data-y-position='top'] {
    top: var(--mobile-offset-top);
  }

  [data-sonner-toaster][data-x-position='center'] {
    left: var(--mobile-offset-left);
    right: var(--mobile-offset-right);
    transform: none;
  }
}

[data-sonner-toaster][data-sonner-theme='light'] {
  --normal-bg: #fff;
  --normal-border: var(--gray4);
  --normal-text: var(--gray12);

  --success-bg: hsl(143, 85%, 96%);
  --success-border: hsl(145, 92%, 87%);
  --success-text: hsl(140, 100%, 27%);

  --info-bg: hsl(208, 100%, 97%);
  --info-border: hsl(221, 91%, 93%);
  --info-text: hsl(210, 92%, 45%);

  --warning-bg: hsl(49, 100%, 97%);
  --warning-border: hsl(49, 91%, 84%);
  --warning-text: hsl(31, 92%, 45%);

  --error-bg: hsl(359, 100%, 97%);
  --error-border: hsl(359, 100%, 94%);
  --error-text: hsl(360, 100%, 45%);
}

[data-sonner-toaster][data-sonner-theme='light'] [data-sonner-toast][data-invert='true'] {
  --normal-bg: #000;
  --normal-border: hsl(0, 0%, 20%);
  --normal-text: var(--gray1);
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-invert='true'] {
  --normal-bg: #fff;
  --normal-border: var(--gray3);
  --normal-text: var(--gray12);
}

[data-sonner-toaster][data-sonner-theme='dark'] {
  --normal-bg: #000;
  --normal-bg-hover: hsl(0, 0%, 12%);
  --normal-border: hsl(0, 0%, 20%);
  --normal-border-hover: hsl(0, 0%, 25%);
  --normal-text: var(--gray1);

  --success-bg: hsl(150, 100%, 6%);
  --success-border: hsl(147, 100%, 12%);
  --success-text: hsl(150, 86%, 65%);

  --info-bg: hsl(215, 100%, 6%);
  --info-border: hsl(223, 43%, 17%);
  --info-text: hsl(216, 87%, 65%);

  --warning-bg: hsl(64, 100%, 6%);
  --warning-border: hsl(60, 100%, 9%);
  --warning-text: hsl(46, 87%, 65%);

  --error-bg: hsl(358, 76%, 10%);
  --error-border: hsl(357, 89%, 16%);
  --error-text: hsl(358, 100%, 81%);
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button] {
  background: var(--normal-bg);
  border-color: var(--normal-border);
  color: var(--normal-text);
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button]:hover {
  background: var(--normal-bg-hover);
  border-color: var(--normal-border-hover);
}

[data-rich-colors='true'][data-sonner-toast][data-type='success'] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='info'] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='error'] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

[data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.sonner-loading-wrapper {
  --size: 16px;
  height: var(--size);
  width: var(--size);
  position: absolute;
  inset: 0;
  z-index: 10;
}

.sonner-loading-wrapper[data-visible='false'] {
  transform-origin: center;
  animation: sonner-fade-out 0.2s ease forwards;
}

.sonner-spinner {
  position: relative;
  top: 50%;
  left: 50%;
  height: var(--size);
  width: var(--size);
}

.sonner-loading-bar {
  animation: sonner-spin 1.2s linear infinite;
  background: var(--gray11);
  border-radius: 6px;
  height: 8%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 24%;
}

.sonner-loading-bar:nth-child(1) {
  animation-delay: -1.2s;
  transform: rotate(0.0001deg) translate(146%);
}

.sonner-loading-bar:nth-child(2) {
  animation-delay: -1.1s;
  transform: rotate(30deg) translate(146%);
}

.sonner-loading-bar:nth-child(3) {
  animation-delay: -1s;
  transform: rotate(60deg) translate(146%);
}

.sonner-loading-bar:nth-child(4) {
  animation-delay: -0.9s;
  transform: rotate(90deg) translate(146%);
}

.sonner-loading-bar:nth-child(5) {
  animation-delay: -0.8s;
  transform: rotate(120deg) translate(146%);
}

.sonner-loading-bar:nth-child(6) {
  animation-delay: -0.7s;
  transform: rotate(150deg) translate(146%);
}

.sonner-loading-bar:nth-child(7) {
  animation-delay: -0.6s;
  transform: rotate(180deg) translate(146%);
}

.sonner-loading-bar:nth-child(8) {
  animation-delay: -0.5s;
  transform: rotate(210deg) translate(146%);
}

.sonner-loading-bar:nth-child(9) {
  animation-delay: -0.4s;
  transform: rotate(240deg) translate(146%);
}

.sonner-loading-bar:nth-child(10) {
  animation-delay: -0.3s;
  transform: rotate(270deg) translate(146%);
}

.sonner-loading-bar:nth-child(11) {
  animation-delay: -0.2s;
  transform: rotate(300deg) translate(146%);
}

.sonner-loading-bar:nth-child(12) {
  animation-delay: -0.1s;
  transform: rotate(330deg) translate(146%);
}

@keyframes sonner-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sonner-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes sonner-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion) {
  [data-sonner-toast],
  [data-sonner-toast] > *,
  .sonner-loading-bar {
    transition: none !important;
    animation: none !important;
  }
}

.sonner-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: opacity 200ms, transform 200ms;
}

.sonner-loader[data-visible='false'] {
  opacity: 0;
  transform: scale(0.8) translate(-50%, -50%);
}

:root {
  font-family: "Inter Variable", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
  font-size: 14px;
  line-height: 1.55;
  --background: oklch(0.978 0.002 260);
  --surface: #fff;
  --surface-muted: oklch(0.958 0.003 260);
  --ink: oklch(0.205 0.008 260);
  --muted: oklch(0.49 0.012 260);
  --line: oklch(0.9 0.006 260);
  --input: oklch(0.84 0.008 260);
  --accent: oklch(0.52 0.15 250);
  --accent-muted: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --primary: var(--ink);
  --danger: oklch(0.52 0.19 25);
  --sidebar-width: 288px;
  --control-height: 32px;
  --header-height: 56px;
  --sidebar-surface: #f7fafc;
  --sidebar-muted: #5f717f;
  --sidebar-ink: #102231;
  --sidebar-line: #cfdae1;
  --sidebar-hover: #eef3f6;
  --sidebar-accent: #0b7285;
  --primary-foreground: #fff;
}
* {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
}
button > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: var(--primary);
}
button {
  border: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 28px;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 0;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.4px;
  line-height: 1.4;
  margin-bottom: 6px;
}
h3 {
  font-size: 16px;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}
small {
  font-size: 12px;
  color: var(--muted);
}
td small {
  display: block;
  margin-top: 3px;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
legend {
  font-weight: 600;
  margin-bottom: 12px;
}
input,
select,
textarea {
  max-width: 100%;
  border: 1px solid var(--input);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--ink);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ink);
  border-color: transparent;
}

input[type="color"] {
  height: 42px;
  padding: 5px;
  min-width: 70px;
}
textarea {
  resize: vertical;
}
input:disabled,
select:disabled {
  background: var(--surface-muted);
}
.primary,
.secondary,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  min-height: var(--control-height);
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px #0000000d;
  transition:
    background-color 150ms,
    border-color 150ms,
    color 150ms,
    opacity 150ms;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}
.primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}
.primary:hover {
  background: color-mix(in srgb, var(--ink) 90%, transparent);
}
.primary:active {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}
.primary svg,
.secondary svg,
.danger-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.secondary:hover {
  background: var(--surface-muted);
}
.danger-button {
  background: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: white;
}
.danger-button:hover {
  background: color-mix(in srgb, var(--danger) 90%, transparent);
}
.small {
  padding: 0 10px;
  font-size: 12px;
}
.text-button {
  background: transparent;
  color: var(--primary);
  padding: 4px 0;
  text-align: left;
  font-weight: 600;
}
.text-button:hover {
  text-decoration: underline;
}
.danger-text {
  color: var(--danger);
}
.icon-button {
  background: transparent;
  display: grid;
  place-items: center;
  min-height: 36px;
  min-width: 36px;
  color: var(--muted);
  border-radius: 6px;
}
.icon-button:hover {
  background: var(--surface-muted);
}
.muted {
  color: var(--muted);
  margin-bottom: 0;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--muted);
}
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wrap {
  flex-wrap: wrap;
}
.spacer {
  flex: 1;
}
.notice {
  display: block;
  padding: 13px 16px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  margin: 16px 0;
  font-size: 13px;
}
.notice.danger {
  background: #fff2ef;
  border-color: #f0cec5;
  color: #943a32;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: var(--surface);
  padding: 10px;
}
.skip-link:focus {
  top: 10px;
}
.select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  max-width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 1px 2px #10182805;
}
.select-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-trigger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
}
.select-trigger:hover {
  background: var(--surface-muted);
}
.select-content {
  z-index: 100;
  min-width: var(--radix-select-trigger-width);
  max-width: calc(100vw - 24px);
  max-height: min(320px, var(--radix-select-content-available-height));
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 24px #10182820;
}
.select-viewport {
  padding: 1px;
  scrollbar-width: none;
}
.select-viewport::-webkit-scrollbar {
  display: none;
}
/* External equivalents of Radix's injected styles for the strict Worker CSP. */
body[data-scroll-locked] {
  overflow: hidden;
  overscroll-behavior: contain;
}
/* The root's stable gutter already reserves the scrollbar. Radix's injected
   body margin would reserve it twice when inline styles are allowed on staging. */
html body[data-scroll-locked] {
  /* biome-ignore lint/complexity/noImportantStyles: Radix injects its margin with !important. */
  margin-right: 0 !important;
}
.select-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 32px 7px 9px;
  border-radius: 5px;
  outline: none;
  font-size: 13px;
  cursor: default;
  user-select: none;
  overflow-wrap: anywhere;
}
.select-item[data-highlighted] {
  background: var(--surface-muted);
}
.select-item:focus-visible {
  outline: none;
}
.select-item[data-state="checked"] {
  font-weight: 600;
}
.select-item[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.select-indicator {
  position: absolute;
  right: 8px;
  display: flex;
}
.select-indicator svg {
  width: 15px;
  height: 15px;
}
.select-scroll {
  display: flex;
  justify-content: center;
  height: 22px;
  color: var(--muted);
}
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-surface);
  color: var(--sidebar-ink);
  border-right: 1px solid var(--sidebar-line);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
}
.sidebar svg {
  stroke-width: 2;
}
.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  padding: 0;
  background: transparent;
  text-align: left;
}
.sidebar .brand {
  color: var(--sidebar-ink);
}
.brand strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--primary-foreground);
  font-size: 16px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 20px;
  height: 20px;
}
.nav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  text-align: left;
  padding: 0 8px;
  min-height: 32px;
}
.nav-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sidebar-muted);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.nav-label svg {
  width: 14px;
  height: 14px;
  transition: transform 150ms;
}
.nav-label[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}
.sidebar nav {
  padding: 8px 12px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sidebar-muted) 62%, transparent)
    color-mix(in srgb, var(--sidebar-hover) 72%, transparent);
}
.sidebar nav::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sidebar nav::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-hover) 72%, transparent);
}
.sidebar nav::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-muted) 62%, transparent);
  background-clip: padding-box;
}
.sidebar nav::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--sidebar-accent) 78%, var(--sidebar-ink));
}
.nav-items {
  padding-bottom: 8px;
}
.nav-item {
  position: relative;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  padding: 0 10px;
  margin: 0;
  border-radius: 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.nav-item + .nav-item {
  margin-top: 2px;
}
.nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--sidebar-hover);
}
.nav-item.active {
  background: transparent;
  color: var(--sidebar-ink);
  font-weight: 700;
}
.sidebar-footer {
  margin: 0;
  padding: 8px;
  border-top: 1px solid var(--sidebar-line);
  font-size: 12px;
}
.sidebar-footer small {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px var(--surface-muted);
}
.workspace {
  margin-left: var(--sidebar-width);
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 15px;
}
.breadcrumb {
  font-size: 12px;
  color: var(--muted);
}
.breadcrumb span {
  margin: 0 13px;
  color: var(--muted);
}
.breadcrumb strong {
  font-weight: 500;
  color: var(--ink);
}
.account-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}
.account-controls .select-trigger {
  font-size: 12px;
  max-width: 230px;
  padding: 8px 10px;
  background: var(--surface);
  border-color: var(--line);
}
.account-controls .text-button {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.avatar {
  width: 32px;
  height: 32px;
  background: var(--line);
  color: var(--muted);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}
.main-content {
  padding: 20px 24px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 36px;
  margin-bottom: 16px;
}
.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.page-actions .actions {
  flex-wrap: wrap;
}
.page-actions:empty {
  display: none;
}
.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 22px;
}
.section-toolbar h2 {
  font-size: 19px;
}
.section-toolbar p {
  font-size: 13px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 2px 4px #283b2c03;
  margin-bottom: 22px;
  overflow: hidden;
}
.padded {
  padding: 26px;
}
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 25px;
}
.card-heading h3 {
  margin: 0;
}
.card-heading .muted {
  font-size: 12px;
}
.card-empty {
  padding: 0 25px 22px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.metric {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.metric:after {
  display: none;
}
.metric p {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 15px;
}
.metric strong {
  display: block;
  color: var(--ink);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.metric small {
  font-size: 10px;
  line-height: 1.5;
  display: block;
  color: var(--muted);
}
.badge {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 10px;
  background: var(--surface-muted);
  color: var(--muted);
  text-transform: capitalize;
  white-space: nowrap;
}
.badge.success {
  background: #edf5ee;
  color: #21613b;
}
.chart {
  width: 100%;
  height: 210px;
  padding: 0 12px;
}
.chart rect {
  fill: var(--accent);
}
.chart rect:hover {
  fill: var(--ink);
}
.chart line {
  stroke: var(--surface-muted);
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 28px 22px;
  font-size: 10px;
  color: var(--muted);
}
.three-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.breakdown {
  list-style: none;
  margin: 0;
  padding: 0 25px 17px;
}
.breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--surface-muted);
  font-size: 12px;
  gap: 10px;
}
.breakdown li strong {
  font-weight: 500;
  color: var(--ink);
}
.table-scroll {
  position: relative;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  font-size: 12px;
}
th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding: 13px 22px;
  white-space: nowrap;
  border-block: 1px solid var(--surface-muted);
}
td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--surface-muted);
  color: var(--ink);
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
.table-scroll td strong {
  font-weight: 500;
  color: var(--ink);
}
tbody tr:hover {
  background: var(--surface);
}
.link-code {
  font-size: 13px;
  font-weight: 600;
}
.destination {
  display: block;
  max-width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}
.destination:hover {
  text-decoration: underline;
}
.filters {
  display: flex;
  gap: 12px;
  padding: 20px 23px;
  align-items: center;
}
.filters .select-trigger {
  font-size: 12px;
  padding: 9px 11px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 380px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--muted);
}
.search-field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 12px;
}
.search-field:focus-within {
  border-color: var(--ink);
}
.search-field input:focus {
  outline: none;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 22px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.empty {
  padding: 50px 24px;
  text-align: center;
}
.empty h3 {
  margin-top: 17px;
  color: var(--ink);
  font-size: 17px;
}
.empty p {
  max-width: 390px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 12px;
}
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--surface-muted);
  color: var(--muted);
  border-radius: 14px;
}
.workspace-footer {
  padding: 20px 38px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.menu-toggle {
  display: none;
}
.modal {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  width: min(560px, calc(100vw - 28px));
  max-height: 90vh;
  color: var(--ink);
  box-shadow: 0 20px 80px #133a292b;
}
.modal.wide {
  width: min(1000px, calc(100vw - 28px));
}
.modal::backdrop {
  background: #0c241b66;
  backdrop-filter: blur(3px);
}
.modal-heading {
  padding: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.modal-heading h2 {
  font-size: 20px;
  margin: 0;
}
.modal-content {
  padding: 25px;
}
.credential-dialog {
  display: grid;
  gap: 20px;
}
.credential-dialog p {
  margin: 0;
}
.credential-intro {
  font-size: 13px;
  line-height: 1.6;
}
.credential-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.credential-permissions {
  display: grid;
  gap: 20px;
}
.credential-group {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.credential-group legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}
.credential-group legend svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.credential-permission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  cursor: pointer;
}
.credential-permission:first-of-type {
  border-radius: 10px 10px 0 0;
}
.credential-permission:last-of-type {
  border-radius: 0 0 10px 10px;
}
.credential-permission:only-of-type {
  border-radius: 10px;
}
.credential-permission + .credential-permission {
  border-top: 0;
}
.credential-permission > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.credential-permission strong {
  font-size: 12px;
  font-weight: 500;
}
.credential-permission small,
.credential-note,
.credential-copy,
.credential-delay {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.credential-permission:has(input.switch:focus-visible) strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.credential-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 20px 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
}
.credential-steps li {
  display: grid;
  justify-items: center;
  gap: 8px;
  position: relative;
  font-size: 11px;
  font-weight: 500;
}
.credential-steps li + li::before {
  content: "";
  position: absolute;
  top: 20px;
  right: calc(50% + 27px);
  width: calc(100% - 54px);
  border-top: 1px dashed var(--input);
}
.credential-steps li > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.credential-secret {
  display: grid;
  gap: 12px;
}
.credential-secret textarea {
  height: auto;
  min-height: 100px;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  resize: none;
  overflow-wrap: anywhere;
}
.credential-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.credential-copy .notice {
  margin: 0;
}
.credential-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 4px;
}
.credential-delay {
  margin-right: auto;
  min-height: 18px;
}
@media (max-width: 480px) {
  .credential-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .credential-copy {
    flex-wrap: wrap;
  }
  .credential-copy button {
    margin-left: auto;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 17px;
  min-width: 0;
}
.field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.field input,
.field .select-trigger,
.field textarea {
  width: 100%;
  font-size: 13px;
}
.field small {
  font-size: 11px;
  line-height: 1.5;
}
.credential-dialog .field {
  margin: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.checkboxes {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 8px 0 23px;
  font-size: 12px;
}
.checkboxes label,
.check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.form-section {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.form-section summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.link-preview {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-muted);
  padding: 18px 25px;
  font-size: 13px;
}
.link-preview a {
  overflow-wrap: anywhere;
}
.tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  background: transparent;
  padding: 15px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs button.selected {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}
.rule-card {
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 8px;
}
.rule-card .card-heading {
  padding: 0 0 16px;
}
.condition-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.condition-row .select-trigger {
  width: 230px;
  flex-shrink: 0;
  font-size: 12px;
}
.condition-row input {
  min-width: 0;
  width: 100%;
  font-size: 12px;
}
.tag-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tag-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.tag-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.tag-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px;
}
.tag-card > svg {
  color: var(--muted);
  margin-bottom: 15px;
}
.tag-card h3 {
  overflow-wrap: anywhere;
}
.tag-card p {
  font-size: 12px;
  color: var(--muted);
}
.qr-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.qr-preview {
  padding: 20px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-self: start;
  text-align: center;
}
.qr-preview img {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 0 auto 15px;
}
.qr-preview small {
  overflow-wrap: anywhere;
}
.import-preview {
  max-height: 350px;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.import-preview td {
  padding: 10px;
  font-size: 11px;
}
.status-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.reconciliation {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
html:has(.sign-in) {
  overflow-y: auto;
  scrollbar-gutter: auto;
}
.sign-in {
  min-height: 100svh;
  background: var(--surface);
}
.sign-in-frame {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sign-in-art {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(40px, 6vw, 96px);
  background:
    radial-gradient(ellipse at 0 0, #1b9ada88, transparent 70%),
    linear-gradient(155deg, #096fca, #304bdf 60%, #5351f0);
  color: #fff;
}
.sign-in-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  pointer-events: none;
}
.sign-in-art-heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
}
.sign-in-art .brand-mark {
  width: 52px;
  height: 52px;
  border: 1px solid #ffffff40;
  border-radius: 14px;
  background: #ffffff18;
  color: #fff;
}
.sign-in-art h1 {
  max-width: 8ch;
  margin: 0 0 10vh;
  font-size: clamp(40px, 5.3vw, 80px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.sign-in-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(40px, 6vw, 96px);
  background: var(--surface);
}
.sign-in-brand {
  width: 100%;
  max-width: 440px;
  min-height: 52px;
  display: flex;
  align-items: center;
  margin-inline: auto;
}
.sign-in-brand .eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.sign-in-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding-block: 64px;
}
.sign-in-card h2 {
  margin: 0 0 16px;
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.sign-in-card > p {
  margin-bottom: 48px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.sign-in-card > .notice.danger {
  color: var(--danger);
}
.sign-in-button {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 20px;
  justify-content: space-between;
  background: #4659ed;
  border-color: #4659ed;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.sign-in-button:hover {
  background: #3547d8;
}
.sign-in-provider {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.sign-in-provider svg {
  width: 20px;
  height: 20px;
}
.compact td {
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (min-width: 1600px) {
  .main-content {
    padding-top: 45px;
  }
  .metrics {
    gap: 22px;
  }
  .metric {
    padding: 27px;
  }
  .chart {
    height: 250px;
  }
}
@media (max-width: 1150px) {
  .main-content {
    padding: 28px 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .three-columns {
    gap: 14px;
  }
  .card-heading {
    padding: 18px;
  }
  .breakdown {
    padding-inline: 18px;
  }
  .filters {
    flex-wrap: wrap;
  }
  .search-field {
    min-width: 240px;
  }
  .tag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-toolbar {
    align-items: flex-start;
  }
  .breadcrumb {
    display: none;
  }
}
@media (max-width: 800px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    box-shadow: 10px 0 40px #173b2d22;
  }
  .sidebar.open {
    transform: translateX(0);
    top: 0;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 65px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 21;
  }
  .menu-toggle {
    display: inline-flex;
    font-size: 12px;
  }
  .account-controls {
    gap: 10px;
  }
  .account-controls .select-trigger {
    max-width: 185px;
  }
  .main-content {
    padding: 18px;
  }
  .page-heading {
    margin-bottom: 16px;
  }
  .section-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .section-toolbar > .actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .metrics {
    gap: 12px;
  }
  .metric {
    padding: 18px;
  }
  .metric strong {
    font-size: 26px;
  }
  .three-columns {
    grid-template-columns: 1fr;
  }
  .filters {
    padding: 16px;
    gap: 8px;
  }
  .search-field {
    flex-basis: 100%;
    max-width: none;
    min-width: 0;
  }
  .filters .select-trigger {
    flex: 1;
  }
  .filters .secondary {
    font-size: 12px;
  }
  th,
  td {
    padding: 13px 16px;
  }
  .padded {
    padding: 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .qr-layout {
    grid-template-columns: 1fr;
  }
  .qr-preview {
    max-width: 300px;
    margin: auto;
  }
  .condition-row {
    flex-wrap: wrap;
  }
  .condition-row .select-trigger {
    width: 100%;
  }
  .condition-row input {
    flex: 1;
  }
  .condition-row .icon-button {
    flex-shrink: 0;
  }
  .modal-heading,
  .modal-content {
    padding: 18px;
  }
  .tag-grid {
    grid-template-columns: 1fr;
  }
  .workspace-footer {
    padding-inline: 20px;
  }
  .link-preview {
    padding: 15px;
    flex-wrap: wrap;
  }
  .sign-in-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sign-in-art {
    min-height: 240px;
    padding: 28px;
  }
  .sign-in-art-heading {
    gap: 32px;
  }
  .sign-in-art h1 {
    max-width: none;
    margin: 0;
    font-size: 36px;
  }
  .sign-in-art .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .sign-in-panel {
    padding: 28px;
  }
  .sign-in-brand {
    min-height: 32px;
  }
  .sign-in-card {
    padding-block: 48px;
  }
  .sign-in-card > p {
    margin-bottom: 36px;
  }
  .tabs {
    padding-inline: 5px;
  }
  .tabs button {
    padding: 14px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
  .sidebar {
    transition: none;
  }
}

.geography {
  width: 100%;
  height: auto;
  max-height: 380px;
  color: var(--ink);
}
.geography + p {
  font-size: 11px;
  margin-bottom: 16px;
}

.hide-destination th:nth-child(2),
.hide-destination td:nth-child(2) {
  display: none;
}

.hide-status th:nth-child(3),
.hide-status td:nth-child(3) {
  display: none;
}

.hide-visits th:nth-child(4),
.hide-visits td:nth-child(4) {
  display: none;
}

.hide-created th:nth-child(5),
.hide-created td:nth-child(5) {
  display: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--header-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--sidebar-line);
  flex-shrink: 0;
}
.brand-identity small {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  margin-top: 0;
}
.nav-group {
  padding: 4px 0;
  border-bottom: 1px solid var(--sidebar-line);
}
.nav-group:first-child {
  border-top: 1px solid var(--sidebar-line);
}
.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--sidebar-accent);
  border-radius: 0 3px 3px 0;
}
.nav-item.active svg {
  color: var(--sidebar-accent);
}
.sidebar-host {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 8px 15px;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.sidebar-host svg {
  width: 16px;
  flex-shrink: 0;
}
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--sidebar-line);
  border-radius: 12px;
  background: var(--sidebar-hover);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.sidebar-profile::-webkit-details-marker {
  display: none;
}
.sidebar-profile > svg {
  width: 16px;
  height: 16px;
  color: var(--sidebar-muted);
  flex-shrink: 0;
}
.profile-name {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
.sidebar-profile-menu {
  position: relative;
}
.profile-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 35;
  padding: 6px;
  border: 1px solid var(--sidebar-line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px #102d4220;
}
.profile-menu-heading {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.profile-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 9px 8px;
}
.profile-menu button:hover {
  background: var(--surface-muted);
}
.theme-control {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: var(--sidebar-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.theme-control > svg {
  width: 17.6px;
  height: 17.6px;
}
.theme-control > span {
  flex: 1;
}
.avatar {
  background: var(--sidebar-accent);
  color: var(--primary-foreground);
  border: 0;
  flex-shrink: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
input.switch {
  appearance: none;
  position: relative;
  display: inline-block;
  width: 32px;
  min-width: 32px;
  height: 18.4px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--input);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 120ms;
}
input.switch::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 50%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0002;
  transition: transform 120ms;
  transform: translateY(-50%);
}
input.switch:checked {
  background: var(--ink);
}
input.switch:checked::before {
  background: var(--surface);
  transform: translate(14px, -50%);
}
input.switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
input.switch:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.checkboxes label,
.check-label {
  min-height: 32px;
  gap: 12px;
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: #10182859;
  backdrop-filter: blur(2px);
  z-index: 29;
}
@media (max-width: 800px) {
  .sidebar .avatar {
    display: grid;
  }
  .sidebar {
    width: min(288px, calc(100vw - 16px));
    z-index: 30;
  }
  .sidebar-header {
    height: 64px;
  }
  .sidebar-profile {
    padding-bottom: 12px;
  }
  .account-controls .select-trigger {
    max-width: min(230px, 65vw);
  }
  .topbar {
    justify-content: space-between;
  }
}
@media (prefers-reduced-motion: reduce) {
  input.switch,
  input.switch::before {
    transition: none;
  }
}

.workspace-selector {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sidebar-line);
}
.workspace-selector label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sidebar-muted);
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}
.workspace-selector .select-trigger {
  width: 100%;
  font-size: 12px;
}
.filter-drawer {
  inset: 0 0 0 auto;
  margin: 0;
  width: min(480px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 16px 0 0 16px;
  background: var(--background);
  border-width: 0 0 0 1px;
}
.filter-drawer[open] {
  display: flex;
  flex-direction: column;
  animation: drawer-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawer-enter {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.profile-form {
  padding: 24px;
}
.profile-form .form-actions {
  margin-top: 24px;
  padding-bottom: 0;
}
:is(.theme-control, .preferences-controls, .credential-dialog) input.switch:focus {
  outline: none;
  box-shadow: none;
}
.theme-control:has(input:focus-visible) > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.preferences-controls label:has(input.switch:focus-visible) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .filter-drawer[open] {
    animation: none;
  }
  .nav-label svg {
    transition: none;
  }
}
.filter-drawer::backdrop {
  background: #0009;
  backdrop-filter: none;
}
.filter-drawer .modal-heading {
  flex-shrink: 0;
  background: var(--background);
  padding: 16px 20px;
}
.filter-drawer .modal-heading h2 {
  font-size: 18px;
  font-weight: 700;
}
.drawer-form {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.drawer-body > .muted {
  font-size: 12px;
  margin-bottom: 24px;
}
.drawer-body .field {
  margin-bottom: 24px;
}
.drawer-footer {
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  background: var(--surface);
}
.report-controls {
  margin-bottom: 24px;
}
.search-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.search-toolbar > .search-field,
.report-search {
  min-width: 0;
  flex: 1;
  max-width: none;
}
.search-toolbar .search-field {
  background: var(--surface);
  min-width: 0;
  max-width: none;
}
.search-toolbar .secondary {
  flex-shrink: 0;
  min-height: 38px;
}
.report-search {
  position: relative;
}
.report-search .search-field input {
  min-width: 0;
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px #10182820;
  z-index: 5;
}
.search-results > button {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: transparent;
  text-align: left;
  color: var(--ink);
  border-radius: 6px;
}
.search-results > button:hover,
.search-results > button:focus {
  background: var(--surface-muted);
}
.search-results > button span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.search-results small {
  display: block;
  padding: 4px;
}
.search-results p {
  padding: 12px;
  margin: 0;
}
.report-context {
  font-size: 12px;
  margin: 12px 0 16px;
}
.filter-count {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--primary-foreground);
  font-size: 10px;
}
.page-skeleton {
  display: block;
  position: relative;
  width: 100%;
  padding: 8px 0;
}
.skeleton-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.skeleton-line {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 5px;
  background: var(--surface-muted);
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}
.skeleton-line.short {
  width: 55%;
}
.skeleton-line.tall {
  height: 32px;
  width: 40%;
  margin: 18px 0;
}
.skeleton-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.skeleton-row:last-child {
  border: 0;
}
.skeleton-overview .skeleton-panel {
  min-height: 300px;
}
.skeleton-form .skeleton-row {
  grid-template-columns: 1fr;
  max-width: 540px;
}
.sign-in:has(.page-skeleton) {
  display: block;
  padding: 48px;
}
@keyframes skeleton-pulse {
  50% {
    opacity: 0.4;
  }
}
@media (max-width: 800px) {
  :root {
    --control-height: 40px;
  }
  .breadcrumb {
    display: block;
  }
  .nav-item {
    min-height: 40px;
  }
  .filter-drawer {
    border-radius: 0;
  }
  .search-toolbar .search-field {
    flex-basis: auto;
  }
  .filters.search-toolbar {
    flex-wrap: wrap;
  }
  .filters.search-toolbar .search-field {
    flex-basis: calc(100% - 110px);
  }
  .drawer-footer {
    padding-inline: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line {
    animation: none;
  }
  .primary,
  .secondary,
  .danger-button {
    transition: none;
  }
}

.tag-filter {
  margin-bottom: 24px;
}
.tag-filter > input {
  width: 100%;
}

html:has(dialog[open]),
html:has(.sidebar.open),
body:has(dialog[open]),
body:has(.sidebar.open) {
  overflow: hidden;
}
.drawer-body {
  overscroll-behavior: contain;
}

.text-button,
.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-heading:has(> button:only-child) {
  justify-content: flex-end;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0d1720;
  --surface: #142330;
  --surface-muted: #1e3140;
  --ink: #e7f0f5;
  --muted: #9fb1c1;
  --line: #304657;
  --input: #4b6375;
  --primary-foreground: #142330;
  --sidebar-surface: #10202c;
  --sidebar-muted: #9fb5c6;
  --sidebar-ink: #e7f0f5;
  --sidebar-line: #304657;
  --sidebar-hover: #1e3343;
  --sidebar-accent: #22b8cc;
}

:is(.theme-control, .preferences-controls, .credential-dialog) input.switch {
  width: 36px;
  min-width: 36px;
  height: 20px;
  background: var(--sidebar-muted);
  border-color: var(--sidebar-muted);
}
:is(.theme-control, .preferences-controls, .credential-dialog) input.switch::before {
  width: 14px;
  height: 14px;
  left: 2px;
}
:is(.theme-control, .preferences-controls, .credential-dialog) input.switch:checked {
  background: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
}
:is(.theme-control, .preferences-controls, .credential-dialog) input.switch:checked::before {
  background: var(--primary-foreground);
  transform: translate(16px, -50%);
}

.profile-settings {
  display: grid;
  gap: 20px;
}
.profile-tabs {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--muted);
}
.profile-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: none;
  transition:
    color 150ms,
    background-color 150ms,
    box-shadow 150ms;
}
.profile-tabs [aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}
.profile-tabs [role="tab"]:hover {
  color: var(--ink);
}
:root[data-contrast="high"] .profile-tabs [aria-selected="true"] {
  border-color: var(--ink);
}
.profile-panel > form > h2 {
  margin-bottom: 12px;
}
.profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.profile-summary .avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 18px;
  font-weight: 700;
}
.profile-summary h2 {
  margin: 0 0 4px;
}
.profile-summary p {
  margin: 0;
  font-size: 12px;
}
.profile-role {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}
.profile-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.profile-details .form-actions,
.profile-workspaces {
  grid-column: 1 / -1;
}
.profile-workspaces > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-control-width {
  max-width: 440px;
  margin-block: 24px;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.setting-row > span {
  flex: 1;
  min-width: 0;
}
.setting-row strong {
  display: block;
  font-size: 13px;
}
.setting-row small {
  display: block;
  margin-top: 6px;
}
.theme-browser {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-block: 24px;
}
.theme-browser [aria-pressed="true"] {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--surface-muted);
}
.theme-group legend {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.theme-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  min-width: 0;
}
.theme-choice:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.theme-choice:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.theme-choice:has(input:disabled) {
  opacity: 0.6;
  cursor: wait;
}
.theme-choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
}
.theme-choice > strong {
  font-size: 13px;
}
.theme-choice > small {
  font-size: 12px;
  line-height: 1.5;
}
.theme-preview {
  display: grid;
  grid-template-columns: 25% 1fr;
  height: 108px;
  border-radius: 7px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--background);
  color: var(--ink);
}
.theme-preview-sidebar {
  padding: 12px 8px;
  display: grid;
  gap: 8px;
  align-content: start;
  background: var(--sidebar-surface);
  border-right: 1px solid var(--line);
}
.theme-preview-sidebar i {
  height: 5px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.4;
}
.theme-preview-sidebar i:first-child {
  background: var(--primary);
  opacity: 1;
}
.theme-preview-content {
  padding: 16px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.theme-preview-content > i {
  grid-column: 1 / -1;
  width: 60%;
  height: 6px;
  background: var(--ink);
  border-radius: 2px;
}
.theme-preview-content > span {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.profile-settings label:has(input.switch:focus-visible) > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.profile-settings input.switch {
  width: 36px;
  min-width: 36px;
  height: 20px;
  background: var(--sidebar-muted);
  border-color: var(--sidebar-muted);
}
.profile-settings input.switch::before {
  width: 14px;
  height: 14px;
  left: 2px;
}
.profile-settings input.switch:checked {
  background: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
}
.profile-settings input.switch:checked::before {
  background: var(--primary-foreground);
  transform: translate(16px, -50%);
}
.profile-settings input.switch:focus {
  outline: none;
  box-shadow: none;
}
:root[data-density="standard"] {
  --presentation-font: 14px;
  --presentation-row: 36px;
  --control-height: 36px;
  --header-height: 64px;
}
:root[data-density="comfortable"] {
  --presentation-font: 16px;
  --presentation-row: 40px;
  --control-height: 40px;
  --header-height: 72px;
}
:root:is([data-density="standard"], [data-density="comfortable"])
  .app-shell
  :is(
    .nav-item,
    .theme-control,
    .sidebar-profile,
    .select-trigger,
    .primary,
    .secondary,
    .danger-button,
    .checkboxes label,
    input:not(.switch),
    textarea,
    td,
    th
  ) {
  font-size: var(--presentation-font);
}
:root:is([data-density="standard"], [data-density="comfortable"]) .nav-item {
  min-height: var(--presentation-row);
  line-height: 1.4;
}
:root:is([data-density="standard"], [data-density="comfortable"]) .nav-label {
  min-height: var(--presentation-row);
}
:root[data-focus="enhanced"] .app-shell :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
:root[data-contrast="high"][data-theme="light"] {
  --background: #fff;
  --surface: #fff;
  --surface-muted: #f2f2f2;
  --ink: #000;
  --muted: #333;
  --line: #333;
  --input: #333;
  --primary: #000;
  --primary-foreground: #fff;
  --sidebar-surface: #fff;
  --sidebar-muted: #333;
  --sidebar-ink: #000;
  --sidebar-line: #333;
  --sidebar-hover: #f2f2f2;
  --sidebar-accent: #000;
}
:root[data-contrast="high"][data-theme="dark"] {
  --background: #000;
  --surface: #000;
  --surface-muted: #1a1a1a;
  --ink: #fff;
  --muted: #ddd;
  --line: #ddd;
  --input: #ddd;
  --primary: #fff;
  --primary-foreground: #000;
  --sidebar-surface: #000;
  --sidebar-muted: #ddd;
  --sidebar-ink: #fff;
  --sidebar-line: #ddd;
  --sidebar-hover: #1a1a1a;
  --sidebar-accent: #fff;
}
@media (prefers-reduced-motion: reduce) {
  :root .sign-in *,
  :root .sign-in *::before,
  :root .sign-in *::after,
  :root .app-shell *,
  :root .app-shell *::before,
  :root .app-shell *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
:root[data-reduced-motion="true"] .sign-in *,
:root[data-reduced-motion="true"] .sign-in *::before,
:root[data-reduced-motion="true"] .sign-in *::after,
:root[data-reduced-motion="true"] .app-shell *,
:root[data-reduced-motion="true"] .app-shell *::before,
:root[data-reduced-motion="true"] .app-shell *::after {
  animation: none;
  transition: none;
  scroll-behavior: auto;
}
@media (max-width: 1100px) {
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .app-shell {
    --control-height: 40px;
  }
  .profile-tabs {
    display: flex;
    width: 100%;
  }
  .profile-tabs [role="tab"] {
    padding-inline: 8px;
    min-height: 40px;
  }
  .profile-details {
    grid-template-columns: 1fr;
  }
  .profile-role {
    padding-inline: 8px;
  }
}
@media (max-width: 420px) {
  .theme-grid {
    grid-template-columns: 1fr;
  }
}

.sidebar-presentation-error {
  font-size: 11px;
  color: var(--muted);
  margin: 0 12px 12px;
}
.sidebar-presentation-error button {
  margin-top: 8px;
}

.notification-form {
  margin-bottom: 22px;
}

.notification-recipients {
  margin-top: 24px;
  max-width: 640px;
}
.recipient-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.recipient-row input {
  min-width: 0;
  flex: 1;
}
.recipient-row button {
  flex: 0 0 36px;
}
.notification-connection {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
}
.notification-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.notification-form .card-heading {
  padding: 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sonner owns toast geometry, stacking and gestures; use the app's theme tokens. */
[data-sonner-toaster][data-sonner-theme] {
  --normal-bg: var(--surface);
  --normal-border: var(--line);
  --normal-text: var(--ink);
  --normal-bg-hover: var(--surface-muted);
  font-family: inherit;
  z-index: 120;
}
[data-sonner-toast][data-styled="true"] [data-description] {
  color: var(--muted);
}
html[data-reduced-motion="true"] [data-sonner-toaster],
html[data-reduced-motion="true"] [data-sonner-toast] {
  transition: none;
  animation: none;
}