@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";

/* src/design-system/tokens/fonts.css */

/* src/design-system/tokens/colors.css */
:root {
  --teal-50: #e6f6f1;
  --teal-100: #c3ebe0;
  --teal-200: #8fd9c6;
  --teal-300: #54c2a8;
  --teal-400: #25a98a;
  --teal-500: #109677;
  --teal-600: #0c8567;
  --teal-700: #0a6e56;
  --teal-800: #0a5946;
  --teal-900: #093f33;
  --neutral-0: #ffffff;
  --neutral-50: #fafbfc;
  --neutral-100: #f3f5f7;
  --neutral-200: #e8ecf0;
  --neutral-300: #d4dbe2;
  --neutral-400: #b3bdc6;
  --neutral-500: #8a96a0;
  --neutral-600: #687683;
  --neutral-700: #4a5862;
  --neutral-800: #2e3d47;
  --neutral-900: #21333b;
  --blue-100: #d4eefb;
  --blue-500: #0079b8;
  --blue-700: #00567a;
  --green-100: #dff0d0;
  --green-500: #2f8400;
  --green-700: #1d5100;
  --amber-100: #fef3d3;
  --amber-500: #ffb92e;
  --amber-600: #f0ad20;
  --amber-700: #aa6c00;
  --red-100: #f8dcd2;
  --red-500: #c92100;
  --red-700: #a32100;
  --purple-100: #e6e1f4;
  --purple-500: #781da0;
  --brand: var(--teal-600);
  --brand-hover: var(--teal-700);
  --brand-active: var(--teal-800);
  --brand-subtle: var(--teal-50);
  --brand-subtle-border: var(--teal-200);
  --brand-on: var(--white);
  --white: #ffffff;
  --text-on-color: var(--white);
  --text-on-warning: var(--neutral-900);
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-on-dark: var(--white);
  --text-link: var(--teal-700);
  --on-dark-1: rgba(255, 255, 255, 0.92);
  --on-dark-2: rgba(255, 255, 255, 0.72);
  --on-dark-3: rgba(255, 255, 255, 0.60);
  --on-dark-4: rgba(255, 255, 255, 0.50);
  --on-dark-fill: rgba(255, 255, 255, 0.10);
  --on-dark-fill-hover: rgba(255, 255, 255, 0.16);
  --on-dark-border: rgba(255, 255, 255, 0.16);
  --on-dark-divider: rgba(255, 255, 255, 0.08);
  --surface-page: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-hover: var(--neutral-100);
  --surface-active: var(--neutral-200);
  --surface-header: var(--neutral-900);
  --surface-overlay: rgba(33, 51, 59, 0.55);
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus: var(--teal-500);
  --info: var(--blue-500);
  --info-text: var(--blue-700);
  --info-subtle: var(--blue-100);
  --success: var(--green-500);
  --success-text: var(--green-700);
  --success-subtle: var(--green-100);
  --warning: var(--amber-500);
  --warning-hover: var(--amber-600);
  --warning-text: var(--amber-700);
  --warning-subtle: var(--amber-100);
  --danger: var(--red-500);
  --danger-text: var(--red-700);
  --danger-subtle: var(--red-100);
  --focus-ring: 0 0 0 3px rgba(16, 150, 119, 0.32);
}

/* src/design-system/tokens/clarity-compat.css */
:root {
  --clr-color-action-600: var(--brand);
  --clr-color-action-700: var(--brand-hover);
  --clr-color-action-800: var(--brand-active);
  --clr-color-action-50: var(--brand-subtle);
  --clr-global-app-background: var(--surface-page);
  --clr-global-content-header-font-color: var(--text-strong);
  --clr-global-font-color: var(--text-body);
  --clr-card-bg-color: var(--surface-card);
  --clr-card-border-color: var(--border-subtle);
  --clr-btn-primary-bg-color: var(--brand);
  --clr-btn-primary-color: var(--text-on-color);
  --clr-btn-primary-hover-bg-color: var(--brand-hover);
  --clr-btn-default-color: var(--brand);
  --clr-btn-default-border-color: var(--brand);
  --clr-forms-border-color: var(--border-default);
  --clr-forms-focused-color: var(--border-focus);
  --clr-forms-text-color: var(--text-strong);
  --clr-forms-label-color: var(--text-body);
  --clr-header-bg-color: var(--surface-header);
  --clr-nav-background-color: var(--surface-card);
  --clr-link-color: var(--text-link);
  --clr-link-hover-color: var(--brand-active);
  --clr-color-success: var(--success);
  --clr-color-warning: var(--warning);
  --clr-color-danger: var(--danger);
  --clr-color-info: var(--info);
  --cds-alias-status-info: var(--info);
  --cds-alias-status-success: var(--success);
  --cds-alias-status-warning: var(--warning);
  --cds-alias-status-danger: var(--danger);
  --cds-alias-status-neutral: var(--text-muted);
  --cds-alias-object-interaction-background: var(--brand);
  --cds-alias-object-interaction-background-hover: var(--brand-hover);
  --cds-alias-object-border-color: var(--border-default);
  --cds-alias-object-container-background: var(--surface-card);
  --cds-alias-typography-color: var(--text-body);
  --cds-alias-typography-secondary: var(--text-secondary);
}
[cds-theme=dark],
[data-theme=dark],
.dark-theme {
  --brand: var(--teal-400);
  --brand-hover: var(--teal-300);
  --brand-active: var(--teal-300);
  --brand-subtle: rgba(37, 169, 138, 0.16);
  --brand-subtle-border: rgba(37, 169, 138, 0.38);
  --text-strong: rgba(255, 255, 255, 0.95);
  --text-body: rgba(255, 255, 255, 0.84);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted: rgba(255, 255, 255, 0.50);
  --text-disabled: rgba(255, 255, 255, 0.34);
  --text-link: var(--teal-300);
  --surface-page: #16242b;
  --surface-card: #1d2f37;
  --surface-sunken: #18272e;
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-active: rgba(255, 255, 255, 0.10);
  --surface-header: #0f1b21;
  --surface-overlay: rgba(0, 0, 0, 0.6);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --info-text: #7cc6ec;
  --success-text: #88c46a;
  --warning-text: #f0c360;
  --danger-text: #f0937e;
  --info-subtle: rgba(0, 121, 184, 0.20);
  --success-subtle: rgba(47, 132, 0, 0.22);
  --warning-subtle: rgba(255, 185, 46, 0.18);
  --danger-subtle: rgba(201, 33, 0, 0.22);
  --focus-ring: 0 0 0 3px rgba(84, 194, 168, 0.40);
}

/* src/design-system/tokens/typography.css */
:root {
  --font-sans:
    "Manrope",
    "Clarity City",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  --font-mono:
    "JetBrains Mono",
    "SFMono-Regular",
    Menlo,
    Consolas,
    monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --text-display: 32px;
  --text-h1: 24px;
  --text-h2: 20px;
  --text-h3: 16px;
  --text-h4: 14px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro: 11px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.08em;
  --font-display: var(--weight-bold) var(--text-display)/var(--leading-tight) var(--font-sans);
  --font-heading: var(--weight-semibold) var(--text-h2)/var(--leading-snug) var(--font-sans);
  --font-body-text: var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-sans);
}

/* src/design-system/tokens/spacing.css */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 96px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-full: 50%;
  --control-h-sm: 24px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  --header-h: 60px;
  --sidenav-w: 232px;
  --content-max: 1320px;
  --border-w: 1px;
}

/* src/design-system/tokens/elevation.css */
:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(33, 51, 59, 0.10);
  --shadow-md: 0 2px 6px rgba(33, 51, 59, 0.12), 0 0 1px rgba(33, 51, 59, 0.16);
  --shadow-lg: 0 8px 24px rgba(33, 51, 59, 0.18), 0 0 1px rgba(33, 51, 59, 0.20);
  --shadow-inset: inset 0 1px 2px rgba(33, 51, 59, 0.10);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* src/design-system/tokens/base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h1 {
  font-size: var(--text-h1);
}
h2 {
  font-size: var(--text-h2);
}
h3 {
  font-size: var(--text-h3);
}
h4 {
  font-size: var(--text-h4);
}
p {
  margin: 0;
}
a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.t-overline {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* src/design-system/components/utilities.css */
.t-stack {
  display: flex;
  flex-direction: column;
}
.t-row {
  display: flex;
  align-items: center;
}
.t-row-top {
  display: flex;
  align-items: flex-start;
}
.t-wrap {
  flex-wrap: wrap;
}
.t-grow {
  flex: 1;
}
.t-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-5 {
  gap: var(--space-5);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-7 {
  gap: var(--space-7);
}
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.t-secondary {
  color: var(--text-secondary);
}
.t-muted {
  color: var(--text-muted);
}
.t-strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.t-caption {
  font-size: var(--text-caption);
}
.t-sm {
  font-size: var(--text-body-sm);
}
.ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.ti > svg {
  width: 100%;
  height: 100%;
}

/* src/design-system/components/buttons.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h-md);
  min-width: 60px;
  padding: 0 16px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn .ti {
  width: 15px;
  height: 15px;
}
.btn-primary {
  color: var(--brand-on);
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.btn-success {
  color: var(--text-on-color);
  background: var(--success);
  border-color: var(--success);
}
.btn-success:hover {
  background: var(--success-text);
  border-color: var(--success-text);
}
.btn-danger {
  color: var(--text-on-color);
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-text);
  border-color: var(--danger-text);
}
.btn-warning {
  color: var(--text-on-warning);
  background: var(--warning);
  border-color: var(--warning);
}
.btn-warning:hover {
  background: var(--warning-hover);
  border-color: var(--warning-hover);
}
.btn-info {
  color: var(--text-on-color);
  background: var(--info);
  border-color: var(--info);
}
.btn-info:hover {
  background: var(--info-text);
  border-color: var(--info-text);
}
.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
  background: transparent;
}
.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-link):hover {
  background: var(--surface-hover);
}
.btn-link {
  color: var(--brand);
  background: transparent;
  border-color: transparent;
  min-width: 0;
  padding: 0 10px;
}
.btn-link:hover {
  background: var(--surface-hover);
}
.btn-link.btn-neutral {
  color: var(--text-secondary);
}
.btn-sm {
  height: var(--control-h-sm);
  padding: 0 10px;
  font-size: var(--text-micro);
}
.btn-sm .ti {
  width: 13px;
  height: 13px;
}
.btn-lg {
  height: var(--control-h-lg);
  padding: 0 22px;
  font-size: var(--text-body-sm);
}
.btn-lg .ti {
  width: 17px;
  height: 17px;
}
.btn-block {
  display: flex;
  width: 100%;
}
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-icon {
  width: var(--control-h-md);
  height: var(--control-h-md);
  min-width: 0;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}
.btn-icon:hover {
  background: var(--surface-hover);
}
.btn-icon.btn-sm {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
}
.btn-icon .ti {
  width: 18px;
  height: 18px;
}
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  margin-left: 0;
}
.btn-group .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* src/design-system/components/labels.css */
.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 9px;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--neutral-100);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1;
}
.label .ti {
  width: 12px;
  height: 12px;
}
.label-info {
  color: var(--info-text);
  background: var(--info-subtle);
  border-color: transparent;
}
.label-success {
  color: var(--success-text);
  background: var(--success-subtle);
  border-color: transparent;
}
.label-warning {
  color: var(--warning-text);
  background: var(--warning-subtle);
  border-color: transparent;
}
.label-danger {
  color: var(--danger-text);
  background: var(--danger-subtle);
  border-color: transparent;
}
.label-brand {
  color: var(--brand-active);
  background: var(--brand-subtle);
  border-color: transparent;
}
.label-purple {
  color: var(--purple-500);
  background: var(--purple-100);
  border-color: transparent;
}
.label-status {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-semibold);
}
.label-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}
.label-status.is-active::before {
  background: var(--success);
}
.label-status.is-pending::before {
  background: var(--warning);
}
.label-status.is-inactive::before {
  background: var(--neutral-400);
}
.label-status.is-alert::before {
  background: var(--danger);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  color: var(--text-on-color);
  background: var(--neutral-500);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.badge-info {
  background: var(--info);
}
.badge-success {
  background: var(--success);
}
.badge-danger {
  background: var(--danger);
}
.badge-brand {
  background: var(--brand);
}

/* src/design-system/components/forms.css */
.clr-form-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-6);
}
.clr-form-control.is-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
.clr-control-label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.clr-control-label .req {
  color: var(--danger);
  margin-left: 2px;
}
.clr-control-help {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.clr-control-error {
  font-size: var(--text-caption);
  color: var(--danger-text);
  display: none;
}
.clr-input,
.clr-textarea,
.clr-select {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.clr-textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  line-height: var(--leading-normal);
  resize: vertical;
}
.clr-input::placeholder,
.clr-textarea::placeholder {
  color: var(--text-disabled);
}
.clr-input:hover,
.clr-textarea:hover,
.clr-select:hover {
  border-color: var(--border-strong);
}
.clr-input:focus,
.clr-textarea:focus,
.clr-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.clr-input:disabled,
.clr-textarea:disabled,
.clr-select:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.clr-form-control.is-error .clr-input,
.clr-form-control.is-error .clr-select,
.clr-form-control.is-error .clr-textarea {
  border-color: var(--danger);
}
.clr-form-control.is-error .clr-control-error {
  display: block;
}
.clr-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687683' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.clr-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.clr-input-group .ti {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.clr-input-group .clr-input {
  padding-left: 32px;
}
.clr-checkbox,
.clr-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.clr-checkbox input,
.clr-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.clr-checkbox .box,
.clr-radio .box {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-standard);
}
.clr-checkbox .box {
  border-radius: var(--radius-xs);
}
.clr-radio .box {
  border-radius: 50%;
}
.clr-checkbox input:checked + .box,
.clr-radio input:checked + .box {
  background: var(--brand);
  border-color: var(--brand);
}
.clr-checkbox input:checked + .box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.clr-radio input:checked + .box::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
.clr-checkbox input:focus-visible + .box,
.clr-radio input:focus-visible + .box {
  box-shadow: var(--focus-ring);
}
.clr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-body-sm);
}
.clr-toggle input {
  position: absolute;
  opacity: 0;
}
.clr-toggle .track {
  width: 34px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--neutral-400);
  position: relative;
  transition: background var(--duration-fast) var(--ease-standard);
}
.clr-toggle .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--duration-fast) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.clr-toggle input:checked + .track {
  background: var(--brand);
}
.clr-toggle input:checked + .track::after {
  transform: translateX(16px);
}
.clr-toggle input:focus-visible + .track {
  box-shadow: var(--focus-ring);
}
.password-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-group input {
  flex: 1;
  padding-right: var(--space-8);
}
.password-input-group .toggle-password {
  position: absolute;
  right: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-standard);
}
.password-input-group .toggle-password:hover {
  color: var(--text-strong);
}
.password-input-group .toggle-password:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.password-input-group .ti {
  width: 18px;
  height: 18px;
}
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group .input-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  width: 16px;
  height: 16px;
}
.input-group .clr-input,
.input-group input {
  padding-left: var(--space-8);
}
.input-group.has-error .clr-input,
.input-group.has-error input {
  border-color: var(--danger);
}
.input-group.is-loading .clr-input,
.input-group.is-loading input {
  opacity: 0.6;
}
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-muted);
}
.loading-spinner .ti {
  animation: spin var(--duration-base) linear infinite;
  width: 20px;
  height: 20px;
}
.form-field-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.form-field-label .required-indicator {
  color: var(--danger);
  font-weight: var(--weight-bold);
}
.form-field-label .optional-indicator {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-style: italic;
}

/* src/design-system/components/cards.css */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.card-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.card-subtitle {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: 2px;
}
.card-block {
  padding: var(--space-6);
}
.card-block + .card-block {
  border-top: 1px solid var(--border-subtle);
}
.card-block.is-tight {
  padding: 0;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.card-footer.is-end {
  justify-content: flex-end;
}
.card.is-clickable {
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.card.is-clickable:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-default);
}
.card.is-accent {
  border-top: 3px solid var(--brand);
}
.metric-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.metric-card .metric-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.metric-card .metric-value {
  font-size: 30px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1;
  font-feature-settings: "tnum";
}
.metric-card .metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}
.metric-card .metric-delta.is-up {
  color: var(--success-text);
}
.metric-card .metric-delta.is-down {
  color: var(--danger-text);
}
.metric-card .metric-delta .ti {
  width: 14px;
  height: 14px;
}

/* src/design-system/components/alerts.css */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.alert .ti {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}
.alert .alert-text {
  flex: 1;
}
.alert .alert-text strong {
  font-weight: var(--weight-bold);
}
.alert .alert-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.alert .alert-close {
  margin-left: var(--space-3);
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.alert .alert-close:hover {
  opacity: 1;
}
.alert-info {
  background: var(--info-subtle);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
  color: var(--info-text);
}
.alert-success {
  background: var(--success-subtle);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success-text);
}
.alert-warning {
  background: var(--warning-subtle);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning-text);
}
.alert-danger {
  background: var(--danger-subtle);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger-text);
}
.alert-banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
}
.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-active);
  color: var(--text-muted);
}
.empty-state .empty-icon .ti {
  width: 24px;
  height: 24px;
}
.empty-state .empty-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.empty-state .empty-desc {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 320px;
}
.error-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--danger-subtle);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger-text);
  margin-bottom: var(--space-4);
}
.error-alert .ti {
  width: 20px;
  height: 20px;
  flex: none;
}
.info-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--info-subtle);
  border: 1px solid var(--info);
  border-radius: var(--radius-sm);
  color: var(--info-text);
  border-left: 3px solid var(--info);
}
.info-box .ti {
  width: 20px;
  height: 20px;
  flex: none;
}
.message {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--message-bg, var(--surface-card));
  border: 1px solid var(--message-border, var(--border-subtle));
  border-radius: var(--radius-sm);
  color: var(--message-text, var(--text-body));
  border-left: 3px solid var(--message-color, var(--border-subtle));
}
.message .ti {
  width: 20px;
  height: 20px;
  flex: none;
}
.message-success {
  --message-color: var(--success);
  --message-bg: var(--success-subtle);
  --message-text: var(--success-text);
}
.message-warning {
  --message-color: var(--warning);
  --message-bg: var(--warning-subtle);
  --message-text: var(--warning-text);
}
.message-info {
  --message-color: var(--info);
  --message-bg: var(--info-subtle);
  --message-text: var(--info-text);
}
.message-danger {
  --message-color: var(--danger);
  --message-bg: var(--danger-subtle);
  --message-text: var(--danger-text);
}

/* src/design-system/components/datagrid.css */
.datagrid-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  overflow: hidden;
}
.datagrid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.datagrid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.datagrid thead th.is-sortable {
  cursor: pointer;
}
.datagrid thead th.is-sortable:hover {
  color: var(--text-strong);
}
.datagrid thead th .sort-ind {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--brand);
}
.datagrid thead th .ti {
  width: 13px;
  height: 13px;
}
.datagrid tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
  vertical-align: middle;
}
.datagrid tbody tr:last-child td {
  border-bottom: none;
}
.datagrid tbody tr {
  transition: background var(--duration-fast) var(--ease-standard);
}
.datagrid tbody tr:hover {
  background: var(--surface-hover);
}
.datagrid tbody tr.is-selected {
  background: var(--brand-subtle);
}
.datagrid .num {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-align: right;
  font-feature-settings: "tnum";
  color: var(--text-strong);
}
.datagrid .col-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.cell-user {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.cell-user .cell-name {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  white-space: nowrap;
  line-height: 1.3;
}
.cell-user .cell-sub {
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
}
.datagrid-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.datagrid-toolbar .spacer {
  flex: 1;
}
.datagrid-toolbar .result-count {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.datagrid-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.datagrid-footer .spacer {
  flex: 1;
}
.pager {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pager button {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-secondary);
}
.pager button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager .page-cur {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-subtle);
  color: var(--brand-active);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: var(--text-micro);
}
.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: var(--text-body-sm);
}

/* src/design-system/components/board.css */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--space-5);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--space-3);
}
.board-col {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.board-col-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.board-col-head .col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-400);
  flex: none;
}
.board-col-head .col-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.board-col-head .col-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  background: var(--surface-active);
  border-radius: var(--radius-pill);
}
.board-col[data-stage=sourced] .col-dot {
  background: var(--neutral-500);
}
.board-col[data-stage=screening] .col-dot {
  background: var(--info);
}
.board-col[data-stage=submitted] .col-dot {
  background: var(--brand);
}
.board-col[data-stage=interview] .col-dot {
  background: var(--warning);
}
.board-col[data-stage=offer] .col-dot {
  background: var(--success);
}
.board-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  flex: 1;
  min-height: 60px;
  transition: background var(--duration-fast) var(--ease-standard);
}
.board-col.is-drop-target .board-list {
  background: var(--brand-subtle);
}
.board-col.is-drop-target {
  border-color: var(--brand-subtle-border);
}
.board-list:empty::after {
  content: "Drop candidate here";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-size: var(--text-caption);
  color: var(--text-disabled);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
}
.cand-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition:
    box-shadow var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.cand-card:hover {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--brand);
}
.cand-card:active {
  cursor: grabbing;
}
.cand-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-left-color: var(--brand);
}
.cand-card.is-dragging {
  opacity: 0.5;
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}
.cand-card.is-dragging * {
  pointer-events: none;
}
.cand-card .cand-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cand-card .cand-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  line-height: 1.25;
}
.cand-card .cand-role {
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: 1.25;
}
.cand-card .cand-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cand-card .cand-rate {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.cand-card .cand-grip {
  margin-left: auto;
  color: var(--text-disabled);
  display: inline-flex;
}
.cand-card .cand-grip .ti {
  width: 15px;
  height: 15px;
}
.board-placeholder {
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  margin: 2px 0;
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

/* src/design-system/components/skills.css */
.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 28px;
  padding: 0 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  white-space: nowrap;
}
.skill-chip .verified {
  display: inline-flex;
  color: var(--success);
}
.skill-chip .verified .ti {
  width: 13px;
  height: 13px;
}
.skill-chip.is-core {
  border-color: var(--brand-subtle-border);
  background: var(--brand-subtle);
  color: var(--brand-active);
}
.skill-chip.is-gap {
  border-style: dashed;
  color: var(--text-muted);
  background: var(--surface-sunken);
}
.skill-chip .x {
  display: inline-flex;
  color: var(--text-disabled);
  cursor: pointer;
}
.skill-chip .x:hover {
  color: var(--danger);
}
.skill-chip .x .ti {
  width: 13px;
  height: 13px;
}
.skill-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.skill-add:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.skill-add .ti {
  width: 14px;
  height: 14px;
}
.skill-meter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.skill-meter i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.skill-meter i.is-on {
  background: var(--brand);
}
.skill-meter.is-self i.is-on {
  background: var(--neutral-500);
}
.skill-meter-label {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-left: 6px;
}
.skill-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.skill-row:last-child {
  border-bottom: none;
}
.skill-row .skill-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.skill-row .skill-name .nm {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.skill-row .skill-name .cat {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.skill-row .skill-info {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.endorse {
  display: inline-flex;
  align-items: center;
}
.endorse .avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  border: 2px solid var(--surface-card);
  margin-left: -7px;
}
.endorse .avatar:first-child {
  margin-left: 0;
}
.endorse .more {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-left: 6px;
}
.coverage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coverage-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-active);
  overflow: hidden;
}
.coverage-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand);
}
.coverage-fill.is-low {
  background: var(--danger);
}
.coverage-fill.is-mid {
  background: var(--warning);
}
.coverage-fill.is-high {
  background: var(--success);
}
.coverage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.coverage-meta b {
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}
.skill-cat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}
.skill-cat-head .ti {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}
.skill-cat-head .lbl {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.skill-cat-head .ln {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* src/design-system/components/permissions.css */
.role-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.role-rail .rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.role-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-standard);
}
.role-item:hover {
  background: var(--surface-hover);
}
.role-item.is-active {
  background: var(--brand-subtle);
  border-color: var(--brand-subtle-border);
}
.role-item .role-ico {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-active);
  color: var(--text-secondary);
}
.role-item.is-active .role-ico {
  background: var(--brand);
  color: var(--text-on-color);
}
.role-item .role-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.role-item .role-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  display: flex;
  align-items: center;
}
.role-item .role-sub {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.role-item .role-count {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.role-item.is-system .role-name::after {
  content: "system";
  margin-left: 8px;
  font: var(--weight-bold) var(--text-micro)/1 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-active);
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  vertical-align: middle;
}
.perm-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  overflow: hidden;
}
.perm-matrix {
  width: 100%;
  border-collapse: collapse;
}
.perm-scroll {
  max-height: calc(100vh - 340px);
  overflow: auto;
}
.perm-matrix thead th {
  position: sticky;
  z-index: 3;
}
.perm-matrix thead .grp-row th {
  top: 0;
}
.perm-matrix thead .rights-row th {
  top: 28px;
}
.perm-matrix thead th.col-res {
  left: 0;
  z-index: 5;
}
.perm-matrix td.col-res {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-card);
}
.perm-matrix tbody tr:hover td.col-res {
  background: var(--surface-hover);
}
.perm-mod-row td {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  padding: 0;
}
.perm-mod {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  width: max-content;
  min-width: 520px;
}
.perm-mod .mod-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
}
.perm-mod .mod-toggle:hover {
  background: var(--surface-active);
}
.perm-mod .mod-toggle .ti {
  width: 15px;
  height: 15px;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.perm-mod.is-collapsed .mod-toggle .ti {
  transform: rotate(-90deg);
}
.perm-mod .mod-ico {
  color: var(--text-muted);
  display: inline-flex;
}
.perm-mod .mod-ico .ti {
  width: 15px;
  height: 15px;
}
.perm-mod .mod-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.perm-mod .mod-sum {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.perm-mod .spacer {
  flex: 1;
  min-width: var(--space-6);
}
.perm-mod .mod-bulk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.perm-mod .mod-bulk .bulk-lbl {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-disabled);
  margin-right: 2px;
}
.perm-matrix thead th {
  padding: var(--space-3) var(--space-3);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  vertical-align: bottom;
}
.perm-matrix thead .grp-row th {
  padding-top: var(--space-3);
  padding-bottom: 2px;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface-sunken);
  border-bottom: none;
}
.perm-matrix thead .grp-row .grp-view {
  color: var(--info-text);
}
.perm-matrix thead .grp-row .grp-manage {
  color: var(--brand-active);
}
.perm-matrix thead .grp-row .grp-move {
  color: var(--warning-text);
}
.perm-matrix thead .grp-row .grp-admin {
  color: var(--danger-text);
}
.perm-matrix thead .rights-row th {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-align: center;
  width: 64px;
}
.perm-matrix thead th.col-res {
  text-align: left;
  width: auto;
}
.perm-matrix thead th.col-res .res-h {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.perm-matrix thead th.col-end {
  width: 1%;
}
.perm-matrix .sep-l {
  border-left: 1px solid var(--border-subtle);
}
.perm-matrix tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.perm-matrix tbody tr:last-child td {
  border-bottom: none;
}
.perm-matrix tbody tr:hover {
  background: var(--surface-hover);
}
.perm-matrix td.col-res {
  text-align: left;
}
.perm-res {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.perm-res .res-ico {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--surface-active);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perm-res .res-name {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.perm-res .res-sub {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.perm-check {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  cursor: pointer;
  color: var(--text-on-color);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.perm-check .ti {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.perm-check:hover {
  border-color: var(--brand);
}
.perm-check.is-on {
  background: var(--brand);
  border-color: var(--brand);
}
.perm-check.is-on .ti {
  opacity: 1;
}
.perm-check:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.perm-check.is-admin.is-on {
  background: var(--danger);
  border-color: var(--danger);
}
.perm-check.is-on.is-implied {
  background: var(--teal-200);
  border-color: var(--teal-200);
}
.perm-presets {
  display: inline-flex;
  gap: 4px;
}
.preset-chip {
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.preset-chip:hover {
  border-color: var(--brand);
  color: var(--brand-active);
  background: var(--brand-subtle);
}
.preset-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-color);
}
.perm-summary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.perm-summary .ps-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.perm-summary .ps-item b {
  color: var(--text-strong);
  font-family: var(--font-mono);
}
.perm-summary .spacer {
  flex: 1;
}
.right-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.right-chip {
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  cursor: pointer;
  border: 1px solid transparent;
}
.right-chip.is-off {
  background: var(--surface-sunken);
  border-style: dashed;
  border-color: var(--border-default);
  color: var(--text-disabled);
}
.right-chip.is-on {
  background: var(--brand-subtle);
  color: var(--brand-active);
}
.right-chip.is-on.is-admin {
  background: var(--danger-subtle);
  color: var(--danger-text);
}
.right-chip .ti {
  width: 11px;
  height: 11px;
}

/* src/design-system/components/dialog.css */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--surface-overlay);
}
.dialog-overlay.is-open {
  display: flex;
}
.dialog {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: dialog-in 160ms var(--ease-standard);
}
.dialog.is-lg {
  max-width: 600px;
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
  flex: none;
}
.dialog-head .dh-icon {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
}
.dialog-head .dh-icon .ti {
  width: 19px;
  height: 19px;
}
.dialog-head .dh-text {
  flex: 1;
}
.dialog-head h3 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}
.dialog-head .sub {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  margin-top: 3px;
}
.dialog-x {
  display: inline-flex;
  padding: 6px;
  flex: none;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.dialog-x:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}
.dialog-x .ti {
  width: 16px;
  height: 16px;
}
.dialog-body {
  padding: var(--space-3) var(--space-6) var(--space-5);
  overflow-y: auto;
}
.dialog-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  flex: none;
}
.dialog-foot .foot-note {
  margin-right: auto;
  font-size: var(--text-caption);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dialog-foot .foot-note .ti {
  width: 13px;
  height: 13px;
}
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.icon-opt {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-opt .ti {
  width: 18px;
  height: 18px;
}
.icon-opt:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.icon-opt.is-sel {
  border-color: var(--brand);
  background: var(--brand-subtle);
  color: var(--brand-active);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.choice:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.choice.is-sel {
  border-color: var(--brand);
  background: var(--brand-subtle);
}
.choice .ch-radio {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.choice.is-sel .ch-radio {
  border-color: var(--brand);
  background: var(--brand);
}
.choice.is-sel .ch-radio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
.choice .ch-body {
  flex: 1;
}
.choice .ch-title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.choice .ch-desc {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: 2px;
}

/* src/design-system/components/shell.css */
.header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
  padding: 0 var(--space-6);
  background: var(--surface-header);
  color: var(--text-on-dark);
}
.header .branding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--on-dark-1);
  letter-spacing: -0.01em;
}
.header .branding img {
  width: 28px;
  height: 28px;
}
.header .branding .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  margin-left: var(--space-5);
}
.header-nav a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  color: var(--on-dark-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}
.header-nav a:hover {
  color: var(--on-dark-1);
  text-decoration: none;
}
.header-nav a.is-active {
  color: var(--on-dark-1);
  border-bottom-color: var(--teal-300);
}
.header .spacer {
  flex: 1;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.header-actions .btn-icon {
  color: var(--on-dark-2);
}
.header-actions .btn-icon:hover {
  background: var(--on-dark-fill);
  color: var(--on-dark-1);
}
.header .header-search {
  position: relative;
  width: 260px;
}
.header .header-search .ti {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--on-dark-3);
}
.header .header-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-border);
  border-radius: var(--radius-sm);
  color: var(--on-dark-1);
  font-size: var(--text-body-sm);
  font-family: var(--font-sans);
}
.header .header-search input::placeholder {
  color: var(--on-dark-3);
}
.header .header-search input:focus {
  outline: none;
  background: var(--on-dark-fill-hover);
  border-color: var(--teal-300);
}
.app-body {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}
.sidenav {
  width: var(--sidenav-w);
  flex: none;
  background: var(--surface-card);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--space-4);
  overflow-y: auto;
}
.sidenav-group + .sidenav-group {
  margin-top: var(--space-6);
}
.sidenav-group .group-label {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sidenav-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.sidenav-link .ti {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  flex: none;
}
.sidenav-link .count {
  margin-left: auto;
}
.sidenav-link:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
.sidenav-link.is-active {
  background: var(--brand-subtle);
  color: var(--brand-active);
}
.sidenav-link.is-active .ti {
  color: var(--brand);
}
.content {
  flex: 1;
  padding: var(--space-7) var(--space-8);
  overflow-y: auto;
}
.content-narrow {
  max-width: var(--content-max);
  margin: 0 auto;
}
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.page-header .page-title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}
.page-header .page-sub {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  margin-top: 4px;
}
.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a {
  color: var(--text-muted);
}
.breadcrumb .ti {
  width: 13px;
  height: 13px;
}
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
}
.tab {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.tab:hover {
  color: var(--text-strong);
}
.tab.is-active {
  color: var(--brand-active);
  border-bottom-color: var(--brand);
}
.app-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 40px;
  padding: 0 var(--space-7);
  background: var(--surface-header);
  border-top: 1px solid var(--on-dark-divider);
  font-size: var(--text-caption);
  color: var(--on-dark-3);
}
.app-footer .af-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--on-dark-1);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
}
.app-footer .af-brand img {
  width: 18px;
  height: 18px;
}
.app-footer .copy {
  color: var(--on-dark-4);
}
.app-footer .spacer {
  flex: 1;
}
.app-footer a {
  color: var(--on-dark-2);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--on-dark-1);
  text-decoration: none;
}
.app-footer .af-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-footer .af-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-300);
  flex: none;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: var(--text-body-sm);
  color: var(--text-body);
  font-family: inherit;
}
.dropdown-item:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}
.dropdown-item .item-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dropdown-item:hover .item-icon {
  color: var(--text-strong);
}
.dropdown-item.is-danger {
  color: var(--danger-text);
}
.dropdown-item.is-danger .item-icon {
  color: var(--danger);
}
.dropdown-item.is-danger:hover {
  background: var(--danger-subtle);
}

/* src/design-system/styles.css */

/* src/styles.scss */
@font-face {
  font-family: "Talenra Icons";
  font-style: normal;
  font-weight: 400;
  src:
    local("Talenra Icons"),
    local("TalenraIcons-Regular"),
    url("./media/ccf89ed1fd2934731ed9.woff2") format("woff2"),
    url("./media/00c777c0c895723ba97e.woff") format("woff");
}
.talenra-icon {
  font-family: "Talenra Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  speak: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}
.talenra-icon-duplex {
  --color-primary: #000;
  --color-secondary: #999;
}
.talenra-icon-duplex::before {
  position: absolute;
  color: var(--color-secondary);
}
.talenra-icon-duplex::after {
  color: var(--color-primary);
}
.talenra-icon--error::before {
  content: "\e000";
}
.talenra-icon--warning::before {
  content: "\e002";
}
.talenra-icon--fast-forward::before {
  content: "\e01f";
}
.talenra-icon--fast-rewind::before {
  content: "\e020";
}
.talenra-icon--library-add::before {
  content: "\e02e";
}
.talenra-icon--play-arrow::before {
  content: "\e037";
}
.talenra-icon--update-disabled::before {
  content: "\e075";
}
.talenra-icon--chat-bubble-outline::before {
  content: "\e0cb";
}
.talenra-icon--add::before {
  content: "\e145";
}
.talenra-icon--content-copy::before {
  content: "\e14d";
}
.talenra-icon--filter-list::before {
  content: "\e152";
}
.talenra-icon--link::before {
  content: "\e157";
}
.talenra-icon--mail::before {
  content: "\e158";
}
.talenra-icon--remove::before {
  content: "\e15b";
}
.talenra-icon--save::before {
  content: "\e161";
}
.talenra-icon--sort::before {
  content: "\e164";
}
.talenra-icon--undo::before {
  content: "\e166";
}
.talenra-icon--attach-file::before {
  content: "\e226";
}
.talenra-icon--format-bold::before {
  content: "\e238";
}
.talenra-icon--format-italic::before {
  content: "\e23f";
}
.talenra-icon--format-list-bulleted::before {
  content: "\e241";
}
.talenra-icon--format-list-numbered::before {
  content: "\e242";
}
.talenra-icon--format-quote::before {
  content: "\e244";
}
.talenra-icon--format-strikethrough::before {
  content: "\e246";
}
.talenra-icon--format-underlined::before {
  content: "\e249";
}
.talenra-icon--text-fields::before {
  content: "\e262";
}
.talenra-icon--file-download::before {
  content: "\e2c4";
}
.talenra-icon--folder::before {
  content: "\e2c7";
}
.talenra-icon--task-alt::before {
  content: "\e2e6";
}
.talenra-icon--edit::before {
  content: "\e3c9";
}
.talenra-icon--grain::before {
  content: "\e3ea";
}
.talenra-icon--palette::before {
  content: "\e40a";
}
.talenra-icon--slideshow::before {
  content: "\e41b";
}
.talenra-icon--credit-card-off::before {
  content: "\e4f4";
}
.talenra-icon--content-paste-off::before {
  content: "\e4f8";
}
.talenra-icon--layers::before {
  content: "\e53b";
}
.talenra-icon--category::before {
  content: "\e574";
}
.talenra-icon--arrow-back::before {
  content: "\e5c4";
}
.talenra-icon--arrow-drop-down::before {
  content: "\e5c5";
}
.talenra-icon--arrow-drop-up::before {
  content: "\e5c7";
}
.talenra-icon--arrow-forward::before {
  content: "\e5c8";
}
.talenra-icon--check::before {
  content: "\e5ca";
}
.talenra-icon--chevron-left::before {
  content: "\e5cb";
}
.talenra-icon--chevron-right::before {
  content: "\e5cc";
}
.talenra-icon--close::before {
  content: "\e5cd";
}
.talenra-icon--expand-less::before {
  content: "\e5ce";
}
.talenra-icon--expand-more::before {
  content: "\e5cf";
}
.talenra-icon--menu::before {
  content: "\e5d2";
}
.talenra-icon--more-horiz::before {
  content: "\e5d3";
}
.talenra-icon--more-vert::before {
  content: "\e5d4";
}
.talenra-icon--refresh::before {
  content: "\e5d5";
}
.talenra-icon--unfold-less::before {
  content: "\e5d6";
}
.talenra-icon--unfold-more::before {
  content: "\e5d7";
}
.talenra-icon--arrow-upward::before {
  content: "\e5d8";
}
.talenra-icon--arrow-downward::before {
  content: "\e5db";
}
.talenra-icon--first-page::before {
  content: "\e5dc";
}
.talenra-icon--last-page::before {
  content: "\e5dd";
}
.talenra-icon--sync::before {
  content: "\e627";
}
.talenra-icon--priority-high::before {
  content: "\e645";
}
.talenra-icon--drive-file-move::before {
  content: "\e675";
}
.talenra-icon--checklist::before {
  content: "\e6b1";
}
.talenra-icon--ink-eraser::before {
  content: "\e6d0";
}
.talenra-icon--draw::before {
  content: "\e746";
}
.talenra-icon--notifications::before {
  content: "\e7f4";
}
.talenra-icon--person::before {
  content: "\e7fd";
}
.talenra-icon--public::before {
  content: "\e80b";
}
.talenra-icon--check-box::before {
  content: "\e834";
}
.talenra-icon--check-box-outline-blank::before {
  content: "\e835";
}
.talenra-icon--account-balance-wallet::before {
  content: "\e850";
}
.talenra-icon--assignment::before {
  content: "\e85d";
}
.talenra-icon--assignment-turned-in::before {
  content: "\e862";
}
.talenra-icon--build::before {
  content: "\e869";
}
.talenra-icon--dashboard::before {
  content: "\e871";
}
.talenra-icon--delete::before {
  content: "\e872";
}
.talenra-icon--description::before {
  content: "\e873";
}
.talenra-icon--favorite::before {
  content: "\e87d";
}
.talenra-icon--highlight-off::before {
  content: "\e888";
}
.talenra-icon--history::before {
  content: "\e889";
}
.talenra-icon--home::before {
  content: "\e88a";
}
.talenra-icon--info::before {
  content: "\e88e";
}
.talenra-icon--launch::before {
  content: "\e895";
}
.talenra-icon--list::before {
  content: "\e896";
}
.talenra-icon--lock::before {
  content: "\e897";
}
.talenra-icon--lock-open::before {
  content: "\e898";
}
.talenra-icon--search::before {
  content: "\e8b6";
}
.talenra-icon--settings::before {
  content: "\e8b8";
}
.talenra-icon--stars::before {
  content: "\e8d0";
}
.talenra-icon--today::before {
  content: "\e8df";
}
.talenra-icon--view-column::before {
  content: "\e8ec";
}
.talenra-icon--stream::before {
  content: "\e8f2";
}
.talenra-icon--visibility::before {
  content: "\e8f4";
}
.talenra-icon--visibility-off::before {
  content: "\e8f5";
}
.talenra-icon--help-outline::before {
  content: "\e8fd";
}
.talenra-icon--reorder::before {
  content: "\e8fe";
}
.talenra-icon--indeterminate-check-box::before {
  content: "\e909";
}
.talenra-icon--compare-arrows::before {
  content: "\e915";
}
.talenra-icon--date-range::before {
  content: "\e916";
}
.talenra-icon--update::before {
  content: "\e923";
}
.talenra-icon--maximize::before {
  content: "\e930";
}
.talenra-icon--drag-indicator::before {
  content: "\e945";
}
.talenra-icon--vertical-split::before {
  content: "\e949";
}
.talenra-icon--all-inbox::before {
  content: "\e97f";
}
.talenra-icon--logout::before {
  content: "\e9ba";
}
.talenra-icon--upload-file::before {
  content: "\e9fc";
}
.talenra-icon--content-paste-search::before {
  content: "\ea9b";
}
.talenra-icon--flag-circle::before {
  content: "\eaf8";
}
.talenra-icon--contrast::before {
  content: "\eb37";
}
.talenra-icon--beach-access::before {
  content: "\eb3e";
}
.talenra-icon--currency-exchange::before {
  content: "\eb70";
}
.talenra-icon--output::before {
  content: "\ebbe";
}
.talenra-icon--circle::before {
  content: "\ef4a";
}
.talenra-icon--filter-alt::before {
  content: "\ef4f";
}
.talenra-icon--integration-instructions::before {
  content: "\ef54";
}
.talenra-icon--receipt-long::before {
  content: "\ef6e";
}
.talenra-icon--verified::before {
  content: "\ef76";
}
.talenra-icon--more-apps::before {
  content: "\f000";
}
.talenra-icon--priority-higher::before {
  content: "\f001";
}
.talenra-icon--priority-highest::before {
  content: "\f002";
}
.talenra-icon--arrow-drop-down-up::before {
  content: "\f003";
}
.talenra-icon--person-checkmark::before {
  content: "\f004";
}
.talenra-icon--inbox-eye::before {
  content: "\f005";
}
.talenra-icon--team-update::before {
  content: "\f006";
}
.talenra-icon--team-menu::before {
  content: "\f007";
}
.talenra-icon--filter-alt-menu::before {
  content: "\f008";
}
.talenra-icon--person-menu::before {
  content: "\f009";
}
.talenra-icon--file-phone::before {
  content: "\f00a";
}
.talenra-icon--file-priority-highest::before {
  content: "\f00b";
}
.talenra-icon--file-edit::before {
  content: "\f00c";
}
.talenra-icon--file-assignment::before {
  content: "\f00d";
}
.talenra-icon--file-arrow-right::before {
  content: "\f00e";
}
.talenra-icon--file-attach-file::before {
  content: "\f00f";
}
.talenra-icon--file-restore::before {
  content: "\f010";
}
.talenra-icon--file-add::before {
  content: "\f011";
}
.talenra-icon--file-source::before {
  content: "\f012";
}
.talenra-icon--file-description::before {
  content: "\f013";
}
.talenra-icon--file-close::before {
  content: "\f014";
}
.talenra-icon--file-email::before {
  content: "\f015";
}
.talenra-icon--file-question-answer::before {
  content: "\f016";
}
.talenra-icon--file-bar-chart::before {
  content: "\f017";
}
.talenra-icon--file-team::before {
  content: "\f018";
}
.talenra-icon--file-update::before {
  content: "\f019";
}
.talenra-icon--north-east-circle::before {
  content: "\f020";
}
.talenra-icon--edit-circle::before {
  content: "\f021";
}
.talenra-icon--triangle-south-east::before {
  content: "\f022";
}
.talenra-icon--grabber-upper-edge::before {
  content: "\f023";
}
.talenra-icon--triangle-north-west::before {
  content: "\f024";
}
.talenra-icon--progress::before {
  content: "\f025";
}
.talenra-icon--attachment-45deg::before {
  content: "\f026";
}
.talenra-icon--check-negative::before {
  content: "\f027";
}
.talenra-icon--file-flag::before {
  content: "\f028";
}
.talenra-icon--sort-ascending::before {
  content: "\f030";
}
.talenra-icon--sort-descending::before {
  content: "\f031";
}
.talenra-icon--forward::before {
  content: "\f032";
}
.talenra-icon--import::before {
  content: "\f033";
}
.talenra-icon--overlay::before {
  content: "\f034";
}
.talenra-icon--downloading::before {
  content: "\f035";
}
.talenra-icon--person-alt::before {
  content: "\f036";
}
.talenra-icon--document-info::before {
  content: "\f037";
}
.talenra-icon--task-running::before {
  content: "\f038";
}
.talenra-icon--clipboard-collect::before {
  content: "\f039";
}
.talenra-icon--clipboard-place::before {
  content: "\f040";
}
.talenra-icon--inquiry-partner::before {
  content: "\f041";
}
.talenra-icon--inquiry-ik::before {
  content: "\f042";
}
.talenra-icon--inquiry-case::before {
  content: "\f043";
}
.talenra-icon--case-close::before {
  content: "\f044";
}
.talenra-icon--case-info::before {
  content: "\f045";
}
.talenra-icon--case-restore::before {
  content: "\f046";
}
.talenra-icon--case-change-type::before {
  content: "\f047";
}
.talenra-icon--document-create::before {
  content: "\f048";
}
.talenra-icon--document-delete::before {
  content: "\f049";
}
.talenra-icon--document-restore::before {
  content: "\f050";
}
.talenra-icon--dossier-delete::before {
  content: "\f051";
}
.talenra-icon--protocol::before {
  content: "\f052";
}
.talenra-icon--not-equal::before {
  content: "\f053";
}
.talenra-icon--document-undefined::before {
  content: "\f054";
}
.talenra-icon--document-in-preparation::before {
  content: "\f055";
}
.talenra-icon--boy::before {
  content: "\f056";
}
.talenra-icon--girl::before {
  content: "\f057";
}
.talenra-icon--attribute-search::before {
  content: "\f058";
}
.talenra-icon--upload::before {
  content: "\f09b";
}
.talenra-icon--cleaning-services::before {
  content: "\f0ff";
}
.talenra-icon--person-search::before {
  content: "\f106";
}
.talenra-icon--home-pin::before {
  content: "\f14d";
}
.talenra-icon--arrow-circle-down::before {
  content: "\f181";
}
.talenra-icon--open-in-full::before {
  content: "\f1ce";
}
.talenra-icon--close-fullscreen::before {
  content: "\f1cf";
}
.talenra-icon--published-with-changes::before {
  content: "\f232";
}
.talenra-icon--unpublished::before {
  content: "\f236";
}
.talenra-icon--package-2::before {
  content: "\f569";
}
.talenra-icon--archive::before {
  content: "\f570";
}
.talenra-icon--document-copy::before {
  content: "\f571";
}
.talenra-icon--document-manager::before {
  content: "\f572";
}
.talenra-icon--document-search::before {
  content: "\f573";
}
.talenra-icon--dossier-search::before {
  content: "\f574";
}
.talenra-icon--document-excel::before {
  content: "\f575";
}
.talenra-icon--document-main::before {
  content: "\f576";
}
.talenra-icon--document-pdf::before {
  content: "\f577";
}
.talenra-icon--document-tif::before {
  content: "\f578";
}
.talenra-icon--document-word::before {
  content: "\f579";
}
.talenra-icon--viewer::before {
  content: "\f580";
}
.talenra-icon--mystery::before {
  content: "\f5e1";
}
.talenra-icon--flex-direction::before {
  content: "\f778";
}
.talenra-icon--equal::before {
  content: "\f77b";
}
.talenra-icon--ini::before {
  content: "\f7f8";
}
.talenra-icon--wordmark-talenra::before {
  content: "\f7f9";
}
.talenra-icon--figurative-mark-talenra::before {
  content: "\f7fa";
}
.talenra-icon--logotype-talenra::before {
  content: "\f7fc";
}
.talenra-icon--person-checkmark-duplex::before {
  content: "\f801";
}
.talenra-icon--person-checkmark-duplex::after {
  content: "\f800";
}
.talenra-icon--task-alt-duplex::before {
  content: "\f803";
}
.talenra-icon--task-alt-duplex::after {
  content: "\f802";
}
.talenra-icon--flag-circle-duplex::before {
  content: "\f805";
}
.talenra-icon--flag-circle-duplex::after {
  content: "\f804";
}
.talenra-icon--sort-ascending-duplex::before {
  content: "\f807";
}
.talenra-icon--sort-ascending-duplex::after {
  content: "\f806";
}
.talenra-icon--sort-descending-duplex::before {
  content: "\f809";
}
.talenra-icon--sort-descending-duplex::after {
  content: "\f808";
}
.talenra-icon--cell-merge::before {
  content: "\f82e";
}
.talenra-icon--edit-square::before {
  content: "\f88d";
}
:root {
  --teal-50: #e6f6f1;
  --teal-100: #c3ebe0;
  --teal-200: #8fd9c6;
  --teal-300: #54c2a8;
  --teal-400: #25a98a;
  --teal-500: #109677;
  --teal-600: #0c8567;
  --teal-700: #0a6e56;
  --teal-800: #0a5946;
  --teal-900: #093f33;
  --neutral-0: #ffffff;
  --neutral-50: #fafbfc;
  --neutral-100: #f3f5f7;
  --neutral-200: #e8ecf0;
  --neutral-300: #d4dbe2;
  --neutral-400: #b3bdc6;
  --neutral-500: #8a96a0;
  --neutral-600: #687683;
  --neutral-700: #4a5862;
  --neutral-800: #2e3d47;
  --neutral-900: #21333b;
  --blue-100: #d4eefb;
  --blue-500: #0079b8;
  --blue-700: #00567a;
  --green-100: #dff0d0;
  --green-500: #2f8400;
  --green-700: #1d5100;
  --amber-100: #fef3d3;
  --amber-500: #ffb92e;
  --amber-700: #aa6c00;
  --red-100: #f8dcd2;
  --red-500: #c92100;
  --red-700: #a32100;
  --purple-100: #e6e1f4;
  --purple-500: #781da0;
  --brand: var(--teal-600);
  --brand-hover: var(--teal-700);
  --brand-active: var(--teal-800);
  --brand-subtle: var(--teal-50);
  --brand-subtle-border: var(--teal-200);
  --brand-on: var(--white);
  --white: #ffffff;
  --text-on-color: var(--white);
  --text-on-warning: var(--neutral-900);
  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-on-dark: var(--white);
  --text-link: var(--teal-700);
  --on-dark-1: rgba(255, 255, 255, 0.92);
  --on-dark-2: rgba(255, 255, 255, 0.72);
  --on-dark-3: rgba(255, 255, 255, 0.60);
  --on-dark-4: rgba(255, 255, 255, 0.50);
  --on-dark-fill: rgba(255, 255, 255, 0.10);
  --on-dark-fill-hover: rgba(255, 255, 255, 0.16);
  --on-dark-border: rgba(255, 255, 255, 0.16);
  --on-dark-divider: rgba(255, 255, 255, 0.08);
  --surface-page: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-hover: var(--neutral-100);
  --surface-active: var(--neutral-200);
  --surface-header: var(--neutral-900);
  --surface-overlay: var(--scrim-modal);
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus: var(--teal-500);
  --info: var(--blue-500);
  --info-text: var(--blue-700);
  --info-subtle: var(--blue-100);
  --success: var(--green-500);
  --success-text: var(--green-700);
  --success-subtle: var(--green-100);
  --warning: var(--amber-500);
  --warning-text: var(--amber-700);
  --warning-subtle: var(--amber-100);
  --danger: var(--red-500);
  --danger-text: var(--red-700);
  --danger-subtle: var(--red-100);
  --focus-ring: 0 0 0 3px rgba(16, 150, 119, 0.32);
  --scrim: rgba(0, 0, 0, 0.40);
  --scrim-modal: rgba(33, 51, 59, 0.55);
  --font-sans:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-mono:
    "JetBrains Mono",
    "Monaco",
    monospace;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-h4: 16px;
  --text-h5: 14px;
  --text-h6: 12px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro: 11px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;
  --tracking-tight: -0.5px;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.20);
  --elevation-dropshadow-floating: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --duration-fastest: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme=dark] {
  --text-strong: var(--neutral-50);
  --text-body: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-600);
  --text-link: var(--teal-300);
  --surface-page: var(--neutral-900);
  --surface-card: var(--neutral-800);
  --surface-sunken: var(--neutral-900);
  --surface-hover: var(--neutral-700);
  --surface-active: var(--neutral-600);
  --surface-header: var(--neutral-900);
  --surface-overlay: rgba(0, 0, 0, 0.75);
  --border-subtle: var(--neutral-700);
  --border-default: var(--neutral-600);
  --border-strong: var(--neutral-500);
  --border-focus: var(--teal-400);
  --info: var(--blue-500);
  --info-text: var(--blue-100);
  --info-subtle: rgba(0, 121, 184, 0.2);
  --success: var(--green-500);
  --success-text: var(--green-100);
  --success-subtle: rgba(47, 132, 0, 0.2);
  --warning: var(--amber-500);
  --warning-text: var(--amber-100);
  --warning-subtle: rgba(255, 185, 46, 0.2);
  --danger: var(--red-500);
  --danger-text: var(--red-100);
  --danger-subtle: rgba(201, 33, 0, 0.2);
  --brand-subtle: rgba(16, 150, 119, 0.2);
  --brand-subtle-border: var(--teal-700);
  --scrim: rgba(0, 0, 0, 0.60);
  --scrim-modal: rgba(0, 0, 0, 0.80);
}
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-section {
  margin-bottom: var(--space-6);
}
.page-section:last-child {
  margin-bottom: 0;
}
.form-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.form-group {
  margin-bottom: var(--space-5);
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.form-group label.required::after {
  content: " *";
  color: var(--danger);
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--text-strong);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.form-group input[type=text]:hover,
.form-group input[type=email]:hover,
.form-group input[type=password]:hover,
.form-group input[type=number]:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: var(--border-default);
}
.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group input[type=password]:focus,
.form-group input[type=number]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.form-group input[type=text]:disabled,
.form-group input[type=email]:disabled,
.form-group input[type=password]:disabled,
.form-group input[type=number]:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.form-group input[type=text]::placeholder,
.form-group input[type=email]::placeholder,
.form-group input[type=password]::placeholder,
.form-group input[type=number]::placeholder,
.form-group textarea::placeholder,
.form-group select::placeholder {
  color: var(--text-disabled);
}
.form-group textarea {
  resize: vertical;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
}
.form-group select {
  cursor: pointer;
}
.form-group .form-text {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: var(--danger);
}
.form-group.error input:focus,
.form-group.error textarea:focus,
.form-group.error select:focus {
  box-shadow: var(--focus-ring);
}
.form-group.error .error-text {
  font-size: var(--text-caption);
  color: var(--danger-text);
  margin-top: var(--space-1);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.empty-state .empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  opacity: 0.6;
}
.empty-state .empty-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.empty-state .empty-text {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 400px;
}
.empty-state .empty-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.table-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrapper table thead {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.table-wrapper table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.table-wrapper table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
}
.table-wrapper table tbody tr:last-child {
  border-bottom: none;
}
.table-wrapper table tbody tr:hover {
  background: var(--surface-hover);
}
.table-wrapper table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--text-strong);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.badge.badge-info {
  background: var(--info-subtle);
  color: var(--info-text);
}
.badge.badge-success {
  background: var(--success-subtle);
  color: var(--success-text);
}
.badge.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
}
.badge.badge-danger {
  background: var(--danger-subtle);
  color: var(--danger-text);
}
.badge.badge-brand {
  background: var(--brand-subtle);
  color: var(--brand);
}
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list .list-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.list .list-item:last-child {
  border-bottom: none;
}
.list .list-item.list-item-strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.list .list-item .list-item-meta {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  margin-bottom: var(--space-4);
}
.alert.alert-info {
  background: var(--info-subtle);
  border-color: var(--info);
  color: var(--info-text);
}
.alert.alert-success {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success-text);
}
.alert.alert-warning {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--warning-text);
}
.alert.alert-danger {
  background: var(--danger-subtle);
  border-color: var(--danger);
  color: var(--danger-text);
}
.alert .alert-title {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.alert .alert-close {
  float: right;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.alert .alert-close:hover {
  opacity: 1;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
.flex {
  display: flex;
}
.flex.flex-between {
  justify-content: space-between;
}
.flex.flex-center {
  justify-content: center;
  align-items: center;
}
.flex.flex-gap-sm {
  gap: var(--space-2);
}
.flex.flex-gap-md {
  gap: var(--space-4);
}
.flex.flex-gap-lg {
  gap: var(--space-6);
}
.spacer {
  flex: 1;
}
.text-muted {
  color: var(--text-muted);
}
.text-strong {
  color: var(--text-strong);
  font-weight: 600;
}
.text-link {
  color: var(--text-link);
  cursor: pointer;
}
.text-link:hover {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--surface-overlay);
}
.modal-overlay.is-open {
  display: flex;
}
.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: dialog-in 160ms var(--ease-standard);
}
.modal.is-lg {
  max-width: 600px;
}
.modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
  flex: none;
}
.modal .modal-header .modal-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.modal .modal-body {
  padding: var(--space-3) var(--space-6) var(--space-5);
  flex: 1;
  overflow-y: auto;
}
.modal .modal-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  flex: none;
}
.modal .modal-close {
  display: inline-flex;
  padding: 6px;
  flex: none;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.modal .modal-close:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}
.modal .modal-close .ti {
  width: 16px;
  height: 16px;
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin var(--duration-base) linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}
.status-badge.status-active {
  background: var(--success-subtle);
  color: var(--success-text);
}
.status-badge.status-active .dot {
  background: var(--success);
}
.status-badge.status-inactive {
  background: var(--surface-hover);
  color: var(--text-muted);
}
.status-badge.status-inactive .dot {
  background: var(--text-muted);
}
.status-badge.status-pending {
  background: var(--warning-subtle);
  color: var(--warning-text);
}
.status-badge.status-pending .dot {
  background: var(--warning);
}
.status-badge.status-alert {
  background: var(--danger-subtle);
  color: var(--danger-text);
}
.status-badge.status-alert .dot {
  background: var(--danger);
}
.status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--surface-page);
}
app-root {
  display: block;
  height: 100%;
}
::-webkit-scrollbar {
  width: var(--space-2);
  height: var(--space-2);
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */