@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
html.kome_theme {
  --mat-sys-primary: rgb(255, 101, 11);
  --mat-sys-primary-fixed-dim: rgba(255, 101, 11, 0.15);
  --mat-sys-secondary: rgb(255 146 1);
  --mat-sys-secondary-fixed-dim: rgba(255, 146, 1, 0.15);
  --mat-sys-tertiary: rgb(255 146 1);
  --mat-sys-nav-icon-active: color-mix(in srgb, var(--mat-sys-primary) 25%, white);
}

html.blue_theme {
  --mat-sys-primary: rgb(5, 71, 107);
  --mat-sys-primary-fixed-dim: rgba(5, 71, 107, 0.15);
  --mat-sys-secondary: rgb(110, 231, 255);
  --mat-sys-secondary-fixed-dim: rgba(110, 231, 255, 0.15);
}

html.violet_theme {
  --mat-sys-primary: rgb(58, 25, 87);
  --mat-sys-primary-fixed-dim: rgba(58, 25, 87, 0.15);
  --mat-sys-secondary: rgb(194, 180, 248);
  --mat-sys-secondary-fixed-dim: rgba(194, 180, 248, 0.15);
  --mat-sys-error-fixed-dim: rgba(239, 68, 68, 0.15);
}

html.lavender_theme {
  --mat-sys-primary: rgb(11, 21, 73);
  --mat-sys-primary-fixed-dim: rgba(11, 21, 73, 0.15);
  --mat-sys-secondary: rgb(185, 203, 255);
  --mat-sys-secondary-fixed-dim: rgba(185, 203, 255, 0.15);
  --mat-sys-tertiary: rgb(185, 203, 255);
}

html.teal_theme {
  --mat-sys-primary: rgb(16, 80, 96);
  --mat-sys-primary-fixed-dim: rgba(16, 80, 96, 0.15);
  --mat-sys-secondary: rgb(115, 251, 211);
  --mat-sys-secondary-fixed-dim: rgba(115, 251, 211, 0.15);
  --mat-sys-tertiary: rgb(115, 251, 211);
}

html.green_theme {
  --mat-sys-primary: rgb(22, 90, 80);
  --mat-sys-primary-fixed-dim: rgba(22, 90, 80, 0.15);
  --mat-sys-secondary: rgb(194 253 117);
  --mat-sys-secondary-fixed-dim: rgba(194, 253, 117, 0.15);
  --mat-sys-tertiary: rgb(194 253 117);
}

html.yellow_theme {
  --mat-sys-primary: rgb(59, 62, 51);
  --mat-sys-primary-fixed-dim: rgba(59, 62, 51, 0.15);
  --mat-sys-secondary: rgb(255, 159, 28);
  --mat-sys-secondary-fixed-dim: rgba(255, 159, 28, 0.15);
  --mat-sys-tertiary: rgb(255, 159, 28);
}

html {
  --mat-autocomplete-container-elevation-shadow: var(--mat-sys-level2);
}

html {
  --mat-badge-background-color: var(--mat-sys-primary);
}

:root {
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-spin: 700ms;
  --dur-pulse: 1400ms;
  --dur-marquee: 45s;
  --motion-lift: -2px;
  --motion-nudge: 3px;
  --motion-press: 0.98;
  --motion-enter: 4px;
  --motion-enter-scale: 0.97;
  --mat-tab-animation-duration: var(--dur-base);
  --default-transition-duration: var(--dur-fast);
  --default-transition-timing-function: var(--ease-out);
}

@keyframes kc-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--motion-enter) * -1));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kc-enter-up {
  from {
    opacity: 0;
    transform: translateY(var(--motion-enter));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kc-pop-in {
  from {
    opacity: 0;
    transform: scale(var(--motion-enter-scale));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kc-pop-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(var(--motion-enter-scale));
  }
}
@keyframes kc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kc-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes kc-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kc-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-lift: 0px;
    --motion-nudge: 0px;
    --motion-press: 1;
    --motion-enter: 0px;
    --motion-enter-scale: 1;
    --dur-spin: 1600ms;
  }
  :root *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *),
  :root *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *)::before,
  :root *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *)::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-a11y-motion] {
  --motion-lift: 0px;
  --motion-nudge: 0px;
  --motion-press: 1;
  --motion-enter: 0px;
  --motion-enter-scale: 1;
  --dur-spin: 1600ms;
}
:root[data-a11y-motion] *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *),
:root[data-a11y-motion] *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *)::before,
:root[data-a11y-motion] *:not([class*=spin], [class*=spin] *, .is-pending, .mdc-linear-progress, .mdc-linear-progress *, .mdc-circular-progress, .mdc-circular-progress *)::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

html {
  --mat-button-protected-hover-container-elevation-shadow: var(--mat-sys-level1);
  --mat-button-filled-horizontal-padding: 16px;
  --mat-button-outlined-horizontal-padding: 16px;
  --mat-button-protected-horizontal-padding: 16px;
  --mat-button-text-horizontal-padding: 16px;
  --mat-button-filled-container-shape: var(--mat-sys-corner-small);
  --mat-button-outlined-container-shape: var(--mat-sys-corner-small);
  --mat-button-protected-container-shape: var(--mat-sys-corner-small);
  --mat-button-text-container-shape: var(--mat-sys-corner-small);
}

html {
  --mat-icon-button-icon-color: var(--mat-sys-on-background);
}

@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-primary:hover,
  html .mat-mdc-button-base.bg-light-secondary:hover,
  html .mat-mdc-button-base.bg-light-error:hover,
  html .mat-mdc-button-base.bg-light-warning:hover,
  html .mat-mdc-button-base.bg-light-success:hover {
    color: #ffffff !important;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-primary:hover {
    background-color: var(--mat-sys-primary) !important;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-secondary:hover {
    background-color: var(--mat-sys-secondary) !important;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-error:hover {
    background-color: var(--mat-sys-error) !important;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-warning:hover {
    background-color: #F6B51E !important;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.bg-light-success:hover {
    background-color: #70C748 !important;
  }
}
html .mat-mdc-outlined-button:not(:disabled) {
  border-color: inherit !important;
}
@media (hover: hover) {
  html .mat-mdc-button-base.text-secondary:hover .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-sys-secondary);
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.text-error:hover .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-sys-error);
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.text-warning:hover .mat-mdc-button-persistent-ripple::before {
    background-color: #F6B51E;
  }
}
@media (hover: hover) {
  html .mat-mdc-button-base.text-success:hover .mat-mdc-button-persistent-ripple::before {
    background-color: #70C748;
  }
}
html .mat-mdc-outlined-button:not(:disabled).mat-secondary {
  color: var(--mat-sys-secondary);
  border-color: var(--mat-sys-secondary);
}
@media (hover: hover) {
  html .mat-mdc-outlined-button:not(:disabled).mat-secondary:hover .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-sys-secondary);
  }
}
html .mat-mdc-outlined-button:not(:disabled).mat-success {
  color: #70C748;
  border-color: #70C748;
}
@media (hover: hover) {
  html .mat-mdc-outlined-button:not(:disabled).mat-success:hover .mat-mdc-button-persistent-ripple::before {
    background-color: #70C748;
  }
}
html .mat-mdc-outlined-button:not(:disabled).mat-error {
  color: var(--mat-sys-error);
  border-color: var(--mat-sys-error);
}
@media (hover: hover) {
  html .mat-mdc-outlined-button:not(:disabled).mat-error:hover .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-sys-error);
  }
}
html .mat-mdc-outlined-button:not(:disabled).mat-warning {
  color: #F6B51E;
  border-color: #F6B51E;
}
@media (hover: hover) {
  html .mat-mdc-outlined-button:not(:disabled).mat-warning:hover .mat-mdc-button-persistent-ripple::before {
    background-color: #F6B51E;
  }
}
html .mat-mdc-button-base.bg-secondary {
  color: #030E09;
}
@media (hover: hover) {
  html.dark-theme .mat-mdc-icon-button:hover, html.light-theme .mat-mdc-icon-button:hover {
    color: var(--mat-sys-primary);
  }
  html.dark-theme .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before, html.light-theme .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-sys-primary);
  }
}

.mat-mdc-button-base,
.mat-mdc-icon-button {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mat-mdc-button-base:active:not(:disabled):not([aria-disabled=true]):not(.pointer-events-none),
.mat-mdc-icon-button:active:not(:disabled):not([aria-disabled=true]):not(.pointer-events-none) {
  transform: scale(var(--motion-press));
}

.mat-mdc-button-persistent-ripple::before {
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

@media (hover: none) {
  .mat-mdc-button-base:hover > .mat-mdc-button-persistent-ripple::before {
    opacity: 0;
  }
}
html {
  --mat-button-toggle-shape: 16px;
}

html {
  --mat-card-elevated-container-color: #ffffff;
  --mat-card-outlined-container-color: #ffffff;
  --mat-card-title-text-size: 1.125rem;
  --mat-card-subtitle-text-size: 14px;
  --mat-card-subtitle-text-color: var(--mat-sys-surface-container-lowest);
  --mat-card-title-text-line-height: 1.6rem;
  --mat-card-title-text-weight: 600;
  --mat-card-subtitle-text-weight: 500;
  --mat-card-elevated-container-shape: var(--mat-sys-corner-medium);
  --mat-card-outlined-container-shape: var(--mat-sys-corner-medium);
  --mat-card-elevated-container-elevation: var(--mat-sys-level2);
}

html .mat-mdc-card {
  margin-bottom: 24px;
}
html .mat-mdc-card .mat-mdc-card-header {
  padding: 24px 24px 0 !important;
}
html .mat-mdc-card .mat-mdc-card-header + .mat-mdc-card-content {
  padding: 0 24px 24px;
}
html .mat-mdc-card > .mat-mdc-card-content {
  padding: 24px;
}
html .mat-mdc-card .mdc-card__actions {
  padding: 24px !important;
}
html .card-hover {
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  html .card-hover:hover {
    transform: translateY(var(--motion-lift));
  }
}
html .cardBorder .mdc-card {
  box-shadow: none !important;
  border: 1px solid var(--mat-sys-outline-variant) !important;
}
html .cardBorder .mdc-card.shadow-none {
  border: 0 !important;
}

a.mat-mdc-card,
a.cardWithShadow {
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  a.mat-mdc-card:hover,
  a.cardWithShadow:hover {
    transform: translateY(var(--motion-lift));
    box-shadow: var(--mat-sys-level2);
  }
}
a.mat-mdc-card:active,
a.cardWithShadow:active {
  transform: none;
}

html {
  --mat-checkbox-unselected-focus-icon-color: var(--mat-checkbox-unselected-hover-state-layer-color);
  --mat-checkbox-label-text-color: var(--mat-sys-on-background);
  --mat-checkbox-unselected-icon-color: var(--mat-checkbox-unselected-hover-state-layer-color);
}

html .mdc-checkbox__background {
  border-radius: 4px;
  width: 21px;
  height: 21px;
  border: 1.25px solid var(--mat-checkbox-unselected-hover-state-layer-color);
}
html .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
  background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
}

html {
  --mat-chip-focus-state-layer-color: var(--mat-option-focus-state-layer-color);
}

html {
  --mat-dialog-container-shape: var(--mat-sys-corner-small);
  --mat-dialog-subhead-size: 18px;
  --mat-dialog-subhead-weight: 600;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-actions-padding: 20px 24px;
  --mat-dialog-container-min-width: 360px;
  --mat-dialog-container-max-width: 800px;
  --mat-dialog-subhead-tracking: unset;
  --mat-dialog-supporting-text-tracking: unset;
}

/*
 * Every dialog in this app renders its own markup directly against
 * `.mat-mdc-dialog-surface` (h4/p/form, not <mat-dialog-title>/
 * <mat-dialog-content>) — so the token overrides above, while kept for any
 * future dialog that DOES use that DOM, aren't what today's dialogs actually
 * render through. The rules below are the ones that reach every existing
 * dialog: a single shared selector, no per-dialog markup needed.
 */
.cdk-overlay-pane.mat-mdc-dialog-panel {
  max-height: min(78vh, 720px);
}

.mat-mdc-dialog-surface {
  box-shadow: 0 24px 48px -12px rgba(16, 22, 30, 0.28), 0 0 0 1px rgba(16, 22, 30, 0.04);
  --mat-form-field-container-height: 52px;
}
.mat-mdc-dialog-surface h4, .mat-mdc-dialog-surface h5 {
  letter-spacing: normal;
}
.mat-mdc-dialog-surface p, .mat-mdc-dialog-surface .mat-mdc-form-field-hint, .mat-mdc-dialog-surface mat-hint {
  line-height: 1.55;
}

.mat-mdc-dialog-surface textarea:not(.mdc-text-field__input) {
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .mat-mdc-dialog-surface {
    padding: 20px;
    border-radius: 16px;
  }
}
.mdc-dialog--open .mat-mdc-dialog-surface {
  animation: kc-pop-in var(--dur-slow) var(--ease-out);
}

.mdc-dialog.is-closing {
  pointer-events: none;
}
.mdc-dialog.is-closing .mat-mdc-dialog-surface {
  animation: kc-pop-out var(--dur-base) var(--ease-in) forwards;
}

.cdk-overlay-backdrop {
  transition: opacity var(--dur-slow) var(--ease-out);
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  animation: kc-fade-in var(--dur-slow) var(--ease-out);
}
.cdk-overlay-backdrop.is-closing {
  animation: kc-fade-out var(--dur-base) var(--ease-in) forwards;
  pointer-events: none;
}

html {
  --mat-datepicker-calendar-container-background-color: var(--mat-card-elevated-container-color);
  --mat-datepicker-calendar-container-touch-elevation-shadow: var(--mat-sys-level1);
  --mat-datepicker-calendar-container-elevation-shadow: var(--mat-sys-level1);
}

html {
  --mat-fab-small-container-shape: 30px;
  --mat-fab-container-shape: 30px;
  --mat-fab-container-elevation-shadow: none;
  --mat-fab-small-container-elevation-shadow: none;
  --mat-fab-small-hover-container-elevation-shadow: var(--mat-sys-level3);
  --mat-fab-hover-container-elevation-shadow: var(--mat-sys-level3);
  --mat-fab-extended-hover-container-elevation-shadow: var(--mat-sys-level3);
  --mat-fab-extended-container-elevation-shadow: none;
}

html {
  --mat-form-field-container-height: 40px;
  --mat-form-field-outlined-container-shape: var(--mat-sys-corner-small);
  --mat-form-field-container-vertical-padding: 8px;
}

html {
  /*
   * <mat-form-field> is a custom element the browser has no built-in
   * display rule for, and nothing here ever gave it one — so by default it
   * renders `display: inline`, sizing to its own content (~180-212px)
   * regardless of how wide its grid column or dialog actually is. First
   * found and fixed only for the job-edit form (.kc-jobform in
   * _recruitment.scss); confirmed here to be the same bug on every other
   * mat-form-field in the dashboard — e.g. the invite-to-interview dialog's
   * "Deadline" field, measured at 212px inside a 320px grid column. No
   * field anywhere in this app is meant to be narrower than its container,
   * so this is a global default rather than another one-page patch.
   */
}
html mat-form-field {
  display: block;
  width: 100%;
}
html mat-form-field .mat-mdc-text-field-wrapper, html mat-form-field .mat-mdc-form-field-flex, html mat-form-field .mat-mdc-form-field-infix {
  width: 100%;
}
html .hide-hint .mat-mdc-form-field-subscript-wrapper {
  display: none;
}
html .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
  top: calc(var(--mat-form-field-container-height) / 2.15);
}
html .demo-inline-calendar-card {
  width: 300px;
}
html .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-right: 0;
}
html {
  /*
   * A `prefixIcon` (component('form-field', ['prefixIcon' => '...'])) sits
   * before the input as a normal flex sibling, so the input itself always
   * lands in the right place. The label does not: `.mdc-floating-label` is
   * `position: absolute; left: 0` unconditionally (verified — no other rule
   * in the extracted CSS sets its `left`), so it sits flush at the field's
   * left edge in *both* states, printing straight through the icon whether
   * resting or floated. Floated only looked fine at a glance because
   * floating also moves the label up onto the border line, off the icon's
   * own row — confirmed with a pixel-diffed screenshot: the floated label's
   * left edge measured identically to the resting one, it just no longer
   * shared a row with the icon to visibly collide with. Real Angular
   * Material shifts both via a ResizeObserver measuring the prefix at
   * runtime; this static PHP/CSS port has none, so both need a direct fix.
   *
   * The icon's box is a fixed size — a 24px .mat-icon, its own 12px/side
   * padding (.mat-mdc-form-field-icon-prefix > .mat-icon), plus the
   * wrapper's own 4px trailing padding (.mat-mdc-form-field-icon-prefix) —
   * so a fixed 52px offset is exact, however many fields end up using
   * prefixIcon in future, not a one-off number tuned to this one case.
   *
   * `.mdc-notched-outline__leading` gets the same offset so the *border's*
   * notch (the gap the floated label sits in) lines up with where the label
   * itself now is — left as-is, the label would float correctly but the
   * gap in the outline would still open in the old, un-shifted place. Its
   * own rule in the extracted CSS is 3 classes specific
   * (`.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading`),
   * so the selector is repeated the same way `.mdc-notched-outline__notch`
   * is right above — the established way this file already out-specifies
   * the extracted CSS without reaching for `!important`.
   */
}
html .mat-mdc-form-field-has-icon-prefix .mdc-floating-label {
  left: 52px;
}
html .mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-prefix .mdc-notched-outline__leading {
  width: 52px;
}
html .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons) {
  margin: 0 26px;
}

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
  transition: border-color var(--dur-base) var(--ease-out);
}

.mdc-floating-label,
.mat-mdc-form-field-hint,
.mat-mdc-form-field-error {
  transition: color var(--dur-base) var(--ease-out);
}

.mat-mdc-form-field-error {
  animation: kc-fade-in var(--dur-base) var(--ease-out);
}

.mdc-switch .mdc-switch__handle {
  transition: none;
}
.mdc-switch .mdc-switch__handle-track {
  transition: transform var(--dur-base) var(--ease-out);
}
.mdc-switch .mdc-switch__track::before,
.mdc-switch .mdc-switch__track::after,
.mdc-switch .mdc-switch__handle::before,
.mdc-switch .mdc-switch__handle::after,
.mdc-switch .mdc-switch__icon {
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mdc-switch:active:not(:disabled) .mdc-switch__handle-track .mdc-switch__handle {
  transform: scale(var(--motion-press));
}

html {
  --mat-radio-unselected-icon-color: var(--mat-sys-outline-variant);
}

html .mat-mdc-radio-button .mdc-radio__outer-circle {
  border-width: 1px;
}

html {
  --mat-list-list-item-hover-state-layer-color: var(--mat-sys-primary);
  --mat-list-list-item-container-shape: var(--mat-sys-corner-small);
  --mat-list-active-indicator-shape: var(--mat-sys-corner-small);
  --mat-list-list-item-two-line-container-height: 70px;
  --mat-list-list-item-three-line-container-height: 100px;
}

@media (hover: hover) {
  html .mat-list-item:hover {
    color: var(--mat-sys-primary);
    background-color: var(--mat-sys-primary-fixed-dim);
  }
}

html {
  --mat-menu-container-shape: var(--mat-sys-corner-medium);
}

html .mat-mdc-menu-panel {
  box-shadow: var(--mat-sys-level3) !important;
}
html .mat-mdc-select-panel {
  padding: 8px !important;
}

html .mat-mdc-menu-panel {
  animation: kc-enter var(--dur-base) var(--ease-out);
}
html .mat-mdc-menu-panel.is-closing {
  animation: kc-fade-out var(--dur-fast) var(--ease-in) forwards;
  pointer-events: none;
}
html .mat-mdc-menu-item {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

html {
  --mat-paginator-container-background-color: var(--mat-card-elevated-container-color);
}

html {
  --mat-sys-background: light-dark(#faf9fd, #121316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);
  --mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);
  --mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);
  --mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #002f65);
  --mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);
  --mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);
  --mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);
  --mat-sys-on-secondary: light-dark(#ffffff, #283041);
  --mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);
  --mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);
  --mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);
  --mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);
  --mat-sys-on-tertiary: light-dark(#ffffff, #002f65);
  --mat-sys-on-tertiary-container: light-dark(#00458f, #d7e3ff);
  --mat-sys-on-tertiary-fixed: light-dark(#001b3f, #001b3f);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#00458f, #00458f);
  --mat-sys-outline: light-dark(#74777f, #8e9099);
  --mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);
  --mat-sys-primary: light-dark(#005cbb, #abc7ff);
  --mat-sys-primary-container: light-dark(#d7e3ff, #00458f);
  --mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);
  --mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#565e71, #bec6dc);
  --mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);
  --mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);
  --mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#faf9fd, #121316);
  --mat-sys-surface-bright: light-dark(#faf9fd, #38393c);
  --mat-sys-surface-container: light-dark(#efedf0, #1f2022);
  --mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);
  --mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);
  --mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);
  --mat-sys-surface-dim: light-dark(#dbd9dd, #121316);
  --mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);
  --mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);
  --mat-sys-tertiary: light-dark(#005cbb, #abc7ff);
  --mat-sys-tertiary-container: light-dark(#d7e3ff, #00458f);
  --mat-sys-tertiary-fixed: light-dark(#d7e3ff, #d7e3ff);
  --mat-sys-tertiary-fixed-dim: light-dark(#abc7ff, #abc7ff);
  --mat-sys-neutral-variant20: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem Onest;
  --mat-sys-body-large-font: Onest;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Onest;
  --mat-sys-body-medium-font: Onest;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Onest;
  --mat-sys-body-small-font: Onest;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Onest;
  --mat-sys-display-large-font: Onest;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Onest;
  --mat-sys-display-medium-font: Onest;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Onest;
  --mat-sys-display-small-font: Onest;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Onest;
  --mat-sys-headline-large-font: Onest;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Onest;
  --mat-sys-headline-medium-font: Onest;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Onest;
  --mat-sys-headline-small-font: Onest;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Onest;
  --mat-sys-label-large-font: Onest;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Onest;
  --mat-sys-label-medium-font: Onest;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Onest;
  --mat-sys-label-small-font: Onest;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Onest;
  --mat-sys-title-large-font: Onest;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Onest;
  --mat-sys-title-medium-font: Onest;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Onest;
  --mat-sys-title-small-font: Onest;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
  --mat-sys-error: rgb(239, 68, 68);
  --mat-sys-body-medium-size: 14px;
  --mat-sys-body-large-size: 14px;
  --mat-sys-outline-variant: #e0e6eb;
  --mat-sys-level1: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  --mat-sys-level2: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  --mat-sys-level3: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  --mat-sys-level4: 0 15px 30px rgba(0, 0, 0, 0.12);
}

html {
  --mat-table-background-color: var(--mat-card-elevated-container-color);
}

.mdc-data-table__cell,
.mdc-data-table__header-cell {
  padding: 10px 12px !important;
}

/*
 * Angular Material's own base rule pins every header cell to
 * `text-align: start` (public/assets/css/material.css — .mat-mdc-header-cell).
 * That rule lives outside any @layer, and Tailwind's utilities (including
 * .text-right/.text-center) are generated inside `@layer utilities` — by the
 * CSS cascade-layers spec, an unlayered rule always beats a layered one
 * regardless of specificity or source order, so `<th class="mat-mdc-header-
 * cell text-right">` silently stayed left-aligned while its column's
 * `<td class="mat-mdc-cell text-right">` (no competing rule) aligned
 * correctly — header and data visibly out of step in every table that right-
 * or centre-aligns a column. This file already isn't Tailwind-processed, so
 * it is unlayered too and wins back on specificity alone.
 */
.mat-mdc-header-cell.text-right {
  text-align: right;
}

.mat-mdc-header-cell.text-center {
  text-align: center;
}

.mat-mdc-row,
.mdc-data-table__row {
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .mat-mdc-row:hover,
  .mdc-data-table__row:hover {
    background-color: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent);
  }
}

.mat-mdc-tab-header .mat-mdc-tab-label-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mat-mdc-tab-header .mat-mdc-tab-label-container::-webkit-scrollbar {
  display: none;
}

.mat-mdc-tab-body-content {
  padding-top: 28px;
}

.mdc-tab {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mdc-tab__text-label,
.mdc-tab__icon {
  transition: color var(--dur-base) var(--ease-out);
}

.mdc-tab-indicator .mdc-tab-indicator__content {
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.mat-mdc-tab-body-active.is-entering {
  animation: kc-fade-in var(--dur-base) var(--ease-out);
}

html {
  --mat-tree-container-background-color: var(--mat-card-elevated-container-color);
}

html .mdc-list-item__primary-text,
html .mat-drawer-container,
html .mat-drawer,
html .text-body {
  color: var(--mat-sys-on-background);
}

html {
  --mat-stepper-container-color: var(--mat-card-elevated-container-color);
}

html {
  --mat-expansion-container-background-color: var(--mat-card-elevated-container-color);
  --mat-expansion-header-text-color: var(--mat-sys-on-background);
}

html .mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: var(--mat-sys-level1);
}

html {
  --mat-sidenav-container-shape: 0;
}

html {
  --mat-progress-bar-track-height: 8px;
  --mat-progress-bar-active-indicator-height: 8px;
}

html .mat-secondary .mdc-linear-progress__bar-inner {
  border-color: var(--mat-sys-secondary);
}
html .mat-warning .mdc-linear-progress__bar-inner {
  border-color: #F6B51E;
}
html .mat-error .mdc-linear-progress__bar-inner {
  border-color: var(--mat-sys-error);
}
html .mat-mdc-progress-bar {
  border-radius: var(--mat-sys-corner-small);
}

html {
  --mat-sys-error-fixed-dim: rgba(239, 68, 68, 0.15);
  --mat-select-container-elevation-shadow: var(--mat-sys-level3);
  --mat-list-list-item-label-text-tracking: 0;
  --mat-slide-toggle-track-height: 28px;
  --mat-sidenav-container-divider-color: var(--mat-sys-outline-variant);
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-form-field-container-text-tracking: unset;
  --mat-slide-toggle-with-icon-handle-size: 21px;
  --mat-badge-text-color: white;
  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 26px;
}
html .mat-mdc-tooltip .mdc-tooltip__surface {
  --mat-tooltip-container-color: var(--mat-sys-primary) !important;
}

html.light-theme {
  color-scheme: light;
  --mat-sys-corner-small: 12px;
  --mat-sys-corner-medium: 16px;
  --mat-sys-background: #F5F5F5;
  --mat-sys-surface-bright: #f2f6fa;
  --mat-sys-surface: #fff;
  --mat-sys-surface-container: #fff;
  --mat-sys-surface-container-low: #fff;
  --mat-sys-surface-container-lowest: #686e6b;
  --mat-sys-on-background: #030E09;
  --mat-sys-outline: #e5e6e6;
  --mat-sys-outline-variant: #e5e6e6;
  --mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);
  --mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-menu-item-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-button-toggle-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-slide-toggle-unselected-track-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-dialog-supporting-text-color: var(--mat-sys-on-background);
  --mat-expansion-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
}

html.dark-theme {
  color-scheme: dark;
  --mat-sys-corner-small: 8px;
  --mat-sys-corner-medium: 16px;
  --mat-sys-background: #141a18;
  --mat-sys-on-background: #fff;
  --mat-sys-on-primary: #fff;
  --mat-sys-surface-bright: #ffffff05;
  --mat-sys-surface: #030e09;
  --mat-sys-surface-container: #030e09;
  --mat-sys-surface-container-low: #1f2a3d;
  --mat-sys-outline-variant: #1c2622;
  --mat-sys-outline: #1c2622;
  --mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary);
  --mat-checkbox-unselected-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-menu-item-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-button-toggle-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-option-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-slide-toggle-unselected-track-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-focus-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-stepper-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-expansion-header-hover-state-layer-color: var(--mat-sys-primary-fixed-dim);
  --mat-card-elevated-container-color: #030e09;
  --mat-card-elevated-container-elevation: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 2%) 0px 12px 24px -4px;
  --mat-card-subtitle-text-color: rgba(255, 255, 255, 0.67);
  --mat-sys-level1: 0px 12px 24px -4px rgba(143, 176, 210, 0.02);
  --mat-sys-level2: 0px 12px 24px -4px rgba(143, 176, 210, 0.02);
  --mat-sys-level3: 0px 12px 24px -4px rgba(143, 176, 210, 0.02);
}

html {
  --mat-mdc-form-field-floating-label-scale: 0.75;
  --mat-mdc-form-field-label-transform: translateY(-50%) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
  --mat-form-field-outlined-label-text-populated-size: var(--mat-sys-body-large-size, 14px);
  --mat-list-list-item-hover-leading-icon-color: var(--mat-sys-on-surface-variant);
  --mat-list-list-item-hover-trailing-icon-color: var(--mat-sys-on-surface-variant);
  --mat-list-list-item-selected-container-color: var(--mat-sys-primary-fixed-dim);
  --mat-chip-elevated-disabled-container-color: var(--mat-sys-surface-variant);
  --mat-fab-disabled-state-layer-color: var(--mat-sys-on-surface);
  --mat-fab-small-disabled-state-layer-color: var(--mat-sys-on-surface);
  --mat-fab-small-touch-target-display: block;
  --mat-button-filled-label-text-transform: none;
  --mat-button-outlined-label-text-transform: none;
  --mat-button-protected-label-text-transform: none;
  --mat-button-text-label-text-transform: none;
  --mat-button-tonal-label-text-transform: none;
}

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

body {
  font-family: "Onest", sans-serif;
  line-height: 1.334rem;
  overflow-x: hidden;
  color: var(--mat-sys-on-background);
}

.mainWrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex: 1;
  height: 100%;
}

.body-wrapper {
  min-height: calc(100% - 115px);
}

@media (max-width: 1023px) {
  .sidebarNav-horizontal .body-wrapper {
    margin-top: 30px;
  }
}
.pageWrapper {
  padding: 30px 24px 0px;
  min-height: calc(100vh - 115px);
  margin: 0 auto;
}
.pageWrapper.maxWidth {
  max-width: 1368px;
}

.container {
  max-width: 1368px;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto;
}
.container.full-width {
  display: flex;
  align-items: center;
  width: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--mat-sys-on-background);
}
@media (hover: hover) {
  a:hover {
    color: var(--mat-sys-primary);
  }
}

pre {
  margin: 0;
  white-space: nowrap;
}

td.hljs-ln-line.hljs-ln-numbers {
  padding-right: 10px;
}

.avatar-group img {
  border: 2px solid #ffffff;
  margin-right: -5px;
}
.avatar-group img:last-child {
  margin-right: 0;
}

.filter-sidebar {
  width: 290px !important;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  height: 100%;
  background-color: var(--mat-sys-surface);
}

.text-muted {
  color: var(--mat-sys-surface-container-lowest);
}

.mat-drawer[style*="visibility: hidden"] {
  display: none;
}

.ng-scroll-viewport[_nghost-ng-c2407083653] > .ng-scroll-content[_ngcontent-ng-c2407083653],
.ng-scrollbar-external-viewport[_nghost-ng-c2407083653] .ng-scroll-viewport > .ng-scroll-content {
  width: 100% !important;
}

.mat-drawer.sidebarNav {
  width: 270px;
  flex-shrink: 0;
  position: fixed;
  overflow-x: hidden;
  background-color: var(--mat-sys-surface);
}

.branding {
  padding: 12px 16px;
  min-height: 70px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: 100%;
}

.sidebarNav-mini .sidebarNav {
  width: 87px;
}
.sidebarNav-mini .sidebarNav .sidebar-list {
  width: 87px;
}
.sidebarNav-mini .sidebarNav .sidebar-list .mdc-list-group__subheader .caption-icon {
  display: inline;
}
.sidebarNav-mini .sidebarNav .sidebar-list .mdc-list-group__subheader .caption-text {
  display: none;
}
.sidebarNav-mini .sidebarNav .sidebar-list .menu-list-item {
  padding: 11px 11px !important;
}
.sidebarNav-mini .sidebarNav .sidebar-list .menu-list-item .mdc-list-item__content {
  display: none;
}
.sidebarNav-mini .sidebarNav:hover {
  width: 270px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.sidebarNav-mini .sidebarNav:hover .branding {
  width: 100%;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list .menu-list-item {
  padding: 8px 10px;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list .menu-list-item .mdc-list-item__content {
  display: inline;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list .menu-list-item .mdc-list-item__start {
  margin-left: 0 !important;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list {
  padding: 0 16px;
  width: 270px;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list .mdc-list-group__subheader {
  text-align: left;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list .mdc-list-group__subheader .caption-icon {
  display: none;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list .mdc-list-group__subheader .caption-text {
  display: inline;
}
.sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list .mdc-list-group__subheader {
  text-align: left;
}
.sidebarNav-mini .hideMenu {
  overflow: hidden;
  width: 87px;
}
.sidebarNav-mini .branding {
  width: 55px;
  overflow: hidden;
}
.sidebarNav-mini .sidebar-list.mdc-list .mdc-list-group__subheader {
  text-align: center;
}

@media (min-width: 1024px) {
  .sidebarNav-mini .contentWrapper {
    margin-left: 87px !important;
  }
}
.sidebar-list.mdc-list {
  padding: 0 20px;
  width: 270px;
}
.sidebar-list.mdc-list .top-parent:first-child .sidebar-divider {
  margin-top: 0;
}
.sidebar-list.mdc-list .top-parent:first-child .mdc-list-group__subheader {
  display: none;
}
.sidebar-list.mdc-list .mdc-list-group__subheader {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  padding: 5px 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sidebar-list.mdc-list .mdc-list-group__subheader .caption-icon {
  display: none;
}
.sidebar-list.mdc-list .mdc-list-group__subheader .caption-text {
  display: inline;
}
.sidebar-list.mdc-list .sidebar-divider {
  height: 1px;
  display: block;
  margin: 12px 0;
  background: var(--mat-sys-outline-variant);
  width: 100%;
}
.sidebar-list.mdc-list .menu-list-item {
  display: flex;
  font-size: 16px;
  white-space: nowrap;
  align-items: center;
  line-height: 25px;
  position: relative;
  margin-bottom: 2px;
  padding: 11px 14px !important;
  border-radius: 10px;
  gap: 10px;
  font-weight: 500;
  width: 100%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.sidebar-list.mdc-list .menu-list-item::before {
  transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__start,
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__primary-text,
.sidebar-list.mdc-list .menu-list-item .mat-mdc-list-item-icon {
  transition: color var(--dur-fast) var(--ease-out);
}
.sidebar-list.mdc-list .menu-list-item:active {
  transform: scale(var(--motion-press));
}
@media (hover: hover) {
  .sidebar-list.mdc-list .menu-list-item:hover::before {
    background-color: var(--mat-sys-primary-fixed-dim);
    color: var(--mat-sys-primary);
    opacity: 1;
  }
  .sidebar-list.mdc-list .menu-list-item:hover .mdc-list-item__start,
  .sidebar-list.mdc-list .menu-list-item:hover .mdc-list-item__primary-text {
    color: var(--mat-sys-primary);
  }
}
.sidebar-list.mdc-list .menu-list-item.twoline {
  height: 60px;
  align-items: center;
}
.sidebar-list.mdc-list .menu-list-item:before, .sidebar-list.mdc-list .menu-list-item:focus::before {
  z-index: -1;
}
.sidebar-list.mdc-list .menu-list-item.disabled {
  opacity: 0.38;
}
.sidebar-list.mdc-list .menu-list-item .item-chip {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.sidebar-list.mdc-list .menu-list-item.activeMenu .mdc-list-item__primary-text {
  color: var(--mat-sys-white);
}
.sidebar-list.mdc-list .menu-list-item.activeMenu .mat-mdc-list-item-icon {
  color: var(--mat-sys-nav-icon-active, var(--mat-sys-secondary));
}
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__start {
  margin-right: 0;
  margin-left: 0;
  width: 24px;
  height: 24px;
  line-height: 0px;
}
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__primary-text {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__primary-text .arrow-icon {
  display: flex;
}
.sidebar-list.mdc-list .menu-list-item .mdc-list-item__primary-text .arrow-icon .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-list .top-parent .menu-list-item.activemenu {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}
.sidebar-list .top-parent .menu-list-item.activemenu .mdc-list-item__primary-text {
  color: var(--mat-sys-primary) !important;
}
.sidebar-list .top-parent .menu-list-item.activemenu .mat-mdc-list-item-icon {
  color: var(--mat-sys-primary) !important;
}

html .topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  height: 70px;
}
html .topbar i-tabler {
  stroke-width: 1.5px;
}

.topbar-dd {
  min-width: 360px !important;
}

.apps-dd {
  min-width: 900px !important;
  overflow: unset !important;
}
.apps-dd .mat-mdc-menu-content {
  padding: 0;
  overflow: hidden;
  border-radius: var(--mat-sys-corner-small);
}

@media (hover: hover) {
  .text-hover-primary:hover .hover-text {
    color: var(--mat-sys-primary);
  }
}
.object-cover {
  object-fit: cover;
}

.dark-theme .topbar .mat-mdc-icon-button {
  color: rgba(255, 255, 255, 0.67) !important;
}
.dark-theme .topbar .mdc-button {
  --mat-button-text-label-text-color: $dark-text-secondary !important;
}

.profile-btn.mat-mdc-button {
  background-color: transparent;
}
@media (hover: hover) {
  .profile-btn.mat-mdc-button:hover {
    background-color: transparent;
    box-shadow: unset;
  }
  .profile-btn.mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before {
    background-color: transparent;
  }
}

.header-collpase {
  position: absolute;
  top: 70px;
  background: var(--mat-sys-surface);
  width: 100%;
  left: 0;
  box-shadow: var(--mat-sys-level1);
}

.customizer-button-group.two-row {
  display: inline-block;
}
.customizer-button-group.two-row.theme-colors .mat-button-toggle-appearance-standard {
  margin-left: 16px;
}
.customizer-button-group.two-row.theme-colors .mat-button-toggle-appearance-standard:first-child {
  margin-left: 0;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard {
  width: 80px;
  height: 65px;
  float: left;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .mat-button-toggle-button {
  display: flex;
  justify-content: center;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard:nth-child(4) {
  margin-left: 0;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard.mat-button-toggle-checked .theme-circle .theme-icon {
  display: flex;
  color: #000000;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle {
  width: 25px;
  height: 25px;
  border-radius: var(--mat-sys-corner-full);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle .theme-icon {
  display: none;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.kome_theme {
  background-color: #FF650B;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.green_theme {
  background-color: #C2FD75;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.yellow_theme {
  background-color: #FF9F1C;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.violet_theme {
  background-color: #C2B4F8;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.blue_theme {
  background-color: #6EE7FF;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.teal_theme {
  background-color: #73FBD3;
}
.customizer-button-group.two-row .mat-button-toggle-appearance-standard .theme-circle.lavender_theme {
  background-color: #b9cbff;
}
.customizer-button-group .mat-button-toggle-appearance-standard {
  padding: 9px;
  border: 1px solid var(--mat-sys-outline-variant) !important;
  box-shadow: none;
  border-radius: var(--mat-sys-corner-small);
  color: var(--bs-body-color);
  box-shadow: rgba(0, 0, 0, 0.05) 0 9px 17.5px !important;
  display: flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  min-width: 80px;
}
@media (hover: hover) {
  .customizer-button-group .mat-button-toggle-appearance-standard:hover {
    color: var(--mat-sys-primary);
    transform: scale(1.02);
  }
}
.customizer-button-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
  color: var(--mat-sys-primary);
  background-color: var(--mat-sys-primary-fixed-dim);
}
.customizer-button-group.mat-button-toggle-group {
  overflow: unset;
  border-radius: 0;
}
.customizer-button-group .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .customizer-button-group.mat-button-toggle-group-appearance-standard {
  border: 0 !important;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.page-header .page-title {
  flex: 1 1 320px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.page-header .breadcrumb {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}

.breadcrumb-item {
  padding: 0 10px 0 0;
  white-space: nowrap;
}
.breadcrumb-item.active {
  min-width: 0;
  max-width: 100%;
}
.breadcrumb-item:first-child::marker {
  display: none;
}
.breadcrumb-item a {
  text-decoration: none;
  font-size: 14px;
}
@media (hover: hover) {
  .breadcrumb-item a:hover {
    color: var(--mat-sys-secondary);
  }
}

.breadcrumb-current {
  display: inline-block;
  max-width: min(360px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.2;
}

/* ============================================================== View website
   Icon + label behave as one control. Subtle hover/focus, whole area
   clickable, keyboard-visible focus ring. */
.kc-viewsite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  /* Was --mat-sys-surface-container-lowest — a *surface* colour, near-black in
     dark mode, so the control vanished there. Text colours follow the theme. */
  color: #5a6a85;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kc-viewsite__icon {
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.kc-viewsite__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kc-viewsite__ext {
  flex: 0 0 auto;
  opacity: 0;
  transform: translate(var(--motion-lift), calc(var(--motion-lift) * -1));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kc-viewsite:focus-visible {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
  color: var(--mat-sys-primary);
}
.kc-viewsite:focus-visible .kc-viewsite__icon {
  transform: translateY(calc(var(--motion-lift) / 2));
}
.kc-viewsite:focus-visible .kc-viewsite__ext {
  opacity: 0.9;
  transform: translate(0, 0);
}
@media (hover: hover) {
  .kc-viewsite:hover {
    background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
    color: var(--mat-sys-primary);
  }
  .kc-viewsite:hover .kc-viewsite__icon {
    transform: translateY(calc(var(--motion-lift) / 2));
  }
  .kc-viewsite:hover .kc-viewsite__ext {
    opacity: 0.9;
    transform: translate(0, 0);
  }
}
.kc-viewsite:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mat-sys-surface), 0 0 0 4px var(--mat-sys-primary);
}
.kc-viewsite:active {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent);
}
.kc-viewsite {
  /* Collapse to an icon-only pill on narrow viewports. */
}
@media (max-width: 991px) {
  .kc-viewsite {
    padding: 0;
    width: 38px;
    justify-content: center;
  }
  .kc-viewsite .kc-viewsite__label,
  .kc-viewsite .kc-viewsite__ext {
    display: none;
  }
}

.dark-theme .kc-viewsite {
  color: rgba(255, 255, 255, 0.67);
}

/* ============================================================ Header actions
   Theme toggle, clock-in pill, separator, avatar presence. */
.kc-theme-btn {
  color: #5a6a85;
}
.kc-theme-btn .iconify, .kc-theme-btn svg {
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kc-theme-btn:hover .iconify, .kc-theme-btn:hover svg {
    transform: rotate(-18deg) scale(1.08);
  }
}

.kc-hdr-sep {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: rgba(124, 143, 172, 0.28);
  flex: none;
}
@media (max-width: 1023px) {
  .kc-hdr-sep {
    display: none;
  }
}

.kc-clock {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast, 0.15s) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kc-clock__meta {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.7);
}
.kc-clock__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff);
}
.kc-clock {
  /* Due: the one thing to do — solid accent. */
}
.kc-clock--due {
  background: var(--kc-accent, var(--mat-sys-primary));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--kc-accent, var(--mat-sys-primary)) 30%, transparent);
}
.kc-clock--due .kc-clock__dot {
  background: #fff;
  box-shadow: 0 0 0 2px var(--kc-accent, var(--mat-sys-primary));
}
@media (hover: hover) {
  .kc-clock--due:hover {
    transform: translateY(-1px);
    color: #fff;
  }
}
.kc-clock {
  /* Late: amber, with readable dark text (the old cream-on-yellow was ~2:1). */
}
.kc-clock--late {
  background: #fff1d6;
  border-color: #f3d08c;
  color: #7a4d00;
}
.kc-clock--late .kc-clock__dot {
  background: #e29100;
}
.kc-clock--late .kc-clock__meta {
  color: #8a5600;
}
@media (hover: hover) {
  .kc-clock--late:hover {
    background: #ffe7b8;
    color: #7a4d00;
  }
}
.kc-clock--success {
  background: #e5f7ee;
  border-color: #bfe8d3;
  color: #0e7a50;
}
@media (hover: hover) {
  .kc-clock--success:hover {
    color: #0e7a50;
    border-color: #13a36b;
  }
}
.kc-clock--warning {
  background: #fff1d6;
  border-color: #f3d08c;
  color: #7a4d00;
}
@media (hover: hover) {
  .kc-clock--warning:hover {
    color: #7a4d00;
    border-color: #e29100;
  }
}
.kc-clock--muted, .kc-clock--primary {
  background: rgba(124, 143, 172, 0.12);
  color: #5a6a85;
}
@media (hover: hover) {
  .kc-clock--muted:hover, .kc-clock--primary:hover {
    color: #5a6a85;
  }
}
.kc-clock:focus-visible {
  outline: 2px solid var(--kc-accent, var(--mat-sys-primary));
  outline-offset: 2px;
}
.kc-clock {
  /* Phones: icon only (it used to disappear entirely below 640px). */
}
@media (max-width: 639px) {
  .kc-clock {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .kc-clock .kc-clock__label, .kc-clock .kc-clock__meta {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kc-clock--due .kc-clock__dot,
  .kc-clock--late .kc-clock__dot {
    animation: kc-clock-pulse 2s ease-in-out infinite;
  }
}
@keyframes kc-clock-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.55;
  }
}
.dark-theme .kc-clock--late, .dark-theme .kc-clock--warning {
  background: rgba(226, 145, 0, 0.16);
  border-color: rgba(226, 145, 0, 0.4);
  color: #ffcf7a;
}
.dark-theme .kc-clock--late .kc-clock__meta {
  background: rgba(0, 0, 0, 0.25);
  color: #ffcf7a;
}
.dark-theme .kc-clock--success {
  background: rgba(19, 163, 107, 0.16);
  border-color: rgba(19, 163, 107, 0.4);
  color: #7fe0b5;
}
.dark-theme .kc-clock--muted, .dark-theme .kc-clock--primary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.67);
}
.dark-theme .kc-hdr-sep {
  background: rgba(255, 255, 255, 0.14);
}

.kc-profile-btn {
  position: relative;
}
.kc-profile-btn img {
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff), 0 0 0 3px rgba(124, 143, 172, 0.3);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kc-profile-btn:hover img {
    box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff), 0 0 0 4px var(--kc-accent, var(--mat-sys-primary));
  }
}
.kc-profile-btn:focus-visible img {
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff), 0 0 0 4px var(--kc-accent, var(--mat-sys-primary));
}

.kc-presence {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff);
}
.kc-presence--on {
  background: #13a36b;
}
.kc-presence--due, .kc-presence--late {
  background: #e29100;
}
.kc-presence--off {
  background: #a3b1c6;
}

/* ========================================================= Notification bell */
.kc-notif-trigger {
  position: relative;
}

.kc-notif-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--mat-sys-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--mat-sys-surface);
}

/* ======================================================= Notification panel */
.kc-notif-panel {
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, 100vh - 90px);
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--mat-sys-corner-medium, 12px);
}
.kc-notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}
.kc-notif-panel__count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
  color: var(--mat-sys-primary);
  font-size: 11px;
  font-weight: 700;
}
.kc-notif-panel__tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
}
.kc-notif-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.kc-notif-panel__foot {
  border-top: 1px solid var(--border);
  padding: 8px;
}

.kc-notif-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-notif-tab:hover {
    background-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
  }
}
.kc-notif-tab.is-active {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  color: var(--mat-sys-primary);
}
.kc-notif-tab:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}

.kc-notif-linkbtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mat-sys-primary);
  cursor: pointer;
}
@media (hover: hover) {
  .kc-notif-linkbtn:hover {
    background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
  }
}
.kc-notif-linkbtn:disabled {
  color: var(--mat-sys-surface-container-lowest);
  cursor: default;
  background: transparent;
}
.kc-notif-linkbtn:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ list + items */
.kc-notif-list {
  display: flex;
  flex-direction: column;
}

.kc-notif-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 40px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px 12px 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: background-color var(--dur-fast) var(--ease-out);
  cursor: default;
}
.kc-notif-item[href] {
  cursor: pointer;
}
@media (hover: hover) {
  .kc-notif-item:hover {
    background-color: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
  }
}
.kc-notif-item:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--mat-sys-primary);
}
.kc-notif-item__accent {
  width: 6px;
  align-self: stretch;
  border-radius: 999px;
  background: transparent;
}
.kc-notif-item.is-unread {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 5%, transparent);
}
.kc-notif-item.is-unread .kc-notif-item__accent {
  background: var(--mat-sys-primary);
}
.kc-notif-item.is-unread .kc-notif-item__title {
  font-weight: 700;
}
.kc-notif-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kc-notif-item__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kc-notif-item__title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mat-sys-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kc-notif-item__body {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mat-sys-surface-container-lowest);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.kc-notif-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-notif-item__badge {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 15px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent);
  color: var(--mat-sys-primary);
  font-weight: 700;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kc-notif-item__read {
  appearance: none;
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-notif-item__read:hover {
    background-color: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
    color: var(--mat-sys-primary);
  }
}
.kc-notif-item__read:focus-visible {
  opacity: 1;
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}
.kc-notif-item:hover .kc-notif-item__read, .kc-notif-item:focus-within .kc-notif-item__read {
  opacity: 1;
}

.kc-notif-chip {
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  opacity: 0.75;
}

/* ------------------------------------------------------------ more / states */
.kc-notif-more {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mat-sys-primary);
  cursor: pointer;
}
@media (hover: hover) {
  .kc-notif-more:hover {
    background-color: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  }
}

.kc-notif-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 34px 24px;
  color: var(--mat-sys-on-surface);
}
.kc-notif-state__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  margin-bottom: 4px;
}
.kc-notif-state--error .kc-notif-state__icon {
  background-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
  color: var(--mat-sys-error);
}

.kc-notif-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.kc-notif-skeleton__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
  animation: kc-pulse var(--dur-pulse) var(--ease-out) infinite;
}
.kc-notif-skeleton__lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc-notif-skeleton__lines span {
  height: 9px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
  animation: kc-pulse var(--dur-pulse) var(--ease-out) infinite;
}
.kc-notif-skeleton__lines span:first-child {
  width: 80%;
}
.kc-notif-skeleton__lines span:last-child {
  width: 55%;
}

.kc-notif-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-primary);
  text-decoration: none;
}
@media (hover: hover) {
  .kc-notif-viewall:hover {
    background-color: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  }
}
.kc-notif-viewall:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}

/* --------------------------------------------------------------- responsive
   On phones the dropdown becomes a bottom sheet spanning the width. menu.js
   positions with fixed left/top; we override to pin it. */
@media (max-width: 599px) {
  .cdk-overlay-pane:has(.kc-notif-panel) {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
  }
  .kc-notif-panel {
    width: auto;
    max-width: none;
    max-height: min(70vh, 540px);
  }
}
/* ==============================================================================
   Full page — /apps/notifications

   Self-contained: the page deliberately renders no Material card, so there is no
   inherited padding or elevation to override. Every surface, border and rhythm
   value here is a design-system token so it tracks the V2 header and the rest of
   the app in both themes.
   ============================================================================ */
.kc-np {
  --kc-np-pad: 24px;
  --kc-np-line: var(--border);
  /* Fills the page content area exactly like every other admin screen
     (Calendar, Account Settings): no page-level max-width or centering — the
     overall width is owned by .pageWrapper (+ its boxed .maxWidth variant). */
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px; /* matches every mat-card's own bottom gap */
}
.kc-np__main {
  min-width: 0;
}
.kc-np {
  /* ----------------------------------------------------------------- the card */
}
.kc-np__card {
  background: var(--mat-sys-surface);
  border: 1px solid var(--kc-np-line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kc-np {
  /* ------------------------------------------------------------- filter rail */
}
.kc-np__aside {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  background: var(--mat-sys-surface);
  border: 1px solid var(--kc-np-line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.kc-np__aside-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-np__aside-label {
  margin: 0 0 6px;
  padding-inline: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-np__navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mat-sys-on-surface);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-np__navitem:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
  }
}
.kc-np__navitem.is-active {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  color: var(--mat-sys-primary);
  font-weight: 600;
}
.kc-np__navitem:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}
.kc-np__navitem-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-np__navitem-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--kc-cat-dot, var(--mat-sys-surface-container-lowest));
}
.kc-np__navcount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.kc-np__navcount--accent {
  background: var(--mat-sys-primary);
  color: #fff;
}
.kc-np__navitem.is-active .kc-np__navcount:not(.kc-np__navcount--accent) {
  background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
  color: var(--mat-sys-primary);
}
.kc-np {
  /* category dot palette — decorative, never the only signal */
}
.kc-np__navitem--system {
  --kc-cat-dot: #64748b;
}
.kc-np__navitem--account {
  --kc-cat-dot: #3b82f6;
}
.kc-np__navitem--security {
  --kc-cat-dot: #ef4444;
}
.kc-np__navitem--recruitment {
  --kc-cat-dot: #8b5cf6;
}
.kc-np__navitem--compliance {
  --kc-cat-dot: #f59e0b;
}
.kc-np__navitem--finance {
  --kc-cat-dot: #10b981;
}
.kc-np__navitem--workflow {
  --kc-cat-dot: #06b6d4;
}
.kc-np__navitem--ticket {
  --kc-cat-dot: #0ea5e9;
}
.kc-np__navitem--approval {
  --kc-cat-dot: #22c55e;
}
.kc-np__navitem--reminder {
  --kc-cat-dot: #fb923c;
}
.kc-np__navitem--announcement {
  --kc-cat-dot: #ec4899;
}
.kc-np {
  /* --------------------------------------------------------------------- head */
}
.kc-np__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--kc-np-pad);
  border-bottom: 1px solid var(--kc-np-line);
}
.kc-np__head-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);
  color: var(--mat-sys-primary);
}
.kc-np__head-text {
  min-width: 0;
  flex: 1 1 auto;
}
.kc-np__head-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mat-sys-on-surface);
}
.kc-np__head-sub {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mat-sys-primary);
}
.kc-np__head-sub.is-clear {
  color: var(--mat-sys-surface-container-lowest);
  font-weight: 400;
}
.kc-np__markall {
  flex: 0 0 auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--kc-np-line);
  border-radius: 8px;
  background: var(--mat-sys-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-np__markall:hover:not(:disabled) {
    border-color: var(--mat-sys-primary);
    color: var(--mat-sys-primary);
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  }
}
.kc-np__markall:disabled {
  opacity: 0.5;
  cursor: default;
}
.kc-np__markall:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 2px;
}
.kc-np {
  /* ---------------------------------------------------- active filter summary */
}
.kc-np__activefilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px var(--kc-np-pad);
  border-bottom: 1px solid var(--kc-np-line);
  font-size: 0.75rem;
}
.kc-np__activefilters-label {
  color: var(--mat-sys-surface-container-lowest);
  font-weight: 500;
}
.kc-np__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  color: var(--mat-sys-primary);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-np__tag:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
  }
}
.kc-np__tag--clear {
  background: transparent;
  color: var(--mat-sys-surface-container-lowest);
}
@media (hover: hover) {
  .kc-np__tag--clear:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
    color: var(--mat-sys-on-surface);
  }
}
.kc-np__tag:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}
.kc-np {
  /* --------------------------------------------------------------------- list */
}
.kc-np__list {
  display: flex;
  flex-direction: column;
}
.kc-np__list .kc-notif-item {
  grid-template-columns: 3px 42px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px var(--kc-np-pad);
  border-bottom: 1px solid var(--kc-np-line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.kc-np__list .kc-notif-item:last-child {
  border-bottom: 0;
}
@media (hover: hover) {
  .kc-np__list .kc-notif-item:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
  }
}
.kc-np__list .kc-notif-item.is-unread {
  background: color-mix(in srgb, var(--mat-sys-primary) 4.5%, transparent);
}
@media (hover: hover) {
  .kc-np__list .kc-notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  }
}
.kc-np__list .kc-notif-item__accent {
  width: 3px;
  margin: 2px 0;
  border-radius: 999px;
}
.kc-np__list .kc-notif-item__title {
  font-size: 0.875rem;
  line-height: 1.45;
}
.kc-np__list .kc-notif-item.is-unread .kc-np__list .kc-notif-item__title {
  font-weight: 700;
}
.kc-np__list .kc-notif-item {
  /* read rows sit back: dimmed icon, no accent, lighter title */
}
.kc-np__list .kc-notif-item:not(.is-unread) .kc-np__list .kc-notif-item__icon {
  opacity: 0.62;
}
.kc-np__list .kc-notif-item:not(.is-unread) .kc-np__list .kc-notif-item__title {
  font-weight: 600;
  color: color-mix(in srgb, var(--mat-sys-on-surface) 82%, transparent);
}
.kc-np__list .kc-notif-item__body {
  font-size: 0.8125rem;
  -webkit-line-clamp: 3;
}
.kc-np__list .kc-notif-item__meta {
  margin-top: 5px;
  font-size: 0.75rem;
}
.kc-np__list .kc-notif-item {
  /* "Unread" reads as a quiet tag here, not a shouty uppercase pill */
}
.kc-np__list .kc-notif-item__badge {
  height: 16px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.625rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
}
.kc-np__list .kc-notif-item__read {
  align-self: center;
  opacity: 1;
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
  color: var(--mat-sys-surface-container-lowest);
}
@media (hover: hover) {
  .kc-np__list .kc-notif-item__read:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
    color: var(--mat-sys-primary);
  }
}
.kc-np {
  /* -------------------------------------------------------- empty / error */
}
.kc-np__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 52px 24px;
}
.kc-np__state-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
  color: var(--mat-sys-surface-container-lowest);
}
.kc-np__state-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
}
.kc-np__state-hint {
  margin: 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-np__state--error .kc-np__state-icon {
  background: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
  color: var(--mat-sys-error);
}
.kc-np {
  /* --------------------------------------------------------------- pagination */
}
.kc-np__pager {
  border-top: 1px solid var(--kc-np-line);
}
.kc-np__pager .mat-mdc-paginator {
  background: transparent;
}
.kc-np__pager .mat-mdc-paginator-container {
  padding: 8px 12px;
  min-height: 52px;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}
.kc-np__pager .mat-mdc-paginator-range-label {
  margin: 0 8px;
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-np__pager .paginator-page {
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 8px;
}
.kc-np__pager .mat-mdc-paginator-page-size-label {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-np {
  /* ----------------------------------------------------------------- responsive */
  /* tablet / small laptop — the rail drops under the header as a wrap row */
}
@media (max-width: 959px) {
  .kc-np {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .kc-np__aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 12px 14px;
  }
  .kc-np__aside-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .kc-np__aside-label {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .kc-np__navitem {
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--kc-np-line);
    border-radius: 999px;
    font-size: 0.75rem;
  }
  .kc-np__navitem.is-active {
    border-color: transparent;
  }
  .kc-np__navitem-label {
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  .kc-np {
    --kc-np-pad: 16px;
  }
  .kc-np__card {
    border-radius: 12px;
  }
  .kc-np__aside {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
  }
  .kc-np__aside-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .kc-np__aside-group::-webkit-scrollbar {
    display: none;
  }
  .kc-np__navitem {
    white-space: nowrap;
  }
  .kc-np__head {
    flex-wrap: wrap;
  }
  .kc-np__markall {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .kc-np__list .kc-notif-item {
    gap: 12px;
  }
  .kc-np__list .kc-notif-item__read {
    align-self: center;
  }
}

/* ============================================================ Profile menu
   partials/profile-menu.php */
.pm {
  width: 340px;
  min-width: 0 !important;
  max-width: calc(100vw - 24px);
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px !important;
  --pm-line: rgba(124, 143, 172, 0.2);
  --pm-m: #7c8fac;
}

.pm-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--kc-accent, var(--mat-sys-primary)) 9%, transparent), transparent 70%);
}

.pm-av {
  position: relative;
  flex: none;
}
.pm-av img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff), 0 0 0 3px rgba(124, 143, 172, 0.3);
}
.pm-av .kc-presence {
  width: 13px;
  height: 13px;
}

.pm-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pm-who b {
  font-size: 0.98rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-role {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--kc-accent, var(--mat-sys-primary)) 12%, transparent);
  color: var(--kc-accent-ink, var(--mat-sys-primary));
}

.pm-mail {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--pm-m);
}
.pm-mail > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-copy {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pm-m);
  cursor: pointer;
}
@media (hover: hover) {
  .pm-copy:hover {
    background: rgba(124, 143, 172, 0.14);
    color: inherit;
  }
}
.pm-copy.ok {
  background: #e5f7ee;
  color: #13a36b;
}

.pm-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 4px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.pm-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.pm-status span {
  flex: 1;
  min-width: 0;
}
.pm-status .pm-chev {
  opacity: 0.6;
}
.pm-status--on {
  background: #e5f7ee;
  color: #0e7a50;
}
.pm-status--on i {
  background: #13a36b;
}
.pm-status--due, .pm-status--late {
  background: #fff1d6;
  color: #7a4d00;
}
.pm-status--due i, .pm-status--late i {
  background: #e29100;
}
.pm-status--off {
  background: rgba(124, 143, 172, 0.1);
  color: #5a6a85;
}
.pm-status--off i {
  background: #a3b1c6;
}
@media (hover: hover) {
  .pm-status:hover {
    filter: brightness(0.97);
    color: inherit;
  }
}

.pm-body {
  padding: 4px 8px 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.pm-g {
  margin: 10px 10px 4px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pm-m);
}

.pm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast, 0.15s) var(--ease-out);
}
@media (hover: hover) {
  .pm-item:hover {
    background: rgba(124, 143, 172, 0.1);
    color: inherit;
  }
  .pm-item:hover .pm-ic {
    color: var(--kc-accent-ink, var(--mat-sys-primary));
  }
}
.pm-item:focus-visible {
  outline: 2px solid var(--kc-accent, var(--mat-sys-primary));
  outline-offset: -2px;
}
.pm-item.on {
  background: color-mix(in srgb, var(--kc-accent, var(--mat-sys-primary)) 9%, transparent);
  color: var(--kc-accent-ink, var(--mat-sys-primary));
}
.pm-item.on .pm-ic {
  color: inherit;
}
.pm-item .pm-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(124, 143, 172, 0.1);
  color: #5a6a85;
  transition: color var(--dur-fast, 0.15s) var(--ease-out);
}
.pm-item .pm-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pm-item .pm-t small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--pm-m);
}
.pm-item .pm-ext {
  color: var(--pm-m);
}

.pm-more {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--pm-line);
}

.pm-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(124, 143, 172, 0.1);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .pm-chip:hover {
    background: color-mix(in srgb, var(--kc-accent, var(--mat-sys-primary)) 10%, transparent);
    color: var(--kc-accent-ink, var(--mat-sys-primary));
  }
}
.pm-chip:focus-visible {
  outline: 2px solid var(--kc-accent, var(--mat-sys-primary));
  outline-offset: 2px;
}

.pm-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 12px 12px;
}
.pm-foot form {
  margin: 0;
}

.pm-btn {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(124, 143, 172, 0.35);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .pm-btn:hover {
    border-color: var(--kc-accent, var(--mat-sys-primary));
    color: var(--kc-accent-ink, var(--mat-sys-primary));
  }
}
.pm-btn.danger {
  border-color: transparent;
  background: #fde8e6;
  color: #b3261e;
}
@media (hover: hover) {
  .pm-btn.danger:hover {
    background: #fbd5d1;
    color: #b3261e;
  }
}
.pm-btn:focus-visible {
  outline: 2px solid var(--kc-accent, var(--mat-sys-primary));
  outline-offset: 2px;
}

.dark-theme .pm-item .pm-ic {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.67);
}
.dark-theme .pm-status--on {
  background: rgba(19, 163, 107, 0.16);
  color: #7fe0b5;
}
.dark-theme .pm-status--due, .dark-theme .pm-status--late {
  background: rgba(226, 145, 0, 0.16);
  color: #ffcf7a;
}
.dark-theme .pm-chip, .dark-theme .pm-more {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark-theme .pm-chip {
  background: rgba(255, 255, 255, 0.06);
}
.dark-theme .pm-status--off {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.67);
}
.dark-theme .pm-btn.danger {
  background: rgba(229, 72, 77, 0.16);
  color: #ff9b97;
}
.dark-theme .pm-foot {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================ Chat presence
   One colour language for presence everywhere: header avatar, profile menu,
   chat list, chat header, people picker (User::presence()). */
.kc-pres {
  background: #a3b1c6;
}

.kc-pres--online {
  background: #13a36b !important;
}

.kc-pres--away {
  background: #e29100 !important;
}

.kc-pres--busy {
  background: #e5484d !important;
}

.kc-pres--offline {
  background: #a3b1c6 !important;
}

.kc-pres--busy.kc-presence::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  border-radius: 2px;
}

.pm-pres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0 12px 8px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(124, 143, 172, 0.1);
}
.pm-pres button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5a6a85;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast, 0.15s) var(--ease-out), color var(--dur-fast, 0.15s) var(--ease-out);
}
.pm-pres button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
@media (hover: hover) {
  .pm-pres button:hover {
    color: inherit;
  }
}
.pm-pres button.on {
  background: var(--mat-sys-surface, #fff);
  color: inherit;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.pm-pres button:focus-visible {
  outline: 2px solid var(--kc-accent, var(--mat-sys-primary));
  outline-offset: 1px;
}

.pm-clock {
  display: block;
  margin: 0 12px 6px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #0b5d3d;
  background: linear-gradient(135deg, #e5f7ee, #f3fbf7);
  border: 1px solid #c6ead8;
  transition: transform var(--dur-fast, 0.15s) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .pm-clock:hover {
    color: #0b5d3d;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }
}
.pm-clock.late {
  color: #6b4300;
  background: linear-gradient(135deg, #fff1d6, #fff8ea);
  border-color: #f3d9a4;
}
@media (hover: hover) {
  .pm-clock.late:hover {
    color: #6b4300;
  }
}
.pm-clock.done {
  color: #33415c;
  background: linear-gradient(135deg, #eef1f6, #f7f8fb);
  border-color: #dde3ec;
}
@media (hover: hover) {
  .pm-clock.done:hover {
    color: #33415c;
  }
}
.pm-clock.due {
  margin-bottom: 8px;
}
.pm-clock form.pm-clock {
  margin-top: 0;
}

.pm-clock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-clock-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.pm-tag {
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 0.66rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.75);
}

.pm-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.pm-timer {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.pm-track {
  position: relative;
  display: block;
  height: 8px;
  margin-top: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.pm-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.55;
}

.pm-pin {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
}

.pm-now {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid currentColor;
}

.pm-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.pm-clockin {
  width: 100%;
  margin-top: 10px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--kc-accent, var(--mat-sys-primary));
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}
@media (hover: hover) {
  .pm-clockin:hover {
    filter: brightness(0.95);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pm-live {
    animation: kc-clock-pulse 2s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pm-clock:hover {
    transform: translateY(-1px);
  }
}
.dark-theme .pm-pres {
  background: rgba(255, 255, 255, 0.06);
}
.dark-theme .pm-pres button {
  color: rgba(255, 255, 255, 0.67);
}
.dark-theme .pm-pres button.on {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.dark-theme .pm-clock {
  color: #7fe0b5;
  background: rgba(19, 163, 107, 0.14);
  border-color: rgba(19, 163, 107, 0.35);
}
.dark-theme .pm-clock.late {
  color: #ffcf7a;
  background: rgba(226, 145, 0, 0.14);
  border-color: rgba(226, 145, 0, 0.35);
}
.dark-theme .pm-clock.done {
  color: rgba(255, 255, 255, 0.67);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.dark-theme .pm-track {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.dark-theme .pm-now {
  background: #1f2a3d;
}
.dark-theme .pm-tag {
  background: rgba(0, 0, 0, 0.3);
}

.sidebarNav-horizontal .childBox {
  background: var(--mat-sys-surface);
}
.sidebarNav-horizontal .horizontal-topbar .branding {
  padding-left: 0;
}
.sidebarNav-horizontal .horizontal-topbar .container {
  max-width: 1368px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (max-width: 767px) {
  .sidebarNav-horizontal .horizontal-topbar .container {
    padding-left: 0;
    padding-right: 0;
  }
}
.sidebarNav-horizontal .horizontal-sidebar {
  background-color: var(--mat-sys-surface);
}
.sidebarNav-horizontal .horizontal-navbar {
  position: relative;
  gap: 3px !important;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox {
  position: relative;
  z-index: 5;
  margin: 5px 0;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.mega-menu {
  position: static;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.mega-menu:hover > .childBox > .ddmenu {
  display: inline-block;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.mega-menu > .childBox {
  width: 100%;
  left: 0;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.mega-menu > .childBox > .ddmenu {
  width: 23%;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.two-column:hover > .childBox > .ddmenu {
  display: inline-block;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.two-column > .childBox {
  width: 600px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.two-column > .childBox > .ddmenu {
  width: 46%;
  border-radius: 16px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .menuLink {
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 40px;
  gap: 10px;
  font-size: 16px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .menuLink .routeIcon {
  font-size: 22px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .menuLink {
  background-color: var(--mat-sys-primary-fixed-dim);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .activeMenu,
.sidebarNav-horizontal .horizontal-navbar .parentBox .activeMenu {
  color: #ffffff !important;
  background-color: var(--mat-sys-primary);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .activeMenu .routeIcon,
.sidebarNav-horizontal .horizontal-navbar .parentBox .activeMenu .routeIcon {
  color: var(--mat-sys-secondary);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .down-icon .mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .childBox {
  border-radius: 16px;
  box-shadow: var(--mat-sys-level1);
  position: absolute;
  width: 250px;
  background-color: var(--mat-sys-surface);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .childBox .ddmenu {
  display: none;
  padding: 10px;
  margin: 6px;
  position: relative;
  border-radius: 10px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox .childBox .ddmenu .menuLink .routeIcon {
  font-size: 14px;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover {
  background-color: var(--mat-sys-primary-fixed-dim);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover:hover > .childBox > .ddmenu:hover {
  background-color: var(--mat-sys-primary-fixed-dim);
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover > .childBox {
  left: 230px;
  top: 0px;
  z-index: 9;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu:hover > .childBox {
  left: 235px;
  top: 0;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu {
  display: block;
  padding: 0;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu {
  display: block;
  padding: 0;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu {
  display: block;
  padding: 0;
}

.sidebarNav-horizontal .topbar,
.sidebarNav-horizontal .mainWrapper {
  width: 100%;
}
.sidebarNav-horizontal .horizontal-navbar .parentBox.pactive > a, .sidebarNav-horizontal .horizontal-navbar .parentBox.pactive > a:hover, .sidebarNav-horizontal .horizontal-navbar .parentBox.pactive:hover > a {
  background-color: var(--mat-sys-primary);
  color: #ffffff !important;
  border-radius: 10px;
}

.ltr .sidebarNav-horizontal .horizontal-navbar .parentBox:last-child:hover > .childBox > .ddmenu:hover > .childBox {
  right: 250px;
  left: unset;
}
.ltr .sidebarNav-horizontal .horizontal-navbar .parentBox:last-child:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu:hover > .childBox {
  right: 250px;
  left: unset;
}

.rtl .sidebarNav-horizontal .horizontal-navbar .parentBox:last-child:hover > .childBox > .ddmenu:hover > .childBox {
  left: 250px;
  right: unset;
}
.rtl .sidebarNav-horizontal .horizontal-navbar .parentBox:last-child:hover > .childBox > .ddmenu:hover > .childBox > .ddmenu:hover > .childBox {
  left: 250px;
  right: unset;
}

.dark-theme {
  color: rgba(255, 255, 255, 0.67);
}
.dark-theme .text-muted {
  color: rgba(255, 255, 255, 0.67) !important;
}
.dark-theme .mat-mdc-menu-panel {
  color: var(--mat-sys-on-background) !important;
}
.dark-theme .bg-white,
.dark-theme .mdc-menu-surface {
  background-color: var(--mat-sys-surface) !important;
}
.dark-theme .hljs {
  background: var(--mat-sys-surface);
}
.dark-theme .mdc-button.bg-dark\! {
  color: var(--mat-sys-background) !important;
}
.dark-theme .customizer-button-group .mat-button-toggle-appearance-standard.mat-button-toggle-checked i-tabler.fill-icon {
  fill: var(--mat-sys-primary-fixed-dim);
}

html.dark-theme .logodark {
  display: none;
}

html.light-theme .logolight {
  display: none;
}

/**
 * Workforce scheduling calendar (apps/calendar).
 *
 * FullCalendar renders unstyled by default; every rule below is either a
 * FullCalendar override (the `.fc-*` selectors, all theme-token driven so
 * light/dark and the six colour themes apply without a rebuild) or one of
 * this page's own controls (kc-*), built from the same tokens the rest of
 * the dashboard uses (--color-*, --mat-sys-*).
 */
.kc-view-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.kc-view-switch__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mat-sys-on-surface-variant, inherit);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
}
.kc-view-switch__btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}
@media (hover: hover) {
  .kc-view-switch__btn:hover {
    background: var(--mat-option-focus-state-layer-color, rgba(0, 0, 0, 0.04));
  }
}
.kc-view-switch__btn.is-active {
  background: var(--color-primary);
  color: #fff;
}

.kc-jump-date {
  width: 150px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
.kc-jump-date:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.kc-side-search,
.kc-side-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  font-size: 13px;
}
.kc-side-search:focus-visible,
.kc-side-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.kc-plain-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.kc-side-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.kc-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.kc-dot--primary {
  background: var(--color-primary);
}
.kc-dot--secondary {
  background: var(--color-secondary);
}
.kc-dot--success {
  background: var(--color-success);
}
.kc-dot--warning {
  background: var(--color-warning);
}
.kc-dot--error {
  background: var(--color-error);
}
.kc-dot--info {
  background: var(--color-info);
}
.kc-dot--muted {
  background: var(--mat-sys-outline, #9aa5b1);
}

.kc-modal-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mat-sys-on-surface-variant, #8695aa);
  margin: 22px 0 12px;
}
.kc-modal-section:first-child {
  margin-top: 0;
}
.kc-modal-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.kc-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--color-light-primary);
  color: var(--color-primary);
}

.kc-type-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kc-type-picker__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--mat-sys-on-surface-variant, inherit);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-type-picker__btn:hover {
    border-color: var(--tone, var(--color-primary));
  }
}
.kc-type-picker__btn.is-active {
  background: var(--tone-light, var(--color-light-primary));
  border-color: var(--tone, var(--color-primary));
  color: var(--tone, var(--color-primary));
}
.kc-type-picker__btn--secondary {
  --tone: var(--color-secondary);
  --tone-light: var(--color-light-secondary);
}
.kc-type-picker__btn--success {
  --tone: var(--color-success);
  --tone-light: var(--color-light-success);
}
.kc-type-picker__btn--muted {
  --tone: var(--mat-sys-outline, #6b7684);
  --tone-light: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.06));
}

.kc-allday-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.kc-allday-toggle:has(input:checked) {
  background: var(--color-light-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.kc-allday-toggle input {
  margin: 0;
}

.kc-inline-panel {
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.025));
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
}

.kc-cal-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--mat-sys-surface, #fff) 70%, transparent);
  border-radius: inherit;
}
.kc-cal-loading.is-visible {
  display: flex;
}

.kc-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: kc-spin var(--dur-spin) linear infinite;
}

.kc-cal-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--color-light-error);
  color: var(--color-error);
  font-size: 13px;
}
.kc-cal-error.hidden {
  display: none;
}

.kc-conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--color-light-warning);
  color: var(--warning-color);
  font-size: 13px;
}
.kc-conflict-banner.hidden {
  display: none;
}

.kc-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-light-primary);
  color: var(--color-primary);
}

.fc .fc-event.kc-evt--primary, .fc-event.kc-evt--primary {
  --evt: var(--color-primary);
}

.fc .fc-event.kc-evt--secondary, .fc-event.kc-evt--secondary {
  --evt: var(--color-secondary);
}

.fc .fc-event.kc-evt--success, .fc-event.kc-evt--success {
  --evt: var(--color-success);
}

.fc .fc-event.kc-evt--warning, .fc-event.kc-evt--warning {
  --evt: var(--color-warning);
}

.fc .fc-event.kc-evt--error, .fc-event.kc-evt--error {
  --evt: var(--color-error);
}

.fc .fc-event.kc-evt--info, .fc-event.kc-evt--info {
  --evt: var(--color-info);
}

.fc .fc-event.kc-evt--muted, .fc-event.kc-evt--muted {
  --evt: var(--mat-sys-outline, #7c8fac);
}

.fc {
  --fc-border-color: var(--color-border);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.03));
  --fc-list-event-hover-bg-color: var(--mat-option-focus-state-layer-color, rgba(0, 0, 0, 0.04));
  --fc-today-bg-color: var(--color-light-primary);
  font-family: inherit;
}
.fc a {
  color: inherit;
}
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
  color: inherit;
  font-size: 13px;
}
.fc .fc-event {
  background: color-mix(in srgb, var(--evt, var(--color-primary)) 12%, var(--mat-sys-surface, #fff));
  border: 0;
  border-left: 3px solid var(--evt, var(--color-primary));
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fc .fc-event, .fc .fc-event .fc-event-title, .fc .fc-event .fc-event-time, .fc .fc-event .fc-event-main {
  color: color-mix(in srgb, var(--evt, var(--color-primary)) 72%, var(--mat-sys-on-surface, #1f2a3d));
}
.fc .fc-event .fc-event-time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
  flex-shrink: 0;
  overflow: visible;
}
.fc .fc-event .fc-event-title {
  min-width: 0;
}
@media (hover: hover) {
  .fc .fc-event:hover {
    transform: translateY(calc(var(--motion-lift) / 2));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    z-index: 5;
  }
}
.fc .fc-event.kc-evt--conflict {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-error) 70%, transparent);
  border-left-color: var(--color-error);
}
.fc .fc-event.kc-evt--cancelled {
  opacity: 0.7;
}
.fc .fc-event.kc-evt--cancelled .fc-event-title {
  text-decoration: line-through;
}
.fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
  display: none;
}
@media (hover: hover) {
  .fc .fc-daygrid-dot-event:hover {
    background: color-mix(in srgb, var(--evt, var(--color-primary)) 18%, var(--mat-sys-surface, #fff));
  }
}
.fc .fc-scrollgrid {
  border-radius: 14px;
  overflow: hidden;
}
.fc .fc-col-header-cell {
  background: color-mix(in srgb, var(--mat-sys-outline, #7c8fac) 7%, transparent);
  padding: 8px 0;
}
.fc .fc-col-header-cell .fc-col-header-cell-cushion {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mat-sys-on-surface, #1f2a3d) 60%, transparent);
}
.fc .fc-day-sat, .fc .fc-day-sun {
  background: color-mix(in srgb, var(--mat-sys-outline, #7c8fac) 4%, transparent);
}
.fc .fc-daygrid-day-frame {
  min-height: 108px;
  padding: 2px;
}
.fc .fc-daygrid-day-top {
  flex-direction: row;
  padding: 4px 4px 2px;
}
.fc .fc-daygrid-day-number {
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.fc .fc-day-other .fc-daygrid-day-number {
  opacity: 0.45;
}
.fc .fc-day-today {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--color-primary);
  color: #fff;
}
.fc .fc-daygrid-more-link {
  display: inline-block;
  margin: 2px 4px 0;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--mat-sys-outline, #7c8fac) 12%, transparent);
  color: inherit;
}
@media (hover: hover) {
  .fc .fc-daygrid-more-link:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    text-decoration: none;
  }
}
.fc .fc-popover {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
  border: 1px solid var(--color-border);
}
.fc .fc-popover-header {
  font-weight: 700;
  padding: 8px 10px;
}
.fc .fc-timegrid-slot {
  height: 2.6em;
}
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion {
  font-size: 11px;
  font-weight: 700;
  color: var(--mat-sys-outline, #7c8fac);
}
.fc .fc-timegrid-event {
  border-left-width: 3px;
}
.fc .fc-timegrid-event .fc-event-main {
  padding: 2px 3px;
}
.fc .fc-list {
  border-radius: 14px;
  overflow: hidden;
}
.fc .fc-list-day-cushion {
  background: color-mix(in srgb, var(--mat-sys-outline, #7c8fac) 7%, transparent) !important;
  font-size: 12px;
  font-weight: 800;
}
.fc .fc-list-event td {
  font-size: 13px;
}
.fc .fc-list-event-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fc .fc-list-event {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border-left: 0;
}
.fc .fc-list-event, .fc .fc-list-event td, .fc .fc-list-event .fc-event-title, .fc .fc-list-event .fc-event-time {
  color: var(--mat-sys-on-surface, inherit);
}
.fc .fc-list-event.kc-evt--muted td {
  opacity: 0.6;
}
@media (hover: hover) {
  .fc .fc-list-event:hover td {
    background: color-mix(in srgb, var(--evt, var(--color-primary)) 6%, transparent);
  }
}
.fc .fc-list-empty {
  background: transparent;
}
.fc .fc-bg-event {
  opacity: 0.16;
}
.fc .fc-list-event-dot {
  border-color: var(--evt, currentColor) !important;
}
.fc .fc-daygrid-event-dot {
  border-color: currentColor;
}
.fc .fc-timegrid-now-indicator-line,
.fc .fc-timegrid-now-indicator-arrow {
  border-color: var(--color-error);
}

@media (max-width: 1279px) {
  .detail-part.movetodetail {
    display: block;
    position: absolute;
    z-index: 9;
    left: 0;
    background: var(--mat-card-elevated-container-color);
  }
}
@media (max-width: 1279px) {
  .welcome-app {
    display: none;
  }
}
@media (max-width: 959px) {
  .contact-detail-part {
    display: none;
  }
  .contact-detail-part.activeContact {
    position: absolute !important;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: var(--mat-card-elevated-container-color);
  }
}
.contact-listing .mdc-list-item__primary-text {
  margin-bottom: -11px !important;
  margin-top: 10px !important;
}

/**
 * Kanban (apps/kanban). Board/column/card system built from the same tokens
 * (--color-*, --mat-sys-*) the rest of the app uses — see apps/_notes.scss
 * for the sibling redesign this borrows its toolbar language from.
 *
 * Workflow columns (To Do -> In Progress -> Review -> Completed) and the
 * separate, optional On Hold state are entirely DB-driven (KanbanColumn);
 * everything here is presentation only.
 */
.kc-kanban-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.045));
  font-weight: 600;
  color: var(--mat-sys-on-surface-variant, inherit);
}

.kc-kanban-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.kc-kanban-toolbar__divider {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--color-border);
}
@media (max-width: 900px) {
  .kc-kanban-toolbar__divider {
    display: none;
  }
}

.kc-kanban-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 240px;
  max-width: 320px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-kanban-search .iconify {
  color: var(--mat-sys-on-surface-variant, #8695aa);
}
.kc-kanban-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100%;
  color: inherit;
}
.kc-kanban-search input::placeholder {
  color: var(--mat-sys-on-surface-variant, #8695aa);
}
.kc-kanban-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-light-primary);
}

.kc-kanban-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kc-kanban-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: var(--mat-sys-on-surface-variant, inherit);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-kanban-filter-pill:hover {
    box-shadow: inset 0 0 0 1px var(--mat-sys-outline, currentColor);
  }
}
.kc-kanban-filter-pill.is-active {
  background: var(--mat-sys-on-surface-variant, #111c2d);
  color: #fff;
}
.kc-kanban-filter-pill.is-active .kc-dot {
  background: #fff;
}

.kc-kanban-assignee-filter {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  min-width: 160px;
}
.kc-kanban-assignee-filter:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-light-primary);
}

.kc-kanban-board {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.kc-kanban-board::-webkit-scrollbar {
  height: 8px;
}

.kc-kanban-col {
  min-width: 300px;
  width: 300px;
  flex-shrink: 0;
}

.kc-kanban-col__card {
  height: 100%;
}

.kc-kanban-col__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kc-kanban-col--hold .kc-kanban-col__card {
  border-style: dashed;
  border-color: var(--mat-sys-outline-variant);
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.02));
  box-shadow: none;
}

.kc-kanban-col__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kc-kanban-col__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.kc-kanban-col__dot--secondary {
  background: var(--color-secondary);
}
.kc-kanban-col__dot--warning {
  background: var(--color-warning);
}
.kc-kanban-col__dot--info {
  background: var(--color-info);
}
.kc-kanban-col__dot--success {
  background: var(--color-success);
}
.kc-kanban-col__dot--muted {
  background: var(--mat-sys-outline, #9aa5b1);
}

.kc-kanban-col__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.kc-kanban-col__paused {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px dashed var(--mat-sys-outline-variant);
  color: var(--mat-sys-on-surface-variant, #8695aa);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kc-kanban-col__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-light-primary);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
}

.kc-kanban-col__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 80px;
}

.kc-kanban-col__empty {
  font-size: 12px;
  color: var(--mat-sys-on-surface-variant, #8695aa);
  text-align: center;
  padding: 16px 0;
  margin: 0;
}
.kc-kanban-col__empty[hidden] {
  display: none;
}

.kc-kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--mat-sys-surface, #fff);
  padding: 14px 14px 12px;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kc-kanban-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--tone, var(--color-primary));
}
@media (hover: hover) {
  .kc-kanban-card:hover {
    box-shadow: var(--shadow-sm);
  }
}
.kc-kanban-card--error {
  --tone: var(--color-error);
}
.kc-kanban-card--warning {
  --tone: var(--color-warning);
}
.kc-kanban-card--success {
  --tone: var(--color-success);
}
.kc-kanban-card[hidden] {
  display: none;
}

.kc-kanban-card__title {
  font-size: 13.5px;
  font-weight: 500;
  margin: 0;
  overflow-wrap: anywhere;
}

.kc-kanban-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.kc-kanban-card__desc {
  font-size: 12px;
  color: var(--mat-sys-on-surface-variant, #8695aa);
  margin: 0;
}

.kc-kanban-card__image {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}

.kc-kanban-card__file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.kc-kanban-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.kc-kanban-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.kc-kanban-badge--category {
  background: var(--color-light-secondary);
  color: var(--color-secondary);
}
.kc-kanban-badge--error {
  background: var(--color-light-error);
  color: var(--color-error);
}
.kc-kanban-badge--warning {
  background: var(--color-light-warning);
  color: var(--color-warning);
}
.kc-kanban-badge--success {
  background: var(--color-light-success);
  color: var(--color-success);
}
.kc-kanban-badge--neutral {
  background: #fff;
  color: var(--mat-sys-on-surface-variant, inherit);
  border: 1px solid var(--color-border);
}

.kc-kanban-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.kc-kanban-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.kc-kanban-add__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kc-kanban-add__input {
  flex: 1;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid transparent;
  outline: none;
  color: inherit;
}
.kc-kanban-add__input:focus {
  border-color: var(--color-primary);
}

.kc-kanban-add__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--color-light-primary);
  color: var(--color-primary);
  font-size: 11.5px;
  font-weight: 500;
  max-width: 100%;
}
.kc-kanban-add__chip button {
  display: flex;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-kanban-add__chip button:hover {
    opacity: 1;
  }
}
.kc-kanban-add__chip[hidden] {
  display: none;
}

.kc-kanban-attachment__picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px dashed var(--color-border);
  color: var(--mat-sys-on-surface-variant, inherit);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-kanban-attachment__picker:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

.kc-kanban-attachment__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.kc-kanban-attachment__preview[hidden] {
  display: none;
}

.kc-kanban-attachment__thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.kc-kanban-attachment__thumb[hidden] {
  display: none;
}

.kc-kanban-attachment__file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  min-width: 0;
  flex: 1;
}
.kc-kanban-attachment__file[hidden] {
  display: none;
}

/**
 * Notes (apps/notes). A dashboard-style redesign of the sticky-note card
 * grid: neutral card surfaces with a colour accent (rather than a fully
 * tinted background) plus filter pills and a swatch picker, all built from
 * the same tokens (--color-*, --mat-sys-*) the rest of the app uses.
 */
/*
 * No page-specific padding rule needed here. The bug was a stray `!`
 * appended straight onto the class name in the view (`mat-mdc-card-content!`
 * — meant to invoke Tailwind's `!important` suffix, which only rewrites
 * Tailwind's *own* utility names, not an arbitrary class like this one). The
 * class the element actually carried was the literal, never-matched string
 * "mat-mdc-card-content!", so zero rules applied and the header content
 * (the "New note" button included) sat flush against the card edge.
 *
 * With the real class name restored in the view, this app's own existing
 * `.mat-mdc-card > .mat-mdc-card-content { padding: $card-spacer }` rule
 * (override-component/_card.scss, $card-spacer: 24px) applies exactly as it
 * already does on every other card in the app — the fix is that one class
 * name, not a new padding value invented for this page alone.
 */
.kc-modal-icon--sm {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
}

.kc-notes-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.045));
  font-weight: 600;
  color: var(--mat-sys-on-surface-variant, inherit);
}

.kc-notes-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.kc-notes-toolbar__divider {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--color-border);
}
@media (max-width: 640px) {
  .kc-notes-toolbar__divider {
    display: none;
  }
}

.kc-notes-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 260px;
  max-width: 340px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-notes-search .iconify {
  color: var(--mat-sys-on-surface-variant, #8695aa);
}
.kc-notes-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100%;
  color: inherit;
}
.kc-notes-search input::placeholder {
  color: var(--mat-sys-on-surface-variant, #8695aa);
}
.kc-notes-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-light-primary);
}

.kc-notes-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kc-notes-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--mat-sys-surface-container, rgba(0, 0, 0, 0.035));
  color: var(--mat-sys-on-surface-variant, inherit);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-notes-color-pill:hover {
    box-shadow: inset 0 0 0 1px var(--tone, var(--mat-sys-outline, currentColor));
  }
}
.kc-notes-color-pill.is-active {
  background: var(--tone, var(--mat-sys-on-surface-variant));
  color: #fff;
  box-shadow: none;
}
.kc-notes-color-pill.is-active .kc-dot {
  background: #fff;
}
.kc-notes-color-pill--all {
  --tone: var(--mat-sys-on-surface, #111c2d);
}
.kc-notes-color-pill--primary {
  --tone: var(--color-primary);
}
.kc-notes-color-pill--warning {
  --tone: var(--color-warning);
}
.kc-notes-color-pill--error {
  --tone: var(--color-error);
}
.kc-notes-color-pill--success {
  --tone: var(--color-success);
}
.kc-notes-color-pill--info {
  --tone: var(--color-info);
}

.kc-note-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--mat-sys-surface, #fff);
  padding: 16px 16px 14px;
  gap: 10px;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kc-note-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--tone, var(--color-primary));
}
@media (hover: hover) {
  .kc-note-card:hover {
    box-shadow: var(--shadow-sm);
  }
}
.kc-note-card.kc-note-card--primary {
  --tone: var(--color-primary);
}
.kc-note-card.kc-note-card--warning {
  --tone: var(--color-warning);
}
.kc-note-card.kc-note-card--error {
  --tone: var(--color-error);
}
.kc-note-card.kc-note-card--success {
  --tone: var(--color-success);
}
.kc-note-card.kc-note-card--info {
  --tone: var(--color-info);
}

.kc-note-card__body {
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  margin: 0;
}
.kc-note-card__body.kc-is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kc-note-card__more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tone, var(--color-primary));
  cursor: pointer;
}

.kc-note-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.kc-note-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kc-note-card__time {
  font-size: 11.5px;
  color: var(--mat-sys-on-surface-variant, #8695aa);
}

.kc-note-card__related {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--mat-sys-on-surface-variant, inherit);
  max-width: 100%;
}
.kc-note-card__related img {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.kc-note-card__related span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc-note-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.kc-swatch-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kc-swatch {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.kc-swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.kc-swatch .iconify {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.kc-swatch:has(input:checked) {
  box-shadow: 0 0 0 2px var(--mat-sys-surface, #fff), 0 0 0 4px var(--tone, var(--color-primary));
}
.kc-swatch:has(input:checked) .iconify {
  opacity: 1;
}
.kc-swatch.kc-swatch--primary {
  --tone: var(--color-primary);
  background: var(--color-primary);
}
.kc-swatch.kc-swatch--warning {
  --tone: var(--color-warning);
  background: var(--color-warning);
}
.kc-swatch.kc-swatch--error {
  --tone: var(--color-error);
  background: var(--color-error);
}
.kc-swatch.kc-swatch--success {
  --tone: var(--color-success);
  background: var(--color-success);
}
.kc-swatch.kc-swatch--info {
  --tone: var(--color-info);
  background: var(--color-info);
}

.kc-contact-picker {
  position: relative;
}

.kc-contact-picker__results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--mat-sys-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.kc-contact-picker__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.kc-contact-picker__option img {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (hover: hover) {
  .kc-contact-picker__option:hover {
    background: var(--mat-option-focus-state-layer-color, rgba(0, 0, 0, 0.04));
  }
}

.kc-contact-picker__selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-light-primary);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
}
.kc-contact-picker__selected img {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}
.kc-contact-picker__selected button {
  display: flex;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-contact-picker__selected button:hover {
    opacity: 1;
  }
}

.kc-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--mat-sys-on-surface-variant, #8695aa);
  text-align: center;
}

body .NgxEditor__Wrapper {
  border: 1px solid var(--mat-sys-outline-variant);
}
body .NgxEditor__Seperator {
  border-left: 1px solid var(--mat-sys-outline-variant);
}
body .NgxEditor__MenuBar {
  background-color: var(--mat-card-elevated-container-color);
  border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
}
body .NgxEditor {
  background: var(--mat-card-elevated-container-color);
  color: var(--mat-sys-on-background);
}
@media (hover: hover) {
  body .NgxEditor__MenuItem .NgxEditor__MenuItem--Icon:hover {
    background-color: var(--mat-sys-primary);
    color: var(--mat-sys-background);
  }
}
@media (hover: hover) {
  body .NgxEditor__Dropdown:hover {
    background-color: var(--mat-sys-primary);
  }
  body .NgxEditor__Dropdown:hover .NgxEditor__Dropdown--Text {
    color: var(--mat-sys-background);
  }
}
body .NgxEditor__Dropdown .NgxEditor__Dropdown--Selected,
body .NgxEditor__Dropdown .NgxEditor__Dropdown--Open {
  color: var(--mat-sys-background);
  background-color: var(--mat-sys-primary);
}
@media (hover: hover) {
  body .NgxEditor__Dropdown .NgxEditor__Dropdown--Item:hover {
    background-color: var(--mat-sys-primary-fixed-dim);
    color: var(--mat-sys-primary);
  }
}
body .NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu {
  background-color: var(--mat-card-elevated-container-color);
}

/**
 * Admin recruitment module: the Edit/New Job form, its status badges, and the
 * confirmation dialog's tone-coloured icon. Scoped to `.kc-jobform` /
 * `.kc-status-badge` / `.kc-confirm__icon` so nothing here leaks into the rest
 * of the dashboard, which already gets its card/button/form-field styling
 * from override-component/*.scss.
 */
.kc-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.kc-confirm__icon--primary {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, white);
  color: var(--mat-sys-primary);
}
.kc-confirm__icon--danger {
  background: color-mix(in srgb, var(--mat-sys-error) 12%, white);
  color: var(--mat-sys-error);
}

.kc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kc-status-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.kc-status-badge--draft {
  background: var(--mat-sys-surface-container);
  color: var(--mat-sys-on-surface-variant);
}
.kc-status-badge--published {
  background: color-mix(in srgb, #70C748 15%, white);
  color: color-mix(in srgb, #70C748 55%, black);
}
.kc-status-badge--paused {
  background: color-mix(in srgb, #F6B51E 20%, white);
  color: color-mix(in srgb, #F6B51E 55%, black);
}
.kc-status-badge--closed {
  background: color-mix(in srgb, var(--mat-sys-error) 12%, white);
  color: var(--mat-sys-error);
}
.kc-status-badge--archived {
  background: var(--mat-sys-surface-container-high);
  color: var(--mat-sys-on-surface-variant);
}

.kc-jobform {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
  .kc-jobform {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}
.kc-jobform__nav {
  display: none;
}
@media (min-width: 1024px) {
  .kc-jobform__nav {
    display: block;
    position: sticky;
    top: 24px;
  }
}
.kc-jobform__nav .mat-mdc-card-content {
  padding: 10px !important;
}
.kc-jobform__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-jobform__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface-variant);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kc-jobform__nav a:focus-visible {
  background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  color: var(--mat-sys-primary);
}
@media (hover: hover) {
  .kc-jobform__nav a:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
    color: var(--mat-sys-primary);
  }
}
.kc-jobform__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.kc-jobform__section {
  scroll-margin-top: 24px;
}
.kc-jobform__section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kc-jobform__section-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mat-sys-primary) 10%, white);
  color: var(--mat-sys-primary);
}
.kc-jobform__section-header h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.kc-jobform__section-header p {
  margin: 3px 0 0;
  font-size: 0.84rem;
  color: var(--mat-sys-on-surface-variant);
}
.kc-jobform__actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--mat-sys-outline-variant);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 -8px 24px rgba(16, 22, 30, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.kc-jobform select.mat-mdc-select-native {
  text-overflow: ellipsis;
}
.kc-jobform {
  /*
   * Field outlines are measured at rgb(229,230,230) — the theme's
   * `--mat-sys-outline` token — against a white card: a contrast ratio of
   * roughly 1.2:1. Combined with rows sitting only 20px apart, adjacent
   * fields read as one continuous block with no visible boundary rather than
   * as separate inputs. Two independent fixes, both scoped to this page:
   * a visibly darker, thicker outline, and more air between rows.
   *
   * The darker outline needs to match the specificity of the rule it's
   * overriding (`.mdc-text-field--outlined:not(.mdc-text-field--disabled)
   * .mat-mdc-notch-piece` in the extracted Material CSS) — three class-level
   * selectors — so it wins on cascade order (this file compiles into app.css,
   * loaded after material.css) rather than needing `!important`.
   */
}
.kc-jobform .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
  border-color: color-mix(in srgb, var(--mat-sys-on-surface) 32%, transparent);
}
@media (hover: hover) {
  .kc-jobform .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mat-mdc-notch-piece {
    border-color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent);
  }
}
.kc-jobform .kc-chipfield__hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--mat-sys-on-surface-variant);
}
.kc-jobform .kc-chipfield__detail {
  margin-top: 14px;
  max-width: 420px;
}
.kc-jobform .kc-chip-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 15px 14px 11px;
  border-radius: var(--mat-sys-corner-small, 4px);
  border: 1.5px solid color-mix(in srgb, var(--mat-sys-on-surface) 32%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-jobform .kc-chip-grid:hover {
    border-color: color-mix(in srgb, var(--mat-sys-on-surface) 55%, transparent);
  }
}
.kc-jobform .kc-chip-grid:focus-within {
  border-color: var(--mat-sys-primary);
}
.kc-jobform .kc-chip-grid__label {
  position: absolute;
  top: -8px;
  left: 11px;
  padding: 0 5px;
  background: var(--mat-sys-surface, #fff);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mat-sys-on-surface-variant);
}
.kc-jobform .kc-chip-grid__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.kc-jobform .kc-chip-grid__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, white);
  color: var(--mat-sys-primary);
}
.kc-jobform .kc-chip-grid__chip-remove {
  appearance: none;
  cursor: pointer;
  border: none;
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mat-sys-primary) 18%, transparent);
  color: var(--mat-sys-primary);
}
@media (hover: hover) {
  .kc-jobform .kc-chip-grid__chip-remove:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
  }
}
.kc-jobform .kc-chip-grid__addwrap {
  position: relative;
  flex: 0 0 auto;
}
.kc-jobform .kc-chip-grid__add {
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px dashed color-mix(in srgb, var(--mat-sys-on-surface) 35%, transparent);
  background: transparent;
  color: var(--mat-sys-on-surface-variant);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kc-jobform .kc-chip-grid__add[aria-expanded=true] {
  border-color: var(--mat-sys-primary);
  color: var(--mat-sys-primary);
  border-style: solid;
}
@media (hover: hover) {
  .kc-jobform .kc-chip-grid__add:hover {
    border-color: var(--mat-sys-primary);
    color: var(--mat-sys-primary);
    border-style: solid;
  }
}
.kc-jobform .kc-chip-grid__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--mat-sys-surface-container, #fff);
  border-radius: 12px;
  border: 1px solid var(--mat-sys-outline-variant);
  box-shadow: 0 12px 32px rgba(16, 22, 30, 0.16);
}
.kc-jobform .kc-chip-grid__menu-item {
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mat-sys-on-surface);
}
@media (hover: hover) {
  .kc-jobform .kc-chip-grid__menu-item:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
    color: var(--mat-sys-primary);
  }
}
.kc-jobform .kc-chip-grid__menu-empty {
  margin: 4px 8px;
  font-size: 0.8rem;
  color: var(--mat-sys-on-surface-variant);
}
.kc-jobform__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.kc-jobform__generate {
  appearance: none;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid color-mix(in srgb, var(--mat-sys-primary) 45%, transparent);
  background: color-mix(in srgb, var(--mat-sys-primary) 8%, white);
  color: var(--mat-sys-primary);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-jobform__generate:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 15%, white);
  }
}
.kc-jobform .kc-seo-field__footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.kc-jobform .kc-seo-field__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mat-sys-primary);
}
.kc-jobform .kc-seo-field__count {
  font-size: 0.74rem;
  color: var(--mat-sys-on-surface-variant);
}
.kc-jobform .kc-seo-field__count--over {
  color: #F6B51E;
}

.kc-form-errors {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--mat-sys-error) 8%, white);
  border: 1px solid color-mix(in srgb, var(--mat-sys-error) 30%, white);
}
.kc-form-errors__icon {
  color: var(--mat-sys-error);
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-form-errors strong {
  color: var(--mat-sys-error);
}
.kc-form-errors ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  font-size: 0.85rem;
}
.kc-form-errors a {
  color: var(--mat-sys-error);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/**
 * Flatpickr (bundled in vendor.js, driven by resources/js/material/
 * datetime-split.js) renders its own calendar/time popup directly on
 * <body>, outside any scoped wrapper — so, like _calendar.scss's
 * FullCalendar overrides, these are global, unscoped vendor-class rules.
 * `!important` throughout for the same reason those use it: vendor.css
 * loads after app.css, so without it flatpickr's own bundled theme would
 * win on cascade order alone.
 */
.flatpickr-calendar {
  font-family: "Onest", sans-serif !important;
  background: var(--mat-sys-surface-container, #fff) !important;
  border: 1px solid var(--mat-sys-outline-variant) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(16, 22, 30, 0.16) !important;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  display: none !important;
}

.flatpickr-months, .flatpickr-weekdays, .flatpickr-innerContainer, .flatpickr-rContainer,
.flatpickr-days, .dayContainer {
  background: transparent !important;
}

.flatpickr-months {
  padding: 12px 8px 0 !important;
}
.flatpickr-months .flatpickr-current-month {
  font-weight: 700 !important;
  color: var(--mat-sys-on-surface) !important;
}
.flatpickr-months .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  color: var(--mat-sys-on-surface-variant) !important;
  fill: var(--mat-sys-on-surface-variant) !important;
}
@media (hover: hover) {
  .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
    color: var(--mat-sys-primary) !important;
    fill: var(--mat-sys-primary) !important;
  }
}

.numInputWrapper input, .flatpickr-monthDropdown-months {
  color: var(--mat-sys-on-surface) !important;
}

span.flatpickr-weekday {
  color: var(--mat-sys-on-surface-variant) !important;
  font-weight: 600 !important;
}

.flatpickr-day {
  border-radius: 10px !important;
  color: var(--mat-sys-on-surface) !important;
}
.flatpickr-day.today {
  border-color: var(--mat-sys-primary) !important;
}
.flatpickr-day:focus {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent) !important;
  border-color: transparent !important;
}
@media (hover: hover) {
  .flatpickr-day:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent) !important;
    border-color: transparent !important;
  }
}
.flatpickr-day.selected, .flatpickr-day.selected:focus {
  background: var(--mat-sys-primary) !important;
  border-color: var(--mat-sys-primary) !important;
  color: #ffffff !important;
}
@media (hover: hover) {
  .flatpickr-day.selected:hover {
    background: var(--mat-sys-primary) !important;
    border-color: var(--mat-sys-primary) !important;
    color: #ffffff !important;
  }
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--mat-sys-outline) !important;
}

.flatpickr-time {
  background: transparent !important;
  border-top: 1px solid var(--mat-sys-outline-variant) !important;
}
.flatpickr-time input {
  font-family: "Onest", sans-serif !important;
  font-weight: 600 !important;
  color: var(--mat-sys-on-surface) !important;
}
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  color: var(--mat-sys-on-surface-variant) !important;
}
@media (hover: hover) {
  .flatpickr-time .numInputWrapper:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent) !important;
  }
}

/**
 * The typing indicator's three-dot bubble (pages/apps/chat.php). Everything
 * else in the chat UI reuses existing card/badge/button styling — this is
 * the one genuinely new visual element the feature needed, since nothing
 * else in the template already animates.
 */
.kc-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kc-chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mat-sys-on-surface-variant);
  animation: kc-pulse var(--dur-pulse) infinite var(--ease-out) both;
}
.kc-chat-typing-dots span:nth-child(1) {
  animation-delay: calc(var(--dur-pulse) * -0.3);
}
.kc-chat-typing-dots span:nth-child(2) {
  animation-delay: calc(var(--dur-pulse) * -0.15);
}

[data-chat-input] {
  line-height: 1.4;
  max-height: 160px;
}

/**
 * Roles & Permissions (pages/apps/permission.php) — a pure visual redesign
 * of a page that was already, and remains, entirely read-only: nothing here
 * changes what data is fetched or how EnsurePermission enforces it.
 */
.kc-perm-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mat-sys-primary) 10%, white);
  color: var(--mat-sys-primary);
}

.kc-perm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.kc-perm-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.kc-perm-toolbar__btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--mat-sys-outline-variant);
  background: transparent;
  color: var(--mat-sys-on-surface-variant);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-perm-toolbar__btn:hover {
    border-color: var(--mat-sys-primary);
    color: var(--mat-sys-primary);
  }
}

.kc-perm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  min-width: 220px;
  border: 1.5px solid var(--mat-sys-outline-variant);
  color: var(--mat-sys-on-surface-variant);
}
.kc-perm-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.84rem;
  width: 100%;
  color: var(--mat-sys-on-surface);
}
.kc-perm-search input::placeholder {
  color: var(--mat-sys-on-surface-variant);
}

.kc-perm-select {
  appearance: none;
  cursor: pointer;
  font: inherit;
  padding: 8px 32px 8px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  border: 1.5px solid var(--mat-sys-outline-variant);
  background: transparent;
  color: var(--mat-sys-on-surface);
}

.kc-perm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--mat-sys-on-surface-variant);
  margin-bottom: 14px;
}
.kc-perm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kc-perm-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.kc-perm-dot--on {
  background: color-mix(in srgb, #70C748 16%, white);
  color: color-mix(in srgb, #70C748 55%, black);
}
.kc-perm-dot--off {
  width: 7px;
  height: 7px;
  background: var(--mat-sys-outline-variant);
}

.kc-perm-table {
  border-collapse: separate;
}
.kc-perm-table th, .kc-perm-table td {
  white-space: nowrap;
}

.kc-perm-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--mat-sys-outline-variant);
}

.kc-perm-table__sticky-col {
  background: var(--mat-sys-surface, #fff);
  box-shadow: 2px 0 0 0 var(--mat-sys-outline-variant);
}

@media (max-width: 640px) {
  .kc-perm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .kc-perm-toolbar__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .kc-perm-search, .kc-perm-select {
    width: 100%;
  }
}
/* ==============================================================================
   Tickets module — desk (list + rail), workspace, create form.

   Shares the design language of the notification centre (_notification-center):
   token-driven surfaces, soft shadow, sticky filter rail, iOS-ish controls.
   No Material card chrome, so nothing inherited to override.
   ============================================================================ */
/* -------------------------------------------------------------- shared bits */
.kc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
}
.kc-field__req {
  color: var(--mat-sys-error);
}
.kc-field__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: inherit;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-field__input:focus {
  outline: none;
  border-color: var(--mat-sys-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-sys-primary) 18%, transparent);
}
.kc-field textarea.kc-field__input {
  resize: vertical;
  min-height: 90px;
}
.kc-field__hint {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-field__error {
  font-size: 0.75rem;
  color: var(--mat-sys-error);
  font-weight: 500;
}
.kc-field__file {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
}

.kc-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kc-tbtn--sm {
  padding: 6px 12px;
  font-size: 0.75rem;
}
.kc-tbtn--block {
  width: 100%;
}
.kc-tbtn--primary {
  background: var(--mat-sys-primary);
  color: #fff;
}
@media (hover: hover) {
  .kc-tbtn--primary:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 86%, #000);
  }
}
.kc-tbtn--outline {
  border-color: var(--border);
  color: var(--mat-sys-primary);
  background: var(--mat-sys-surface);
}
@media (hover: hover) {
  .kc-tbtn--outline:hover {
    border-color: var(--mat-sys-primary);
    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
  }
}
.kc-tbtn--ghost {
  border-color: var(--border);
  color: var(--mat-sys-on-surface);
  background: var(--mat-sys-surface);
}
@media (hover: hover) {
  .kc-tbtn--ghost:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
  }
}
.kc-tbtn--danger-ghost {
  border-color: color-mix(in srgb, var(--mat-sys-error) 35%, transparent);
  color: var(--mat-sys-error);
  background: transparent;
}
@media (hover: hover) {
  .kc-tbtn--danger-ghost:hover {
    background: color-mix(in srgb, var(--mat-sys-error) 10%, transparent);
  }
}
.kc-tbtn:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 2px;
}

.kc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-iconbtn:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
    color: var(--mat-sys-on-surface);
  }
}
.kc-iconbtn:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}

/* ------------------------------------------------------ priority bar meter */
.kc-tpri {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  --kc-tpri-c: var(--mat-sys-surface-container-lowest);
}
.kc-tpri--danger {
  --kc-tpri-c: #dc2626;
}
.kc-tpri--warning {
  --kc-tpri-c: #d97706;
}
.kc-tpri--info {
  --kc-tpri-c: #2563eb;
}
.kc-tpri--muted {
  --kc-tpri-c: #6b7280;
}
.kc-tpri__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.kc-tpri__bar {
  width: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 16%, transparent);
}
.kc-tpri__bar:nth-child(1) {
  height: 5px;
}
.kc-tpri__bar:nth-child(2) {
  height: 7px;
}
.kc-tpri__bar:nth-child(3) {
  height: 9px;
}
.kc-tpri__bar:nth-child(4) {
  height: 11px;
}
.kc-tpri__bar:nth-child(5) {
  height: 14px;
}
.kc-tpri__bar.is-on {
  background: var(--kc-tpri-c);
}
.kc-tpri__code {
  color: var(--kc-tpri-c);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kc-tpri__label {
  color: var(--mat-sys-on-surface);
}

/* ------------------------------------------------------------- status pill */
.kc-tstatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.kc-tstatus--info {
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #1d4ed8;
}
.kc-tstatus--primary {
  background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
  color: var(--mat-sys-primary);
}
.kc-tstatus--warning {
  background: color-mix(in srgb, #d97706 15%, transparent);
  color: #b45309;
}
.kc-tstatus--success {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}
.kc-tstatus--muted {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent);
  color: var(--mat-sys-surface-container-lowest);
}

/* ==============================================================================
   Desk — /apps/tickets
   ============================================================================ */
.kc-tickets {
  --kc-t-pad: 24px;
  /* Fills the page content area like Calendar / Account Settings — width is
     owned by .pageWrapper, not the module. */
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.kc-tickets__main {
  min-width: 0;
}
.kc-tickets {
  /* ---------------------------------------------------------- filter rail */
}
.kc-tickets__aside {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.kc-tickets__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--mat-sys-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-tickets__new:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 86%, #000);
  }
}
.kc-tickets__aside-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-tickets__aside-label {
  margin: 0 0 4px;
  padding-inline: 10px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tickets__navitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mat-sys-on-surface);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-tickets__navitem:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
  }
}
.kc-tickets__navitem.is-active {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  color: var(--mat-sys-primary);
  font-weight: 600;
}
.kc-tickets__navitem:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}
.kc-tickets__navitem-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-tickets__navcount {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  font-size: 0.6875rem;
  font-weight: 700;
}
.kc-tickets__navitem.is-active .kc-tickets__navcount {
  background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
  color: var(--mat-sys-primary);
}
.kc-tickets__assignee-form .kc-select {
  width: 100%;
  font-size: 0.8125rem;
}
.kc-tickets {
  /* ---------------------------------------------------------------- list card */
}
.kc-tickets__card {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kc-tickets__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px var(--kc-t-pad);
  border-bottom: 1px solid var(--border);
}
.kc-tickets__head-text {
  flex: 1 1 auto;
  min-width: 140px;
}
.kc-tickets__head-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.kc-tickets__head-sub {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tickets__search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tickets__search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--mat-sys-on-surface);
  width: 190px;
}
.kc-tickets__search input:focus {
  outline: none;
}
.kc-tickets__search:focus-within {
  border-color: var(--mat-sys-primary);
}
.kc-tickets__sort .kc-select {
  font-size: 0.8125rem;
}
.kc-tickets__activefilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px var(--kc-t-pad);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tickets__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  color: var(--mat-sys-primary);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-tickets__tag:hover {
    background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
  }
}
.kc-tickets__tag--clear {
  background: transparent;
  color: var(--mat-sys-surface-container-lowest);
}
@media (hover: hover) {
  .kc-tickets__tag--clear:hover {
    color: var(--mat-sys-on-surface);
  }
}
.kc-tickets__list {
  display: flex;
  flex-direction: column;
}
.kc-tickets__pager {
  border-top: 1px solid var(--border);
}
.kc-tickets__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 24px;
}
.kc-tickets__empty-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  margin-bottom: 4px;
}
.kc-tickets__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.kc-tickets__empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tickets__empty-hint a {
  color: var(--mat-sys-primary);
}
@media (max-width: 900px) {
  .kc-tickets {
    grid-template-columns: minmax(0, 1fr);
  }
  .kc-tickets__aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
  }
  .kc-tickets__new {
    order: -1;
  }
  .kc-tickets__aside-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .kc-tickets__aside-label {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .kc-tickets__navitem {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.75rem;
  }
  .kc-tickets__navitem-label {
    flex: 0 0 auto;
  }
}
@media (max-width: 560px) {
  .kc-tickets__head {
    flex-direction: column;
    align-items: stretch;
  }
  .kc-tickets__search input {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- ticket row */
.kc-trow {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px var(--kc-t-pad, 22px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.kc-trow:last-child {
  border-bottom: 0;
}
@media (hover: hover) {
  .kc-trow:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
  }
}
.kc-trow:focus-visible {
  outline: none;
  box-shadow: inset 2px 0 0 var(--mat-sys-primary);
  background: color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}
.kc-trow__pri {
  justify-self: start;
}
.kc-trow__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kc-trow__topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kc-trow__ref {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--mat-sys-surface-container-lowest);
  letter-spacing: 0.02em;
}
.kc-trow__flag {
  color: var(--mat-sys-surface-container-lowest);
  display: inline-flex;
}
.kc-trow__subject {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-trow__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-trow__meta strong {
  color: var(--mat-sys-on-surface);
  font-weight: 600;
}
.kc-trow__comments {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.kc-trow__assignee {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-self: end;
  max-width: 170px;
}
.kc-trow__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-trow__assignee-name {
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-trow__unassigned {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 560px) {
  .kc-trow {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .kc-trow__assignee {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==============================================================================
   Workspace — /apps/tickets/{uuid}
   ============================================================================ */
.kc-tw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.kc-tw__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kc-tw__muted {
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tw__pad {
  padding: 20px var(--kc-tw-pad, 22px);
}
.kc-tw {
  /* header */
}
.kc-tw__header {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
}
.kc-tw__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tw__crumbs a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
@media (hover: hover) {
  .kc-tw__crumbs a:hover {
    color: var(--mat-sys-primary);
  }
}
.kc-tw__ref {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kc-tw__title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.kc-tw__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
  flex: 1 1 auto;
}
.kc-tw__badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.kc-tw__reopened {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b45309;
  background: color-mix(in srgb, #d97706 14%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}
.kc-tw {
  /* panels */
}
.kc-tw__panel {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.kc-tw__description {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--mat-sys-on-surface);
  white-space: normal;
  word-break: break-word;
}
.kc-tw__edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}
.kc-tw__edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.kc-tw {
  /* tabs */
}
.kc-tw__tabs {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kc-tw__tablist {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.kc-tw__tab {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-tw__tab:hover {
    color: var(--mat-sys-on-surface);
  }
}
.kc-tw__tab.is-active, .kc-tw__tab.mdc-tab--active {
  color: var(--mat-sys-primary);
  border-bottom-color: var(--mat-sys-primary);
}
.kc-tw__tab:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: -2px;
}
.kc-tw__tabcount {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
  font-size: 0.625rem;
  font-weight: 700;
}
.kc-tw__tabpanel {
  padding: 0;
}
.kc-tw {
  /* sidebar */
}
.kc-tw__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 88px;
}
.kc-tw__sidecard {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.kc-tw__sidecard--actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-tw__sidetitle {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-tw__kanban-on {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
}
.kc-tw__hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--mat-sys-surface-container-lowest);
  margin: 6px 0 10px;
}
.kc-tw__hint-link {
  font-size: 0.75rem;
  color: var(--mat-sys-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
}
@media (max-width: 960px) {
  .kc-tw {
    grid-template-columns: minmax(0, 1fr);
  }
  .kc-tw__side {
    position: static;
    order: -1;
  }
}

/* properties rows */
.kc-prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}
.kc-prop + .kc-prop {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.kc-prop__label {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
  flex: 0 0 auto;
}
.kc-prop__value {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: right;
}
.kc-prop__control {
  max-width: 62%;
  font-size: 0.8125rem;
}

/* conversation */
.kc-conv {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kc-conv__empty {
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
  text-align: center;
  padding: 20px;
}
.kc-conv__item {
  display: flex;
  gap: 10px;
}
.kc-conv__item.is-reply {
  margin-left: 34px;
}
.kc-conv__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-conv__bubble {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 13px;
  background: var(--mat-sys-surface);
}
.kc-conv__item.is-note .kc-conv__bubble {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}
.kc-conv__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.kc-conv__author {
  font-size: 0.8125rem;
  font-weight: 600;
}
.kc-conv__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}
.kc-conv__time {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-conv__edited {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  font-style: italic;
}
.kc-conv__body {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--mat-sys-on-surface);
  word-break: break-word;
}

/* composer */
.kc-composer {
  margin: 0 20px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.kc-composer.is-internal {
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.kc-composer__tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}
.kc-composer__tab {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
}
.kc-composer__tab.is-active {
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.kc-composer__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 74px;
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}
.kc-composer__input:focus {
  outline: none;
}
.kc-composer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.kc-composer__attach {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mat-sys-surface-container-lowest);
  cursor: pointer;
}
@media (hover: hover) {
  .kc-composer__attach:hover {
    color: var(--mat-sys-primary);
  }
}
.kc-composer__files {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-composer__foot .kc-tbtn {
  margin-left: auto;
}

.kc-attach-form {
  padding: 0 20px 20px;
}

/* timeline */
.kc-timeline {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-timeline__item {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 14px;
}
.kc-timeline__item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.kc-timeline__item:last-child {
  padding-bottom: 0;
}
.kc-timeline__item:last-child::before {
  display: none;
}
.kc-timeline__dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  z-index: 1;
}
.kc-timeline__dot--primary {
  background: color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);
  color: var(--mat-sys-primary);
}
.kc-timeline__dot--success {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  color: #15803d;
}
.kc-timeline__dot--warning {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #b45309;
}
.kc-timeline__dot--info {
  background: color-mix(in srgb, #2563eb 13%, transparent);
  color: #1d4ed8;
}
.kc-timeline__dot--danger {
  background: color-mix(in srgb, var(--mat-sys-error) 14%, transparent);
  color: var(--mat-sys-error);
}
.kc-timeline__body {
  padding-top: 3px;
  min-width: 0;
}
.kc-timeline__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mat-sys-on-surface);
}
.kc-timeline__text strong {
  font-weight: 600;
}
.kc-timeline__detail {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-timeline__time {
  display: block;
  margin-top: 3px;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}

/* attachments list */
.kc-attach-list {
  list-style: none;
  margin: 0;
  padding: 10px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kc-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kc-attach__icon {
  color: var(--mat-sys-primary);
  flex: 0 0 auto;
}
.kc-attach__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kc-attach__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  text-decoration: none;
}
@media (hover: hover) {
  .kc-attach__name:hover {
    color: var(--mat-sys-primary);
  }
}
.kc-attach__sub {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}

/* ==============================================================================
   Create form — /apps/tickets/create
   ============================================================================ */
.kc-ticket-form {
  /* Full-width card, consistent with every other admin screen. */
  margin-bottom: 24px;
}
.kc-ticket-form__card {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kc-ticket-form__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.kc-ticket-form__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.kc-ticket-form__sub {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ticket-form__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kc-ticket-form__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 2.5%, transparent);
}

.kc-prio-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.kc-prio-picker__opt {
  display: block;
  cursor: pointer;
}
.kc-prio-picker__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kc-prio-picker__opt .kc-prio-picker__body {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.kc-prio-picker__opt input:checked + .kc-prio-picker__body {
  border-color: var(--mat-sys-primary);
  background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
}
.kc-prio-picker__opt input:focus-visible + .kc-prio-picker__body {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 1px;
}

/* ==============================================================================
   Birthday Automation — dashboard, delivery log, templates, settings.
   Shares the token-driven card language of _tickets / _notification-center;
   reuses .kc-tbtn / .kc-field / .kc-select / .kc-iconbtn / .kc-timeline.
   ============================================================================ */
.kc-ba {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  /* ------------------------------------------------------------------ header */
}
.kc-ba__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
}
.kc-ba__header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.kc-ba__header-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
  color: var(--mat-sys-primary);
}
.kc-ba__header-title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 650;
}
.kc-ba__header-sub {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kc-ba__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kc-ba__statuspill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kc-ba__statuspill--success {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  color: #15803d;
}
.kc-ba__statuspill--warning {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #b45309;
}
.kc-ba__statuspill--muted {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba {
  /* ------------------------------------------------------------------- alert */
}
.kc-ba__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mat-sys-error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mat-sys-error) 30%, transparent);
  color: var(--mat-sys-on-surface);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.kc-ba__alert > :first-child {
  color: var(--mat-sys-error);
  flex: 0 0 auto;
}
.kc-ba__alert code {
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}
.kc-ba {
  /* -------------------------------------------------------------- stat tiles */
}
.kc-ba__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.kc-ba__tile {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  --kc-tile-c: var(--mat-sys-surface-container-lowest);
}
.kc-ba__tile--primary {
  --kc-tile-c: var(--mat-sys-primary);
}
.kc-ba__tile--info {
  --kc-tile-c: #2563eb;
}
.kc-ba__tile--success {
  --kc-tile-c: #16a34a;
}
.kc-ba__tile--warning {
  --kc-tile-c: #d97706;
}
.kc-ba__tile--danger {
  --kc-tile-c: var(--mat-sys-error);
}
.kc-ba__tile--muted {
  --kc-tile-c: var(--mat-sys-surface-container-lowest);
}
.kc-ba__tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--kc-tile-c);
}
.kc-ba__tile-icon {
  color: var(--kc-tile-c);
}
.kc-ba__tile-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mat-sys-on-surface);
}
.kc-ba__tile-label {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.kc-ba {
  /* ------------------------------------------------------------------- grid */
}
.kc-ba__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) {
  .kc-ba__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kc-ba__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.kc-ba__card {
  background: var(--mat-sys-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kc-ba__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.kc-ba__card-head h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.kc-ba__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent);
  color: var(--mat-sys-surface-container-lowest);
  font-size: 0.6875rem;
  font-weight: 700;
}
.kc-ba__empty {
  padding: 20px 18px;
  font-size: 0.8125rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba {
  /* --------------------------------------------------------------- people */
}
.kc-ba__people {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.kc-ba__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
}
@media (hover: hover) {
  .kc-ba__person:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
  }
}
.kc-ba__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-ba__person-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kc-ba__person-name {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-ba__person-sub {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba {
  /* ---------------------------------------------------------------- health */
}
.kc-ba__health {
  margin: 0;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.kc-ba__health > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}
.kc-ba__health > div + div {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.kc-ba__health dt {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
  margin: 0;
}
.kc-ba__health dd {
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
  text-align: right;
}
.kc-ba__health code {
  font-size: 0.6875rem;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 7%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}
.kc-ba__health-action {
  padding: 0 18px 16px;
}
.kc-ba__test {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kc-ba__pager {
  border-top: 1px solid var(--border);
}
.kc-ba__pager .mat-mdc-paginator {
  background: transparent;
}
.kc-ba__pager .mat-mdc-paginator-container {
  padding: 6px 10px;
  min-height: 46px;
  justify-content: center;
}
.kc-ba__pager .mat-mdc-paginator-range-label {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba__pager .paginator-page {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 7px;
}

/* ============================================================== upcoming birthdays
   An agenda: a mini calendar-page marker per day, then the people for that day
   as avatar + name + type. Near days (this week) get a stronger marker. */
.kc-bup {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.kc-bup__day {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: 10px;
}
.kc-bup__day + .kc-bup__day {
  margin-top: 2px;
}
@media (hover: hover) {
  .kc-bup__day:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 3.5%, transparent);
  }
}
.kc-bup__day.is-near {
  background: color-mix(in srgb, var(--mat-sys-primary) 4%, transparent);
}
.kc-bup {
  /* calendar-page marker */
}
.kc-bup__marker {
  width: 52px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--mat-sys-surface);
  line-height: 1;
}
.kc-bup__marker-dow {
  padding: 3px 0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mat-sys-surface-container-lowest);
  background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
}
.is-near .kc-bup__marker-dow {
  color: #fff;
  background: var(--mat-sys-primary);
}
.kc-bup__marker-num {
  padding: 5px 0 2px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mat-sys-on-surface);
}
.kc-bup__marker-mon {
  padding-bottom: 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-bup__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 1px;
}
.kc-bup__when {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kc-bup__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mat-sys-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kc-bup__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc-bup__person {
  display: flex;
  align-items: center;
  gap: 9px;
}
.kc-bup__person.is-excluded {
  opacity: 0.5;
}
.kc-bup__person.is-excluded .kc-bup__name {
  text-decoration: line-through;
}
.kc-bup__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-bup__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-bup__type {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  --kc-type-c: #64748b;
}
.kc-bup__type--candidate {
  --kc-type-c: #8b5cf6;
}
.kc-bup__type--worker {
  --kc-type-c: #2563eb;
}
.kc-bup__type--administrator {
  --kc-type-c: #64748b;
}
.kc-bup__type {
  color: var(--kc-type-c);
  background: color-mix(in srgb, var(--kc-type-c) 14%, transparent);
}
.kc-bup__excluded-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--mat-sys-surface-container-lowest);
}

/* ------------------------------------------------------- delivery status pill */
.kc-bstatus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.kc-bstatus--info {
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #1d4ed8;
}
.kc-bstatus--success {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}
.kc-bstatus--warning {
  background: color-mix(in srgb, #d97706 15%, transparent);
  color: #b45309;
}
.kc-bstatus--danger {
  background: color-mix(in srgb, var(--mat-sys-error) 13%, transparent);
  color: var(--mat-sys-error);
}
.kc-bstatus--muted {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 9%, transparent);
  color: var(--mat-sys-surface-container-lowest);
}

/* ------------------------------------------------------------ delivery log table */
.kc-blog {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.kc-blog__wrap {
  overflow-x: auto;
}
.kc-blog thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mat-sys-surface-container-lowest);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.kc-blog tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  vertical-align: middle;
}
.kc-blog tbody tr:last-child td {
  border-bottom: 0;
}
@media (hover: hover) {
  .kc-blog tbody tr:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent);
  }
}
.kc-blog__name {
  display: block;
  font-weight: 600;
}
.kc-blog__email {
  display: block;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-blog__time {
  color: var(--mat-sys-surface-container-lowest);
  white-space: nowrap;
}
.kc-blog__detail {
  max-width: 320px;
}
.kc-blog__fail {
  color: var(--mat-sys-error);
  font-size: 0.75rem;
}
.kc-blog__mid {
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
  font-family: ui-monospace, monospace;
}
.kc-blog__empty {
  text-align: center;
  color: var(--mat-sys-surface-container-lowest);
  padding: 40px 16px !important;
}

/* ---------------------------------------------------------------- toggle rows */
.kc-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.kc-toggle-row + .kc-toggle-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.kc-toggle-row input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--mat-sys-primary);
}
.kc-toggle-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-toggle-row strong {
  font-size: 0.8125rem;
  font-weight: 600;
}
.kc-toggle-row small {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}

/* ------------------------------------------------------------------- templates */
.kc-ba-templates {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.kc-ba-templates__vars {
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kc-ba-templates__vars code {
  background: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
  color: var(--mat-sys-primary);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.kc-ba-tmpl__form {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kc-ba-tmpl__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kc-ba-tmpl__head h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.kc-ba-tmpl__blurb {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba-tmpl__actions {
  display: flex;
  gap: 8px;
}
.kc-ba-tmpl__meta {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba-tmpl__preview {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--mat-sys-on-surface) 3%, transparent);
}
.kc-ba-tmpl__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mat-sys-surface-container-lowest);
}
.kc-ba-tmpl__preview-subject {
  margin: 0 16px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.kc-ba-tmpl__preview-frame {
  width: 100%;
  height: 460px;
  border: 0;
  background: #f4f6f9;
  display: block;
}

/* -------------------------------------------------------------------- settings */
.kc-ba-settings {
  max-width: 760px;
  margin-bottom: 24px;
}
.kc-ba-settings__section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.kc-ba-settings__section h2 {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.kc-ba-settings__section h2 small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--mat-sys-surface-container-lowest);
  margin-left: 6px;
}
.kc-ba-settings__foot {
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: color-mix(in srgb, var(--mat-sys-on-surface) 2.5%, transparent);
}

.kc-field--inline {
  padding: 8px 0;
}
.kc-field--inline .kc-field__label {
  font-weight: 500;
}

@media (max-width: 640px) {
  .kc-ba__header-actions {
    width: 100%;
  }
  .kc-ba__header-actions form, .kc-ba__header-actions a, .kc-ba__header-actions button {
    flex: 1 1 auto;
  }
}
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__trailing {
  border-color: var(--mat-sys-error) !important;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.theme-select {
  width: 120px;
}

.rounded-bars .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
  clip-path: inset(0 0 5% 0 round 20px);
}

.rounded-full-bars .apexcharts-rangebar-area {
  clip-path: inset(9% 0 11% round 24px);
}

html .mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: var(--mat-sys-level2);
}

.most-visit-chart .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
  clip-path: inset(0 0 5% 0 round 20px);
}

.timeline .timeline-item .point .timeline-badge.border-primary {
  border: 2px solid var(--mat-sys-primary) !important;
}
.timeline .timeline-item .point .timeline-badge.border-accent {
  border: 2px solid var(--mat-sys-secondary) !important;
}
.timeline .timeline-item .point .timeline-badge.border-success {
  border: 2px solid #70C748 !important;
}
.timeline .timeline-item .point .timeline-badge.border-warning {
  border: 2px solid #F6B51E !important;
}
.timeline .timeline-item .point .timeline-badge.border-error {
  border: 2px solid var(--mat-sys-error) !important;
}
.timeline .timeline-item:last-child .timeline-border {
  display: none !important;
}
.timeline .timeline-item:last-child {
  height: auto;
}

.laptop-desk .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 6.58%, rgba(0, 0, 0, 0) 37.62%, #000 80.7%);
}

.laptop-desk swiper-container {
  width: 100%;
  height: 340px;
  display: block;
}

.laptop-desk swiper-slide {
  height: 340px;
  overflow: hidden;
}
.laptop-desk swiper-slide .slide-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.laptop-desk swiper-slide .slide-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes slide {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  100% {
    transform: translate3d(-100%, 0px, 0px);
  }
}
.sliding-wrapper .slide-background .slide {
  animation: slide var(--dur-marquee) linear infinite;
}

.sliding-wrapper .slide-background .slide-right {
  animation: slide-right var(--dur-marquee) linear infinite;
}

@keyframes slide-right {
  0% {
    transform: translate3d(-100%, 0px, 0px);
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}
.container.full-width {
  display: flex;
  align-items: center;
  width: 100%;
}

.img-overlay {
  overflow: auto;
  position: relative;
}
.img-overlay .overlay-content {
  display: none;
}
.img-overlay:hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  background-color: var(--mat-sys-primary-fixed-dim);
}
.img-overlay:hover .overlay-content {
  display: block;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 120px;
  z-index: 9;
}

.spacer {
  padding: 80px 0;
}

.section-title {
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
}

@media (min-width: 991px) {
  .section-title {
    font-size: 36px;
    line-height: 43px;
  }
}
.bg-extra-light {
  background-color: var(--mat-sys-surface-bright);
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.section-title2 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}

.border-white {
  border: 1px solid #ffffff !important;
}

.border-secondary {
  border: 1px solid var(--mat-sys-secondary) !important;
}

.border-primary {
  border: 1px solid var(--mat-sys-primary) !important;
}

.truncate-3-line {
  max-height: 4.4rem;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
}

@media (max-width: 767px) {
  .spacer {
    padding: 40px 0;
  }
  .btn-custom {
    padding: 0 36px !important;
  }
}
html .toast-success {
  background-color: #70C748;
}
html .toast-error {
  background-color: var(--mat-sys-error);
}
html .toast-warning {
  background-color: #F6B51E;
}
html .toast-info {
  background-color: var(--mat-sys-primary);
}
html .toast-container .ngx-toastr {
  box-shadow: var(--mat-sys-level2);
  border-radius: 16px;
}

.front-topbar.fixed-topbar {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.home-page-details .tab-content .accordion .mat-expansion-indicator svg {
  margin: 0;
}
.home-page-details .tab-content .accordion .mat-expansion-panel-content-wrapper .mat-expansion-panel-body {
  padding: 16px 0px;
}

.mobile-sidebar .mdc-list .mdc-list-item .mat-mdc-button {
  color: var(--mat-sys-on-background);
  min-width: 100%;
  justify-content: flex-start;
}
.mobile-sidebar .mdc-list .mdc-list-item .mat-mdc-button.selected {
  background-color: var(--mat-sys-primary-fixed-dim);
  color: var(--mat-sys-primary);
  transition: background-color var(--dur-slow) var(--ease-out);
}

.question .border-dash-content {
  border: 1px dashed var(--mat-sys-outline);
}
.question .accordion .mat-expansion-panel-header {
  height: auto;
  padding: 16px 20px;
}

:root {
  --kc-ink: #14181f;
  --kc-muted: #5b6572;
  --kc-line: #e6e8ec;
  --kc-surface: #ffffff;
  --kc-tint: #f7f8fa;
  --kc-brand: var(--mat-sys-primary);
  --kc-brand-strong: color-mix(in srgb, var(--mat-sys-primary) 75%, black);
  --kc-brand-soft: color-mix(in srgb, var(--mat-sys-primary) 8%, white);
  --kc-brand-line: color-mix(in srgb, var(--mat-sys-primary) 22%, white);
}

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

.kc-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--kc-brand-strong);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
}
.kc-skip:focus-visible {
  top: 0;
}

body:has(> .frontend-page) {
  margin: 0;
}

.frontend-page {
  color: var(--kc-ink);
  background: var(--kc-surface);
}
.frontend-page .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}
.frontend-page .container--narrow {
  max-width: 820px;
}
.frontend-page h1, .frontend-page h2, .frontend-page h3 {
  letter-spacing: -0.02em;
}
.frontend-page :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--kc-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

:where(.frontend-page) :where(h1, h2, h3) {
  color: var(--kc-ink);
}

:where(.frontend-page) :where(p) {
  color: var(--kc-muted);
}

:where(.frontend-page) :where(a) {
  color: inherit;
}

.kc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.2;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}
.kc-btn--lg {
  padding: 17px 34px;
}
.kc-btn--block {
  width: 100%;
}
.kc-btn--primary {
  background: var(--kc-brand-strong);
  color: #fff;
}
@media (hover: hover) {
  .kc-btn--primary:hover {
    background: color-mix(in srgb, var(--kc-brand) 62%, black);
    color: #fff;
    transform: translateY(calc(var(--motion-lift) / 2));
  }
}
.kc-btn--primary:active {
  background: color-mix(in srgb, var(--kc-brand) 55%, black);
  color: #fff;
}
.kc-btn--outline {
  border-color: var(--kc-brand-line);
  color: var(--kc-brand-strong);
  background: transparent;
}
@media (hover: hover) {
  .kc-btn--outline:hover {
    background: var(--kc-brand-soft);
    border-color: var(--kc-brand);
    color: var(--kc-brand-strong);
  }
}
.kc-btn--outline:active {
  background: color-mix(in srgb, var(--kc-brand) 14%, white);
  border-color: var(--kc-brand);
  color: var(--kc-brand-strong);
}
.kc-btn--ghost {
  color: var(--kc-ink);
  background: transparent;
  border-color: var(--kc-line);
}
@media (hover: hover) {
  .kc-btn--ghost:hover {
    background: var(--kc-tint);
    color: var(--kc-ink);
  }
}
.kc-btn--ghost:active {
  background: color-mix(in srgb, var(--kc-ink) 8%, transparent);
  color: var(--kc-ink);
}
.kc-btn__arrow {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-btn:hover .kc-btn__arrow, .kc-btn:hover .kc-btn__arrow {
    transform: translateX(var(--motion-nudge));
  }
}

.kc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kc-line);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.kc-header.is-stuck {
  box-shadow: 0 6px 24px rgba(16, 22, 30, 0.08);
}
.kc-header .container {
  max-width: 1340px;
}
.kc-header__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
}
.kc-header__brand {
  display: inline-flex;
  flex: 0 0 auto;
}
.kc-header__brand img {
  display: block;
  height: 34px;
  width: auto;
}
.kc-header__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 700px) {
  .kc-header__cta {
    display: none;
  }
}

.kc-nav {
  display: none;
}
@media (min-width: 1180px) {
  .kc-nav {
    display: block;
  }
}
.kc-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kc-nav__item {
  position: relative;
}
.kc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--kc-ink);
  white-space: nowrap;
}
.kc-nav__link.is-current {
  background: var(--kc-brand-soft);
  color: var(--kc-brand-strong);
}
@media (hover: hover) {
  .kc-nav__link:hover {
    background: var(--kc-brand-soft);
    color: var(--kc-brand-strong);
  }
}
.kc-nav__chev {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}
.kc-nav__item--has-menu:focus-within .kc-nav__chev {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .kc-nav__item--has-menu:hover .kc-nav__chev {
    transform: rotate(180deg);
  }
}

.kc-mega {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 10px);
  min-width: min(900px, 100vw - 48px);
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 22, 30, 0.12);
  padding: 24px;
  z-index: 70;
}
.kc-mega[hidden] {
  display: none;
}
.kc-mega__inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 30px;
}
.kc-mega__title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--kc-muted);
  font-weight: 700;
  margin: 0 0 10px;
}
.kc-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.kc-mega a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-mega a:hover {
    background: var(--kc-tint);
  }
}
.kc-mega a[aria-current=page] {
  background: var(--kc-brand-soft);
}
.kc-mega__label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--kc-ink);
}
.kc-mega__desc {
  display: block;
  font-size: 13px;
  color: var(--kc-muted);
  margin-top: 2px;
}
.kc-mega__col--featured {
  background: var(--kc-tint);
  border-radius: 12px;
  padding: 16px;
}

.kc-account {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin-inline-end: 4px;
  border-radius: 999px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
@media (min-width: 1180px) {
  .kc-account {
    display: flex;
  }
}
.kc-account__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-account__link .iconify {
  color: var(--kc-brand);
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-account__link:hover {
    background: #fff;
    color: var(--kc-brand-strong);
    box-shadow: 0 1px 3px rgba(16, 22, 30, 0.12);
  }
  .kc-account__link:hover .iconify {
    transform: scale(1.12);
  }
}
.kc-account__link:active {
  background: #fff;
  color: var(--kc-brand-strong);
}
.kc-account__link--register {
  color: var(--kc-brand-strong);
}
@media (min-width: 1180px) and (max-width: 1319px) {
  .kc-account {
    margin-inline-end: 0;
  }
  .kc-account__link {
    padding: 8px 11px;
    font-size: 14px;
  }
  .kc-account__link .iconify {
    display: none;
  }
}

.kc-header__cta {
  position: relative;
  overflow: hidden;
  padding-inline: 20px 16px;
  gap: 6px;
}
@media (min-width: 1180px) and (max-width: 1319px) {
  .kc-header__cta {
    padding-inline: 14px 10px;
    font-size: 13.5px;
  }
}
.kc-header__cta {
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--kc-brand) 80%, black);
}
.kc-header__cta::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .kc-header__cta::after {
    animation: kc-shine 7s ease-in-out 2s infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .kc-header__cta:hover::after {
    animation: kc-shine 0.9s ease-out 1;
  }
}

@keyframes kc-shine {
  0%, 70% {
    inset-inline-start: -60%;
  }
  100% {
    inset-inline-start: 130%;
  }
}
.kc-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--kc-line);
  cursor: pointer;
}
.kc-burger span {
  display: block;
  height: 2px;
  background: var(--kc-ink);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.kc-burger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.kc-burger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}
.kc-burger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 1180px) {
  .kc-burger {
    display: none;
  }
}

.kc-mobilenav {
  border-top: 1px solid var(--kc-line);
  background: #fff;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 20px 0 28px;
}
.kc-mobilenav[hidden] {
  display: none;
}
.kc-mobilenav__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 18px;
}
.kc-mobilenav__top {
  display: block;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  padding: 6px 0;
}
.kc-mobilenav__group {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kc-muted);
  font-weight: 700;
  margin: 12px 0 6px;
}
.kc-mobilenav__actions {
  display: grid;
  gap: 12px;
}
.kc-mobilenav__account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kc-mobilenav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2px;
  display: grid;
  gap: 2px;
}
.kc-mobilenav__sub a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--kc-muted);
}
@media (hover: hover) {
  .kc-mobilenav__sub a:hover {
    background: var(--kc-tint);
    color: var(--kc-ink);
  }
}
@media (min-width: 1180px) {
  .kc-mobilenav {
    display: none !important;
  }
}

.kc-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 64px;
  background: linear-gradient(180deg, var(--kc-brand-soft) 0%, #fff 92%);
  border-bottom: 1px solid color-mix(in srgb, var(--kc-line) 60%, transparent);
}
@media (min-width: 992px) {
  .kc-hero {
    padding: 76px 0 72px;
  }
}
.kc-hero--inner {
  padding: 44px 0 56px;
}
@media (min-width: 992px) {
  .kc-hero--inner {
    padding: 52px 0 64px;
  }
}
.kc-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--kc-brand) 22%, transparent) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 55% 75% at 88% 20%, #000 25%, transparent 70%);
}
.kc-hero__grid {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: center;
}
@media (min-width: 992px) {
  .kc-hero__grid--split {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 56px;
  }
}
.kc-hero__title {
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  line-height: 1.07;
  letter-spacing: -0.032em;
  margin: 18px 0 18px;
  font-weight: 780;
  max-width: 21ch;
  text-wrap: balance;
}
.kc-hero--inner .kc-hero__title {
  max-width: 24ch;
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3rem);
}
.kc-hero__lede {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.14rem);
  line-height: 1.66;
  max-width: 60ch;
  margin: 0 0 14px;
  color: var(--kc-muted);
}
.kc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.kc-hero__footnote {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--kc-line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--kc-muted);
  max-width: 68ch;
}

.kc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kc-brand-strong);
}
.kc-eyebrow--muted {
  color: var(--kc-brand-strong);
}
.kc-hero .kc-eyebrow {
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  letter-spacing: 0.03em;
}
.kc-hero .kc-eyebrow .iconify {
  color: var(--kc-brand);
}

.kc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.kc-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-ink);
}

.kc-glass {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kc-glass {
    padding: 30px;
  }
}
.kc-glass__title {
  font-weight: 740;
  margin: 0 0 18px;
  color: var(--kc-ink);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.kc-glass__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kc-glass__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kc-glass__list strong {
  display: block;
  font-size: 0.95rem;
  color: var(--kc-ink);
}
.kc-glass__list span span {
  font-size: 0.88rem;
  color: var(--kc-muted);
  line-height: 1.5;
}
.kc-glass__icon {
  color: var(--kc-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
}

.kc-crumbs {
  margin-bottom: 26px;
}
.kc-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--kc-muted);
}
.kc-crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 8px;
  border-top: 1.5px solid #b8bec7;
  border-right: 1.5px solid #b8bec7;
  transform: rotate(45deg) translateY(-1px);
}
.kc-crumbs a {
  color: var(--kc-muted);
  text-decoration: none;
}
@media (hover: hover) {
  .kc-crumbs a:hover {
    color: var(--kc-brand-strong);
  }
}
.kc-crumbs [aria-current=page] span {
  color: var(--kc-ink);
  font-weight: 600;
}

.kc-sec {
  padding: 80px 0;
}
@media (max-width: 640px) {
  .kc-sec {
    padding: 60px 0;
  }
}
.kc-sec--tint {
  background: var(--kc-tint);
}
.kc-sec--flush {
  padding: 0 0 48px;
}
.kc-hero + .kc-sec--flush {
  padding-top: 40px;
}
.kc-sec--tint + .kc-sec--tint {
  padding-top: 0;
}
.kc-sec__head {
  max-width: 68ch;
  margin-bottom: 40px;
}
.kc-sec__head--center {
  margin-inline: auto;
  text-align: center;
}
.kc-sec__title {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 10px 0 14px;
  font-weight: 760;
  text-wrap: balance;
}
.kc-sec__intro {
  font-size: 1.03rem;
  line-height: 1.66;
  margin: 0 0 10px;
  color: var(--kc-muted);
}
.kc-sec__foot {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.kc-sec__foot--left {
  justify-content: flex-start;
}

.kc-prose p {
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0 0 16px;
}
.kc-prose h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 740;
  letter-spacing: -0.02em;
  margin: 38px 0 14px;
}
.kc-prose > :first-child {
  margin-top: 0;
}
.kc-prose__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kc-prose__list li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kc-ink);
}
.kc-prose__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kc-brand-soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf4c08' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.kc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .kc-grid--2, .kc-grid--3, .kc-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .kc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kc-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width: 640px) {
  .kc-card {
    padding: 26px;
  }
}
@media (hover: hover) {
  .kc-card--link:hover {
    border-color: var(--kc-brand-line);
    transform: translateY(var(--motion-lift));
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  }
  .kc-card--link:hover .kc-card__icon, .kc-card--link:hover .kc-role__icon {
    background: var(--kc-brand);
    color: #fff;
  }
}
.kc-card--link:active {
  transform: scale(var(--motion-press));
}
.kc-card--link:focus-within {
  border-color: var(--kc-brand);
}
.kc-card__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kc-card__title {
  font-size: 1.06rem;
  font-weight: 720;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.kc-card__title a {
  text-decoration: none;
  color: inherit;
}
@media (hover: hover) {
  .kc-card__title a:hover {
    color: inherit;
  }
}
.kc-card__text {
  font-size: 0.93rem;
  line-height: 1.62;
  margin: 0;
  color: var(--kc-muted);
}
.kc-card__stretch {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kc-card__more {
  display: none;
}
.kc-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--kc-brand-strong);
}
.kc-card__go span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kc-card--link:hover .kc-card__go span {
    transform: translateX(var(--motion-nudge));
  }
}
.kc-card--compact {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.kc-card--compact .kc-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin: 0;
}
.kc-card--compact .kc-card__title {
  font-size: 0.98rem;
  flex: 1 1 auto;
}
.kc-card--compact .kc-card__go {
  margin: 0;
  padding: 0;
  font-size: 0;
}

.kc-role__icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 8px;
  align-items: center;
  justify-content: center;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.kc-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 650;
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0;
}
.kc-tag--positive {
  background: #e8f6ee;
  color: #1c7a45;
}
.kc-tag--caution {
  background: #fff4e5;
  color: #9a5b00;
}
.kc-tag--muted {
  background: var(--kc-tint);
  color: var(--kc-muted);
  align-self: flex-start;
  border: 1px solid var(--kc-line);
}

.kc-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .kc-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kc-checklist__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kc-checklist__item strong {
  font-weight: 650;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--kc-ink);
}
.kc-sec--tint .kc-checklist__item {
  border-color: transparent;
}
.kc-checklist__tick {
  color: var(--kc-brand);
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-checklist__text {
  display: block;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--kc-muted);
  margin-top: 3px;
  font-weight: 400;
}

.kc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .kc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .kc-steps {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}
.kc-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kc-sec--tint .kc-steps__item {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 22, 30, 0.04);
}
.kc-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--kc-brand-strong);
  color: #fff;
  font-weight: 760;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.kc-steps__title {
  font-size: 1.04rem;
  font-weight: 720;
  margin: 0 0 6px;
}
.kc-steps__body p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}

.kc-split {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .kc-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
  }
}
@media (min-width: 900px) {
  .kc-split--reverse .kc-split__text {
    order: 2;
  }
}
.kc-split__text p {
  font-size: 1.03rem;
  line-height: 1.72;
  margin: 0 0 14px;
  color: var(--kc-muted);
}

.kc-panel {
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  border-radius: 24px;
  padding: 28px;
}
@media (min-width: 560px) {
  .kc-panel {
    padding: 34px;
  }
}
.kc-panel__title {
  font-size: 1.1rem;
  font-weight: 740;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.kc-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kc-panel__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--kc-ink);
}
.kc-panel__list span:first-child {
  color: var(--kc-brand);
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-panel__note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--kc-brand-line);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--kc-muted);
}

.kc-stats {
  padding: 0;
  margin-top: -1px;
}
.kc-stats .container {
  position: relative;
}
.kc-stats__grid {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--kc-line);
  border: 1px solid var(--kc-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
}
@media (min-width: 860px) {
  .kc-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kc-stats__item {
  padding: 22px;
  background: #fff;
}
.kc-stats__figure {
  display: block;
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem);
  font-weight: 790;
  letter-spacing: -0.02em;
  color: var(--kc-ink);
  line-height: 1.05;
}
.kc-stats__label {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--kc-muted);
}

.kc-coverage {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .kc-coverage {
    padding: 40px;
  }
}
@media (min-width: 992px) {
  .kc-coverage {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    padding: 48px;
  }
}
.kc-coverage .kc-sec__title {
  margin-bottom: 10px;
}
.kc-coverage__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kc-coverage__areas li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kc-coverage__areas span {
  color: var(--kc-brand);
  display: inline-flex;
}

.kc-note {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--kc-line);
  background: var(--kc-tint);
}
.kc-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--kc-ink);
}
.kc-note p {
  margin: 0 0 8px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kc-note p:last-child {
  margin-bottom: 0;
}
.kc-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  color: var(--kc-brand);
  border: 1px solid var(--kc-line);
}
.kc-note--caution {
  background: #fff8ef;
  border-color: #f3dcbb;
}
.kc-note--caution .kc-note__icon {
  color: #9a5b00;
  border-color: #f3dcbb;
}

.kc-accordion {
  display: grid;
  gap: 10px;
}

.kc-accordion__item {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kc-accordion__item[open] {
  border-color: var(--kc-brand-line);
  box-shadow: 0 12px 30px -18px rgba(16, 22, 30, 0.2);
}
.kc-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 660;
  font-size: 1rem;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.kc-accordion__item summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .kc-accordion__item summary:hover {
    background: var(--kc-tint);
  }
}
.kc-accordion__item[open] summary {
  background: var(--kc-brand-soft);
}
.kc-accordion__item[open] .kc-accordion__chevron {
  transform: rotate(180deg);
  background: var(--kc-brand);
  color: #fff;
}
.kc-accordion__item .kc-accordion__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-strong);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kc-accordion__item .kc-accordion__body {
  padding: 16px 22px 22px;
}
.kc-accordion__item .kc-accordion__body p {
  margin: 0 0 10px;
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--kc-muted);
}
.kc-accordion__item .kc-accordion__body p:last-child {
  margin-bottom: 0;
}

.kc-cta {
  padding: 24px 0 80px;
}
.kc-cta__inner {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 28px;
  padding: 34px;
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--kc-brand) 55%, transparent) 0%, transparent 60%), var(--kc-brand-strong);
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 560px) {
  .kc-cta__inner {
    padding: 46px;
  }
}
@media (min-width: 900px) {
  .kc-cta__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    padding: 56px;
  }
}
.kc-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 50% 90% at 100% 50%, #000 20%, transparent 70%);
}
.kc-cta__inner > * {
  position: relative;
}
.kc-cta__title {
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  margin: 0 0 12px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.kc-cta__text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0;
  max-width: 60ch;
}
.kc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (min-width: 900px) {
  .kc-cta__actions {
    justify-content: flex-end;
  }
}
.kc-cta__call {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}
.kc-cta__call a {
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-cta__call a:hover {
    color: #fff;
    border-color: #fff;
  }
}
.kc-cta__call .iconify {
  color: #fff;
}
.kc-cta .kc-btn--primary {
  background: #fff;
  color: var(--kc-brand-strong);
}
@media (hover: hover) {
  .kc-cta .kc-btn--primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--kc-brand-strong);
  }
}
.kc-cta .kc-btn--primary:active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--kc-brand-strong);
}
.kc-cta .kc-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
@media (hover: hover) {
  .kc-cta .kc-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
}
.kc-cta .kc-btn--ghost:active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.kc-formwrap {
  display: grid;
  gap: 40px;
}
@media (min-width: 980px) {
  .kc-formwrap {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }
}
.kc-formwrap__aside {
  position: sticky;
  top: 104px;
}
.kc-formwrap__aside .kc-sec__title {
  margin-top: 0;
}
.kc-formwrap__points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.kc-formwrap__points li {
  display: flex;
  gap: 11px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--kc-ink);
}
.kc-formwrap__points span {
  color: var(--kc-brand);
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-formwrap__contact {
  margin-top: 28px;
  padding: 8px;
  border-radius: 18px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  display: grid;
  gap: 4px;
}
.kc-formwrap__contact-title {
  margin: 8px 10px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kc-formwrap__contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--kc-ink);
  font-weight: 700;
  font-size: 0.96rem;
  word-break: break-word;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-formwrap__contact a:hover {
    background: #fff;
    color: var(--kc-ink);
  }
}
.kc-formwrap__contact a small {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kc-muted);
}
.kc-formwrap__contact a > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fff;
  color: var(--kc-brand);
  border: 1px solid var(--kc-line);
}

.kc-form {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 30px 70px -32px rgba(16, 22, 30, 0.22);
  counter-reset: kc-group;
}
@media (min-width: 560px) {
  .kc-form {
    padding: 34px;
  }
}
.kc-form__group {
  border: 0;
  padding: 0;
  margin: 0 0 32px;
  counter-increment: kc-group;
}
.kc-form__group + .kc-form__group {
  padding-top: 28px;
  border-top: 1px solid var(--kc-line);
}
.kc-form__group legend {
  display: flex;
  align-items: center;
  gap: 10px;
  float: left;
  width: 100%;
  font-size: 1rem;
  font-weight: 740;
  color: var(--kc-ink);
  padding: 0;
  margin-bottom: 18px;
}
.kc-form__group legend::before {
  content: counter(kc-group);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-strong);
  font-size: 13px;
  font-weight: 760;
}
.kc-form__group legend + * {
  clear: both;
}
.kc-form__rows {
  display: grid;
  gap: 18px;
}
@media (min-width: 620px) {
  .kc-form__rows {
    grid-template-columns: repeat(2, 1fr);
  }
}
.kc-form__row {
  display: grid;
  gap: 7px;
  align-content: start;
}
@media (min-width: 620px) {
  .kc-form__row--2 {
    grid-column: span 2;
  }
}
.kc-form__row label {
  font-size: 0.89rem;
  font-weight: 620;
  color: var(--kc-ink);
}
.kc-form__row input, .kc-form__row select, .kc-form__row textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--kc-ink);
  padding: 12px 14px;
  border-radius: 11px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-form__row input::placeholder, .kc-form__row select::placeholder, .kc-form__row textarea::placeholder {
  color: #98a1ad;
}
@media (hover: hover) {
  .kc-form__row input:hover, .kc-form__row select:hover, .kc-form__row textarea:hover {
    border-color: #cfd4db;
  }
}
.kc-form__row input:focus, .kc-form__row select:focus, .kc-form__row textarea:focus {
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 3px var(--kc-brand-soft);
  outline: none;
}
.kc-form__row textarea {
  resize: vertical;
  min-height: 108px;
}
.kc-form__row input[type=file] {
  padding: 8px;
  cursor: pointer;
  color: var(--kc-muted);
  border-style: dashed;
  background: var(--kc-tint);
}
.kc-form__row input[type=file]::file-selector-button {
  margin-inline-end: 12px;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--kc-brand-line);
  background: #fff;
  color: var(--kc-brand-strong);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-form__row input[type=file]:hover::file-selector-button {
    background: var(--kc-brand-soft);
    border-color: var(--kc-brand);
  }
}
.kc-form__req {
  color: var(--kc-brand-strong);
  margin-inline-start: 3px;
}
.kc-form__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--kc-muted);
}
.kc-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kc-form__legal {
  font-size: 0.84rem;
  color: var(--kc-muted);
  line-height: 1.6;
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--kc-line);
}
.kc-form__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kc-form__status {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-ink);
}
.kc-form__status[hidden] {
  display: none;
}

.kc-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--kc-line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
}
.kc-radio input {
  accent-color: var(--kc-brand);
  margin: 0;
}
.kc-radio:has(input:checked) {
  border-color: var(--kc-brand);
  background: var(--kc-brand-soft);
}

.kc-filters {
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.kc-filters__field {
  flex: 1 1 200px;
  min-width: 0;
  display: grid;
  gap: 6px;
}
.kc-filters__field label {
  font-size: 0.85rem;
  font-weight: 620;
}
.kc-filters__field input, .kc-filters__field select {
  width: 100%;
  font: inherit;
  font-size: 0.93rem;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1.5px solid var(--kc-line);
  background: #fff;
  color: var(--kc-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kc-filters__field input::placeholder, .kc-filters__field select::placeholder {
  color: #98a1ad;
}
@media (hover: hover) {
  .kc-filters__field input:hover, .kc-filters__field select:hover {
    border-color: #cfd4db;
  }
}
.kc-filters__field input:focus, .kc-filters__field select:focus {
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 3px var(--kc-brand-soft);
  outline: none;
}
.kc-filters__field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6572' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-inline-end: 40px;
}
.kc-filters__actions {
  flex: 1 1 100%;
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  padding-top: 4px;
}

.kc-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--kc-line);
  border-radius: 16px;
  background: var(--kc-tint);
}
.kc-empty__icon {
  display: inline-flex;
  color: var(--kc-brand);
  margin-bottom: 14px;
}
.kc-empty h3 {
  font-size: 1.14rem;
  margin: 0 0 8px;
  font-weight: 680;
}
.kc-empty p {
  max-width: 52ch;
  margin: 0 auto 22px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.kc-job__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.kc-job__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kc-job:hover .kc-job__icon {
    background: var(--kc-brand);
    color: #fff;
  }
}
.kc-job__meta {
  list-style: none;
  margin: 4px 0 4px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.kc-job__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kc-job__meta .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}
.kc-job__pay {
  color: var(--kc-ink) !important;
  font-weight: 650;
}

.kc-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  max-width: none;
  margin-bottom: 24px;
}
.kc-results-head .kc-sec__intro {
  margin: 0;
}

.kc-jobchips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kc-jobchips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kc-jobchips .iconify {
  color: var(--kc-brand);
}

.kc-jobpage {
  display: grid;
  gap: 36px;
}
@media (min-width: 992px) {
  .kc-jobpage {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
  }
}
.kc-jobpage__summary {
  font-size: 1.12rem !important;
  line-height: 1.65 !important;
  color: var(--kc-ink);
  font-weight: 560;
}
@media (min-width: 992px) {
  .kc-jobpage__aside {
    position: sticky;
    top: 100px;
  }
}

.kc-applycard {
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 24px 60px -28px rgba(16, 22, 30, 0.25);
}
.kc-applycard__title {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 740;
}
.kc-applycard__facts {
  margin: 0 0 20px;
  display: grid;
}
.kc-applycard__facts > div {
  display: grid;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--kc-line);
}
.kc-applycard__facts > div:first-child {
  border-top: 0;
  padding-top: 0;
}
.kc-applycard__facts dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kc-applycard__facts dt span {
  display: inline-flex;
  color: var(--kc-brand);
}
.kc-applycard__facts dd {
  margin: 0;
  padding-inline-start: 23px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kc-ink);
  line-height: 1.45;
}
.kc-applycard__help {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--kc-muted);
}
.kc-applycard__help a {
  color: var(--kc-ink);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-applycard__help a:hover {
    color: var(--kc-brand-strong);
  }
}

.kc-footer {
  position: relative;
  background: var(--kc-ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 0 0 92px;
  margin-top: 0; /* room for the floating chat and accessibility launchers */
}
.kc-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--kc-brand), var(--kc-brand-strong) 55%, transparent);
}
.kc-footer__top {
  display: grid;
  gap: 44px;
  padding-top: 60px;
}
@media (min-width: 1080px) {
  .kc-footer__top {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 2fr);
    gap: 64px;
  }
}
.kc-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.kc-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.kc-footer__contact a {
  display: grid;
  gap: 1px;
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.45;
  color: #fff;
  text-decoration: none;
}
.kc-footer__contact a small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
@media (hover: hover) {
  .kc-footer__contact a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.kc-footer__ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--kc-brand);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kc-footer__contact li:hover .kc-footer__ci {
  background: var(--kc-brand);
  color: #fff;
}
.kc-footer__nav {
  display: grid;
  gap: 34px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .kc-footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kc-footer__heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 750;
  margin: 0 0 16px;
}
.kc-footer__heading::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--kc-brand);
}
.kc-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.kc-footer__col ul a {
  position: relative;
  display: inline-block;
  padding: 5px 0;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-footer__col ul a:hover {
    color: #fff;
    transform: translateX(3px);
  }
}
.kc-footer__utility {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kc-footer__utility ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.kc-footer__utility a {
  display: inline-block;
  padding: 5px 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
@media (hover: hover) {
  .kc-footer__utility a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.kc-footer__bottom {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.kc-footer__legal, .kc-footer__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}
.kc-footer__note {
  margin-top: 4px;
}
.kc-footer :where(a, button):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.kc-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--kc-brand-strong);
}
.kc-card__cue span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .kc-card--link:hover .kc-card__cue span {
    transform: translateX(var(--motion-nudge));
  }
}
.kc-contact {
  display: grid;
  gap: 32px;
}
@media (min-width: 980px) {
  .kc-contact {
    grid-template-columns: 0.82fr 1.18fr;
    align-items: start;
  }
}
.kc-contact__rail {
  display: grid;
  gap: 20px;
}
@media (min-width: 980px) {
  .kc-contact__rail {
    position: sticky;
    top: 104px;
  }
}
.kc-contact__card {
  background: var(--kc-ink);
  color: #fff;
  border-radius: 20px;
  padding: 30px;
}
.kc-contact__title {
  font-size: 1.16rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.kc-contact__card .kc-contact__title {
  color: #fff;
  margin-bottom: 22px;
}
.kc-contact__sub {
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0 0 22px;
}
.kc-contact__sub a {
  color: var(--kc-brand-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kc-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.kc-contact__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.kc-contact__list strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-bottom: 3px;
}
.kc-contact__list a, .kc-contact__list span span {
  color: #fff;
  font-size: 0.98rem;
  text-decoration: none;
}
@media (hover: hover) {
  .kc-contact__list a:hover {
    text-decoration: underline;
  }
}
.kc-contact__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--kc-brand);
}
.kc-contact__urgent {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.kc-contact__urgent span {
  color: var(--kc-brand);
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-contact__urgent strong {
  display: block;
  color: #fff;
  font-size: 0.96rem;
  margin-bottom: 5px;
}
.kc-contact__urgent p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
.kc-contact__legal {
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  border-radius: 16px;
  padding: 22px;
}
.kc-contact__legal p {
  margin: 0 0 7px;
  font-size: 0.82rem;
  line-height: 1.55;
}
.kc-contact__legal p:last-child {
  margin-bottom: 0;
}
.kc-contact__legal strong {
  color: var(--kc-ink);
}

.kc-form--contact {
  padding: 32px;
}

.kc-form__error {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #b4231b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kc-form__row:has(.kc-form__error) :where(input, textarea, select) {
  border-color: #d3453b;
}

.kc-alert {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid;
}
.kc-alert p {
  margin: 0 0 4px;
  font-size: 0.93rem;
  line-height: 1.55;
}
.kc-alert p:last-child {
  margin-bottom: 0;
}
.kc-alert ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  font-size: 0.9rem;
}
.kc-alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kc-alert span {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-alert--success {
  background: #edf8f1;
  border-color: #bfe3cd;
  color: #14612f;
}
.kc-alert--success p {
  color: #14612f;
}
.kc-alert--success span {
  color: #1c7a45;
}
.kc-alert--error {
  background: #fdf1f0;
  border-color: #f3ccc8;
  color: #8e1c15;
}
.kc-alert--error p, .kc-alert--error li {
  color: #8e1c15;
}
.kc-alert--error span {
  color: #b4231b;
}

.kc-legal__wrap {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .kc-legal__wrap {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}
@media (min-width: 1000px) {
  .kc-legal__toc {
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.kc-legal__toc {
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  border-radius: 18px;
  padding: 8px;
}
.kc-legal__toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--kc-muted);
}
.kc-legal__toc-title::-webkit-details-marker {
  display: none;
}
@media (min-width: 1000px) {
  .kc-legal__toc-title {
    cursor: default;
    pointer-events: none;
  }
}
.kc-legal__toc-count {
  margin-inline-start: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: #98a1ad;
}
.kc-legal__toc-chevron {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (min-width: 1000px) {
  .kc-legal__toc-chevron {
    display: none;
  }
}
details[open] .kc-legal__toc-chevron {
  transform: rotate(180deg);
}
.kc-legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  counter-reset: toc;
  display: grid;
  gap: 2px;
}
.kc-legal__toc li {
  counter-increment: toc;
}
.kc-legal__toc a {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--kc-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kc-legal__toc a::before {
  content: counter(toc);
  flex: 0 0 1.4em;
  color: var(--kc-brand-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .kc-legal__toc a:hover {
    background: #fff;
    color: var(--kc-ink);
  }
}
.kc-legal__toc a[aria-current=true] {
  background: #fff;
  color: var(--kc-ink);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--kc-brand);
}
.kc-legal__block {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--kc-line);
}
.kc-legal__block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.kc-legal__block:focus-visible {
  outline: 3px solid var(--kc-brand-strong);
  outline-offset: 6px;
  border-radius: 8px;
}
.kc-legal__block {
  scroll-margin-top: 100px;
}
.kc-legal__block h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.6rem);
  font-weight: 740;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.kc-legal__block h3 {
  font-size: 1.02rem;
  font-weight: 680;
  margin: 26px 0 10px;
}
.kc-legal__block p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 14px;
  max-width: 72ch;
  color: #3d4652;
}
.kc-legal__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kc-legal__list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--kc-muted);
}
.kc-legal__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kc-brand);
}
.kc-legal__list li strong {
  color: var(--kc-ink);
}
.kc-legal__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
}
.kc-legal__note span {
  color: var(--kc-brand-strong);
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kc-legal__note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--kc-ink);
}

.kc-tablewrap {
  margin: 18px 0 22px;
  overflow-x: auto;
  border: 1px solid var(--kc-line);
  border-radius: 14px;
}
.kc-tablewrap:focus-visible {
  outline: 3px solid var(--kc-brand-strong);
  outline-offset: 2px;
}

.kc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 560px;
}
.kc-table th, .kc-table td {
  padding: 13px 16px;
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--kc-line);
}
.kc-table thead th {
  background: var(--kc-tint);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kc-muted);
  white-space: nowrap;
}
.kc-table tbody th {
  font-weight: 650;
  color: var(--kc-ink);
}
.kc-table tbody td {
  color: var(--kc-muted);
}
.kc-table tbody tr:last-child :where(th, td) {
  border-bottom: 0;
}

.kc-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  font: inherit;
  color: var(--kc-ink);
}
.kc-switch__track {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #cfd4db;
  position: relative;
  flex: 0 0 auto;
  transition: background-color var(--dur-base) var(--ease-out);
}
.kc-switch__thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur-base) var(--ease-out);
}
.kc-switch__state {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--kc-muted);
  min-width: 26px;
}
.kc-switch[aria-checked=true] .kc-switch__track {
  background: var(--kc-brand-strong);
}
.kc-switch[aria-checked=true] .kc-switch__thumb {
  transform: translateX(20px);
}
.kc-switch[aria-checked=true] .kc-switch__state {
  color: var(--kc-brand-strong);
}

.kc-prefs {
  border: 1px solid var(--kc-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.kc-prefs__row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--kc-line);
}
@media (max-width: 560px) {
  .kc-prefs__row {
    flex-direction: column;
    gap: 12px;
  }
}
.kc-prefs__text h3 {
  font-size: 1rem;
  font-weight: 680;
  margin: 0 0 5px;
}
.kc-prefs__text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 52ch;
}
.kc-prefs__locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--kc-muted);
  background: var(--kc-tint);
  border-radius: 999px;
  padding: 8px 14px;
}
.kc-prefs__locked span {
  display: inline-flex;
}
.kc-prefs__note {
  margin: 0;
  padding: 18px 24px;
  background: var(--kc-tint);
  font-size: 0.87rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--kc-line);
}
.kc-prefs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 24px;
}
.kc-prefs__status {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 0.9rem;
  color: var(--kc-brand-strong);
  font-weight: 600;
}
.kc-prefs__status[hidden] {
  display: none;
}

.kc-a11y__launcher {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--kc-ink);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 14px 30px -10px rgba(16, 22, 30, 0.55), 0 2px 6px rgba(16, 22, 30, 0.15);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kc-a11y__launcher:hover {
    transform: translateY(var(--motion-lift));
    background: color-mix(in srgb, var(--kc-ink) 80%, var(--kc-brand));
  }
}
.kc-a11y__launcher:focus-visible {
  outline: 3px solid var(--kc-brand);
  outline-offset: 3px;
}
.kc-a11y__launcher:active {
  transform: scale(0.97);
}
.kc-a11y__launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kc-brand-strong);
}
@media (max-width: 560px) {
  .kc-a11y__launcher-label {
    display: none;
  }
}
@media (max-width: 560px) {
  .kc-a11y__launcher {
    padding: 6px;
  }
}
.kc-a11y__launcher.has-active .kc-a11y__launcher-icon {
  background: #1c7a45;
}
.kc-a11y__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #fff;
  color: var(--kc-ink);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 560px) {
  .kc-a11y__count {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    background: #1c7a45;
    color: #fff;
    border: 2px solid #fff;
  }
}
.kc-a11y__panel {
  position: fixed;
  inset-block-end: 82px;
  inset-inline-start: 22px;
  z-index: 91;
  width: min(352px, 100vw - 44px);
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 80px -20px rgba(16, 22, 30, 0.45), 0 4px 14px rgba(16, 22, 30, 0.08);
  max-height: min(580px, 100vh - 110px);
  display: flex;
  flex-direction: column;
  transform-origin: bottom left;
}
.kc-a11y__panel[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kc-a11y__panel {
    animation: kc-a11y-in 0.3s cubic-bezier(0.2, 1, 0.3, 1) both;
  }
}
@media (max-width: 560px) {
  .kc-a11y__panel {
    inset-inline: 0;
    inset-block-end: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 26px 26px 0 0;
    border-width: 1px 0 0;
    transform-origin: bottom center;
  }
}
.kc-a11y__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(135deg, var(--kc-brand), var(--kc-brand-strong));
}
.kc-a11y__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}
.kc-a11y__head-icon .iconify, .kc-a11y__head-icon svg {
  width: 24px;
  height: 24px;
}
.kc-a11y__head-text {
  flex: 1;
  min-width: 0;
}
.kc-a11y__head-text h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 780;
  letter-spacing: -0.01em;
  color: #fff;
}
.kc-a11y__head-text p {
  margin: 1px 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.92);
}
.kc-a11y__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
@media (hover: hover) {
  .kc-a11y__close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
  }
}
.kc-a11y__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.kc-a11y__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kc-a11y__group {
  display: grid;
  gap: 8px;
  margin: 0;
}
.kc-a11y__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 750;
  color: var(--kc-muted);
  margin: 0;
}
.kc-a11y__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.kc-a11y__profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.kc-a11y__profile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  text-align: start;
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-a11y__profile:hover {
    border-color: var(--kc-brand);
    background: var(--kc-brand-soft);
  }
}
.kc-a11y__profile:active {
  transform: scale(0.98);
}
.kc-a11y__profile:focus-visible {
  outline: 3px solid var(--kc-ink);
  outline-offset: 2px;
}
.kc-a11y__profile-icon {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--kc-brand);
  border: 1px solid var(--kc-brand-line);
}
.kc-a11y__profile-icon .iconify, .kc-a11y__profile-icon svg {
  width: 20px;
  height: 20px;
}
.kc-a11y__profile-label {
  grid-row: 1;
  font-size: 0.86rem;
  font-weight: 740;
  line-height: 1.2;
}
.kc-a11y__profile-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kc-a11y__profile[aria-pressed=true] {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
}
.kc-a11y__profile[aria-pressed=true] .kc-a11y__profile-icon {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: #fff;
}
.kc-a11y__profile[aria-pressed=true] .kc-a11y__profile-hint {
  color: rgba(255, 255, 255, 0.92);
}
.kc-a11y__sizeval {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--kc-brand-strong);
}
.kc-a11y__sizer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-a11y__sizebtn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  color: var(--kc-ink);
}
.kc-a11y__sizebtn small {
  font-size: 0.7em;
  font-weight: 800;
  vertical-align: super;
}
.kc-a11y__sizebtn--up {
  font-size: 1.15rem;
}
@media (hover: hover) {
  .kc-a11y__sizebtn:hover {
    border-color: var(--kc-brand);
    background: var(--kc-brand-soft);
  }
}
.kc-a11y__sizebtn:active {
  transform: scale(0.94);
}
.kc-a11y__sizebtn:focus-visible {
  outline: 3px solid var(--kc-ink);
  outline-offset: 2px;
}
.kc-a11y__slider {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 0;
}
.kc-a11y__slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 10px;
  margin: 0;
  border-radius: 99px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--kc-brand) var(--fill, 20%), var(--kc-line) var(--fill, 20%));
}
.kc-a11y__slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--kc-brand-strong);
  box-shadow: 0 3px 8px rgba(16, 22, 30, 0.3);
  cursor: grab;
}
.kc-a11y__slider input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--kc-brand-strong);
  box-shadow: 0 3px 8px rgba(16, 22, 30, 0.3);
  cursor: grab;
}
.kc-a11y__slider input[type=range]:focus-visible {
  outline: 3px solid var(--kc-ink);
  outline-offset: 6px;
}
.kc-a11y__ticks {
  position: absolute;
  inset-inline: 11px;
  top: 50%;
  height: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.kc-a11y__ticks i {
  width: 4px;
  height: 4px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--kc-muted);
  opacity: 0.5;
}
.kc-a11y__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.kc-a11y__grid li {
  display: flex;
}
.kc-a11y__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: start;
  padding: 7px 9px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--kc-ink);
  background: #fff;
  border: 1.5px solid var(--kc-line);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-a11y__toggle:hover {
    border-color: var(--kc-brand-line);
    background: var(--kc-tint);
  }
}
.kc-a11y__toggle:active {
  transform: scale(0.98);
}
.kc-a11y__toggle:focus-visible {
  outline: 3px solid var(--kc-ink);
  outline-offset: 2px;
}
.kc-a11y__toggle-top {
  display: contents;
}
.kc-a11y__toggle-icon {
  order: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand-strong);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.kc-a11y__toggle-icon .iconify, .kc-a11y__toggle-icon svg {
  width: 19px;
  height: 19px;
}
.kc-a11y__toggle-label {
  order: 1;
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.2;
}
.kc-a11y__toggle-state {
  order: 2;
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border-radius: 99px;
  background: var(--kc-line);
  transition: background-color var(--dur-base) var(--ease-out);
}
.kc-a11y__toggle-state::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-base) var(--ease-out);
}
.kc-a11y__toggle-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kc-a11y__toggle[aria-checked=true] {
  background: var(--kc-brand-soft);
  border-color: var(--kc-brand);
}
.kc-a11y__toggle[aria-checked=true] .kc-a11y__toggle-icon {
  background: var(--kc-brand-strong);
  color: #fff;
}
.kc-a11y__toggle[aria-checked=true] .kc-a11y__toggle-state {
  background: #1c7a45;
}
.kc-a11y__toggle[aria-checked=true] .kc-a11y__toggle-state::after {
  transform: translateX(12px);
}
.kc-a11y__speak {
  display: grid;
  gap: 8px;
}
.kc-a11y__play {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: start;
  background: var(--kc-ink);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-a11y__play:hover {
    background: color-mix(in srgb, var(--kc-ink) 82%, var(--kc-brand));
  }
}
.kc-a11y__play:active {
  transform: scale(0.98);
}
.kc-a11y__play:focus-visible {
  outline: 3px solid var(--kc-brand);
  outline-offset: 3px;
}
.kc-a11y__play-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--kc-brand);
}
.kc-a11y__play-icon .iconify, .kc-a11y__play-icon svg {
  width: 28px;
  height: 28px;
}
.kc-a11y__play-icon span {
  display: inline-flex;
}
.kc-a11y__play-icon span[hidden] {
  display: none;
}
.kc-a11y__play-text {
  flex: 1;
  display: grid;
  gap: 1px;
}
.kc-a11y__play-text strong {
  font-size: 0.88rem;
  font-weight: 740;
}
.kc-a11y__play-text small {
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}
.kc-a11y__play.is-speaking {
  background: var(--kc-brand-strong);
}
.kc-a11y__play.is-speaking .kc-a11y__play-icon {
  color: #fff;
}
.kc-a11y__play.is-speaking .kc-a11y__play-text small {
  color: rgba(255, 255, 255, 0.9);
}
.kc-a11y__bars {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}
.kc-a11y__bars i {
  width: 4px;
  border-radius: 2px;
  background: #fff;
  height: 40%;
}
.is-speaking .kc-a11y__bars {
  display: inline-flex;
}
@media (prefers-reduced-motion: no-preference) {
  .is-speaking .kc-a11y__bars i {
    animation: kc-a11y-bar 1s ease-in-out infinite;
  }
  .is-speaking .kc-a11y__bars i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .is-speaking .kc-a11y__bars i:nth-child(3) {
    animation-delay: 0.3s;
  }
  .is-speaking .kc-a11y__bars i:nth-child(4) {
    animation-delay: 0.45s;
  }
}
.kc-a11y__rates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 3px;
  border-radius: 11px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kc-a11y__rates button {
  padding: 6px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kc-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.kc-a11y__rates button[aria-pressed=true] {
  background: #fff;
  color: var(--kc-ink);
  box-shadow: 0 1px 4px rgba(16, 22, 30, 0.18);
}
.kc-a11y__rates button:focus-visible {
  outline: 3px solid var(--kc-ink);
  outline-offset: 1px;
}
.kc-a11y__actions {
  margin-top: -4px;
}
.kc-a11y__actions .kc-btn {
  padding: 9px 16px;
  font-size: 13.5px;
}
.kc-a11y__foot {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kc-a11y__foot kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  border-bottom-width: 2px;
  font: inherit;
  font-size: 0.92em;
  font-weight: 700;
  color: var(--kc-ink);
}
.kc-a11y__foot a {
  color: var(--kc-brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes kc-a11y-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kc-a11y-bar {
  0%, 100% {
    height: 30%;
  }
  50% {
    height: 100%;
  }
}
@media (max-width: 560px) {
  :root[data-a11y-panel-open] #kc-chat-widget {
    display: none;
  }
}
:root[data-a11y-scaled] {
  font-size: calc(100% * var(--kc-a11y-scale, 1));
}

:root[data-a11y-links] .frontend-page :where(a) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
:root[data-a11y-links] .frontend-page .kc-nav__link, :root[data-a11y-links] .frontend-page .kc-card__title a, :root[data-a11y-links] .frontend-page .kc-mega a, :root[data-a11y-links] .frontend-page .kc-footer a, :root[data-a11y-links] .frontend-page .kc-legal__toc a {
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

:root[data-a11y-readable] .frontend-page {
  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  letter-spacing: 0.015em;
  word-spacing: 0.06em;
}
:root[data-a11y-readable] .frontend-page :where(p, li, dd, label, input, textarea, select) {
  line-height: 1.85;
}
:root[data-a11y-readable] .frontend-page :where(h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.3;
}

.kc-a11y-ruler {
  position: fixed;
  inset-inline: 0;
  z-index: 80;
  pointer-events: none;
  background: rgba(10, 14, 20, 0.55);
}
.kc-a11y-ruler--top {
  top: 0;
  height: 0;
  border-bottom: 3px solid var(--kc-brand);
}
.kc-a11y-ruler--bottom {
  top: 100%;
  bottom: 0;
}

:root[data-a11y-cursor], :root[data-a11y-cursor] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}

:root[data-a11y-cursor] :is(a, button, [role=button], [role=switch], summary, label, select, input[type=submit], input[type=range]), :root[data-a11y-cursor] :is(a, button, summary, label) * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='%23ff650b' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") 4 2, pointer !important;
}

:root[data-a11y-focus] :is(a, button, input, select, textarea, summary, [tabindex], [role=button], [role=switch]):focus-visible {
  outline: 4px solid #1a56db !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px #fff !important;
  border-radius: 6px;
}

:root[data-a11y-targets] :is(button, .kc-btn, input:not([type=radio]):not([type=checkbox]):not([type=range]), select, summary) {
  min-height: 48px;
}
:root[data-a11y-targets] :is(button, .kc-btn) {
  min-width: 48px;
}
:root[data-a11y-targets] .kc-nav__link, :root[data-a11y-targets] .kc-footer__col a, :root[data-a11y-targets] .kc-footer__utility a, :root[data-a11y-targets] .kc-mega a, :root[data-a11y-targets] .kc-mobilenav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
}
:root[data-a11y-targets] .kc-footer__col ul {
  gap: 4px;
}

:root[data-a11y-contrast] {
  --kc-ink: #000000;
  --kc-muted: #1f242b;
  --kc-line: #4a5058;
  --kc-tint: #ffffff;
  --kc-brand-soft: #ffffff;
  --kc-brand-line: #000000;
}
:root[data-a11y-contrast] .frontend-page .kc-card, :root[data-a11y-contrast] .frontend-page .kc-panel, :root[data-a11y-contrast] .frontend-page .kc-glass, :root[data-a11y-contrast] .frontend-page .kc-framework, :root[data-a11y-contrast] .frontend-page .kc-prefs, :root[data-a11y-contrast] .frontend-page .kc-form,
:root[data-a11y-contrast] .frontend-page .kc-accordion__item, :root[data-a11y-contrast] .frontend-page .kc-tablewrap, :root[data-a11y-contrast] .frontend-page .kc-legal__toc, :root[data-a11y-contrast] .frontend-page .kc-note, :root[data-a11y-contrast] .frontend-page .kc-legal__note {
  border-width: 2px;
  border-color: #000;
  box-shadow: none;
}
:root[data-a11y-contrast] .frontend-page .kc-hero {
  background: #fff;
}
:root[data-a11y-contrast] .frontend-page .kc-hero__glow {
  display: none;
}
:root[data-a11y-contrast] .frontend-page .kc-pill, :root[data-a11y-contrast] .frontend-page .kc-coverage__areas li {
  border-width: 2px;
  border-color: #000;
}
:root[data-a11y-contrast] .frontend-page .kc-btn--outline {
  border-width: 2px;
  border-color: #000;
  color: #000;
}
:root[data-a11y-contrast] .frontend-page .kc-btn--ghost {
  border-width: 2px;
  border-color: #000;
}
:root[data-a11y-contrast] .frontend-page .kc-eyebrow {
  color: #000;
}
:root[data-a11y-contrast] .frontend-page :where(a) {
  text-decoration: underline;
}
:root[data-a11y-contrast] .kc-a11y__panel {
  border-width: 2px;
  border-color: #000;
}

.kc-help {
  padding-top: 48px;
}
.kc-help__title {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 740;
}
.kc-help__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .kc-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .kc-help__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}
.kc-help__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--kc-line);
  text-decoration: none;
  color: var(--kc-ink);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kc-help__item strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
}
.kc-help__item small {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  color: var(--kc-muted);
  word-break: break-word;
}
@media (hover: hover) {
  .kc-help__item:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    transform: translateY(var(--motion-lift));
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  }
}
.kc-help__item:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}
.kc-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}

.kc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  max-width: 520px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  box-shadow: 0 14px 34px -22px rgba(16, 22, 30, 0.3);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kc-search:focus-within {
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px var(--kc-brand-soft);
}
.kc-search__icon {
  display: inline-flex;
  color: var(--kc-muted);
}
.kc-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.98rem;
  color: var(--kc-ink);
  padding: 8px 0;
}

.kc-post {
  padding: 0;
  overflow: hidden;
  height: 100%;
}
.kc-post__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--kc-tint);
}
.kc-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .kc-post:hover .kc-post__media img {
    transform: scale(1.02);
  }
}
.kc-post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 0;
  font-size: 0.84rem;
  color: var(--kc-muted);
}
.kc-post .kc-card__title, .kc-post .kc-card__text {
  padding-inline: 22px;
}
.kc-post .kc-card__title {
  margin-top: 6px;
}
.kc-post__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 22px 20px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kc-post__foot img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.kc-post__foot .kc-card__go {
  margin: 0 0 0 auto;
  padding: 0;
}

.kc-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.kc-byline img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.kc-byline strong {
  display: block;
  font-size: 0.95rem;
  color: var(--kc-ink);
}
.kc-byline small {
  display: block;
  font-size: 0.85rem;
  color: var(--kc-muted);
}

.kc-article__cover {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 32px;
}

.kc-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--kc-line);
}
.kc-comments__title {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 740;
}
.kc-comments__empty {
  margin: 0;
  color: var(--kc-muted);
}
.kc-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.kc-comment {
  display: flex;
  gap: 14px;
}
.kc-comment > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-comment > div {
  flex: 1 1 auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kc-comment__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 0.9rem;
}
.kc-comment__head span {
  color: var(--kc-muted);
  font-size: 0.82rem;
}
.kc-comment__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--kc-ink);
}

.kc-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.kc-recent a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-recent a:hover {
    background: var(--kc-tint);
    color: var(--kc-ink);
  }
}
.kc-recent img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}
.kc-recent strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
}
.kc-recent small {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--kc-muted);
}

.kc-hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kc-form--sent {
  text-align: center;
  padding: 40px 28px;
}
.kc-form--sent:focus {
  outline: none;
}
.kc-form--sent h3 {
  margin: 12px 0 10px;
  font-size: 1.35rem;
  font-weight: 760;
}
.kc-form--sent p {
  margin: 0 auto 12px;
  max-width: 46ch;
  color: var(--kc-muted);
  line-height: 1.6;
}
.kc-form--sent strong {
  color: var(--kc-ink);
}
.kc-form--sent a:not(.kc-btn) {
  color: var(--kc-brand-strong);
  font-weight: 700;
}
.kc-form--sent .kc-btn {
  margin-top: 10px;
}

.kc-form__sent-icon {
  display: inline-flex;
  color: #1c7a45;
}

.kbl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.kbl-chips a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--kc-line);
  background: var(--kc-surface);
  color: var(--kc-ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.kbl-chips a span {
  font-size: 0.76rem;
  color: var(--kc-muted);
}
.kbl-chips a.on {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
}
.kbl-chips a.on span {
  color: rgba(255, 255, 255, 0.85);
}
@media (hover: hover) {
  .kbl-chips a:not(.on):hover {
    border-color: var(--kc-brand-strong);
    color: var(--kc-brand-strong);
  }
}

.kbl-active {
  margin: -8px 0 20px;
  color: var(--kc-muted);
  font-size: 0.92rem;
}
.kbl-active strong {
  color: var(--kc-ink);
}
.kbl-active a {
  color: var(--kc-brand-strong);
  font-weight: 600;
}

.kbl-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  margin: 0 0 32px;
  padding: 0;
}
.kbl-lead__media {
  min-height: 260px;
}
.kbl-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kbl-lead__body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.kbl-lead__body .kc-card__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
}
.kbl-lead__body .kc-card__text {
  font-size: 1rem;
  margin: 0;
}

@media (max-width: 800px) {
  .kbl-lead {
    grid-template-columns: 1fr;
  }
  .kbl-lead__body {
    padding: 20px;
  }
}
.kc-prose ul, .kc-prose ol {
  margin: 0 0 18px;
  padding-inline-start: 1.5em;
}
.kc-prose ul {
  list-style: disc;
}
.kc-prose ol {
  list-style: decimal;
}
.kc-prose li {
  margin: 6px 0;
  font-size: 1.03rem;
  line-height: 1.7;
  padding-inline-start: 4px;
}
.kc-prose li::marker {
  color: var(--kc-brand-strong);
  font-weight: 700;
}
.kc-prose h3 {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  font-weight: 720;
  letter-spacing: -0.015em;
  margin: 30px 0 10px;
}
.kc-prose h4 {
  font-size: 1.02rem;
  font-weight: 720;
  margin: 24px 0 8px;
}
.kc-prose a {
  color: var(--kc-brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kc-prose strong {
  color: var(--kc-ink);
  font-weight: 700;
}
.kc-prose blockquote {
  margin: 0 0 18px;
  padding: 6px 18px;
  border-inline-start: 4px solid var(--kc-brand);
  background: var(--kc-brand-soft);
  border-radius: 0 var(--kc-radius-sm, 12px) var(--kc-radius-sm, 12px) 0;
}
.kc-prose blockquote p {
  margin: 0;
}
.kc-prose figure {
  margin: 0 0 20px;
}
.kc-prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--kc-radius, 16px);
  display: block;
}
.kc-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.kc-prose code {
  font-size: 0.92em;
  background: var(--kc-tint);
  padding: 2px 6px;
  border-radius: 6px;
}
.kc-prose hr {
  border: 0;
  border-top: 1px solid var(--kc-line);
  margin: 28px 0;
}

.kc-tags {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kc-tags a {
  text-decoration: none;
}

.kbl-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--kc-line);
}
.kbl-share span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.kbl-share a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .kbl-share a:hover {
    border-color: var(--kc-brand-strong);
    color: var(--kc-brand-strong);
  }
}

.kbl-cta {
  margin: 28px 0 0;
  padding: 22px 24px;
  border-radius: var(--kc-radius, 16px);
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.kbl-cta h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.kbl-cta p {
  margin: 0;
  color: var(--kc-muted);
  max-width: 52ch;
}

.kbl-related__title {
  margin: 0 0 20px;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}

.kh-head {
  display: grid;
  gap: 14px;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .kh-head {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 48px;
  }
}
.kh-head--center {
  display: block;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.kh-head--center .kh-intro {
  margin-top: 14px;
}

.kh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kc-brand-strong);
}
.kh-eyebrow--light {
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}

.kh-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.45rem);
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: -0.025em;
}
.kh-title--light {
  color: #fff;
}

.kh-intro {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.65;
  color: var(--kc-muted);
  max-width: 62ch;
}

.kh-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 112px;
  background: linear-gradient(180deg, var(--kc-brand-soft) 0%, #fff 88%);
}
@media (min-width: 992px) {
  .kh-hero {
    padding: 72px 0 132px;
  }
}
.kh-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--kc-brand) 22%, transparent) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 82% 30%, #000 30%, transparent 72%);
}
.kh-hero__grid {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: center;
}
@media (min-width: 992px) {
  .kh-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
  }
}
.kh-hero__title {
  margin: 20px 0 18px;
  max-width: 20ch;
  text-wrap: balance;
  font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.45rem);
  line-height: 1.06;
  font-weight: 790;
  letter-spacing: -0.035em;
}
.kh-hero__accent {
  color: var(--kc-brand-strong);
  background: linear-gradient(transparent 64%, color-mix(in srgb, var(--kc-brand) 20%, transparent) 64%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kh-hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.16rem);
  line-height: 1.66;
  color: var(--kc-muted);
}
.kh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.kh-hero__call {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 0;
  font-size: 0.95rem;
  color: var(--kc-muted);
}
.kh-hero__call a {
  color: var(--kc-ink);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--kc-brand-line);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kh-hero__call a:hover {
    color: var(--kc-brand-strong);
    border-color: var(--kc-brand);
  }
}
.kh-hero__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand);
}

.kh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  font-size: 13px;
  font-weight: 650;
  color: var(--kc-ink);
}
.kh-badge .iconify {
  color: var(--kc-brand);
}

.kh-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--kc-line);
}
.kh-assure li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kh-assure span {
  color: var(--kc-brand);
  display: inline-flex;
}

.kh-picker {
  position: relative;
  background: #fff;
  border: 1px solid var(--kc-line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kh-picker {
    padding: 28px;
  }
}
.kh-picker__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 740;
  letter-spacing: -0.01em;
}
.kh-picker__intro {
  margin: 4px 0 18px;
  font-size: 0.92rem;
  color: var(--kc-muted);
}
.kh-picker__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .kh-picker__grid {
    gap: 10px;
  }
}
.kh-picker__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--kc-ink);
  color: #fff;
  font-weight: 650;
  font-size: 0.94rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kh-picker__more span {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kh-picker__more:hover {
    background: var(--kc-brand-strong);
    color: #fff;
  }
  .kh-picker__more:hover span {
    transform: translateX(var(--motion-nudge));
  }
}
.kh-picker__more:active {
  transform: scale(var(--motion-press));
  color: #fff;
}
.kh-picker__note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--kc-muted);
  text-align: center;
}

.kh-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--kc-line);
  background: #fff;
  color: var(--kc-ink);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
}
@media (min-width: 560px) {
  .kh-role {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 10px 12px;
    font-size: 0.88rem;
  }
}
.kh-role {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kh-role__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
@media (min-width: 560px) {
  .kh-role__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
}
.kh-role__icon {
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kh-role__go {
  display: none;
  margin-inline-start: auto;
  color: var(--kc-muted);
}
@media (min-width: 560px) {
  .kh-role__go {
    display: inline-flex;
  }
}
.kh-role__go {
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kh-role:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    background: var(--kc-brand-soft);
    box-shadow: 0 8px 20px -12px rgba(16, 22, 30, 0.25);
    transform: translateY(var(--motion-lift));
  }
  .kh-role:hover .kh-role__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kh-role:hover .kh-role__go {
    color: var(--kc-brand-strong);
    transform: translateX(var(--motion-nudge));
  }
}
.kh-role:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
  background: var(--kc-brand-soft);
}

.kh-facts {
  position: relative;
  z-index: 2;
  margin-top: -72px;
}
.kh-facts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--kc-line);
  border: 1px solid var(--kc-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
}
@media (min-width: 960px) {
  .kh-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kh-fact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #fff;
}
@media (min-width: 640px) {
  .kh-fact {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 24px;
  }
}
.kh-fact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kh-fact__figure {
  display: block;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  font-weight: 790;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kc-ink);
}
.kh-fact__label {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--kc-muted);
}

.kh-audience {
  padding-top: 64px;
}
.kh-audience__grid {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .kh-audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kh-path {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: 28px;
}
@media (min-width: 560px) {
  .kh-path {
    padding: 38px;
  }
}
.kh-path__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kh-path__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.kh-path__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kh-path__title {
  margin: 22px 0 20px;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.15;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.kh-path__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kh-path__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.98rem;
  line-height: 1.5;
}
.kh-path__list span {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kh-path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 30px;
}
.kh-path__note {
  margin: 18px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.kh-path--dark {
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--kc-brand) 26%, transparent) 0%, transparent 55%), var(--kc-ink);
  color: #fff;
}
.kh-path--dark .kh-path__icon {
  background: rgba(255, 255, 255, 0.08);
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}
.kh-path--dark .kh-path__eyebrow {
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}
.kh-path--dark .kh-path__title {
  color: #fff;
}
.kh-path--dark .kh-path__list li {
  color: rgba(255, 255, 255, 0.88);
}
.kh-path--dark .kh-path__list span {
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}
.kh-path--dark .kh-path__note {
  color: rgba(255, 255, 255, 0.6);
}
.kh-path--dark .kc-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
@media (hover: hover) {
  .kh-path--dark .kc-btn--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
  }
}
.kh-path--dark .kc-btn--ghost:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.kh-path--soft {
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
}
.kh-path--soft .kh-path__icon {
  background: #fff;
  color: var(--kc-brand);
}
.kh-path--soft .kh-path__eyebrow {
  color: var(--kc-brand-strong);
}
.kh-path--soft .kh-path__list li {
  color: var(--kc-ink);
}
.kh-path--soft .kh-path__list span {
  color: var(--kc-brand);
}
.kh-path--soft .kh-path__note {
  color: var(--kc-muted);
}
.kh-path--soft .kc-btn--ghost {
  background: #fff;
}

.kh-services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .kh-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .kh-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.kh-services__grid li {
  display: flex;
}

.kh-service {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 16px;
  row-gap: 6px;
  width: 100%;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width: 640px) {
  .kh-service {
    padding: 26px;
  }
}
.kh-service__icon {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kh-service__title {
  font-size: 1.04rem;
  font-weight: 720;
  line-height: 1.3;
  padding-top: 2px;
}
.kh-service__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kh-service__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--kc-brand-strong);
}
.kh-service__go span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kh-service:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kh-service:hover .kh-service__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kh-service:hover .kh-service__go span {
    transform: translateX(var(--motion-nudge));
  }
}
.kh-service:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}

.kh-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .kh-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .kh-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    inset-inline: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--kc-brand-line) 0 8px, transparent 8px 14px);
  }
}

.kh-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 18px;
  align-items: start;
}
@media (min-width: 900px) {
  .kh-step {
    display: block;
    text-align: center;
  }
}
.kh-step__marker {
  position: relative;
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand);
  box-shadow: 0 10px 24px -14px rgba(16, 22, 30, 0.3);
}
@media (min-width: 900px) {
  .kh-step__marker {
    margin-bottom: 20px;
  }
}
.kh-step__icon {
  display: inline-flex;
}
.kh-step__num {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kc-brand-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 0 0 3px #fff;
}
.kh-step__title {
  margin: 4px 0 6px;
  font-size: 1.05rem;
  font-weight: 720;
}
.kh-step__text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
@media (min-width: 900px) {
  .kh-step__text {
    max-width: 30ch;
    margin-inline: auto;
  }
}

.kh-compliance {
  padding-top: 0;
}

.kh-compliance__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 36px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 26px;
  border-radius: 28px;
  color: #fff;
  background: radial-gradient(90% 90% at 0% 100%, color-mix(in srgb, var(--kc-brand) 24%, transparent) 0%, transparent 60%), var(--kc-ink);
}
@media (min-width: 560px) {
  .kh-compliance__panel {
    padding: 44px;
  }
}
@media (min-width: 992px) {
  .kh-compliance__panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    padding: 56px;
  }
}
.kh-compliance__panel .kc-btn {
  white-space: normal;
  text-align: center;
}

.kh-compliance__intro {
  margin: 16px 0 28px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
  max-width: 52ch;
}

.kh-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 560px) {
  .kh-checks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kh-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.kh-check__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kc-brand) 20%, transparent);
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}

.kh-compliance + .kh-frameworks {
  padding-top: 32px;
}

.kh-frameworks__grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 900px) {
  .kh-frameworks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kh-fw {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .kh-fw {
    padding: 30px;
  }
}
.kh-fw__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.kh-fw__head .kc-tag {
  margin-top: 8px;
}
.kh-fw__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kh-fw__name {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: 740;
  line-height: 1.3;
}
.kh-fw__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kh-fw__lots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kh-fw__lots li {
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kc-ink);
}
.kh-fw__meta {
  display: grid;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 22px;
}
@media (min-width: 560px) {
  .kh-fw__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
.kh-fw__meta > div {
  padding-top: 16px;
  border-top: 1px solid var(--kc-line);
}
.kh-fw__meta dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kh-fw__meta dd {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--kc-muted);
}

.kh-coverage {
  padding: 0 0 72px;
}

.kh-coverage__panel {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: 28px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .kh-coverage__panel {
    padding: 40px;
  }
}
@media (min-width: 992px) {
  .kh-coverage__panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    padding: 48px;
  }
}
.kh-coverage__panel .kh-intro {
  margin-top: 12px;
}

.kh-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kh-areas li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kh-areas li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kc-brand);
}

.ka-hero {
  overflow-x: clip;
  padding-top: 28px;
}
.ka-hero .kc-crumbs, .ka-hero nav[aria-label] {
  margin-bottom: 18px;
}
.ka-hero__lede + .ka-hero__lede {
  margin-top: 14px;
}
.ka-hero .kh-hero__title {
  max-width: 16ch;
}

.ka-founder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .ka-founder {
    padding: 34px;
  }
}
@media (max-width: 991px) {
  .ka-founder::before {
    display: none;
  }
}
.ka-founder::before {
  content: "";
  position: absolute;
  inset: 14px -12px -12px 14px;
  z-index: -1;
  border-radius: 26px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
}
.ka-founder__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ka-founder__mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 1.35rem;
  font-weight: 790;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--kc-brand), var(--kc-brand-strong));
}
.ka-founder__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: var(--kc-ink);
}
.ka-founder__role {
  margin: 3px 0 0;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.ka-founder__quote {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 22px;
  border-radius: 16px;
  background: var(--kc-tint);
  border-inline-start: 3px solid var(--kc-brand);
}
.ka-founder__quote .iconify {
  color: var(--kc-brand);
  opacity: 0.5;
}
.ka-founder__quote p {
  margin: 6px 0 0;
  font-size: 1.04rem;
  line-height: 1.6;
  font-weight: 560;
  color: var(--kc-ink);
}
.ka-founder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ka-founder__tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 13px;
  font-weight: 650;
  color: var(--kc-ink);
}
.ka-founder__tags li .iconify {
  color: var(--kc-brand);
}

.ka-hero {
  padding-bottom: 96px;
}
@media (min-width: 992px) {
  .ka-hero {
    padding-bottom: 116px;
  }
}

.ka-story__grid {
  display: grid;
  gap: 44px;
  align-items: start;
}
@media (min-width: 992px) {
  .ka-story__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 72px;
  }
}
.ka-story__text p {
  margin: 16px 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--kc-muted);
  max-width: 58ch;
}
.ka-story__text .kh-title {
  margin-bottom: 8px;
}
.ka-story__lead {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
  color: var(--kc-ink) !important;
  font-weight: 500;
}

.ka-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.ka-timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  inset-inline-start: 23px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--kc-brand-line) 0 8px, transparent 8px 14px);
}
.ka-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px 18px 12px 0;
  border-radius: 16px;
  transition: background-color var(--dur-base) var(--ease-out);
}
.ka-timeline__item p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kc-muted);
}
@media (hover: hover) {
  .ka-timeline__item:hover {
    background: var(--kc-tint);
  }
}
.ka-timeline__dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #fff;
  color: var(--kc-brand);
  border: 1px solid var(--kc-brand-line);
  box-shadow: 0 0 0 5px #fff;
}
.ka-timeline__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 720;
  color: var(--kc-ink);
}
.ka-timeline__item.is-now {
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  padding-inline-end: 18px;
  margin-top: 6px;
}
.ka-timeline__item.is-now .ka-timeline__dot {
  background: var(--kc-brand-strong);
  color: #fff;
  border-color: transparent;
}

.ka-purpose {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--kc-brand) 30%, transparent) 0%, transparent 60%), var(--kc-ink);
}
@media (min-width: 640px) {
  .ka-purpose {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 40px 44px;
  }
}
.ka-purpose__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}
.ka-purpose__label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kc-brand) 72%, white) !important;
}
.ka-purpose__text {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff !important;
  text-wrap: balance;
}

.ka-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .ka-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .ka-values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ka-value {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ka-value__num {
  position: absolute;
  top: 14px;
  inset-inline-end: 20px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--kc-brand) 12%, white);
}
.ka-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.ka-value__title {
  margin: 18px 0 8px;
  font-size: 1.12rem;
  font-weight: 740;
  letter-spacing: -0.01em;
}
.ka-value__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--kc-muted);
}
@media (hover: hover) {
  .ka-value:hover {
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .ka-value:hover .ka-value__icon {
    background: var(--kc-brand);
    color: #fff;
  }
}

.ka-brands__grid {
  position: relative;
  display: grid;
  gap: 20px;
}
@media (min-width: 800px) {
  .ka-brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.ka-brand {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .ka-brand {
    padding: 38px;
  }
}
.ka-brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--kc-tint);
  color: var(--kc-muted);
  border: 1px solid var(--kc-line);
}
.ka-brand__for {
  margin: 22px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.ka-brand__name {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 780;
  letter-spacing: -0.025em;
}
.ka-brand__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--kc-muted);
}
.ka-brand.is-current {
  background: var(--kc-brand-soft);
  border-color: var(--kc-brand-line);
}
.ka-brand.is-current .ka-brand__icon {
  background: var(--kc-brand-strong);
  color: #fff;
  border-color: transparent;
}
.ka-brand.is-current .ka-brand__for {
  color: var(--kc-brand-strong);
}

.ka-brands__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kc-muted);
}
.ka-brands__note .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}

.ka-promise {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 40px;
  padding: 30px;
  border-radius: 24px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .ka-promise {
    padding: 38px;
  }
}
@media (min-width: 992px) {
  .ka-promise {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
    padding: 44px 48px;
  }
}
.ka-promise__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ka-promise__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand);
}
.ka-promise__title {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 770;
  letter-spacing: -0.02em;
}
.ka-promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ka-promise__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--kc-line);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.ka-promise__list span {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--kc-brand);
}

.kx-hero {
  padding-top: 28px;
  padding-bottom: 72px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kx-hero {
    padding-bottom: 88px;
  }
}
@media (min-width: 992px) {
  .kx-hero .kh-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.kx-hero .kh-hero__title {
  max-width: 14ch;
}
.kx-hero__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 0.94rem;
  color: var(--kc-muted);
}
.kx-hero__hours .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}

.kx-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kx-quick__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  color: var(--kc-ink);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kx-quick__item:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    transform: translateY(var(--motion-lift));
  }
  .kx-quick__item:hover .kx-quick__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kx-quick__item:hover .kx-quick__go {
    transform: translateX(var(--motion-nudge));
    color: var(--kc-brand-strong);
  }
}
.kx-quick__item:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}
.kx-quick__item--lead {
  padding: 24px;
  background: var(--kc-ink);
  border-color: transparent;
  color: #fff;
}
.kx-quick__item--lead .kx-quick__label {
  color: rgba(255, 255, 255, 0.72);
}
.kx-quick__item--lead .kx-quick__label em {
  color: color-mix(in srgb, var(--kc-brand) 72%, white);
}
.kx-quick__item--lead .kx-quick__value {
  color: #fff;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
}
.kx-quick__item--lead .kx-quick__icon {
  background: var(--kc-brand);
  color: #fff;
}
.kx-quick__item--lead .kx-quick__go {
  color: rgba(255, 255, 255, 0.7);
}
@media (hover: hover) {
  .kx-quick__item--lead:hover {
    color: #fff;
    background: color-mix(in srgb, var(--kc-ink) 88%, var(--kc-brand));
  }
  .kx-quick__item--lead:hover .kx-quick__go {
    color: #fff;
  }
  .kx-quick__item--lead:hover .kx-quick__icon {
    background: var(--kc-brand);
  }
}
.kx-quick__item--lead:active {
  color: #fff;
}
.kx-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kx-quick__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kx-quick__label {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--kc-muted);
}
.kx-quick__label em {
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: 1px;
}
.kx-quick__value {
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kx-quick__go {
  margin-inline-start: auto;
  display: inline-flex;
  color: var(--kc-muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.kx-routes {
  padding-bottom: 72px;
}

.kx-grid {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 992px) {
  .kx-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 36px;
  }
}

.kx-form {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
}
@media (min-width: 640px) {
  .kx-form {
    padding: 44px;
  }
}
.kx-form .kh-title {
  margin-top: 2px;
}
.kx-form__sub {
  margin: 12px 0 26px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kx-form__sub a {
  color: var(--kc-brand-strong);
  font-weight: 650;
}
.kx-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 26px;
}
.kx-form__legal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--kc-muted);
}
.kx-form__legal .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}

.kx-topics {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kx-topics legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kx-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kx-topic {
  position: relative;
  cursor: pointer;
}
.kx-topic input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.kx-topic span {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kx-topic:hover span {
    border-color: var(--kc-brand-line);
    background: var(--kc-brand-soft);
  }
}
.kx-topic input:checked + span {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
}
.kx-topic input:focus-visible + span {
  outline: 3px solid var(--kc-brand);
  outline-offset: 2px;
}

.kx-fields {
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .kx-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kx-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .kx-field--full {
    grid-column: 1/-1;
  }
}
.kx-field label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kx-field input, .kx-field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--kc-ink);
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kx-field input::placeholder, .kx-field textarea::placeholder {
  color: color-mix(in srgb, var(--kc-muted) 75%, white);
}
.kx-field input:hover, .kx-field textarea:hover {
  border-color: var(--kc-brand-line);
}
.kx-field input:focus, .kx-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kx-field input[aria-invalid=true], .kx-field textarea[aria-invalid=true] {
  border-color: #b3261e;
  background: #fff;
}
.kx-field textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.55;
}

.kx-sent {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
  padding: 20px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, #1c7a45 9%, white);
  border: 1px solid color-mix(in srgb, #1c7a45 28%, white);
}
.kx-sent__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #1c7a45;
}
.kx-sent__title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--kc-ink) !important;
}
.kx-sent p {
  margin: 0;
  line-height: 1.55;
}

.kx-side {
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .kx-side {
    position: sticky;
    top: 104px;
  }
}

.kx-urgent {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--kc-brand-strong), color-mix(in srgb, var(--kc-brand) 62%, black));
}
.kx-urgent__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
}
.kx-urgent__title {
  margin: 2px 0 6px;
  font-size: 1.12rem;
  font-weight: 760;
  color: #fff !important;
}
.kx-urgent p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}
.kx-urgent__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--kc-brand-strong);
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kx-urgent__call:hover {
    color: var(--kc-brand-strong);
    transform: translateY(calc(var(--motion-lift) / 2));
  }
}
.kx-urgent__call:active {
  color: var(--kc-brand-strong);
  transform: scale(var(--motion-press));
}

.kx-card {
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kx-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kx-card__title .iconify {
  color: var(--kc-brand);
}
.kx-card address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 550;
  color: var(--kc-ink);
}
.kx-card__person {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kc-ink) !important;
}
.kx-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kc-brand-strong);
  text-decoration: none;
  border-bottom: 1.5px solid var(--kc-brand-line);
}
@media (hover: hover) {
  .kx-card__link:hover {
    color: var(--kc-brand-strong);
    border-color: var(--kc-brand);
  }
}

.kx-areas li {
  padding: 6px 11px;
  font-size: 0.84rem;
}

.kx-legal {
  padding: 0 0 36px;
}
.kx-legal p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--kc-muted);
  text-align: center;
}

.kp-hero {
  padding-top: 28px;
  padding-bottom: 72px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kp-hero {
    padding-bottom: 88px;
  }
}
.kp-hero .kh-hero__title {
  max-width: 16ch;
}
.kp-hero__lede + .kp-hero__lede {
  margin-top: 14px;
}
.kp-hero__foot {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 44px 0 0;
  max-width: 78ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kp-hero__foot .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

.kp-board {
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kp-board {
    padding: 32px;
  }
}
.kp-board__title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kp-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kp-board__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.kp-board__row--positive {
  background: #eef8f2;
  border-color: #cfe9da;
}
.kp-board__row--positive .kp-board__mark {
  color: #1c7a45;
}
.kp-board__row--positive .kp-board__status {
  color: #1c7a45;
}
.kp-board__row--caution {
  background: #fff7ea;
  border-color: #f4dcb2;
}
.kp-board__row--caution .kp-board__mark {
  color: #b36a00;
}
.kp-board__row--caution .kp-board__status {
  color: #8a5200;
}
.kp-board__mark {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
}
.kp-board__name {
  display: block;
  font-size: 1.04rem;
  font-weight: 740;
  line-height: 1.3;
  color: var(--kc-ink);
}
.kp-board__status {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.4;
}
.kp-board__holder {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--kc-line);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kp-board__holder .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 2px;
}
.kp-board__holder strong {
  color: var(--kc-ink);
}

.kp-frameworks {
  padding-bottom: 32px;
  scroll-margin-top: 90px;
}

.kp-grid {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .kp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.kp-fw {
  display: grid;
  gap: 0;
  padding: 0;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  overflow: hidden;
  border-top: 5px solid var(--kc-line);
}
.kp-fw--positive {
  border-top-color: #1c7a45;
}
.kp-fw--caution {
  border-top-color: #d9922b;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .kp-fw {
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }
}
.kp-fw__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 28px 22px;
}
@media (min-width: 560px) {
  .kp-fw__head {
    padding: 32px 34px 24px;
  }
}
.kp-fw__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kp-fw__name {
  margin: 2px 0 8px;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 770;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.kp-fw__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}
.kp-fw--positive .kp-fw__status {
  background: #e8f6ee;
  color: #1c7a45;
}
.kp-fw--caution .kp-fw__status {
  background: #fff4e5;
  color: #8a5200;
}
.kp-fw__block {
  padding: 22px 28px;
  border-top: 1px solid var(--kc-line);
}
@media (min-width: 560px) {
  .kp-fw__block {
    padding: 24px 34px;
  }
}
.kp-fw__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kp-fw__label .iconify {
  color: var(--kc-brand);
}
.kp-fw__text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--kc-ink);
}

.kp-lots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.kp-lots li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kc-ink);
}
.kp-lots__num {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 5px 9px;
  border-radius: 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--kc-brand-strong);
}

.kp-steps::before {
  display: none !important;
}
@media (min-width: 900px) {
  .kp-steps::before {
    display: block !important;
  }
}

.kp-factors {
  margin-top: 48px;
  padding: 26px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 640px) {
  .kp-factors {
    padding: 30px 36px;
  }
}
.kp-factors__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kp-factors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kp-factors__list li {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kc-ink);
}

.kp-frameworks + .kc-sec--flush {
  padding-top: 32px;
  padding-bottom: 8px;
}

.kcm-hero .kh-hero__title {
  max-width: 15ch;
}

.kcm-glance {
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kcm-glance {
    padding: 38px;
  }
}
.kcm-glance__figure {
  margin: 0;
  font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kc-brand-strong) !important;
}
.kcm-glance__label {
  margin: 8px 0 0;
  max-width: 28ch;
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--kc-ink) !important;
}
.kcm-glance__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--kc-line);
  display: grid;
  gap: 14px;
}
.kcm-glance__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--kc-muted);
}
.kcm-glance__list span {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--kc-brand);
}

.kcm-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kcm-principles li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kcm-principles li strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 730;
  color: var(--kc-ink);
}
.kcm-principles li span span {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kcm-principles li:first-child {
  background: var(--kc-brand-soft);
  border-color: var(--kc-brand-line);
}
.kcm-principles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
li:first-child .kcm-principles__icon {
  background: #fff;
}

.kcm-groups {
  display: grid;
  gap: 20px;
}

.kcm-group {
  display: grid;
  gap: 22px;
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 640px) {
  .kcm-group {
    padding: 34px;
  }
}
@media (min-width: 1024px) {
  .kcm-group {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
    gap: 40px;
    padding: 40px;
  }
}
.kcm-group__num {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--kc-brand) 30%, white);
}
.kcm-group__title {
  margin: 10px 0 8px;
  font-size: 1.4rem;
  font-weight: 770;
  letter-spacing: -0.02em;
}
.kcm-group__text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--kc-muted);
  max-width: 28ch;
}
.kcm-group__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .kcm-group__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kcm-check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 16px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.kcm-check__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  color: var(--kc-brand);
  border: 1px solid var(--kc-brand-line);
}
.kcm-check__title {
  margin: 2px 0 4px;
  font-size: 1rem;
  font-weight: 730;
}
.kcm-check__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
@media (hover: hover) {
  .kcm-check:hover {
    background: #fff;
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  }
}

.kcm-flow {
  position: relative;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .kcm-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
.kcm-flow__step {
  position: relative;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
@media (min-width: 900px) {
  .kcm-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: -16px;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-top: 2px solid var(--kc-brand);
    border-inline-end: 2px solid var(--kc-brand);
    transform: rotate(45deg);
  }
}
.kcm-flow__step.is-alert {
  background: #fff7ea;
  border-color: #f4dcb2;
}
.kcm-flow__step.is-alert .kcm-flow__icon {
  background: #fde6bd;
  color: #9a5b00;
}
.kcm-flow__step.is-alert .kcm-flow__when {
  color: #8a5200;
}
.kcm-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kcm-flow__when {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kc-brand-strong) !important;
}
.kcm-flow__text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--kc-ink) !important;
}

.kcm-panel {
  margin-top: 0;
}

.kcm-monitor .kh-compliance__panel {
  margin-top: 0;
}

.kcm-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 20px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-ink);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.kcm-verify__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: #fff;
  color: var(--kc-brand);
}
.kcm-verify__text {
  flex: 1 1 240px;
}
.kcm-verify__text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 750;
}
.kcm-verify__text span {
  display: block;
  margin-top: 2px;
  font-size: 0.94rem;
  color: var(--kc-muted);
}
.kcm-verify__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 720;
  color: var(--kc-brand-strong);
}
.kcm-verify__go span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kcm-verify:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kcm-verify:hover .kcm-verify__go span {
    transform: translateX(var(--motion-nudge));
  }
}
.kcm-verify:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}

.kj-hero {
  padding-top: 28px;
  padding-bottom: 96px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kj-hero {
    padding-bottom: 104px;
  }
}
@media (min-width: 992px) {
  .kj-hero .kh-hero__grid {
    grid-template-columns: 1.3fr 0.7fr;
  }
}
.kj-hero .kh-hero__title {
  max-width: 18ch;
}

.kj-stat {
  padding: 28px 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
.kj-stat__figure {
  margin: 0;
  font-size: clamp(3.4rem, 2.6rem + 3vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kc-brand-strong) !important;
}
.kj-stat__label {
  margin: 6px 0 0;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--kc-ink) !important;
}
.kj-stat__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--kc-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.kj-stat__list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kj-stat__list li .iconify {
  color: var(--kc-brand);
}

.kj-searchwrap {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}

.kj-search {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 640px) {
  .kj-search {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 26px;
  }
}
@media (min-width: 1100px) {
  .kj-search {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}
.kj-search__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
@media (min-width: 640px) {
  .kj-search__field--wide {
    grid-column: 1/-1;
  }
}
@media (min-width: 1100px) {
  .kj-search__field--wide {
    grid-column: auto;
  }
}
.kj-search__field label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kj-search__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  color: var(--kc-brand);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.kj-search__input:focus-within {
  background: #fff;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kj-search__input input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--kc-ink);
  outline: none;
}
.kj-search select {
  width: 100%;
  padding: 14px 40px 14px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--kc-ink);
  background-color: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kj-search select:hover {
  border-color: var(--kc-brand-line);
}
.kj-search select:focus {
  outline: none;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kj-search__go {
  height: 52px;
  justify-content: center;
}
@media (max-width: 639px) {
  .kj-search__go {
    width: 100%;
  }
}

.kj-results {
  padding-top: 36px;
}

.kj-roles {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.kj-role {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kj-role:hover {
    color: var(--kc-ink);
    background: var(--kc-brand-soft);
    border-color: var(--kc-brand-line);
  }
}
.kj-role.is-on, .kj-role.is-on:hover {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
}

.kj-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 22px;
}

.kj-head__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 770;
  letter-spacing: -0.02em;
}

.kj-applied {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.kj-applied a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 0.86rem;
  color: var(--kc-ink);
  text-decoration: none;
}
@media (hover: hover) {
  .kj-applied a:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand);
  }
}
.kj-applied__x {
  display: inline-flex;
  color: var(--kc-brand);
}
.kj-applied a.kj-applied__clear {
  padding: 6px 10px;
  background: transparent;
  border-color: transparent;
  font-weight: 700;
  color: var(--kc-brand-strong);
  text-decoration: underline;
}

.kj-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 700px) {
  .kj-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .kj-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kj-card:hover {
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kj-card:hover .kj-card__go span {
    transform: translateX(var(--motion-nudge));
  }
}
.kj-card__top {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.kj-card__title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.kj-card__title a {
  color: var(--kc-ink);
  text-decoration: none;
}
.kj-card__title a:hover {
  color: var(--kc-ink);
}
.kj-card__pay {
  margin: 10px 0 0;
  font-size: 1.12rem;
  font-weight: 780;
  color: var(--kc-brand-strong) !important;
}
.kj-card__meta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.kj-card__meta li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--kc-muted);
}
.kj-card__meta li .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 1px;
}
.kj-card__text {
  margin: 14px 0 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kj-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.kj-card__foot::before {
  content: none;
}
.kj-card__text + .kj-card__foot, .kj-card__meta + .kj-card__foot {
  border-top: 0;
}
.kj-card__posted {
  font-size: 0.82rem;
  color: var(--kc-muted);
}
.kj-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 720;
  color: var(--kc-brand-strong);
}
.kj-card__go span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}

.kj-type {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.kj-type--temp {
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
}
.kj-type--perm {
  background: #e8f6ee;
  color: #1c7a45;
}

.kj-new {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--kc-brand-strong);
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  border-radius: 24px;
  background: var(--kc-tint);
  border: 1px dashed var(--kc-brand-line);
}
.kj-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: #fff;
  color: var(--kc-brand);
}
.kj-empty h3 {
  margin: 20px 0 8px;
  font-size: 1.35rem;
  font-weight: 760;
}
.kj-empty p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}
.kj-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.kj-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}

.kj-pager__num, .kj-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  font-weight: 650;
  color: var(--kc-ink);
  text-decoration: none;
}
@media (hover: hover) {
  .kj-pager__num:hover, .kj-pager__btn:hover {
    color: var(--kc-ink);
    background: var(--kc-brand-soft);
    border-color: var(--kc-brand-line);
  }
}
.kj-pager__num.is-on, .kj-pager__num.is-on:hover, .kj-pager__btn.is-on, .kj-pager__btn.is-on:hover {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
}

.kj-pager__gap {
  padding: 0 4px;
  color: var(--kc-muted);
}

@media (min-width: 992px) {
  .kq-hero .kh-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.kq-hero .kh-hero__title {
  max-width: 18ch;
}
.kq-hero__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 22px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kq-hero__note .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

.kq-start__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted) !important;
}

.kq-solutions__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 800px) {
  .kq-solutions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1100px) {
  .kq-solutions__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kq-solution {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width: 560px) {
  .kq-solution {
    padding: 34px;
  }
}
@media (hover: hover) {
  .kq-solution:hover {
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kq-solution:hover .kq-solution__icon {
    background: var(--kc-brand);
    color: #fff;
  }
}
.kq-solution__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 19px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kq-solution__title {
  margin: 4px 0 8px;
  font-size: 1.22rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}
.kq-solution__text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--kc-muted);
}
.kq-solution.is-lead {
  background: var(--kc-brand-soft);
  border-color: var(--kc-brand-line);
}
.kq-solution.is-lead .kq-solution__icon {
  background: var(--kc-brand-strong);
  color: #fff;
}
@media (min-width: 800px) {
  .kq-solution.is-lead {
    grid-column: 1/-1;
    align-items: center;
  }
  .kq-solution.is-lead .kq-solution__text {
    max-width: 78ch;
  }
}
@media (min-width: 1100px) {
  .kq-solution:not(.is-lead) {
    flex-direction: column;
  }
}

.kq-settings__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .kq-settings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .kq-settings__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
.kq-settings__grid li {
  display: flex;
}

.kq-setting {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  text-decoration: none;
  font-weight: 650;
  line-height: 1.35;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kq-setting__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kq-setting__go {
  margin-inline-start: auto;
  display: inline-flex;
  color: var(--kc-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kq-setting.is-link:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kq-setting.is-link:hover .kq-setting__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kq-setting.is-link:hover .kq-setting__go {
    color: var(--kc-brand-strong);
    transform: translateX(var(--motion-nudge));
  }
}
.kq-setting.is-link:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}

.kq-process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) {
  .kq-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .kq-process__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.kq-step {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kq-step__num {
  position: absolute;
  top: 14px;
  inset-inline-end: 20px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--kc-brand) 13%, white);
}
.kq-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kq-step__title {
  margin: 18px 0 8px;
  font-size: 1.12rem;
  font-weight: 750;
}
.kq-step__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--kc-muted);
}

.kq-banner {
  padding-bottom: 56px;
  padding-top: 0;
}

.kc-sec--tint + .kc-sec .kh-compliance__panel {
  margin-top: 0;
}

@media (min-width: 1100px) {
  .kq-solutions__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .kq-settings__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kq-settings__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kq-setting__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kq-setting__text {
  font-size: 0.86rem;
  font-weight: 450;
  line-height: 1.5;
  color: var(--kc-muted);
}

.kcm-verify.is-static {
  cursor: default;
  align-items: flex-start;
  background: var(--kc-tint);
  border-color: var(--kc-line);
}
@media (hover: hover) {
  .kcm-verify.is-static:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--kc-line);
  }
}
.kcm-verify.is-static .kcm-verify__text span + span {
  margin-top: 8px;
}

.kh-compliance__list-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kc-brand) 72%, white) !important;
}

.kq-roles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .kq-roles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .kq-roles__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kq-roles__grid li {
  display: flex;
}

.kq-role {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kq-role__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.kq-role__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.kq-role__name {
  font-size: 1.04rem;
  font-weight: 740;
  line-height: 1.3;
}
.kq-role__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kq-role__go {
  display: inline-flex;
  color: var(--kc-brand-strong);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kq-role:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kq-role:hover .kq-role__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kq-role:hover .kq-role__go {
    transform: translateX(var(--motion-nudge));
  }
}
.kq-role:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}

.kx-quick__value {
  line-height: 1.25;
}

.kc-cta__title {
  line-height: 1.2;
}

.kc-sec--tint + .kh-coverage {
  padding-top: 56px;
}

.kjh-hero .kh-hero__title {
  max-width: 17ch;
}

.kjh-card__live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #eef8f2;
  border: 1px solid #cfe9da;
  color: var(--kc-ink);
  text-decoration: none;
  font-weight: 600;
}
.kjh-card__live strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1c7a45;
}
.kjh-card__live {
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kjh-card__live:hover {
    color: var(--kc-ink);
    border-color: #1c7a45;
  }
  .kjh-card__live:hover .kjh-card__go {
    transform: translateX(var(--motion-nudge));
  }
}
.kjh-card__live:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}
.kjh-card__pulse {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1c7a45;
}
.kjh-card__pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #1c7a45;
  opacity: 0.35;
}
.kjh-card__go {
  margin-inline-start: auto;
  display: inline-flex;
  color: #1c7a45;
  transition: transform var(--dur-fast) var(--ease-out);
}
.kjh-card__title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted) !important;
}
.kjh-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.kjh-card__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.kjh-card__list strong {
  display: block;
  font-size: 1rem;
  font-weight: 740;
  color: var(--kc-ink);
}
.kjh-card__list p {
  margin: 3px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kjh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}

.kq-role.is-static {
  cursor: default;
}
.kq-role.is-static .kc-tag {
  align-self: flex-start;
}
@media (hover: hover) {
  .kq-role.is-static:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--kc-line);
  }
}

.kma-hero {
  padding-top: 28px;
  padding-bottom: 72px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kma-hero .kh-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.kma-hero .kh-hero__title {
  max-width: 14ch;
}
.kma-hero--results {
  padding-bottom: 56px;
}
.kma-hero--results .kh-hero__title {
  max-width: none;
}

.kma-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 460px;
}
.kma-steps li {
  display: flex;
  gap: 16px;
  align-items: center;
}
.kma-steps strong {
  display: block;
  font-size: 1rem;
  font-weight: 740;
  color: var(--kc-ink);
}
.kma-steps li > span:last-child span {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kma-steps__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand);
}
.kma-steps__num {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kc-brand-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 0 0 3px #fff;
}

.kma-card {
  position: relative;
  padding: 56px 28px 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
  margin-top: 28px;
}
@media (min-width: 560px) {
  .kma-card {
    padding: 62px 40px 36px;
  }
}
.kma-card__badge {
  position: absolute;
  top: -34px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--kc-brand), var(--kc-brand-strong));
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--kc-brand) 70%, black);
}
.kma-card__title {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 770;
  letter-spacing: -0.02em;
}
.kma-card__sub {
  margin: 6px 0 24px;
  text-align: center;
  font-size: 0.96rem;
  color: var(--kc-muted);
}
.kma-card__go {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
.kma-card__trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--kc-line);
  display: grid;
  gap: 10px;
}
.kma-card__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kma-card__trust li .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}

.kma-field {
  display: block;
}
.kma-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kma-field__input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  color: var(--kc-brand);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.kma-field__input:hover {
  border-color: var(--kc-brand-line);
}
.kma-field__input:focus-within {
  background: #fff;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kma-field__input input {
  flex: 1;
  min-width: 0;
  padding: 17px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  color: var(--kc-ink);
  outline: none;
}
.kma-field__input input::placeholder {
  color: color-mix(in srgb, var(--kc-muted) 70%, white);
}

.kma-sum {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kma-sum li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kc-muted);
}
.kma-sum li strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--kc-ink);
}
.kma-sum li.is-alert {
  background: var(--kc-brand-strong);
  border-color: transparent;
  color: #fff;
}
.kma-sum li.is-alert strong {
  color: #fff;
}

.kma-results {
  padding-top: 8px;
}

.kma-apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.kma-app {
  position: relative;
  padding: 26px 26px 26px 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 22, 30, 0.03);
}
@media (min-width: 640px) {
  .kma-app {
    padding: 30px 34px 30px 38px;
  }
}
.kma-app::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--kc-brand);
}
.kma-app--good::before {
  background: #1c7a45;
}
.kma-app--ended::before {
  background: #b9c0c9;
}
.kma-app--ended {
  background: var(--kc-tint);
}
.kma-app__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
.kma-app__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kma-app--good .kma-app__icon {
  background: #e8f6ee;
  color: #1c7a45;
}
.kma-app--ended .kma-app__icon {
  background: #eceff2;
  color: var(--kc-muted);
}
.kma-app__id {
  flex: 1 1 260px;
  min-width: 0;
}
.kma-app__title {
  margin: 2px 0 8px;
  font-size: 1.28rem;
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.kma-app__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--kc-muted);
}
.kma-app__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kma-app__meta span .iconify {
  color: var(--kc-brand);
}
.kma-app__meta strong {
  color: var(--kc-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kma-app__alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
}
.kma-app__alert > span {
  display: inline-flex;
  color: var(--kc-brand-strong);
  flex: 0 0 auto;
}
.kma-app__alert p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--kc-ink) !important;
}

.kma-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand-strong);
}
.kma-pill--good {
  background: #e8f6ee;
  border-color: #cfe9da;
  color: #1c7a45;
}
.kma-pill--ended {
  background: #eceff2;
  border-color: var(--kc-line);
  color: var(--kc-muted);
}

.kma-track {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kma-track li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.kma-track li::before {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-end: 50%;
  width: 100%;
  height: 3px;
  background: var(--kc-line);
}
.kma-track li:first-child::before {
  display: none;
}
.kma-track li.is-done::before, .kma-track li.is-now::before {
  background: var(--kc-brand);
}
.kma-track__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--kc-line);
  color: #fff;
}
.kma-track__name {
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--kc-muted);
  max-width: 11ch;
}
@media (min-width: 640px) {
  .kma-track__name {
    font-size: 0.88rem;
    max-width: none;
  }
}
.is-done .kma-track__dot {
  background: var(--kc-brand);
  border-color: var(--kc-brand);
}
.is-done .kma-track__name {
  color: var(--kc-ink);
}
.is-now .kma-track__dot {
  border-color: var(--kc-brand);
  background: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--kc-brand) 18%, transparent);
}
.is-now .kma-track__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kc-brand);
}
.is-now .kma-track__name {
  color: var(--kc-brand-strong);
  font-weight: 760;
}

.kma-app--good .kma-track li.is-done::before, .kma-app--good .kma-track li.is-now::before {
  background: #1c7a45;
}

.kma-app--good .kma-track .is-done .kma-track__dot {
  background: #1c7a45;
  border-color: #1c7a45;
}

.kma-app--good .kma-track .is-now .kma-track__dot {
  border-color: #1c7a45;
  box-shadow: 0 0 0 5px rgba(28, 122, 69, 0.16);
}
.kma-app--good .kma-track .is-now .kma-track__dot::after {
  background: #1c7a45;
}

.kma-app--good .kma-track .is-now .kma-track__name {
  color: #1c7a45;
}

@media (prefers-reduced-motion: no-preference) {
  .kma-track .is-now .kma-track__dot {
    animation: kma-pulse 2.2s ease-in-out infinite;
  }
}
@keyframes kma-pulse {
  0%, 100% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--kc-brand) 18%, transparent);
  }
  50% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--kc-brand) 6%, transparent);
  }
}
.kma-foot {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.kma-state {
  padding: 56px 0 96px;
}
.kma-state__card {
  max-width: 640px;
  margin-inline: auto;
  padding: 48px 28px 36px;
  text-align: center;
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kma-state__card {
    padding: 60px 56px 48px;
  }
}
.kma-state__title {
  margin: 28px 0 12px;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.kma-state__text {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--kc-muted);
}
.kma-state__tips {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.kma-state__tips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kma-state__tips li .iconify {
  color: var(--kc-brand);
}
.kma-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.kma-mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
}
.kma-mail__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--kc-brand), var(--kc-brand-strong));
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--kc-brand) 75%, black);
}
.kma-mail__ring {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  border: 2px solid var(--kc-brand-line);
  opacity: 0.8;
}
.kma-mail__ring--2 {
  inset: -14px;
  border-radius: 52px;
  opacity: 0.45;
}
.kma-mail__tick {
  position: absolute;
  z-index: 3;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  border-radius: 50%;
  background: #fff;
  color: #1c7a45;
  box-shadow: 0 0 0 3px #fff;
}
.kma-mail--expired .kma-mail__icon {
  background: linear-gradient(135deg, #8f98a3, #5b6572);
  box-shadow: 0 22px 40px -18px rgba(16, 22, 30, 0.5);
}
.kma-mail--expired .kma-mail__ring {
  border-color: var(--kc-line);
}

@media (prefers-reduced-motion: no-preference) {
  .kma-mail__icon {
    animation: kma-float 3.6s ease-in-out infinite;
  }
  .kma-mail__ring {
    animation: kma-ring 3.6s ease-in-out infinite;
  }
  .kma-mail__ring--2 {
    animation-delay: 0.5s;
  }
  .kma-mail__tick {
    animation: kma-pop 0.6s 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
}
@keyframes kma-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes kma-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.25;
  }
}
@keyframes kma-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.kma-mail__icon .iconify, .kma-mail__icon svg {
  width: 56px;
  height: 56px;
}

.kma-mail__tick .iconify, .kma-mail__tick svg {
  width: 34px;
  height: 34px;
}

.kma-card__badge .iconify, .kma-card__badge svg {
  width: 38px;
  height: 38px;
}

.kv-hero {
  padding-top: 40px;
  padding-bottom: 72px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kv-hero .kh-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.kv-hero .kh-hero__title {
  max-width: 14ch;
}

.kv-form {
  margin-top: 28px;
  max-width: 560px;
}
.kv-form__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kv-form__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 560px) {
  .kv-form__row {
    flex-direction: row;
  }
}
.kv-form__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-width: 0;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  color: var(--kc-brand);
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kv-form__input:hover {
  border-color: var(--kc-brand-line);
}
.kv-form__input:focus-within {
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kv-form__input input {
  flex: 1;
  min-width: 0;
  padding: 18px 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kc-ink);
}
.kv-form__input input::placeholder {
  font-weight: 450;
  color: color-mix(in srgb, var(--kc-muted) 60%, white);
}
.kv-form__kind {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--kc-brand-strong);
}
.kv-form__go {
  height: 58px;
  justify-content: center;
  padding-inline: 30px;
}
.kv-form__hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--kc-muted);
}
.kv-form__hint b {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--kc-ink);
}

.kv-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}
.kv-badge__lanyard {
  width: 34px;
  height: 54px;
  background: repeating-linear-gradient(135deg, var(--kc-brand-strong) 0 8px, color-mix(in srgb, var(--kc-brand-strong) 78%, white) 8px 16px);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}
.kv-badge__card {
  position: relative;
  width: min(300px, 82vw);
  padding: 26px 24px 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--kc-line);
  text-align: center;
  box-shadow: 0 40px 70px -26px rgba(16, 22, 30, 0.35), 0 2px 8px rgba(16, 22, 30, 0.06);
  transform: rotate(-2.5deg);
  transform-origin: top center;
  overflow: hidden;
}
.kv-badge__card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 96px;
  background: linear-gradient(135deg, var(--kc-brand), var(--kc-brand-strong));
}
.kv-badge__hole {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 9px;
  margin: -12px auto 14px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.kv-badge__brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
}
.kv-badge__person {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.kv-badge__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  border: 5px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(16, 22, 30, 0.4);
}
.kv-badge__lines {
  display: grid;
  gap: 7px;
  justify-items: center;
}
.kv-badge__lines i {
  display: block;
  height: 9px;
  width: 130px;
  border-radius: 99px;
  background: #e6e8ec;
}
.kv-badge__lines i:last-child {
  width: 90px;
}
.kv-badge__number {
  margin-top: 20px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--kc-tint);
  border: 1.5px dashed var(--kc-brand-line);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--kc-muted);
  overflow-wrap: anywhere;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast);
}
.kv-badge__number.is-live {
  color: var(--kc-brand-strong);
  background: var(--kc-brand-soft);
  border-style: solid;
  border-color: var(--kc-brand);
}
.kv-badge__qr {
  position: relative;
  display: inline-flex;
  margin-top: 18px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  overflow: hidden;
}
.kv-badge__qr .iconify, .kv-badge__qr svg {
  width: 78px;
  height: 78px;
}
.kv-badge__beam {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--kc-brand);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--kc-brand) 55%, transparent);
  opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  .kv-badge__card {
    animation: kv-sway 6s ease-in-out infinite;
  }
  .kv-badge__beam {
    animation: kv-scan 2.4s ease-in-out infinite;
  }
}
@keyframes kv-sway {
  0%, 100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}
@keyframes kv-scan {
  0% {
    top: 6%;
  }
  50% {
    top: 88%;
  }
  100% {
    top: 6%;
  }
}
.kv-steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 800px) {
  .kv-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
.kv-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--kc-line);
}
.kv-steps strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 740;
}
.kv-steps p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kv-steps__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kv-steps__icon span {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kc-brand-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 0 0 3px #fff;
}

.kv-privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  font-size: 0.9rem;
  color: var(--kc-muted);
}
.kv-privacy .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
}
.kv-privacy--center {
  justify-content: center;
  text-align: center;
}

.kv-result {
  padding: 40px 0 88px;
}

.kv-cert {
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
.kv-cert__banner {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 26px 30px;
  background: var(--kv-bg);
  color: var(--kv-fg);
}
.kv-cert__seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  color: var(--kv-fg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--kv-fg) 14%, transparent);
}
.kv-cert__seal .iconify, .kv-cert__seal svg {
  width: 40px;
  height: 40px;
}
.kv-cert__kind {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  color: var(--kv-fg) !important;
}
.kv-cert__status {
  margin: 4px 0 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--kv-fg) !important;
}
.kv-cert__body {
  padding: 30px;
}
@media (min-width: 560px) {
  .kv-cert__body {
    padding: 36px 40px;
  }
}
.kv-cert__who {
  display: flex;
  align-items: center;
  gap: 18px;
}
.kv-cert__photo {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--kv-bg);
}
.kv-cert__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--kv-bg);
  color: var(--kv-fg);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.kv-cert__name {
  margin: 0;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.8rem);
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.kv-cert__sub {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--kc-muted);
}
.kv-cert__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 26px 0 0;
}
.kv-cert__facts > div {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kv-cert__facts dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kv-cert__facts dd {
  margin: 5px 0 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--kc-ink);
  overflow-wrap: anywhere;
}
.kv-cert__facts dd.is-mono {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
}
.kv-cert__guide {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--kv-bg);
  color: var(--kv-fg);
}
.kv-cert__guide > span {
  display: inline-flex;
  flex: 0 0 auto;
}
.kv-cert__guide p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 550;
  color: var(--kv-fg) !important;
}
.kv-cert__checked {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: 0.84rem;
  color: var(--kc-muted);
}
.kv-cert__checked .iconify {
  color: var(--kc-brand);
}
.kv-cert__foot {
  display: flex;
  justify-content: center;
  padding: 20px 30px 30px;
  border-top: 1px solid var(--kc-line);
  background: var(--kc-tint);
}

@media (prefers-reduced-motion: no-preference) {
  .kv-cert--valid .kv-cert__seal {
    animation: kv-seal 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  }
  .kv-cert--valid .kv-cert__seal::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--kv-fg);
    animation: kv-ring 2.2s ease-out 0.6s infinite;
  }
}
@keyframes kv-seal {
  from {
    transform: scale(0.4) rotate(-20deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes kv-ring {
  from {
    transform: scale(1);
    opacity: 0.5;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.kv-nf__note {
  margin-top: 12px !important;
  font-size: 0.94rem !important;
}

.kz-hero {
  padding-top: 28px;
  padding-bottom: 48px;
  overflow-x: clip;
}
@media (min-width: 992px) {
  .kz-hero .kh-hero__grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}
.kz-hero .kh-hero__title {
  max-width: 26ch;
  font-size: clamp(2rem, 1.25rem + 2.4vw, 3.1rem);
  margin-block: 16px 14px;
}
.kz-hero .kp-hero__foot {
  margin-top: 22px;
}
.kz-hero .kh-hero__grid {
  align-items: center;
}

.kz-points {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kz-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kc-brand-line);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kc-ink);
}
.kz-points li span {
  display: inline-flex;
  color: var(--kc-brand);
}

.kz-call {
  display: grid;
  gap: 12px;
}
.kz-call__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted) !important;
}
.kz-call__mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--kc-brand-strong);
  text-decoration: none;
}
.kz-call__mail .iconify {
  color: var(--kc-brand);
}
@media (hover: hover) {
  .kz-call__mail:hover {
    color: var(--kc-ink);
  }
}

.kz-main {
  padding-top: 24px;
}

.kz-wrap {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 992px) {
  .kz-wrap {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
  }
}

.kz-rail {
  display: grid;
  gap: 22px;
}
@media (min-width: 992px) {
  .kz-rail {
    position: sticky;
    top: 100px;
  }
}

.kz-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
@media (min-width: 992px) {
  .kz-steps {
    display: grid;
    gap: 4px;
    position: relative;
  }
}

.kz-step {
  position: relative;
}
.kz-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 25px;
  top: 52px;
  bottom: -4px;
  width: 2px;
  background: var(--kc-line);
  transition: background-color var(--dur-base);
}
.kz-step.is-done:not(:last-child)::after {
  background: var(--kc-brand);
}
.kz-step__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: var(--kc-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kz-step__btn:hover {
    background: var(--kc-tint);
  }
}
.kz-step__btn:disabled {
  cursor: default;
  background: transparent;
}
.kz-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-inline-start: 2px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kc-line);
  color: var(--kc-muted);
  position: relative;
  z-index: 1;
  transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base);
}
.kz-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kz-step__text strong {
  font-size: 0.98rem;
  font-weight: 720;
}
.kz-step__text small {
  font-size: 0.82rem;
  color: var(--kc-muted);
}
.kz-step.is-locked .kz-step__text {
  opacity: 0.55;
}
.kz-step.is-current .kz-step__dot {
  border-color: var(--kc-brand);
  color: var(--kc-brand);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kz-step.is-current .kz-step__btn {
  background: var(--kc-brand-soft);
}
.kz-step.is-done .kz-step__dot {
  background: var(--kc-brand);
  border-color: var(--kc-brand);
  color: #fff;
}

.kz-ticket {
  position: relative;
  padding: 22px 22px 18px;
  border-radius: 22px;
  color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--kc-brand) 30%, transparent), transparent 60%), var(--kc-ink);
  box-shadow: 0 24px 40px -22px rgba(16, 22, 30, 0.5);
}
.kz-ticket::before, .kz-ticket::after {
  content: "";
  position: absolute;
  top: 52px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}
.kz-ticket::before {
  inset-inline-start: -9px;
}
.kz-ticket::after {
  inset-inline-end: -9px;
}
.kz-ticket__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kc-brand) 72%, white) !important;
}
.kz-ticket__rows {
  margin: 0;
  display: grid;
  gap: 12px;
}
.kz-ticket__rows > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
}
.kz-ticket__rows dt {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.kz-ticket__rows dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
  overflow-wrap: anywhere;
}
.kz-ticket__rows dd.is-set {
  color: #fff;
}
.kz-ticket__org {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--kc-brand) 72%, white) !important;
}
.kz-ticket__org:empty {
  display: none;
}
@media (max-width: 991px) {
  .kz-ticket {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kz-ticket dd.pop {
    animation: kz-pop 0.45s ease-out;
  }
}
@keyframes kz-pop {
  0% {
    transform: translateY(5px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.kz-form {
  padding: 28px 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
  min-width: 0;
}
@media (min-width: 640px) {
  .kz-form {
    padding: 40px 44px;
  }
}

.kz-progress {
  margin-bottom: 26px;
}
.kz-progress__bar {
  height: 8px;
  border-radius: 99px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  overflow: hidden;
}
.kz-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kc-brand), var(--kc-brand-strong));
  transition: width 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.kz-progress__label {
  margin: 8px 0 0;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--kc-muted);
}

.kz-panel {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kz-panel + .kz-panel {
  margin-top: 36px;
}
.kz-panel[hidden] {
  display: none;
}
.kz-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 0;
  float: none;
  width: 100%;
}
.kz-panel__head strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--kc-ink);
}
.kz-panel__head small {
  display: block;
  margin-top: 2px;
  font-size: 0.94rem;
  color: var(--kc-muted);
}
.kz-panel__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--kc-brand-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .is-wizard .kz-panel.is-active {
    animation: kz-in 0.4s var(--ease-out);
  }
}
@keyframes kz-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.kz-fields {
  display: grid;
  gap: 22px;
}
@media (min-width: 640px) {
  .kz-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kz-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
@media (min-width: 640px) {
  .kz-field--full {
    grid-column: 1/-1;
  }
}

.kz-label {
  display: block;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kc-ink);
}

.kz-hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--kc-muted);
}

.kz-field input:not([type=radio]), .kz-field textarea {
  width: 100%;
  padding: 15px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--kc-ink);
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kz-field input:not([type=radio])::placeholder, .kz-field textarea::placeholder {
  color: color-mix(in srgb, var(--kc-muted) 70%, white);
}
.kz-field input:not([type=radio]):hover, .kz-field textarea:hover {
  border-color: var(--kc-brand-line);
}
.kz-field input:not([type=radio]):focus, .kz-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kz-field input:not([type=radio])[aria-invalid=true], .kz-field textarea[aria-invalid=true] {
  border-color: #b3261e;
  background: #fff;
}
.kz-field textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.55;
}

.kz-choice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kz-choice legend {
  margin-bottom: 10px;
}
.kz-choice__list {
  display: grid;
  gap: 10px;
}
.kz-choice__list--tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .kz-choice__list--tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kz-choice__list--chips, .kz-choice__list--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kz-opt {
  position: relative;
  display: block;
  cursor: pointer;
}
.kz-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.kz-opt__box {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  color: var(--kc-ink);
  font-weight: 650;
  line-height: 1.3;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kz-opt__icon {
  display: inline-flex;
  color: var(--kc-brand);
  transition: color var(--dur-fast);
}
@media (hover: hover) {
  .kz-opt:hover .kz-opt__box {
    border-color: var(--kc-brand-line);
    background: var(--kc-brand-soft);
  }
}
.kz-opt input:checked + .kz-opt__box {
  background: var(--kc-brand-strong);
  border-color: var(--kc-brand-strong);
  color: #fff;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--kc-brand) 90%, black);
}
.kz-opt input:checked + .kz-opt__box .kz-opt__icon {
  color: #fff;
}
.kz-opt input:focus-visible + .kz-opt__box {
  outline: 3px solid var(--kc-brand);
  outline-offset: 2px;
}
.kz-opt input:active + .kz-opt__box {
  transform: scale(0.97);
}

.kz-choice__list--tiles .kz-opt__box {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 108px;
  padding: 16px 10px;
  font-size: 0.9rem;
}

.kz-choice__list--chips .kz-opt__box {
  padding: 9px 15px 9px 11px;
  font-size: 0.92rem;
}

.kz-choice__list--pills .kz-opt__box {
  padding: 10px 20px;
  font-size: 0.95rem;
}

.kz-stepper {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
}
.kz-stepper input {
  width: 76px !important;
  padding: 10px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 1.3rem !important;
  font-weight: 780;
  -moz-appearance: textfield;
}
.kz-stepper input::-webkit-outer-spin-button, .kz-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kz-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--kc-brand-strong);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(16, 22, 30, 0.12);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
@media (hover: hover) {
  .kz-stepper__btn:hover {
    background: var(--kc-brand-soft);
  }
}
.kz-stepper__btn:active {
  transform: scale(0.92);
}

.kz-legal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 26px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--kc-muted);
}
.kz-legal .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

.kz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--kc-line);
}
.kz-nav .kz-nav__back {
  margin-inline-end: auto;
}
.kz-nav .kz-nav__next, .kz-nav .kz-nav__submit {
  margin-inline-start: auto;
}

.is-wizard .kz-nav {
  justify-content: flex-end;
}

.kz-form:not(.is-wizard) .kz-nav__back, .kz-form:not(.is-wizard) .kz-nav__next {
  display: none;
}

.kz-sent {
  max-width: 680px;
  margin-inline: auto;
  padding: 56px 28px 44px;
  text-align: center;
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
@media (min-width: 560px) {
  .kz-sent {
    padding: 64px 56px 52px;
  }
}
.kz-sent .kma-state__title {
  margin-top: 30px;
}
.kz-sent .kma-state__text {
  margin-top: 12px;
}
.kz-sent__ref {
  display: inline-block;
  margin: 0 0 6px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--kc-brand-soft);
  border: 1.5px dashed var(--kc-brand);
  font-size: 0.98rem;
  color: var(--kc-muted);
}
.kz-sent__ref strong {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--kc-brand-strong);
  font-size: 1.1rem;
}

.kz-sent .kma-mail__icon .iconify, .kz-sent .kma-mail__icon svg {
  width: 56px;
  height: 56px;
}

.kz-sent .kma-mail__icon {
  background: linear-gradient(135deg, #2fa563, #1c7a45);
  box-shadow: 0 22px 40px -18px rgba(28, 122, 69, 0.7);
}

.kz-sent .kma-mail__ring {
  border-color: #cfe9da;
}

.kz-sent:focus {
  outline: none;
}

.kl-hero {
  padding-top: 28px;
  padding-bottom: 56px;
  overflow-x: clip;
}
.kl-hero .kh-hero__title {
  max-width: 22ch;
}
@media (min-width: 992px) {
  .kl-hero .kh-hero__grid {
    grid-template-columns: 1.3fr 0.7fr;
  }
}
.kl-hero .kl-hero__grid--single {
  grid-template-columns: 1fr !important;
}
.kl-hero .kl-hero__grid--single .kh-hero__title {
  max-width: 26ch;
}
.kl-hero .kl-hero__grid--single .kh-hero__lede {
  max-width: 62ch;
}

.kl-doc {
  padding: 22px 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 30px 70px -24px rgba(16, 22, 30, 0.22), 0 2px 6px rgba(16, 22, 30, 0.04);
}
.kl-doc__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kl-doc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand);
}
.kl-doc__kind {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted) !important;
}
.kl-doc__title {
  margin: 2px 0 0;
  font-size: 1.12rem;
  font-weight: 760;
  line-height: 1.25;
  color: var(--kc-ink) !important;
}
.kl-doc__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 0;
}
.kl-doc__facts > div {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kl-doc__facts dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
}
.kl-doc__facts dd {
  margin: 3px 0 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--kc-ink);
}
.kl-doc__status {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 14px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--kc-muted) !important;
}
.kl-doc__status .iconify {
  color: var(--kc-brand);
  flex: 0 0 auto;
  margin-top: 2px;
}
.kl-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--kc-line);
}

.kl-ph {
  padding: 1px 6px;
  border-radius: 6px;
  background: #fff1c2;
  color: #6b4a00;
  border: 1px dashed #d9a400;
  font-weight: 600;
}

.kl-progress {
  position: fixed;
  z-index: 55;
  top: 76px;
  inset-inline: 0;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.kl-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--kc-brand), var(--kc-brand-strong));
}

[dir=rtl] .kl-progress span {
  transform-origin: right;
}

.kl-legal {
  padding-top: 24px;
}
@media (min-width: 1000px) {
  .kl-legal .kc-legal__wrap {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
  }
}
.kl-legal .kc-legal__toc {
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 22, 30, 0.04);
  padding: 10px;
}
.kl-legal .kc-legal__toc a {
  border-radius: 12px;
}
.kl-legal .kc-legal__toc a[aria-current=true] {
  background: var(--kc-brand-soft);
  box-shadow: inset 3px 0 0 var(--kc-brand);
  color: var(--kc-ink);
}
.kl-legal .kc-legal__body {
  min-width: 0;
}
.kl-legal .kc-legal__block {
  position: relative;
  padding: 0 0 40px;
  margin-bottom: 40px;
}
.kl-legal .kc-legal__block h2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem);
  line-height: 1.2;
}
.kl-legal .kc-legal__block p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--kc-ink);
  opacity: 0.86;
  max-width: 70ch;
}
.kl-legal .kc-legal__block h3 {
  position: relative;
  margin: 30px 0 12px;
  padding-inline-start: 14px;
  font-size: 1.08rem;
  font-weight: 720;
}
.kl-legal .kc-legal__block h3::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--kc-brand);
}
.kl-legal .kc-legal__list li {
  font-size: 1rem;
  color: var(--kc-ink);
  opacity: 0.88;
}
.kl-legal .kc-legal__list li::before {
  background: var(--kc-brand-strong);
}
.kl-legal .kc-legal__list li strong {
  opacity: 1;
}
.kl-legal .kc-legal__note {
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  border-inline-start: 4px solid var(--kc-brand);
}
.kl-legal .kc-legal__note span {
  color: var(--kc-brand-strong);
}
.kl-legal .kc-legal__note p {
  opacity: 1;
  font-size: 0.94rem;
}

.kl-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin-top: -2px;
  border-radius: 13px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  color: var(--kc-brand-strong);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kl-title {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

.kl-anchor {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--kc-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) {
  .kl-anchor:hover {
    background: var(--kc-tint);
    color: var(--kc-brand-strong);
  }
}
.kl-anchor:focus-visible {
  opacity: 1;
  outline: 3px solid var(--kc-brand-strong);
  outline-offset: 2px;
}
.kl-anchor.is-copied {
  opacity: 1;
  background: #e8f6ee;
  color: #1c7a45;
}

.kc-legal__block:hover .kl-anchor, .kc-legal__block h2:focus-within .kl-anchor {
  opacity: 1;
}

@media (hover: none) {
  .kl-anchor {
    opacity: 0.7;
  }
}
.kc-tablewrap {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 22, 30, 0.04);
}

.kc-table tbody tr {
  transition: background-color var(--dur-fast);
}
@media (hover: hover) {
  .kc-table tbody tr:hover {
    background: var(--kc-tint);
  }
}

.kl-next {
  margin-top: 12px;
  padding: 28px;
  border-radius: 24px;
  background: var(--kc-tint);
  border: 1px solid var(--kc-line);
}
.kl-next__title {
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}
.kl-next__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 760px) {
  .kl-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kl-next__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  text-decoration: none;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kl-next__card:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kl-next__card:hover .kl-next__go {
    transform: translateX(var(--motion-nudge));
  }
}
.kl-next__card:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}
.kl-next__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kl-next__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.kl-next__text strong {
  font-size: 0.98rem;
  font-weight: 740;
  line-height: 1.3;
}
.kl-next__text span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--kc-muted);
}
.kl-next__go {
  display: inline-flex;
  align-self: flex-end;
  color: var(--kc-brand-strong);
  transition: transform var(--dur-base) var(--ease-out);
}
.kl-next__all {
  margin: 18px 0 0;
}
.kl-next__all a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--kc-brand-strong);
  text-decoration: none;
}
.kl-next__all a .iconify {
  color: var(--kc-brand);
}
@media (hover: hover) {
  .kl-next__all a:hover {
    color: var(--kc-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.kl-hub {
  padding-top: 20px;
}
.kl-hub__tools {
  display: grid;
  gap: 14px;
  margin-bottom: 36px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
  box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
}
.kl-hub__tools[hidden] {
  display: none;
}
.kl-hub__search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--kc-tint);
  border: 1.5px solid var(--kc-line);
  color: var(--kc-brand);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.kl-hub__search:focus-within {
  background: #fff;
  border-color: var(--kc-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-brand) 16%, transparent);
}
.kl-hub__search input {
  flex: 1;
  min-width: 0;
  padding: 15px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--kc-ink);
  outline: none;
}
.kl-hub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kl-hub__chips .kj-role span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-inline-start: 6px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.76rem;
  font-weight: 750;
}
.kl-hub__chips .kj-role.is-on span {
  background: rgba(255, 255, 255, 0.25);
}
.kl-hub__group {
  margin-bottom: 44px;
}
.kl-hub__group[hidden] {
  display: none;
}
.kl-hub__head {
  margin-bottom: 18px;
}
.kl-hub__head .kh-eyebrow {
  margin-bottom: 4px;
}
.kl-hub__title {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  font-weight: 780;
  letter-spacing: -0.02em;
}
.kl-hub__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .kl-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .kl-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kl-hub__grid li {
  display: flex;
}
.kl-hub__grid li[hidden] {
  display: none;
}

.kl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--kc-line);
  color: var(--kc-ink);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .kl-card:hover {
    color: var(--kc-ink);
    border-color: var(--kc-brand-line);
    box-shadow: 0 18px 44px -20px rgba(16, 22, 30, 0.2);
    transform: translateY(var(--motion-lift));
  }
  .kl-card:hover .kl-card__icon {
    background: var(--kc-brand);
    color: #fff;
  }
  .kl-card:hover .kl-card__go span {
    transform: translateX(var(--motion-nudge));
  }
}
.kl-card:active {
  color: var(--kc-ink);
  transform: scale(var(--motion-press));
}
.kl-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
  transition: background-color var(--dur-base), color var(--dur-base);
}
.kl-card__title {
  font-size: 1.1rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.kl-card__text {
  flex: 1;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kl-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kc-brand-strong);
}
.kl-card__go span {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}

.kk-prefs {
  display: grid;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.kk-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid var(--kc-line);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.kk-row:has([aria-checked=true]) {
  border-color: var(--kc-brand);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--kc-brand) 70%, black);
}
.kk-row.is-locked {
  background: var(--kc-tint);
}
.kk-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--kc-brand-soft);
  color: var(--kc-brand);
}
.kk-row:has([aria-checked=true]) .kk-row__icon {
  background: var(--kc-brand-strong);
  color: #fff;
}
.kk-row__text {
  flex: 1;
  min-width: 0;
}
.kk-row__text h3 {
  margin: 0 0 4px;
  font-size: 1.08rem;
  font-weight: 750;
}
.kk-row__text p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--kc-muted);
}
.kk-row__lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #1c7a45;
  font-size: 0.85rem;
  font-weight: 700;
}
@media (max-width: 600px) {
  .kk-row {
    flex-wrap: wrap;
  }
  .kk-row__text {
    flex-basis: calc(100% - 80px);
  }
}

.kk-switch {
  flex: 0 0 auto;
  padding: 8px;
}
.kk-switch .kc-switch__track {
  width: 52px;
  height: 30px;
}
.kk-switch .kc-switch__thumb {
  width: 22px;
  height: 22px;
}
.kk-switch[aria-checked=true] .kc-switch__track {
  background: #1c7a45;
}
.kk-switch[aria-checked=true] .kc-switch__thumb {
  transform: translateX(22px);
}

.kk-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-line);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--kc-ink) !important;
}
.kk-note .iconify {
  color: var(--kc-brand-strong);
  flex: 0 0 auto;
  margin-top: 2px;
}

.kk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin-top: 8px;
}

.kk-status {
  margin: 4px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: #e8f6ee;
  border: 1px solid #cfe9da;
  color: #1c7a45 !important;
  font-weight: 650;
}
.kk-status[hidden] {
  display: none;
}

@media print {
  .kc-header, .kc-footer, .kc-a11y__launcher, .kc-a11y__panel, #kc-chat-widget, .kl-progress, .kl-anchor, .kl-doc__actions, .kl-next, .kc-cta, .kc-skip, .kc-legal__toc, .kh-hero__bg, .kc-breadcrumbs {
    display: none !important;
  }
  .kl-hero, .kh-hero {
    background: none !important;
    padding: 0 0 12px !important;
  }
  .kc-legal__wrap {
    display: block !important;
  }
  .kc-legal__block {
    break-inside: avoid-page;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .kc-legal__block h2 {
    font-size: 1.25rem;
  }
  a[href^=http]:not(.kc-btn)::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
  body {
    background: #fff !important;
  }
}
[dir=rtl] td.hljs-ln-line.hljs-ln-numbers {
  padding-left: 10px;
  padding-right: 0;
}
[dir=rtl] .mat-drawer.sidebarNav {
  border-left: 1px solid var(--mat-sys-outline-variant) !important;
  border-right: 0;
}
[dir=rtl] .inner-sidebar {
  margin-right: 87px;
  margin-left: 0 !important;
}
[dir=rtl] .sidebarNav.mat-drawer-side {
  border-left-width: 0;
}
[dir=rtl].sidebarNav-mini .contentWrapper {
  margin-right: 87px !important;
  margin-left: 0 !important;
}
@media (min-width: 1024px) {
  [dir=rtl] .sidebarNav-mini .sidebarNav .sidebar-list .menu-list-item .mdc-list-item__start {
    margin-left: 8px !important;
    margin-right: 6px !important;
  }
}
@media (min-width: 1024px) and (hover: hover) {
  [dir=rtl] .sidebarNav-mini .sidebarNav:hover .sidebar-list.mdc-list .mdc-list-group__subheader {
    text-align: right;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .sidebarNav-mini .contentWrapper {
    margin-right: 87px !important;
    margin-left: 0 !important;
  }
}

/*
 * Static-layout adapter.
 *
 * Angular Material computes a few layout values at runtime (the content
 * margin next to an open sidenav, drawer transforms, backdrop visibility).
 * The PHP port renders the same DOM statically, so those values are declared
 * here instead. Nothing else in resources/scss is modified.
 */
.mainWrapper {
  position: relative;
  overflow-x: clip;
}
.mainWrapper > .contentWrapper {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

@media (min-width: 1024px) {
  .mainWrapper:not(.sidebarNav-horizontal) > .contentWrapper {
    margin-left: 270px;
  }
  html[dir=rtl] .mainWrapper:not(.sidebarNav-horizontal) > .contentWrapper {
    margin-left: 0;
    margin-right: 270px;
  }
  html[dir=rtl] .sidebarNav-mini .contentWrapper {
    margin-left: 0 !important;
    margin-right: 87px !important;
  }
  .mat-drawer.sidebarNav.sidebarNav-mobile {
    display: none;
  }
}
.mat-drawer.sidebarNav {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  visibility: visible;
  transform: none;
  border-right: 1px solid var(--mat-sys-outline-variant);
}

html[dir=rtl] .mat-drawer.sidebarNav {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--mat-sys-outline-variant);
}

@media (max-width: 1023px) {
  .mat-drawer.sidebarNav {
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  html[dir=rtl] .mat-drawer.sidebarNav {
    transform: translateX(100%);
  }
  .mat-drawer.sidebarNav.mat-drawer-opened {
    transform: none;
  }
}
.sidebarNav .sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-list .nav-children {
  padding-left: 12px;
}
.sidebar-list .nav-children.is-entering {
  animation: kc-enter var(--dur-base) var(--ease-out);
}

.sidebar-list .menu-list-item .nav-chevron {
  transition: transform var(--dur-base) var(--ease-out);
}

.sidebar-list .menu-list-item.expanded .nav-chevron {
  transform: rotate(180deg);
}

.mat-drawer.customizerNav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1001;
  width: 320px;
  max-width: 90vw;
  background-color: var(--mat-sys-surface);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  visibility: visible;
}
.mat-drawer.customizerNav.mat-drawer-opened {
  transform: none;
}

html[dir=rtl] .mat-drawer.customizerNav {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
html[dir=rtl] .mat-drawer.customizerNav.mat-drawer-opened {
  transform: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.drawer-backdrop.drawer-backdrop-inner {
  z-index: 19;
}

body.drawer-open {
  overflow: hidden;
}

.cdk-overlay-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.cdk-overlay-container > * {
  pointer-events: auto;
}

.mat-mdc-menu-panel {
  min-width: 200px;
  max-width: min(90vw, 480px);
  max-height: calc(100vh - 96px);
  overflow: auto;
  background-color: var(--mat-sys-surface);
  border-radius: var(--mat-sys-corner-small);
  box-shadow: var(--mat-sys-level2);
}
.mat-mdc-menu-panel[hidden] {
  display: none;
}
.mat-mdc-menu-panel form {
  margin: 0;
}

.mat-mdc-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mat-mdc-dialog-container[hidden] {
  display: none;
}

.cdk-global-overlay-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  z-index: 1002;
}

.cdk-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.32);
}

.search-dialog .mat-mdc-dialog-surface {
  width: min(640px, 92vw);
  background-color: var(--mat-sys-surface);
  border-radius: var(--mat-sys-corner-medium);
  box-shadow: var(--mat-sys-level3);
  overflow: hidden;
}

body.cdk-global-scrollblock {
  overflow: hidden;
}

#toast-container .ngx-toastr {
  opacity: 0;
  transform: translateX(calc(var(--motion-enter) * 2));
  transition: opacity var(--dur-base) var(--ease-in), transform var(--dur-base) var(--ease-in);
}
#toast-container .ngx-toastr.is-visible {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-out);
}

.mat-mdc-select-native {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  appearance: none;
}

.mat-mdc-form-field-infix {
  position: relative;
}

.paginator-page {
  width: 32px;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mat-sys-surface-container-lowest);
}

.mat-mdc-nav-list.sidebar-list {
  display: block;
  padding-top: 8px;
}

.sidebar-list .menu-list-item {
  text-decoration: none;
}

.sidebar-list .menu-list-item .mdc-list-item__content {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-list .menu-list-item .mdc-list-item__primary-text {
  width: 100%;
}

.horizontal-navbar .parentBox {
  position: relative;
}
.horizontal-navbar .parentBox > .childBox {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--mat-sys-corner-small);
  background-color: var(--mat-sys-surface);
  box-shadow: var(--mat-sys-level2);
}
.horizontal-navbar .parentBox:hover > .childBox {
  display: block;
}
.horizontal-navbar .parentBox .ddmenu .parentBox > .childBox {
  top: 0;
  left: 100%;
}

.sidebarNav-horizontal .horizontal-navbar .parentBox:hover {
  z-index: 40;
}

.sidebarNav-horizontal .horizontal-navbar .parentBox.is-open {
  z-index: 40;
}

.horizontal-navbar .parentBox.is-open > .childBox {
  display: block;
}

.sidebarNav-horizontal .horizontal-navbar .parentBox.is-open > .childBox > .ddmenu {
  display: block;
  padding: 0;
}

.sidebarNav-horizontal .horizontal-navbar .parentBox.two-column.is-open > .childBox > .ddmenu {
  display: inline-block;
}

.sidebarNav-horizontal .horizontal-navbar .parentBox.is-open > .menuLink {
  background-color: var(--mat-sys-primary-fixed-dim);
}

.horizontal-navbar .parentBox > .childBox > .ddcap {
  display: block;
  width: 100%;
  padding: 10px 14px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mat-sys-on-surface-variant, #64748b);
}

.sidebarNav-horizontal .horizontal-navbar > .parentBox:last-child > .childBox {
  left: auto;
  right: 0;
}
.sidebarNav-horizontal .horizontal-navbar > .parentBox:last-child .ddmenu .parentBox > .childBox {
  left: auto;
  right: 100%;
}

@media (max-width: 1023px) {
  .sidebarNav .flex-layout {
    height: 100vh;
    height: 100dvh;
  }
  .sidebarNav .sidebar-scroll {
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
  }
  .sidebarNav .sidebar-list {
    min-width: max-content;
  }
  .sidebarNav-horizontal .horizontal-sidebar {
    position: relative;
  }
  .sidebarNav-horizontal .horizontal-sidebar::before, .sidebarNav-horizontal .horizontal-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-base) ease;
  }
  .sidebarNav-horizontal .horizontal-sidebar::before {
    left: 0;
    background: linear-gradient(to right, var(--mat-sys-surface), transparent);
  }
  .sidebarNav-horizontal .horizontal-sidebar::after {
    right: 0;
    background: linear-gradient(to left, var(--mat-sys-surface), transparent);
  }
  .sidebarNav-horizontal .horizontal-sidebar.fade-start::before, .sidebarNav-horizontal .horizontal-sidebar.fade-end::after {
    opacity: 1;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar::-webkit-scrollbar {
    display: none;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .menuLink {
    white-space: nowrap;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox > .childBox,
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox.two-column > .childBox,
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox.mega-menu > .childBox {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto !important;
    max-height: 65vh;
    max-height: 65dvh;
    overflow-y: auto;
    z-index: 60;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox.two-column:hover > .childBox > .ddmenu,
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar > .parentBox.mega-menu:hover > .childBox > .ddmenu {
    display: block;
    width: 100% !important;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .parentBox:hover > .childBox {
    display: none;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .parentBox .childBox .ddmenu {
    display: block;
    padding: 0;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .parentBox.is-open > .childBox {
    display: block;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .parentBox:hover > .childBox > .ddmenu:hover,
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .parentBox > .childBox > .ddmenu:hover {
    background-color: transparent;
  }
  .sidebarNav-horizontal .horizontal-sidebar .horizontal-navbar .ddmenu .parentBox > .childBox {
    position: static;
    width: auto;
    min-width: 0;
    margin: 2px 0 6px 14px;
    padding: 2px;
    box-shadow: none;
    border-left: 2px solid var(--mat-sys-outline-variant);
    border-radius: 0;
    background: transparent;
  }
}
/*
 * Filter bar — the shared single row of <mat-form-field> controls plus its
 * action button(s). Used by every console filter bar (onboarding, quality
 * control, recruitment jobs / applications / interviews, tickets, invoices,
 * unmatched references) and by the equivalent inline control rows on the
 * onboarding workspace (move-to-stage, assign owner, profile category).
 *
 * Why this exists
 * ---------------
 * <mat-form-field> always renders a subscript row beneath its 40px control
 * box — a 16px spacer (`.mat-mdc-form-field-bottom-align::before`) that is
 * the vertical gap between stacked fields on a normal form. On a one-line
 * filter row that spacer has nothing to display, so it just makes each
 * field ~16px taller than it looks. An `align-items: flex-end` row then
 * drops the action buttons to the bottom of that invisible space — i.e.
 * visibly *below* the fields. Pages had each been nudging their button back
 * up with a `pb-1`, which is a per-page hack and never quite lines up.
 *
 * The fix, in one place
 * --------------------
 * Hide the subscript row for filter fields (they never show a hint or a
 * validation error here), so every control is exactly its 40px box, and
 * centre the row. Fields and buttons then share one baseline with no
 * page-specific margins. Nothing else about the filter design changes —
 * same control widths, same 0.75rem gap, same outline and floating labels.
 *
 * Every filter form opts in with `class="filter-bar"` in place of the old
 * `flex flex-wrap items-end gap-3`.
 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.filter-bar .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

/*
 * Standalone native <select> — the small inline pickers on the console pages
 * (bulk-action selectors, the compliance owner picker, the chase-composer
 * template). `.mat-mdc-select-native` is styled for life *inside* a
 * mat-form-field infix (border:0, background:transparent, appearance:none), so
 * used on its own it renders as borderless arrow-less text that blends into the
 * page. `.kc-select` is the plain, theme-aware version: a real border, a
 * chevron, and a focus ring, consistent with the rest of the admin.
 */
.kc-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  max-width: 100%;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  border: 1px solid var(--color-border, #e5eaef);
  border-radius: var(--mat-sys-corner-small, 6px);
  background-color: var(--mat-sys-surface, #fff);
  color: var(--mat-sys-on-surface, inherit);
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .kc-select:hover {
    border-color: color-mix(in srgb, var(--mat-sys-primary) 40%, var(--color-border, #e5eaef));
  }
}
.kc-select:focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: -1px;
  border-color: var(--mat-sys-primary);
}

.kf {
  color: #2a3547;
}
.kf input:not([type]),
.kf input[type=text],
.kf input[type=email],
.kf input[type=tel],
.kf input[type=url],
.kf input[type=number],
.kf input[type=password],
.kf input[type=search],
.kf input[type=date],
.kf input[type=time],
.kf input[type=datetime-local],
.kf select,
.kf textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #2a3547;
  background-color: var(--mat-sys-surface, #ffffff);
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}
.kf input:not([type])::placeholder,
.kf input[type=text]::placeholder,
.kf input[type=email]::placeholder,
.kf input[type=tel]::placeholder,
.kf input[type=url]::placeholder,
.kf input[type=number]::placeholder,
.kf input[type=password]::placeholder,
.kf input[type=search]::placeholder,
.kf input[type=date]::placeholder,
.kf input[type=time]::placeholder,
.kf input[type=datetime-local]::placeholder,
.kf select::placeholder,
.kf textarea::placeholder {
  color: color-mix(in srgb, #5a6a85 75%, transparent);
}
@media (hover: hover) {
  .kf input:hover:not(:disabled):not([readonly]):not([type]),
  .kf input[type=text]:hover:not(:disabled):not([readonly]),
  .kf input[type=email]:hover:not(:disabled):not([readonly]),
  .kf input[type=tel]:hover:not(:disabled):not([readonly]),
  .kf input[type=url]:hover:not(:disabled):not([readonly]),
  .kf input[type=number]:hover:not(:disabled):not([readonly]),
  .kf input[type=password]:hover:not(:disabled):not([readonly]),
  .kf input[type=search]:hover:not(:disabled):not([readonly]),
  .kf input[type=date]:hover:not(:disabled):not([readonly]),
  .kf input[type=time]:hover:not(:disabled):not([readonly]),
  .kf input[type=datetime-local]:hover:not(:disabled):not([readonly]),
  .kf select:hover:not(:disabled):not([readonly]),
  .kf textarea:hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--mat-sys-primary, #ff650b) 45%, var(--mat-sys-outline-variant, #e5e6e6));
  }
}
.kf input:focus:not([type]),
.kf input[type=text]:focus,
.kf input[type=email]:focus,
.kf input[type=tel]:focus,
.kf input[type=url]:focus,
.kf input[type=number]:focus,
.kf input[type=password]:focus,
.kf input[type=search]:focus,
.kf input[type=date]:focus,
.kf input[type=time]:focus,
.kf input[type=datetime-local]:focus,
.kf select:focus,
.kf textarea:focus, .kf input:focus-visible:not([type]),
.kf input[type=text]:focus-visible,
.kf input[type=email]:focus-visible,
.kf input[type=tel]:focus-visible,
.kf input[type=url]:focus-visible,
.kf input[type=number]:focus-visible,
.kf input[type=password]:focus-visible,
.kf input[type=search]:focus-visible,
.kf input[type=date]:focus-visible,
.kf input[type=time]:focus-visible,
.kf input[type=datetime-local]:focus-visible,
.kf select:focus-visible,
.kf textarea:focus-visible {
  outline: none;
  border-color: var(--mat-sys-primary, #ff650b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-sys-primary, #ff650b) 22%, transparent);
}
.kf input:disabled:not([type]),
.kf input[type=text]:disabled,
.kf input[type=email]:disabled,
.kf input[type=tel]:disabled,
.kf input[type=url]:disabled,
.kf input[type=number]:disabled,
.kf input[type=password]:disabled,
.kf input[type=search]:disabled,
.kf input[type=date]:disabled,
.kf input[type=time]:disabled,
.kf input[type=datetime-local]:disabled,
.kf select:disabled,
.kf textarea:disabled, .kf input[readonly]:not([type]),
.kf input[readonly][type=text],
.kf input[readonly][type=email],
.kf input[readonly][type=tel],
.kf input[readonly][type=url],
.kf input[readonly][type=number],
.kf input[readonly][type=password],
.kf input[readonly][type=search],
.kf input[readonly][type=date],
.kf input[readonly][type=time],
.kf input[readonly][type=datetime-local],
.kf select[readonly],
.kf textarea[readonly] {
  background-color: color-mix(in srgb, var(--mat-sys-outline-variant, #e5e6e6) 25%, var(--mat-sys-surface, #ffffff));
  color: #5a6a85;
  cursor: not-allowed;
}
.kf select {
  padding-right: 2.5rem;
  cursor: pointer;
}
.kf textarea {
  min-height: 6rem;
  resize: vertical;
}
.kf input[type=file] {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  color: #5a6a85;
}
.kf input[type=file]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mat-sys-primary, #ff650b);
  background: color-mix(in srgb, var(--mat-sys-primary, #ff650b) 12%, var(--mat-sys-surface, #ffffff));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.kf input[type=checkbox],
.kf input[type=radio] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--mat-sys-primary, #ff650b);
  cursor: pointer;
}
.kf .kf-section + .kf-section {
  margin-top: 2rem;
}
.kf .kf-section__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6a85;
  margin: 0 0 0.25rem;
}
.kf .kf-section__desc {
  font-size: 0.8125rem;
  color: #5a6a85;
  margin: 0 0 1rem;
  max-width: 46rem;
}
.kf .kf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem 1.25rem;
}
@media (min-width: 640px) {
  .kf .kf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kf .kf-field {
  min-width: 0;
}
@media (min-width: 640px) {
  .kf .kf-field--full {
    grid-column: 1/-1;
  }
}
.kf .kf-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2a3547;
  margin-bottom: 0.35rem;
}
.kf .kf-required {
  color: var(--mat-sys-error, #d92d20);
  margin-left: 0.15rem;
}
.kf .kf-help {
  font-size: 0.8125rem;
  color: #5a6a85;
  margin: 0.35rem 0 0;
}
.kf .kf-error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mat-sys-error, #d92d20);
  margin: 0.35rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}
.kf .kf-field.is-invalid input, .kf .kf-field.is-invalid select, .kf .kf-field.is-invalid textarea {
  border-color: var(--mat-sys-error, #d92d20);
}
.kf .kf-field.is-invalid input:focus, .kf .kf-field.is-invalid select:focus, .kf .kf-field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-sys-error, #d92d20) 20%, transparent);
}
.kf .kf-choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.kf .kf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #2a3547;
}
.kf .kf-check input {
  margin-top: 0.15rem;
}
.kf .kf-check--card {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 8px;
}
.kf .kf-check--card:has(input:checked) {
  border-color: var(--mat-sys-primary, #ff650b);
  background: color-mix(in srgb, var(--mat-sys-primary, #ff650b) 6%, var(--mat-sys-surface, #ffffff));
}
.kf .kf-repeater {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.15rem;
}
.kf .kf-repeater__rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.kf .kf-repeater__row {
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 8px;
  padding: 0.9rem 1rem 1rem;
  background: color-mix(in srgb, var(--mat-sys-outline-variant, #e5e6e6) 8%, var(--mat-sys-surface, #ffffff));
}
.kf .kf-repeater__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.kf .kf-repeater__n {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5a6a85;
}
.kf .kf-banner {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
.kf .kf-banner--error {
  background: var(--mat-sys-error-fixed-dim, #fdecec);
  color: var(--mat-sys-error, #b3261e);
}
.kf .kf-banner--info {
  background: var(--lightinfo-color, #efeafe);
  color: var(--info-color, #6c4bd8);
}
.kf .kf-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.kf .kf-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  color: #5a6a85;
  background: color-mix(in srgb, var(--mat-sys-outline-variant, #e5e6e6) 30%, transparent);
  border: 1px solid transparent;
  cursor: pointer;
  max-width: 100%;
}
.kf .kf-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff;
  color: #5a6a85;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
}
.kf .kf-step__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kf .kf-step.is-active {
  color: var(--mat-sys-primary, #ff650b);
  font-weight: 600;
  background: color-mix(in srgb, var(--mat-sys-primary, #ff650b) 12%, transparent);
  border-color: color-mix(in srgb, var(--mat-sys-primary, #ff650b) 35%, transparent);
}
.kf .kf-step.is-active .kf-step__num {
  background: var(--mat-sys-primary, #ff650b);
  color: #fff;
  border-color: var(--mat-sys-primary, #ff650b);
}
.kf .kf-step.is-done {
  color: #2a3547;
}
.kf .kf-step.is-done .kf-step__num {
  background: var(--success-color, #43a047);
  color: #fff;
  border-color: transparent;
}
.kf .kf-progress {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-outline-variant, #e5e6e6) 40%, transparent);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.kf .kf-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mat-sys-primary, #ff650b);
}
.kf .kf-panel {
  animation: kc-enter-up var(--dur-base) var(--ease-out);
}
.kf .kf-panel[hidden] {
  display: none;
}
.kf .kf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
}
.kf .kf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.kf .kf-btn i, .kf .kf-btn .iconify {
  flex: 0 0 auto;
}
.kf .kf-btn--primary {
  background: var(--mat-sys-primary, #ff650b);
  color: #fff;
}
.kf .kf-btn--ghost {
  background: transparent;
  border-color: var(--mat-sys-outline-variant, #e5e6e6);
  color: #2a3547;
}
.kf .kf-btn--quiet {
  background: transparent;
  color: #5a6a85;
  padding: 0 0.5rem;
}
.kf .kf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kf .kf-review {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.kf .kf-review__group {
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.kf .kf-review__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.kf .kf-review dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 1.25rem;
  margin: 0;
}
@media (min-width: 640px) {
  .kf .kf-review dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kf .kf-review dt {
  font-size: 0.75rem;
  color: #5a6a85;
  margin: 0;
}
.kf .kf-review dd {
  font-size: 0.9375rem;
  color: #2a3547;
  margin: 0.1rem 0 0;
  word-break: break-word;
}

.fb input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.fb select,
.fb textarea {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #2a3547;
  background: #fff;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: var(--mat-sys-corner-small, 8px);
  appearance: none;
}
.fb input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus, .fb input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus-visible,
.fb select:focus,
.fb select:focus-visible,
.fb textarea:focus,
.fb textarea:focus-visible {
  outline: none;
  border-color: var(--mat-sys-primary, #ff650b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-sys-primary, #ff650b) 20%, transparent);
}
.fb select {
  padding-right: 2.25rem;
  cursor: pointer;
}
.fb textarea {
  min-height: 4rem;
  resize: vertical;
}
.fb input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--mat-sys-primary, #ff650b);
}
.fb .fb-lbl {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6a85;
  margin-bottom: 0.25rem;
}
.fb .fb-field {
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--mat-sys-outline-variant, #e5e6e6) 12%, #fff);
}
.fb .fb-field + .fb-field {
  margin-top: 0.75rem;
}
.fb .fb-field__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .fb .fb-field__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto;
    align-items: end;
  }
}
.fb .fb-field__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.75rem;
  margin-top: 0.75rem;
}
@media (min-width: 720px) {
  .fb .fb-field__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fb .fb-req {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: #2a3547;
  white-space: nowrap;
  padding-bottom: 0.5rem;
}
.fb .fb-drag {
  cursor: grab;
  color: #5a6a85;
  font-size: 1.1rem;
  user-select: none;
  padding: 0.2rem;
}
.fb .fb-remove {
  background: transparent;
  border: 0;
  color: var(--mat-sys-error, #d92d20);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: 1;
}
.fb .fb-section {
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 0.9rem;
  padding: 1rem 1.1rem;
  background: #fff;
}
.fb .fb-section + .fb-section {
  margin-top: 1rem;
}
.fb .fb-section__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.fb .fb-icon-btn {
  background: transparent;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 0.5rem;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5a6a85;
  cursor: pointer;
  font-size: 0.8rem;
}
@media (hover: hover) {
  .fb .fb-icon-btn:hover {
    border-color: var(--mat-sys-primary, #ff650b);
    color: var(--mat-sys-primary, #ff650b);
  }
}
.fb .fb-repeater {
  grid-column: 1/-1;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--mat-sys-outline-variant, #e5e6e6);
}
.fb .fb-subfields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.fb .fb-subfield {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .fb .fb-subfield {
    grid-template-columns: 1fr 1fr;
  }
}
.fb .fb-subfield .fb-req {
  padding-bottom: 0;
}

html.kt-open,
html.kt-open body {
  overflow: hidden;
}

.kt-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.kt-block {
  position: absolute;
  inset: 0;
}

.kt-spot {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  pointer-events: none;
}

.kt-pop {
  position: absolute;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 14px;
  color: #2a3547;
}
.kt-pop__step {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mat-sys-primary, #ff650b);
}
.kt-pop__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.kt-pop__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #5a6a85;
}
.kt-pop__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.kt-pop__spacer {
  flex: 1;
}

.kt-btn {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.kt-btn--primary {
  background: var(--mat-sys-primary, #ff650b);
  color: #fff;
}
@media (hover: hover) {
  .kt-btn--primary:hover {
    opacity: 0.9;
  }
}
.kt-btn--ghost {
  background: transparent;
  color: #5a6a85;
  padding: 7px 10px;
}
@media (hover: hover) {
  .kt-btn--ghost:hover {
    color: #2a3547;
    background: rgba(90, 106, 133, 0.1);
  }
}

.kt-welcome {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1199;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--mat-sys-outline-variant, #e5e6e6);
  border-radius: 14px;
  color: #2a3547;
}
.kt-welcome__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}
.kt-welcome__body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #5a6a85;
}
.kt-welcome__actions {
  display: flex;
  gap: 8px;
}

html.dark-theme .kt-pop,
html.dark-theme .kt-welcome {
  background: #2a3547;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6e9f0;
}
html.dark-theme .kt-pop__body,
html.dark-theme .kt-welcome__body,
html.dark-theme .kt-btn--ghost {
  color: #9aa6bd;
}

@layer base {
  :where(a) {
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
  }
  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden]), select, textarea) {
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  }
  :where(input[type=checkbox], input[type=radio]) {
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
}
.mdc-tooltip__surface-animation {
  animation: kc-pop-in var(--dur-fast) var(--ease-out);
}

.mat-expansion-indicator {
  transition: transform var(--dur-base) var(--ease-out);
}

.mat-expansion-panel-header {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mat-expansion-panel-content.is-entering {
  animation: kc-enter var(--dur-base) var(--ease-out);
}

:is(.kc-btn, .kc-tbtn, .kc-iconbtn):active:not(:disabled):not([aria-disabled=true]) {
  transform: scale(var(--motion-press));
}

:is(button, a, label)[class*=-btn]:active:not(:disabled):not([aria-disabled=true]):not(.mat-mdc-button-base, .mat-mdc-icon-button, .kc-btn, .kc-tbtn, .kc-iconbtn),
:is(button, a)[class*=-iconbtn]:active:not(:disabled):not([aria-disabled=true]):not(.mat-mdc-button-base, .mat-mdc-icon-button, .kc-btn, .kc-tbtn, .kc-iconbtn) {
  scale: var(--motion-press);
  transition: scale var(--dur-fast) var(--ease-out);
}

:where(.is-pending) {
  position: relative;
}

.is-pending {
  cursor: progress;
  color: transparent !important;
}
.is-pending > :not(.kc-pending-spinner) {
  visibility: hidden;
}

.kc-pending-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2px solid var(--kc-pending-color, currentColor);
  border-right-color: transparent;
  animation: kc-spin var(--dur-spin) linear infinite;
  pointer-events: none;
}

:root {
  --kc-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b78' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.dark-theme {
  --kc-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cde0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--kc-select-arrow) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1.125rem !important;
  padding-inline-end: 2.25rem !important;
  text-overflow: ellipsis;
}

[dir=rtl] select:not([multiple]):not([size]) {
  background-position: left 0.75rem center !important;
}

select:not([multiple]):not([size]):disabled {
  opacity: 0.6;
}

:root {
  --kc-muted: #5f7391;
}

.dark-theme {
  --kc-muted: #9db0cc;
}

.wq, .rtab, .rpage, .tak, .soc, .blm {
  --o: var(--kc-accent);
  --m: var(--kc-muted);
  --line: rgba(124, 143, 172, .24);
  --surf: var(--mat-sys-surface, #fff);
  --ok: #13a36b;
  --okb: #e5f7ee;
  --okt: #0e7a50;
  --wa: #d98a00;
  --wab: #fff1d6;
  --wat: #8a5700;
  --bd: #d6453d;
  --bdb: #fde8e6;
  --bdt: #b3261e;
  --in: #2f6fe4;
  --inb: #e8f0fe;
  --int: #1a56c4;
}

.dark-theme .wq, .dark-theme .rtab, .dark-theme .rpage, .dark-theme .tak, .dark-theme .soc, .dark-theme .blm {
  --surf: #1f2a3d;
  --line: rgba(255, 255, 255, .1);
  --okb: rgba(19, 163, 107, .16);
  --okt: #5fdca8;
  --wab: rgba(217, 138, 0, .18);
  --wat: #f2bd5c;
  --bdb: rgba(214, 69, 61, .18);
  --bdt: #ff9a93;
  --inb: rgba(47, 111, 228, .2);
  --int: #9bbcff;
}

.wq {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
}

.rtab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rpage {
  max-width: 1180px;
}

.wq *, .rtab *, .rpage *, .tak *, .soc *, .blm * {
  box-sizing: border-box;
}

:where(.wq, .rtab, .rpage, .tak, .soc, .blm) :where(button, input, select, textarea, summary) {
  font: inherit;
}

.wq :focus-visible, .rtab :focus-visible, .rpage :focus-visible, .tak :focus-visible, .soc :focus-visible, .blm :focus-visible {
  outline: 2px solid var(--o);
  outline-offset: 2px;
}

.wq-btn, .rtab-btn, .rpage-btn, .tak-btn, .soc-btn, .blm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 11px;
  padding: 8px 13px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surf);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
  transition: border-color var(--dur-fast, 120ms), transform var(--dur-fast, 120ms);
}
.wq-btn:active, .rtab-btn:active, .rpage-btn:active, .tak-btn:active, .soc-btn:active, .blm-btn:active {
  transform: scale(var(--motion-press, 0.98));
}
.wq-btn.pri, .rtab-btn.pri, .rpage-btn.pri, .tak-btn.pri, .soc-btn.pri, .blm-btn.pri {
  background: var(--o);
  border-color: var(--o);
  color: #fff;
}
.wq-btn.sm, .rtab-btn.sm, .rpage-btn.sm, .tak-btn.sm, .soc-btn.sm, .blm-btn.sm {
  padding: 5px 10px;
  font-size: 0.74rem;
  border-radius: 9px;
}
.wq-btn.ghost, .rtab-btn.ghost, .rpage-btn.ghost, .tak-btn.ghost, .soc-btn.ghost, .blm-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--m);
}
@media (hover: hover) {
  .wq-btn:hover, .rtab-btn:hover, .rpage-btn:hover, .tak-btn:hover, .soc-btn:hover, .blm-btn:hover {
    border-color: var(--o);
    color: var(--o);
  }
  .wq-btn.pri:hover, .rtab-btn.pri:hover, .rpage-btn.pri:hover, .tak-btn.pri:hover, .soc-btn.pri:hover, .blm-btn.pri:hover {
    color: #fff;
    filter: brightness(0.95);
  }
  .wq-btn.bad:hover, .rtab-btn.bad:hover, .rpage-btn.bad:hover, .tak-btn.bad:hover, .soc-btn.bad:hover, .blm-btn.bad:hover {
    border-color: var(--bd);
    color: var(--bd);
  }
}

.wq-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.wq-head h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.wq-head p {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--m);
  max-width: 68ch;
}

.wq-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wq-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.wq-tile {
  text-align: left;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--surf);
  border: 1px solid var(--line);
  cursor: pointer;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base, 180ms), box-shadow var(--dur-base, 180ms), transform var(--dur-base, 180ms);
  animation: wq-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}

.wq-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--c, var(--line));
}

.wq-tile small {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m);
}

.wq-tile b {
  display: block;
  font-size: 1.7rem;
  line-height: 1.15;
  font-weight: 800;
  margin-top: 2px;
}

.wq-tile span {
  font-size: 0.72rem;
  color: var(--m);
}

.wq-tile[aria-pressed=true] {
  border-color: var(--c, var(--o));
  box-shadow: 0 0 0 1px var(--c, var(--o));
}

@media (hover: hover) {
  .wq-tile:hover {
    border-color: var(--c, var(--o));
    transform: translateY(var(--motion-lift, -2px));
  }
}
.wq-tile.bad {
  --c:var(--bd);
}

.wq-tile.bad b {
  color: var(--bdt);
}

.wq-tile.late {
  --c:var(--wa);
}

.wq-tile.late b {
  color: var(--wat);
}

.wq-tile.wait {
  --c:var(--in);
}

.wq-tile.good {
  --c:var(--ok);
}

.wq-tile.good b {
  color: var(--okt);
}

.wq-tile.zero b {
  color: var(--m);
  font-weight: 700;
}

.wq-tool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.wq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wq-chip {
  border: 1px solid var(--line);
  background: var(--surf);
  border-radius: 99px;
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
}

.wq-chip[aria-pressed=true] {
  background: var(--o);
  border-color: var(--o);
  color: #fff;
}

.wq-chip i {
  font-style: normal;
  opacity: 0.65;
  margin-left: 4px;
}

@media (hover: hover) {
  .wq-chip:hover {
    border-color: var(--o);
  }
}
.wq-search {
  margin-left: auto;
  position: relative;
}

.wq-search input {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 12px 8px 32px;
  font-size: 0.82rem;
  min-width: 240px;
  background: var(--surf);
  color: inherit;
}

.wq-search svg, .wq-search .iconify {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m);
}

.wq-band h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

.wq-band h2 em {
  font-style: normal;
  border-radius: 99px;
  padding: 1px 8px;
  background: rgba(124, 143, 172, 0.16);
  font-size: 0.68rem;
}

.wq-band h2.bad {
  color: var(--bdt);
}

.wq-band h2.late {
  color: var(--wat);
}

.wq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wq-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px 14px 20px;
  border-radius: 16px;
  background: var(--surf);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  animation: wq-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
  transition: border-color var(--dur-base, 180ms);
}

.wq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--tone, var(--line));
}

.wq-item[data-tone=bad] {
  --tone:var(--bd);
}

.wq-item[data-tone=late] {
  --tone:var(--wa);
}

.wq-item[data-tone=wait] {
  --tone:var(--in);
}

.wq-item[data-tone=good] {
  --tone:var(--ok);
}

@media (hover: hover) {
  .wq-item:hover {
    border-color: color-mix(in srgb, var(--tone, var(--m)) 60%, transparent);
  }
}
@keyframes wq-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-enter, 4px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.wq-big {
  min-width: 92px;
  text-align: center;
}

.wq-big b {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tt, inherit);
}

.wq-big small {
  font-size: 0.68rem;
  color: var(--m);
}

.wq-item[data-tone=bad] .wq-big b {
  color: var(--bdt);
}

.wq-item[data-tone=late] .wq-big b {
  color: var(--wat);
}

.wq-item[data-tone=wait] .wq-big b {
  color: var(--int);
}

.wq-item[data-tone=good] .wq-big b {
  color: var(--okt);
}

.wq-main {
  min-width: 0;
}

.wq-main h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wq-main h3 a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .wq-main h3 a:hover {
    color: var(--o);
  }
}
.wq-sub {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--m);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
}

.wq-sub span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.wq-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(124, 143, 172, 0.14);
  color: #3b4a63;
}

.wq-pill.ok {
  background: var(--okb);
  color: var(--okt);
}

.wq-pill.bad {
  background: var(--bdb);
  color: var(--bdt);
}

.wq-pill.late {
  background: var(--wab);
  color: var(--wat);
}

.wq-pill.wait {
  background: var(--inb);
  color: var(--int);
}

.wq-meter {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.wq-meter i {
  width: 18px;
  height: 6px;
  border-radius: 99px;
  background: rgba(124, 143, 172, 0.28);
}

.wq-meter i.on {
  background: var(--ok);
}

.wq-meter i.half {
  background: var(--wa);
}

.wq-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.wq-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--inb);
  color: var(--int);
}

.wq-empty {
  text-align: center;
  padding: 44px 20px;
  border: 2px dashed var(--line);
  border-radius: 18px;
  color: var(--m);
}

.wq-empty h3 {
  margin: 6px 0 2px;
  font-size: 1.05rem;
  font-weight: 800;
  color: inherit;
}

.wq-empty p {
  margin: 0 auto;
  max-width: 50ch;
  font-size: 0.86rem;
}

.wq-none {
  text-align: center;
  padding: 26px;
  color: var(--m);
  font-size: 0.86rem;
}

.wq-panel {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
}

.wq-panel h2 {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

.wq-bars {
  display: grid;
  gap: 8px;
}

.wq-bar {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
}

.wq-bar .t {
  height: 8px;
  border-radius: 99px;
  background: rgba(124, 143, 172, 0.18);
  overflow: hidden;
}

.wq-bar .t i {
  display: block;
  height: 100%;
  background: var(--o);
  border-radius: 99px;
  transition: width var(--dur-slow, 240ms);
}

.dark-theme .wq-pill {
  color: #d6deea;
}

@media (max-width: 760px) {
  .wq-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wq-big {
    text-align: left;
    display: flex;
    gap: 8px;
    align-items: baseline;
  }
  .wq-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .wq-search {
    margin-left: 0;
    width: 100%;
  }
  .wq-search input {
    width: 100%;
    min-width: 0;
  }
  .wq-bar {
    grid-template-columns: 110px minmax(0, 1fr) 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wq *, .wq {
    animation: none !important;
    transition: none !important;
  }
}
.rtab-card, .rtab-hero, .rtab-attn, .rtab-vend {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* hero */
.rtab-hero {
  padding: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.rtab-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--tone, var(--line));
}

.rtab-hero[data-tone=ok] {
  --tone:var(--ok);
}

.rtab-hero[data-tone=review] {
  --tone:var(--wa);
}

.rtab-hero[data-tone=wait] {
  --tone:var(--in);
}

.rtab-hero[data-tone=empty] {
  --tone:var(--m);
}

.rtab-slots {
  display: flex;
  gap: 12px;
}

.rtab-slot {
  width: 112px;
  border-radius: 16px;
  padding: 14px 10px 12px;
  text-align: center;
  border: 2px dashed var(--line);
  color: var(--m);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 112px;
  justify-content: center;
}

.rtab-slot .ic {
  font-size: 1.9rem;
  line-height: 1;
  display: block;
}

.rtab-slot b {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rtab-slot small {
  font-size: 0.66rem;
  opacity: 0.85;
}

.rtab-slot.ok {
  border: 2px solid var(--ok);
  background: var(--okb);
  color: var(--okt);
}

.rtab-slot.review {
  border: 2px solid var(--wa);
  background: var(--wab);
  color: var(--wat);
}

.rtab-slot.wait {
  border: 2px solid var(--in);
  background: var(--inb);
  color: var(--int);
}

.rtab-slot.ok .ic {
  animation: rtab-pop var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}

.rtab-slot.wait .ic {
  animation: rtab-pulse var(--dur-pulse, 1400ms) ease-in-out infinite;
}

@keyframes rtab-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes rtab-pulse {
  50% {
    opacity: 0.45;
  }
}
.rtab-h {
  min-width: 0;
}

.rtab-h h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rtab-h p {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--m);
  max-width: 62ch;
}

.rtab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.rtab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.rtab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(124, 143, 172, 0.13);
  color: #3b4a63;
}

.rtab-chip.ok {
  background: var(--okb);
  color: var(--okt);
}

.rtab-chip.wait {
  background: var(--inb);
  color: var(--int);
}

.rtab-chip.review, .rtab-chip.late, .rtab-chip.draft {
  background: var(--wab);
  color: var(--wat);
}

.rtab-chip.bad {
  background: var(--bdb);
  color: var(--bdt);
}

/* attention */
.rtab-attn {
  padding: 6px 6px;
}

.rtab-attn h3 {
  margin: 8px 12px 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--m);
}

.rtab-ai {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
}

.rtab-ai + .rtab-ai {
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.rtab-ai .d {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: var(--inb);
  color: var(--int);
}

.rtab-ai.review .d, .rtab-ai.late .d {
  background: var(--wab);
  color: var(--wat);
}

.rtab-ai.bad .d {
  background: var(--bdb);
  color: var(--bdt);
}

.rtab-ai p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* cards */
.rtab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  align-items: start;
}

.rtab-card {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  transition: border-color var(--dur-base, 180ms), box-shadow var(--dur-base, 180ms), transform var(--dur-base, 180ms);
  animation: rtab-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}

@keyframes rtab-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-enter, 4px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (hover: hover) {
  .rtab-card:hover {
    border-color: color-mix(in srgb, var(--tone, var(--m)) 55%, transparent);
  }
}
.rtab-card:target {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 35%, transparent);
}

.rtab-card[data-tone=ok] {
  --tone:var(--ok);
}

.rtab-card[data-tone=review] {
  --tone:var(--wa);
}

.rtab-card[data-tone=wait] {
  --tone:var(--in);
}

.rtab-card[data-tone=bad] {
  --tone:var(--bd);
}

.rtab-card[data-tone=draft] {
  --tone:var(--wa);
}

.rtab-ct {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 16px 10px;
  align-items: center;
  border-top: 3px solid var(--tone, var(--line));
}

.rtab-av {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  background: color-mix(in srgb, var(--tone, var(--m)) 14%, transparent);
  color: var(--tone, var(--m));
}

.rtab-nm {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rtab-sub {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--m);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}

.rtab-sub span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rtab-st {
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  background: color-mix(in srgb, var(--tone, var(--m)) 14%, transparent);
  color: var(--tone, var(--m));
}

.rtab-card[data-tone=ok] .rtab-st {
  color: var(--okt);
}

.rtab-card[data-tone=wait] .rtab-st {
  color: var(--int);
}

.rtab-card[data-tone=bad] .rtab-st {
  color: var(--bdt);
}

.rtab-card[data-tone=review] .rtab-st, .rtab-card[data-tone=draft] .rtab-st {
  color: var(--wat);
}

.rtab-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 16px 4px;
}

.rtab-step {
  position: relative;
  text-align: center;
  font-size: 0.68rem;
  color: var(--m);
  padding-top: 20px;
}

.rtab-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--surf);
  border: 2px solid var(--line);
  z-index: 1;
}

.rtab-step::after {
  content: "";
  position: absolute;
  top: 10px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}

.rtab-step:first-child::after {
  display: none;
}

.rtab-step.done {
  color: inherit;
}

.rtab-step.done::before {
  background: var(--tone, var(--ok));
  border-color: var(--tone, var(--ok));
}

.rtab-step.done::after {
  background: var(--tone, var(--ok));
}

.rtab-step.now::before {
  border-color: var(--tone, var(--in));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone, var(--in)) 22%, transparent);
}

.rtab-step.now::after {
  background: linear-gradient(90deg, var(--tone, var(--in)), var(--line));
}

.rtab-step.bad::before {
  background: var(--bd);
  border-color: var(--bd);
}

.rtab-step b {
  display: block;
  font-weight: 700;
  font-size: 0.7rem;
}

.rtab-step span {
  display: block;
  opacity: 0.8;
}

.rtab-dl {
  margin: 8px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.76rem;
  background: var(--inb);
  color: var(--int);
}

.rtab-dl.late {
  background: var(--wab);
  color: var(--wat);
}

.rtab-dl.bad {
  background: var(--bdb);
  color: var(--bdt);
}

.rtab-dl b {
  font-weight: 800;
}

.rtab-dl .sp {
  flex: 1;
}

.rtab-note {
  margin: 8px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  background: var(--wab);
  color: var(--wat);
}

.rtab-note ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.rtab-note.ok {
  background: var(--okb);
  color: var(--okt);
}

.rtab-note.bad {
  background: var(--bdb);
  color: var(--bdt);
}

.rtab-rev {
  margin: 8px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rtab-rev input[type=text] {
  flex: 1;
  min-width: 150px;
}

.rtab input[type=text], .rtab input[type=email], .rtab input[type=date], .rtab input[type=number], .rtab input[type=datetime-local], .rtab select, .rtab textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.8rem;
  background: transparent;
  color: inherit;
  min-width: 0;
  width: 100%;
}

.rtab-rev input, .rtab-inline input, .rtab-inline select {
  width: auto;
}

.rtab-ft {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 16px 14px;
}

.rtab-ft .sp {
  flex: 1;
}

.rtab-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.rtab-inline label, .rtab-f label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--m);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rtab-pop {
  width: 100%;
}

.rtab-pop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}

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

.rtab-pop[open] > summary {
  color: var(--o);
}

.rtab-pop > .body {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(124, 143, 172, 0.05);
}

.rtab-hist {
  border-top: 1px solid var(--line);
}

.rtab-hist > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--m);
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.rtab-hist > summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform var(--dur-base, 180ms);
}

.rtab-hist[open] > summary::after {
  transform: rotate(180deg);
}

.rtab-tl {
  margin: 0;
  padding: 0 16px 14px 28px;
  list-style: none;
  position: relative;
}

.rtab-tl::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 4px;
  bottom: 18px;
  width: 2px;
  background: var(--line);
}

.rtab-tl li {
  position: relative;
  font-size: 0.76rem;
  padding: 0 0 9px 12px;
}

.rtab-tl li::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m);
  border: 2px solid var(--surf);
}

.rtab-tl li time {
  color: var(--m);
  display: block;
  font-size: 0.68rem;
}

.rtab-more > summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--m);
  padding: 4px 0;
}

/* empty */
.rtab-empty {
  text-align: center;
  padding: 34px 20px;
  border: 2px dashed var(--line);
  border-radius: 18px;
}

.rtab-empty h3 {
  margin: 6px 0 2px;
  font-size: 1.05rem;
  font-weight: 800;
}

.rtab-empty p {
  margin: 0 auto;
  max-width: 48ch;
  font-size: 0.84rem;
  color: var(--m);
}

.rtab-how {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 4px;
}

.rtab-how div {
  font-size: 0.76rem;
  background: rgba(124, 143, 172, 0.1);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: left;
  max-width: 200px;
}

.rtab-how b {
  display: block;
  font-size: 0.7rem;
  color: var(--o);
}

/* vendor */
.rtab-vend {
  overflow: hidden;
  scroll-margin-top: 90px;
}

.rtab-vh {
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.rtab-vh h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.rtab-vh p {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--m);
  max-width: 70ch;
}

.rtab-dem {
  border-top: 1px solid var(--line);
  padding: 16px 18px;
}

.rtab-dem-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.rtab-dem-top h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.rtab-prog {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
}

.rtab-prog .bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(124, 143, 172, 0.2);
  overflow: hidden;
}

.rtab-prog .bar i {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: 99px;
  transition: width var(--dur-slow, 240ms);
}

.rtab-prog small {
  font-size: 0.7rem;
  color: var(--m);
}

.rtab-opts {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.rtab-opt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms);
}

.rtab-opt input {
  margin-top: 2px;
  width: auto;
  accent-color: var(--o);
}

.rtab-opt:has(input:checked) {
  border-color: var(--o);
  background: color-mix(in srgb, var(--o) 7%, transparent);
}

.rtab-opt.off {
  opacity: 0.62;
  cursor: not-allowed;
  background: rgba(124, 143, 172, 0.06);
}

.rtab-opt p {
  margin: 0;
  font-size: 0.8rem;
}

.rtab-opt small {
  display: block;
  font-size: 0.72rem;
  color: var(--m);
  margin-top: 2px;
}

.rtab-opt small.no {
  color: var(--bdt);
}

.rtab-basis {
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.rtab-basis.received {
  background: var(--okb);
  color: var(--okt);
}

.rtab-basis.historical {
  background: var(--inb);
  color: var(--int);
}

.rtab-basis.pending_disclosed {
  background: var(--wab);
  color: var(--wat);
}

.rtab-led {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.rtab-led li {
  font-size: 0.76rem;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(124, 143, 172, 0.08);
}

.rtab-draft {
  margin-top: 8px;
  font-size: 0.76rem;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(124, 143, 172, 0.08);
}

/* dialogs */
.rtab-dlg {
  border: 0;
  padding: 0;
  border-radius: 20px;
  width: min(560px, 100vw - 24px);
  background: var(--surf);
  color: inherit;
  box-shadow: 0 24px 70px rgba(10, 20, 40, 0.35);
}

.rtab-dlg::backdrop {
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(2px);
}

.rtab-dlg[open] {
  animation: rtab-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}

.rtab-dh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 6px;
}

.rtab-dh h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.rtab-db {
  padding: 6px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rtab-seg {
  display: flex;
  padding: 4px;
  border-radius: 13px;
  background: rgba(124, 143, 172, 0.14);
  gap: 4px;
}

.rtab-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--m);
}

.rtab-seg button[aria-selected=true] {
  background: var(--surf);
  color: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.rtab-pane[hidden] {
  display: none;
}

.rtab-f {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rtab-f .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rtab-check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
}

.rtab-check input {
  width: auto;
  accent-color: var(--o);
}

.rtab-help {
  font-size: 0.74rem;
  color: var(--m);
  margin: 0;
}

.dark-theme .rtab-chip {
  color: #d6deea;
}

@media (max-width: 760px) {
  .rtab-hero {
    grid-template-columns: 1fr;
  }
  .rtab-slots {
    justify-content: flex-start;
  }
  .rtab-slot {
    width: calc(50% - 6px);
  }
  .rtab-ai {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .rtab-ai .go {
    grid-column: 2;
  }
  .rtab-ct {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .rtab-ct .rtab-st {
    grid-column: 1/-1;
    justify-self: start;
  }
  .rtab-f .row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rtab *, .rtab-dlg {
    animation: none !important;
    transition: none !important;
  }
}
.rpage-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rpage-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.rpage-hero {
  padding: 22px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-top: 4px solid var(--tone);
  --tone:var(--in);
  animation: rpage-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}

.rpage[data-tone=ok] .rpage-hero, .rpage[data-tone=ok] .rpage-verdict {
  --tone:var(--ok);
  --tb:var(--okb);
  --tt:var(--okt);
}

.rpage[data-tone=bad] .rpage-hero, .rpage[data-tone=bad] .rpage-verdict {
  --tone:var(--bd);
  --tb:var(--bdb);
  --tt:var(--bdt);
}

.rpage[data-tone=review] .rpage-hero, .rpage[data-tone=review] .rpage-verdict {
  --tone:var(--wa);
  --tb:var(--wab);
  --tt:var(--wat);
}

.rpage[data-tone=wait] .rpage-verdict {
  --tone:var(--in);
  --tb:var(--inb);
  --tt:var(--int);
}

@keyframes rpage-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-enter, 4px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rpage-av {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
}

.rpage-hero h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rpage-hero p {
  margin: 3px 0 0;
  color: var(--m);
  font-size: 0.86rem;
}

.rpage-hero p b {
  color: inherit;
}

.rpage-pill {
  border-radius: 99px;
  padding: 5px 13px;
  font-size: 0.76rem;
  font-weight: 800;
  background: var(--tb);
  color: var(--tt);
  white-space: nowrap;
}

.rpage-verdict {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--tb);
  color: var(--tt);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  animation: rpage-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) 60ms both;
}

.rpage-verdict .ic {
  font-size: 2rem;
  line-height: 1;
}

.rpage-verdict h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.rpage-verdict p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  opacity: 0.9;
}

.rpage-verdict ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.8rem;
}

.rpage-rev {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.rpage-rev input {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 0.82rem;
  background: var(--surf);
  color: inherit;
}

.rpage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.rpage-stat {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surf);
}

.rpage-stat small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m);
}

.rpage-stat b {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 800;
}

.rpage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.rpage-nav {
  position: sticky;
  top: 68px;
  z-index: 5;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  margin-bottom: 8px;
  background: linear-gradient(var(--mat-sys-background, #f4f6fa) 75%, transparent);
}

.rpage-nav a {
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surf);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .rpage-nav a:hover {
    border-color: var(--o);
    color: var(--o);
  }
}
.rpage-sec {
  padding: 6px 0;
  margin-bottom: 12px;
  scroll-margin-top: 120px;
}

.rpage-sec h3 {
  margin: 0;
  padding: 14px 20px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

.rpage-q {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 6px 20px;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  align-items: start;
}

.rpage-q dt {
  margin: 0;
  color: var(--m);
  font-size: 0.8rem;
}

.rpage-q dd {
  margin: 0;
  font-weight: 600;
}

.rpage-q.long {
  grid-template-columns: 1fr;
}

.rpage-q.long dd {
  font-weight: 400;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  background: rgba(124, 143, 172, 0.07);
  border-radius: 0 10px 10px 0;
  line-height: 1.55;
}

.rpage-q.empty dd {
  color: var(--m);
  font-weight: 400;
  font-style: italic;
}

.rpage.hide-empty .rpage-q.empty {
  display: none;
}

.rpage-c {
  display: inline-block;
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.rpage-c.ok {
  background: var(--okb);
  color: var(--okt);
}

.rpage-c.bad {
  background: var(--bdb);
  color: var(--bdt);
}

.rpage-c.neutral {
  background: rgba(124, 143, 172, 0.16);
}

.rpage-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 68px;
}

.rpage-side .rpage-card {
  padding: 16px 18px;
}

.rpage-side h4 {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

.rpage-kv {
  display: grid;
  gap: 9px;
  margin: 0;
}

.rpage-kv div {
  display: grid;
  gap: 1px;
}

.rpage-kv dt {
  font-size: 0.7rem;
  color: var(--m);
}

.rpage-kv dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rpage-kv a {
  color: var(--o);
  text-decoration: none;
}

.rpage-tl {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
  position: relative;
}

.rpage-tl::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.rpage-tl li {
  position: relative;
  font-size: 0.78rem;
  padding: 0 0 10px 10px;
}

.rpage-tl li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m);
  border: 2px solid var(--surf);
}

.rpage-tl li:first-child::before {
  background: var(--o);
}

.rpage-tl time {
  display: block;
  color: var(--m);
  font-size: 0.68rem;
}

.rpage-share {
  font-size: 0.78rem;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(124, 143, 172, 0.09);
}

.rpage-share + .rpage-share {
  margin-top: 6px;
}

.rpage-switch {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--m);
  cursor: pointer;
}

.rpage-empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--m);
  border: 2px dashed var(--line);
  border-radius: 18px;
}

@media (max-width: 980px) {
  .rpage-grid {
    grid-template-columns: 1fr;
  }
  .rpage-side {
    position: static;
  }
}
@media (max-width: 640px) {
  .rpage-hero {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .rpage-av {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border-radius: 15px;
  }
  .rpage-hero .rpage-pill {
    grid-column: 1/-1;
    justify-self: start;
  }
  .rpage-q {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .rpage-verdict {
    grid-template-columns: 30px minmax(0, 1fr);
  }
}
@media print {
  .rpage-noprint, .rpage-nav {
    display: none !important;
  }
  .rpage {
    max-width: none;
  }
  .rpage-grid {
    grid-template-columns: 1fr;
  }
  .rpage-side {
    position: static;
  }
  .rpage-card, .rpage-sec {
    break-inside: avoid;
    box-shadow: none;
  }
  .rpage-hero, .rpage-verdict {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rpage *, .rpage {
    animation: none !important;
    transition: none !important;
  }
}
.vp-ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  counter-reset: vp;
}

.vp-step {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 14px 54px;
}

.vp-step::before {
  counter-increment: vp;
  content: counter(vp);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  background: var(--inb);
  color: var(--int);
}

.vp-step.always::before {
  background: var(--okb);
  color: var(--okt);
}

.vp-step h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
}

.vp-step p {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--m);
  line-height: 1.45;
}

.vp-step .who {
  margin-top: 8px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

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

.vp-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  scroll-margin-top: 90px;
  animation: wq-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
  transition: border-color var(--dur-base, 180ms);
}

.vp-card:target {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 35%, transparent);
}

@media (hover: hover) {
  .vp-card:hover {
    border-color: color-mix(in srgb, var(--o) 45%, transparent);
  }
}
.vp-top {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px 6px;
}

.vp-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(124, 143, 172, 0.16);
  color: var(--m);
  flex: none;
}

.vp-top h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.vp-top small {
  color: var(--m);
  font-size: 0.74rem;
}

.vp-say {
  margin: 0;
  padding: 6px 18px 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.vp-allow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px 0;
}

.vp-allow .wq-pill.off {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.vp-terms {
  margin: 12px 18px 0;
  padding: 9px 12px;
  border-left: 3px solid var(--line);
  background: rgba(124, 143, 172, 0.07);
  border-radius: 0 11px 11px 0;
  font-size: 0.78rem;
}

.vp-terms small {
  display: block;
  color: var(--m);
  margin-top: 3px;
  font-size: 0.7rem;
}

.vp-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 12px 18px 16px;
  font-size: 0.74rem;
  color: var(--m);
}

.vp-foot .sp {
  flex: 1;
}

.vp-dlg {
  border: 0;
  padding: 0;
  border-radius: 20px;
  width: min(600px, 100vw - 24px);
  background: var(--surf);
  color: inherit;
  box-shadow: 0 24px 70px rgba(10, 20, 40, 0.35);
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.vp-dlg::backdrop {
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(2px);
}

.vp-dlg[open] {
  animation: wq-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}

.vp-dh {
  padding: 18px 20px 4px;
}

.vp-dh h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.vp-dh p {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--m);
}

.vp-db {
  padding: 12px 20px 20px;
  display: grid;
  gap: 12px;
}

.vp-sw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms);
}

.vp-sw:has(input:checked) {
  border-color: var(--o);
  background: color-mix(in srgb, var(--o) 6%, transparent);
}

.vp-sw b {
  font-size: 0.9rem;
}

.vp-sw small {
  display: block;
  font-size: 0.76rem;
  color: var(--m);
  margin-top: 2px;
  line-height: 1.4;
}

.vp-sw input {
  position: absolute;
  opacity: 0;
}

.vp-sw i {
  width: 42px;
  height: 24px;
  border-radius: 99px;
  background: rgba(124, 143, 172, 0.35);
  position: relative;
  transition: background var(--dur-base, 180ms);
  flex: none;
}

.vp-sw i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-base, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}

.vp-sw input:checked ~ i {
  background: var(--o);
}

.vp-sw input:checked ~ i::after {
  transform: translateX(18px);
}

.vp-sw input:focus-visible ~ i {
  outline: 2px solid var(--o);
  outline-offset: 2px;
}

.vp-age {
  padding: 4px 4px 0;
}

.vp-age label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.vp-age input[type=range] {
  width: 100%;
  accent-color: var(--o);
}

.vp-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.vp-field textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 0.84rem;
  background: transparent;
  color: inherit;
  resize: vertical;
}

.vp-field .hint {
  font-size: 0.74rem;
  color: var(--m);
  margin-top: 4px;
}

.vp-field.need textarea {
  border-color: var(--wa);
}

.vp-prev {
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(124, 143, 172, 0.09);
  font-size: 0.8rem;
  line-height: 1.5;
}

.vp-prev b {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 4px;
}

.vp-prev q {
  display: block;
  font-style: italic;
  margin-top: 3px;
}

.vp-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.vp-log li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.82rem;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.vp-log li:first-child {
  border-top: 0;
}

.vp-log time {
  color: var(--m);
  font-size: 0.74rem;
}

@media (max-width: 860px) {
  .vp-ladder {
    grid-template-columns: 1fr;
  }
  .vp-log li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.tak {
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.tak kbd {
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0 5px;
  color: var(--m);
  background: var(--surf);
}

.tak-btn.pri kbd {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.tak-btn.lg {
  padding: 11px 20px;
  font-size: 0.92rem;
  border-radius: 13px;
}

.tak-btn.bad {
  color: var(--bdt);
}

.tak-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tak-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--o);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}

.tak-hero {
  --hc: var(--kc-accent);
  border-radius: 22px;
  padding: 18px 22px 22px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 13%, var(--surf)), var(--surf) 62%);
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: tak-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}
.tak-hero[data-state=clocked_in] {
  --hc: var(--ok);
}
.tak-hero[data-state=due_late] {
  --hc: var(--wa);
}
.tak-hero[data-state=done], .tak-hero[data-state=off] {
  --hc: var(--in);
}

.tak-hero-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
}

.tak-eyebrow {
  margin: 0;
  color: var(--m);
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.tak-streak {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  background: var(--wab);
  color: var(--wat);
}

.tak-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.tak-hello h1 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tak-time {
  margin: 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--m);
  font-size: 0.8rem;
  font-weight: 700;
}
.tak-time time {
  font-size: 2.1rem;
  font-weight: 800;
  color: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tak-clockcard {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surf);
  border: 1px solid color-mix(in srgb, var(--hc) 35%, var(--line));
}

.tak-clock-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 200px;
}
.tak-clock-text b {
  font-size: 1rem;
  font-weight: 800;
}
.tak-clock-text b.tak-big {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tak-clock-text span {
  color: var(--m);
  font-size: 0.8rem;
}

.tak-clock-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: rgba(124, 143, 172, 0.14);
  color: var(--m);
}
.tak-clock-ic.ok {
  background: var(--okb);
  color: var(--okt);
}

.tak-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(124, 143, 172, 0.18);
  overflow: hidden;
  margin-top: 6px;
}
.tak-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hc, var(--o));
  transition: width 0.6s var(--ease-out, ease);
}
.tak-bar.thin {
  height: 5px;
  margin: 0 0 8px;
}
.tak-bar.thin i {
  background: var(--ok);
}

.tak-mini {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
  display: flex;
  gap: 8px;
  align-items: center;
}

.tak-clear {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--okt);
  font-weight: 700;
  font-size: 0.86rem;
}

.tak-needs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tak-needs a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.tak-needs .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--inb);
  color: var(--int);
}
.tak-needs li.warn .ic {
  background: var(--wab);
  color: var(--wat);
}
.tak-needs li.bad .ic {
  background: var(--bdb);
  color: var(--bdt);
}
.tak-needs .go {
  color: var(--o);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
@media (hover: hover) {
  .tak-needs a:hover {
    border-color: var(--o);
  }
}

.tak-find {
  position: relative;
  width: min(100%, 380px);
}
.tak-find > svg, .tak-find > .iconify {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m);
  pointer-events: none;
}
.tak-find input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 40px 10px 36px;
  background: var(--surf);
  color: inherit;
  font-size: 0.86rem;
}
.tak-find kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.tak-find input[type=search]::-webkit-search-cancel-button {
  display: none;
}

.tak-find-res {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10, 20, 40, 0.18);
  padding: 6px;
  max-height: min(340px, 55vh);
  overflow: auto;
  overscroll-behavior: contain;
}
.tak-find-res .it {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
}
.tak-find-res .it:hover, .tak-find-res .it:focus-visible, .tak-find-res .it.on {
  background: rgba(124, 143, 172, 0.12);
}
.tak-find-res .it b {
  display: block;
  font-size: 0.84rem;
}
.tak-find-res .it small {
  display: block;
  color: var(--m);
  font-size: 0.72rem;
}
.tak-find-res .it mark {
  background: color-mix(in srgb, var(--kc-accent) 22%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 700;
}
.tak-find-res .none {
  padding: 12px;
  color: var(--m);
  font-size: 0.82rem;
}

.tak-urgent {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--bdb);
  border: 1px solid color-mix(in srgb, var(--bd) 40%, var(--line));
  color: var(--bdt);
}
.tak-urgent > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tak-urgent b {
  font-size: 0.92rem;
}
.tak-urgent span {
  font-size: 0.82rem;
  opacity: 0.9;
}
.tak-urgent .tak-urgent-ic {
  font-size: 1.4rem;
  flex: none;
}

.tak-nav {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surf) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tak-nav a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--m);
  text-decoration: none;
  white-space: nowrap;
}
.tak-nav a.on {
  background: var(--o);
  color: #fff;
}
.tak-nav a.on .tak-count {
  background: #fff;
  color: var(--o);
}
@media (hover: hover) {
  .tak-nav a:not(.on):hover {
    color: var(--o);
    background: rgba(124, 143, 172, 0.1);
  }
}

.tak-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.tak-main, .tak-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tak-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px 18px;
  min-width: 0;
  position: relative;
  scroll-margin-top: 76px;
  animation: tak-in var(--dur-slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)) both;
}

@keyframes tak-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-enter, 4px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tak-ch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tak-ch h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.tak-ch h2 small {
  font-weight: 600;
  color: var(--m);
  font-size: 0.72rem;
  margin-left: 6px;
}

.tak-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 8px;
}

.tak-sub {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

.tak-empty {
  margin: 0;
  padding: 14px;
  border: 1.5px dashed var(--line);
  border-radius: 13px;
  color: var(--m);
  font-size: 0.84rem;
  text-align: center;
}

.tak-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 22px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 15px;
  color: var(--m);
  font-size: 0.84rem;
}
.tak-empty-state b {
  color: inherit;
  font-size: 0.92rem;
}
.tak-empty-state svg, .tak-empty-state .iconify {
  opacity: 0.6;
}

.tak-hint {
  color: var(--m);
  font-size: 0.74rem;
  display: block;
  margin-top: 8px;
}

.tak-tag {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(124, 143, 172, 0.14);
  color: var(--m);
  vertical-align: 1px;
}
.tak-tag.bad {
  background: var(--bdb);
  color: var(--bdt);
}
.tak-tag.ok {
  background: var(--okb);
  color: var(--okt);
}

.tak-done {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--okt);
}

.tak-link {
  border: 0;
  background: transparent;
  color: var(--o);
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  padding: 0;
}

.tak-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(124, 143, 172, 0.1);
  border-radius: 99px;
  padding: 3px 4px 3px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}
.tak-chip button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--m);
  font-size: 1rem;
  line-height: 1;
  padding: 0 5px;
}

button.tak-chip.emoji {
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1rem;
}

button.tak-chip.emoji:hover {
  border-color: var(--o);
}

.tak-av {
  width: var(--s, 32px);
  height: var(--s, 32px);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  font-weight: 800;
  font-size: calc(var(--s, 32px) * 0.36);
  background: color-mix(in srgb, var(--kc-accent) 18%, var(--surf));
  color: var(--o);
}
.tak-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tak-more {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.tak-more summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--m);
}

.tak-fold summary {
  cursor: pointer;
  list-style: none;
}
.tak-fold summary h2 {
  display: inline-flex;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  gap: 8px;
  align-items: center;
}

.tak-anns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tak-ann {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(124, 143, 172, 0.05);
  border-left: 4px solid var(--o);
}
.tak-ann.urgent {
  border-left-color: var(--bd);
  background: color-mix(in srgb, var(--bd) 6%, transparent);
}
.tak-ann.read {
  border-left-color: var(--line);
  opacity: 0.82;
}
.tak-ann h3 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
}
.tak-ann .top {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tak-ann small {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-ann p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
}
.tak-ann p.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tak-ann .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tak-poll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  margin-bottom: 10px;
}
.tak-poll b {
  font-size: 0.9rem;
}
.tak-poll small {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-poll .opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tak-poll .opt {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surf);
  border-radius: 11px;
  padding: 9px 13px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: border-color var(--dur-fast, 120ms);
}
.tak-poll .opt:hover {
  border-color: var(--o);
}
.tak-poll .res {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 600;
}
.tak-poll .res i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: rgba(124, 143, 172, 0.18);
  z-index: 0;
  transition: width 0.5s var(--ease-out, ease);
}
.tak-poll .res span, .tak-poll .res em {
  position: relative;
  z-index: 1;
}
.tak-poll .res em {
  font-style: normal;
  font-weight: 800;
}
.tak-poll .res.mine {
  border-color: var(--o);
}
.tak-poll .res.mine i {
  background: color-mix(in srgb, var(--o) 24%, transparent);
}

.tak-compose {
  padding: 12px;
  border-radius: 15px;
  background: rgba(124, 143, 172, 0.07);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tak-compose .pick {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tak-compose input[type=text], .tak-compose textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 0.86rem;
  background: var(--surf);
  color: inherit;
  resize: vertical;
}
.tak-compose .who-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 4px 6px 4px 4px;
  border-radius: 99px;
  background: var(--surf);
  border: 1px solid var(--o);
  font-size: 0.84rem;
}
.tak-compose .who-chip button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--m);
  font-size: 1.1rem;
  padding: 0 6px;
}
.tak-compose .who-chip[hidden] + input {
  display: none;
}
.tak-compose .more {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tak-compose .more[hidden] {
  display: none;
}
.tak-compose .vals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tak-compose .val {
  cursor: pointer;
}
.tak-compose .val input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tak-compose .val span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surf);
  font-size: 0.78rem;
  font-weight: 700;
}
.tak-compose .val input:checked + span {
  border-color: var(--o);
  background: color-mix(in srgb, var(--o) 12%, var(--surf));
  color: var(--o);
}
.tak-compose .val input:focus-visible + span {
  outline: 2px solid var(--o);
  outline-offset: 2px;
}
.tak-compose .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tak-compose .foot small {
  color: var(--m);
  font-size: 0.72rem;
}

.tak-wall {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tak-kudo {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  scroll-margin-top: 90px;
}
.tak-kudo:target {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 30%, transparent);
}
.tak-kudo p {
  margin: 0;
  font-size: 0.84rem;
}
.tak-kudo blockquote {
  margin: 6px 0 8px;
  padding: 8px 12px;
  border-left: 3px solid color-mix(in srgb, var(--o) 55%, transparent);
  background: rgba(124, 143, 172, 0.07);
  border-radius: 0 10px 10px 0;
  font-size: 0.86rem;
}
.tak-kudo .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.tak-kudo .meta time {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-kudo .re {
  display: inline-flex;
  gap: 4px;
}
.tak-kudo .re button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 0.86rem;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: inherit;
}
.tak-kudo .re button.mine {
  border-color: var(--o);
  background: color-mix(in srgb, var(--o) 10%, transparent);
}
.tak-kudo .re button b {
  font-size: 0.72rem;
}
.tak-kudo .cm {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}
.tak-kudo .cm li {
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(124, 143, 172, 0.08);
}
.tak-kudo .cmf input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 0.78rem;
  background: transparent;
  color: inherit;
}

.tak-tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.tak-tally button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 12px;
  padding: 7px 4px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--m);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tak-tally button b {
  font-size: 1.15rem;
  color: inherit;
  font-weight: 800;
}
.tak-tally button.on {
  border-color: var(--o);
  background: color-mix(in srgb, var(--o) 9%, transparent);
  color: var(--o);
}

.tak-pulse {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
}

.tak-dept h3 {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m);
}
.tak-dept h3 small {
  opacity: 0.7;
  margin-left: 4px;
}

.tak-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tak-face {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform var(--dur-fast, 120ms);
}
@media (hover: hover) {
  .tak-face:hover {
    transform: translateY(var(--motion-lift, -2px));
  }
}
.tak-face i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--surf);
  background: var(--m);
}
.tak-face.in i {
  background: var(--ok);
}
.tak-face.leave i {
  background: var(--wa);
}
.tak-face.out i {
  background: var(--in);
}
.tak-face.away i {
  background: #b8c2d4;
}
.tak-face.away .tak-av, .tak-face.leave .tak-av {
  opacity: 0.55;
}
.tak-face.me .tak-av {
  box-shadow: 0 0 0 2px var(--o);
}

.tak-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--m);
  font-weight: 700;
}
.tak-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--ok);
}
.tak-legend .away i {
  background: #b8c2d4;
}
.tak-legend .leave i {
  background: var(--wa);
}
.tak-legend .out i {
  background: var(--in);
}

.tak-pop {
  position: absolute;
  z-index: 15;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surf);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(10, 20, 40, 0.22);
}
.tak-pop[hidden] {
  display: none;
}
.tak-pop b {
  font-size: 0.92rem;
}
.tak-pop span {
  color: var(--m);
  font-size: 0.78rem;
}
.tak-pop em {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
}
.tak-pop .act {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

.tak-cel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tak-cel li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 12px;
}
.tak-cel li.today {
  background: color-mix(in srgb, var(--wa) 10%, transparent);
  padding: 8px;
}
.tak-cel .t b {
  display: block;
  font-size: 0.84rem;
}
.tak-cel .t small {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-cel .wish {
  display: inline-flex;
  gap: 4px;
}

.tak-desks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tak-desk {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast, 120ms), transform var(--dur-fast, 120ms);
}
.tak-desk .ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--o) 12%, transparent);
  color: var(--o);
  font-size: 1.15rem;
}
.tak-desk .tx b {
  display: block;
  font-size: 0.86rem;
}
.tak-desk .tx small {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-desk .chev {
  color: var(--m);
}
@media (hover: hover) {
  .tak-desk:hover {
    border-color: var(--o);
    transform: translateY(var(--motion-lift, -2px));
  }
}

.tak-growth {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.tak-growth .score {
  text-align: center;
}
.tak-growth .score small {
  display: block;
  margin-top: 6px;
  color: var(--m);
  font-size: 0.68rem;
  font-weight: 700;
}
.tak-growth .ring {
  --p: 0;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--o) calc(var(--p) * 1%), rgba(124, 143, 172, 0.18) 0);
  position: relative;
}
.tak-growth .ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--surf);
}
.tak-growth .ring b {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  font-weight: 800;
}
.tak-growth .dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tak-growth .dates li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--m);
}
.tak-growth .dates li b {
  color: inherit;
  font-weight: 800;
}

.tak-goals {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tak-goals li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.84rem;
}
.tak-goals li.done span {
  text-decoration: line-through;
  opacity: 0.6;
}
.tak-goals button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--m);
  padding: 0;
  display: grid;
}
.tak-goals li.done button {
  color: var(--ok);
}

.tak-inline {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.tak-inline input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 0.8rem;
  background: var(--surf);
  color: inherit;
}

.tak-team {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8rem;
}
.tak-team > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tak-team small {
  color: var(--m);
}
.tak-team small.done {
  text-decoration: line-through;
}

.tak-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.tak-faces5 {
  display: flex;
  gap: 8px;
}
.tak-faces5 button {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 14px;
  font-size: 1.7rem;
  padding: 8px 0;
  cursor: pointer;
  transition: transform var(--dur-fast, 120ms), border-color var(--dur-fast, 120ms);
}
.tak-faces5 button:hover {
  transform: translateY(-3px);
  border-color: var(--o);
}

.tak-feed {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tak-feed li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
.tak-feed li:last-child {
  border: 0;
}
.tak-feed li.unread {
  box-shadow: inset 3px 0 0 var(--o);
  padding-left: 10px;
}
.tak-feed a, .tak-feed span {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tak-feed small {
  color: var(--m);
  font-size: 0.72rem;
}
.tak-feed time {
  color: var(--m);
  font-size: 0.7rem;
  white-space: nowrap;
}

.tak-ins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tak-top {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.84rem;
}
.tak-top li {
  padding-left: 4px;
}
.tak-top small {
  color: var(--m);
  margin-left: 6px;
}
.tak-top span {
  display: block;
  color: var(--m);
  font-size: 0.74rem;
}

.tak-tablewrap {
  overflow-x: auto;
}

.tak-wb {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
}
.tak-wb th, .tak-wb td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.tak-wb th:first-child {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
.tak-wb thead th {
  color: var(--m);
  font-size: 0.7rem;
}
.tak-wb td.low {
  background: var(--bdb);
  color: var(--bdt);
  font-weight: 800;
}
.tak-wb td.high {
  background: var(--okb);
  color: var(--okt);
  font-weight: 800;
}
.tak-wb td.na {
  color: var(--m);
}
.tak-wb tr.co th, .tak-wb tr.co td {
  font-weight: 800;
}

.tak-dlg {
  border: 0;
  padding: 0;
  border-radius: 20px;
  width: min(520px, 100vw - 24px);
  background: var(--surf);
  color: inherit;
  box-shadow: 0 24px 70px rgba(10, 20, 40, 0.35);
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.tak-dlg::backdrop {
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(2px);
}
.tak-dlg[open] {
  animation: tak-in var(--dur-slow, 240ms) var(--ease-out, ease) both;
}
.tak-dlg .dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 0;
}
.tak-dlg .dh h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.tak-dlg .db {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tak-dlg .db label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--m);
}
.tak-dlg .db input[type=text], .tak-dlg .db input[type=date], .tak-dlg .db select, .tak-dlg .db textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 0.86rem;
  background: var(--surf);
  color: inherit;
  font-weight: 400;
}
.tak-dlg .db .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.tak-dlg .db .checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tak-dlg .db label.chk {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: inherit;
}
.tak-dlg .end {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tak-dlg .readers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.84rem;
}

@media (max-width: 1100px) {
  .tak-hero-body {
    grid-template-columns: 1fr 1fr;
  }
  .tak-hero-body .tak-hello {
    grid-column: 1/-1;
  }
}
@media (max-width: 900px) {
  .tak-layout, .tak-ins {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .tak-hero {
    padding: 16px;
  }
  .tak-hero-body {
    grid-template-columns: 1fr;
  }
  .tak-hello h1 {
    font-size: 1.5rem;
  }
  .tak-growth {
    grid-template-columns: 1fr;
  }
  .tak-dlg .db .two {
    grid-template-columns: 1fr;
  }
  .tak-card {
    padding: 14px;
  }
  .tak-needs a {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .tak-needs a .go {
    grid-column: 2;
  }
  .tak-urgent {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tak-card, .tak-hero, .tak-dlg[open], .tak-face, .tak-desk, .tak-faces5 button, .tak-bar i, .tak-poll .res i {
    animation: none !important;
    transition: none !important;
  }
}
.tak-wr-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-end;
}
.tak-wr-head h1 {
  margin: 4px 0;
  font-size: 1.5rem;
  font-weight: 800;
}
.tak-wr-head p {
  margin: 0;
  color: var(--m);
  font-size: 0.86rem;
  max-width: 62ch;
}

.tak-wr-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tak-wr-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surf);
}
.tak-wr-range button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--m);
  cursor: pointer;
}
.tak-wr-range button.on {
  background: var(--o);
  color: #fff;
}

.tak-wr-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.tak-wr-kpis .tak-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tak-wr-kpis small {
  color: var(--m);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tak-wr-kpis b {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tak-wr-kpis b i {
  font-size: 0.9rem;
  font-style: normal;
  color: var(--m);
  font-weight: 700;
}
.tak-wr-kpis span {
  color: var(--m);
  font-size: 0.76rem;
  font-weight: 700;
}
.tak-wr-kpis span.up {
  color: var(--okt);
}
.tak-wr-kpis span.down {
  color: var(--bdt);
}

.tak-wr-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tak-wr-chart {
  width: 100%;
  height: auto;
  display: block;
}
.tak-wr-chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}
.tak-wr-chart .ax {
  fill: var(--m);
  font-size: 11px;
  font-weight: 600;
}
.tak-wr-chart .line {
  fill: none;
  stroke: var(--o);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tak-wr-chart .pt {
  fill: var(--o);
  stroke: var(--surf);
  stroke-width: 2;
}
.tak-wr-chart .day {
  fill: var(--o);
  opacity: 0.3;
}
.tak-wr-chart .lbl {
  fill: currentColor;
  font-size: 13px;
  font-weight: 800;
}

.tak-dist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tak-dist li {
  display: grid;
  grid-template-columns: 24px 14px minmax(0, 1fr) 84px;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
}
.tak-dist .track {
  height: 10px;
  border-radius: 4px;
  background: rgba(124, 143, 172, 0.16);
  overflow: hidden;
}
.tak-dist .track i {
  display: block;
  height: 100%;
  background: var(--o);
  border-radius: 0 4px 4px 0;
}
.tak-dist em {
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
.tak-dist em small {
  color: var(--m);
  font-weight: 600;
}

@media (max-width: 900px) {
  .tak-wr-cols {
    grid-template-columns: 1fr;
  }
}
.soc {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  --uk: var(--kc-accent);
  --ng: var(--in);
}

.soc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.soc-btn.bad {
  color: var(--bdt);
}

.soc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.soc-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-end;
}
.soc-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.soc-head p {
  margin: 4px 0 0;
  color: var(--m);
  font-size: 0.86rem;
  max-width: 66ch;
}

.soc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.soc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surf);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.soc-tabs a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--m);
  text-decoration: none;
  white-space: nowrap;
}
.soc-tabs a.on {
  background: var(--o);
  color: #fff;
}
@media (hover: hover) {
  .soc-tabs a:not(.on):hover {
    color: var(--o);
  }
}

.soc-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surf);
}
.soc-range button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--m);
  cursor: pointer;
}
.soc-range button.on {
  background: var(--o);
  color: #fff;
}

.soc-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px 18px;
  min-width: 0;
}

.soc-ch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.soc-ch h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
}
.soc-ch h2 small {
  color: var(--m);
  font-weight: 600;
  margin-left: 6px;
}

.soc-hint {
  margin: -4px 0 0;
  color: var(--m);
  font-size: 0.76rem;
}

.soc-none {
  margin: 0;
  padding: 14px;
  border: 1.5px dashed var(--line);
  border-radius: 13px;
  color: var(--m);
  font-size: 0.84rem;
  text-align: center;
}

.soc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 34px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 18px;
  color: var(--m);
  background: var(--surf);
}
.soc-empty b {
  color: inherit;
  font-size: 1rem;
}
.soc-empty .soc-btn {
  margin-top: 6px;
}

.soc-muted {
  color: var(--m);
  font-weight: 600;
}

.soc-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--wab);
  color: var(--wat);
  font-size: 0.82rem;
  font-weight: 600;
}

.soc-tag {
  display: inline-flex;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(124, 143, 172, 0.14);
  color: var(--m);
}
.soc-tag.ok {
  background: var(--okb);
  color: var(--okt);
}

.soc-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.soc-flag::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--uk);
}
.soc-flag.ng::before {
  background: var(--ng);
}

.soc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.soc-kpis .soc-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
}
.soc-kpis small {
  color: var(--m);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.soc-kpis b {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.soc-delta {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--m);
}
.soc-delta.up {
  color: var(--okt);
}
.soc-delta.down {
  color: var(--bdt);
}

.soc-tablewrap {
  overflow-x: auto;
}

.soc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.soc table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.soc table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.soc table tr:last-child td {
  border-bottom: 0;
}
.soc table td small {
  display: block;
  color: var(--m);
  font-size: 0.72rem;
  font-weight: 500;
}
.soc table .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.soc table td.warn {
  color: var(--wat);
  font-weight: 800;
}
.soc table .c {
  text-align: center;
}

.soc-cov th small {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0;
  font-weight: 600;
}

.soc-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.soc-dot.ok {
  background: var(--ok);
}
.soc-dot.miss {
  border: 2px solid var(--bd);
  background: transparent;
}

.soc-legend {
  display: inline-flex;
  gap: 6px 14px;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--m);
}
.soc-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: -2px;
}
.soc-legend i.uk {
  background: var(--uk);
}
.soc-legend i.ng {
  background: var(--ng);
}
.soc-legend i.ok {
  background: var(--ok);
}
.soc-legend i.miss {
  border: 2px solid var(--bd);
}

.soc-chart {
  width: 100%;
  height: auto;
  display: block;
}
.soc-chart .grid {
  stroke: var(--line);
}
.soc-chart .ax {
  fill: var(--m);
  font-size: 11px;
  font-weight: 600;
}
.soc-chart .bar.uk {
  fill: var(--uk);
}
.soc-chart .bar.ng {
  fill: var(--ng);
}

.soc-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.soc-notes li {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.soc-notes li:last-child {
  border: 0;
  padding: 0;
}
.soc-notes time {
  color: var(--m);
  font-size: 0.78rem;
  font-weight: 700;
}
.soc-notes p {
  margin: 0 0 4px;
  font-size: 0.86rem;
}
.soc-notes p.issue b {
  color: var(--bdt);
}
.soc-notes small {
  color: var(--m);
  font-size: 0.72rem;
}

.soc-day {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.soc-day label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.soc-day select {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding-block: 6px;
  padding-left: 12px;
  background: var(--surf);
  color: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.soc-day .soc-progress {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--okt);
}

.soc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.soc-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.soc-group h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}
.soc-group h3 small {
  color: var(--m);
  font-weight: 600;
  margin-left: 8px;
}

.soc-handle {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surf);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.soc-handle.filed {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
}
.soc-handle legend {
  padding: 0 6px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.94rem;
}
.soc-handle.off .soc-nums label:not(:last-child) input {
  opacity: 0.45;
}

.soc-off {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  width: fit-content;
}
.soc-off input {
  width: 16px;
  height: 16px;
  accent-color: var(--o);
}

.soc-nums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.soc-nums label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
}
.soc-nums input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.94rem;
  font-weight: 700;
  background: var(--surf);
  color: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.soc-nums input:disabled {
  opacity: 0.45;
}

.soc-notefield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
}
.soc-notefield input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.86rem;
  background: var(--surf);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.soc-summary h3 {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 800;
}

.soc-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.soc-two label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.soc-two textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.88rem;
  background: var(--surf);
  color: inherit;
  resize: vertical;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.soc-save {
  position: sticky;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surf) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(10, 20, 40, 0.12);
  font-weight: 700;
  font-size: 0.86rem;
}

.soc-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}
.soc-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m);
}
.soc-fields label.wide {
  grid-column: span 2;
}
.soc-fields input, .soc-fields select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding-block: 7px;
  padding-left: 11px;
  font-size: 0.84rem;
  line-height: 1.3;
  background: var(--surf);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  width: 100%;
}
.soc-fields input {
  padding-right: 11px;
}
.soc-fields .end {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
}

.soc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soc-hrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
}
.soc-hrow.paused, .soc-hrow.retired {
  opacity: 0.7;
}
.soc-hrow .who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.soc-hrow .who b {
  font-size: 0.92rem;
}
.soc-hrow .who small {
  color: var(--m);
}
.soc-hrow .who a {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--o);
}
.soc-hrow .acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.soc-hrow .acts form {
  margin: 0;
}
.soc-hrow .edit {
  grid-column: 1/-1;
}
.soc-hrow .edit summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--m);
}
.soc-hrow .edit .soc-fields {
  margin-top: 10px;
}

@media (max-width: 800px) {
  .soc-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .soc-two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .soc-fields {
    grid-template-columns: 1fr;
  }
  .soc-fields label.wide {
    grid-column: auto;
  }
  .soc-hrow {
    grid-template-columns: 1fr;
  }
  .soc-hrow .acts {
    justify-content: flex-start;
  }
  .soc-notes li {
    grid-template-columns: 1fr;
  }
  .soc-day .soc-progress {
    margin-left: 0;
    width: 100%;
  }
}
.soc-paste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.soc-paste label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m);
}
.soc-paste select {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding-block: 6px;
  padding-left: 12px;
  font-size: 0.8rem;
  line-height: 1.3;
  background: var(--surf);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.soc-paste textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.86rem;
  background: var(--surf);
  color: inherit;
  resize: vertical;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  min-height: 150px;
}
.soc-paste .end {
  display: flex;
  justify-content: flex-end;
}

.soc-progress {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--okt);
}

.soc-pgroup {
  margin-top: 14px;
}
.soc-pgroup:first-of-type {
  margin-top: 0;
}
.soc-pgroup h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 800;
}
.soc-pgroup h4 small {
  color: var(--m);
  font-weight: 600;
  margin-left: 6px;
}

.soc-plinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.soc-plinks li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}
.soc-plinks li.done a {
  opacity: 0.6;
}
.soc-plinks a {
  color: var(--o);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.soc-plinks a:hover {
  text-decoration: underline;
}
.soc-plinks em {
  font-style: normal;
  color: var(--m);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.soc-kind {
  display: inline-flex;
  justify-content: center;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 800;
  background: rgba(124, 143, 172, 0.14);
  color: var(--m);
}

.soc-engage {
  border: 1px solid var(--line);
  background: var(--surf);
  border-radius: 99px;
  padding: 5px 13px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  color: inherit;
  white-space: nowrap;
}
.soc-engage[aria-checked=true] {
  background: var(--okb);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--okt);
}
@media (hover: hover) {
  .soc-engage:hover {
    border-color: var(--o);
  }
}

.soc-fromlist {
  margin: 0;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--inb);
  color: var(--int);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.soc-fromlist b {
  font-weight: 800;
}

@media (max-width: 560px) {
  .soc-plinks li {
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .soc-plinks li .soc-engage, .soc-plinks li em {
    grid-column: 2;
    justify-self: start;
  }
}
.soc-sub {
  margin: 18px 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m);
}
.soc-sub small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  margin-left: 6px;
}

.soc-more {
  margin-top: 12px;
}
.soc-more summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--m);
}

.soc-pdetail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.soc-pdetail p {
  margin: 0 0 4px;
  font-size: 0.84rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.soc-pdetail a {
  color: var(--o);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.soc-pdetail em {
  font-style: normal;
  color: var(--m);
  font-size: 0.74rem;
  font-weight: 700;
}
.soc-pdetail ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
}
.soc-pdetail ul li {
  margin: 2px 0;
}

.soc-blognote h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 800;
}
.soc-blognote ul {
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 0.86rem;
}
.soc-blognote ul li {
  margin: 3px 0;
}
.soc-blognote ul a {
  color: var(--o);
  font-weight: 600;
}
.soc-blognote ul small {
  color: var(--m);
  margin-left: 6px;
}

.blm {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.blm-btn.bad {
  color: var(--bdt);
}

.blm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.blm-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-end;
}
.blm-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.blm-head p {
  margin: 4px 0 0;
  color: var(--m);
  font-size: 0.86rem;
  max-width: 66ch;
}

.blm-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blm-card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px 18px;
  min-width: 0;
}

.blm-ch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.blm-ch h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
}
.blm-ch h2 small {
  color: var(--m);
  font-weight: 600;
  margin-left: 6px;
}

.blm-hint {
  margin: 6px 0 0;
  color: var(--m);
  font-size: 0.76rem;
}
.blm-hint code {
  font-size: 0.92em;
  background: rgba(124, 143, 172, 0.14);
  padding: 0 4px;
  border-radius: 4px;
}

.blm-none {
  margin: 8px 0 0;
  padding: 14px;
  border: 1.5px dashed var(--line);
  border-radius: 13px;
  color: var(--m);
  font-size: 0.84rem;
  text-align: center;
}

.blm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 34px 16px;
  color: var(--m);
}
.blm-empty b {
  color: inherit;
  font-size: 1rem;
}
.blm-empty .blm-btn {
  margin-top: 6px;
}

.blm-state {
  display: inline-flex;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(124, 143, 172, 0.16);
  color: var(--m);
}
.blm-state.published {
  background: var(--okb);
  color: var(--okt);
}
.blm-state.scheduled {
  background: var(--inb);
  color: var(--int);
}
.blm-state.archived {
  background: var(--wab);
  color: var(--wat);
}

.blm-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surf);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.blm-tabs a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--m);
  text-decoration: none;
  white-space: nowrap;
}
.blm-tabs a span {
  font-size: 0.72rem;
  opacity: 0.8;
}
.blm-tabs a.on {
  background: var(--o);
  color: #fff;
}

.blm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.blm-filter input[type=search], .blm-filter select {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding-block: 6px;
  padding-left: 12px;
  font-size: 0.8rem;
  line-height: 1.3;
  background: var(--surf);
  color: inherit;
}
.blm-filter input[type=search] {
  padding-right: 12px;
  min-width: min(100%, 260px);
}

.blm-tablewrap {
  overflow-x: auto;
}

.blm table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.blm table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
  padding: 8px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.blm table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.blm table tr:last-child td {
  border-bottom: 0;
}
.blm table .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.blm-title {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.blm-title:hover {
  color: var(--o);
}

td small {
  display: block;
  color: var(--m);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.blm-rowacts {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  width: 1%;
}

.blm-rowacts__in {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.blm-rowacts__in form {
  margin: 0;
  display: inline-flex;
}

.blm td {
  vertical-align: middle;
}

.blm-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--m);
  font-weight: 700;
}

.blm-edit {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}

.blm-main, .blm-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.blm-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
}
.blm-f small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.blm-f em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
  margin-left: 6px;
}
.blm-f em.ok {
  color: var(--okt);
}
.blm-f em.bad {
  color: var(--bdt);
}
.blm-f input[type=text], .blm-f input[type=datetime-local], .blm-f input[type=file], .blm-f textarea, .blm-f select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 0.88rem;
  background: var(--surf);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.blm-f textarea {
  resize: vertical;
  line-height: 1.5;
}

.blm-bigin {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

.blm-slug {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  margin: -4px 0 14px;
  font-size: 0.78rem;
  color: var(--m);
}
.blm-slug input {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 9px;
  font-size: 0.8rem;
  background: var(--surf);
  color: inherit;
}
.blm-slug b {
  color: inherit;
}
.blm-slug em {
  font-style: normal;
  font-weight: 800;
}
.blm-slug em.ok {
  color: var(--okt);
}
.blm-slug em.bad {
  color: var(--bdt);
}
.blm-slug small {
  flex-basis: 100%;
}

.blm-tabsbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  margin-bottom: 8px;
}
.blm-tabsbar > button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--m);
  cursor: pointer;
}
.blm-tabsbar > button.on {
  background: var(--o);
  color: #fff;
}

.blm-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.blm-tools button {
  border: 1px solid var(--line);
  background: var(--surf);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
}
.blm-tools button:hover {
  border-color: var(--o);
}

.blm textarea[data-blm-content] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.6;
  background: var(--surf);
  color: inherit;
  resize: vertical;
  min-height: 340px;
}

.blm-prose {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  min-height: 340px;
  font-size: 0.96rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.blm-prose h2 {
  font-size: 1.35rem;
  margin: 1.1em 0 0.4em;
}
.blm-prose h3 {
  font-size: 1.12rem;
  margin: 1em 0 0.3em;
}
.blm-prose h4 {
  font-size: 1rem;
}
.blm-prose p {
  margin: 0 0 0.9em;
}
.blm-prose img {
  max-width: 100%;
  border-radius: 8px;
}
.blm-prose blockquote {
  margin: 0 0 1em;
  padding: 4px 14px;
  border-left: 3px solid var(--o);
  color: var(--m);
}
.blm-prose ul, .blm-prose ol {
  padding-left: 1.3em;
  margin: 0 0 1em;
}
.blm-prose code {
  background: rgba(124, 143, 172, 0.16);
  padding: 0 4px;
  border-radius: 4px;
}
.blm-prose a {
  color: var(--o);
}

.blm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blm-buttons.sub {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.blm-buttons form {
  margin: 0;
}

.blm-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.82rem;
}
.blm-check li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.35;
}
.blm-check li em {
  font-style: normal;
  color: var(--m);
}
.blm-check li i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 1px;
  border: 2px solid var(--bd);
}
.blm-check li.ok i {
  background: var(--ok);
  border-color: var(--ok);
  position: relative;
}
.blm-check li.ok i::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.blm-check li.opt i {
  border-color: var(--line);
}
.blm-check li.ok {
  color: var(--m);
}

.blm-cover {
  margin-bottom: 10px;
}
.blm-cover img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  aspect-ratio: 16/7;
  object-fit: cover;
}

.blm-chk {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.blm-chk input {
  width: 16px;
  height: 16px;
  accent-color: var(--o);
}

.blm-serp {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surf);
}
.blm-serp b {
  display: block;
  color: var(--int);
  font-size: 0.98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.blm-serp span {
  display: block;
  color: var(--okt);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}
.blm-serp p {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--m);
}

.blm-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.blm-inline input[type=text] {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 12px;
  font-size: 0.86rem;
  background: var(--surf);
  color: inherit;
}

.blm-count {
  color: var(--m);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.blm-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blm-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.blm-list li > form:first-child {
  flex: 1;
  min-width: 260px;
}

.blm-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blm-chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 6px 4px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}
.blm-chips li small {
  color: var(--m);
  margin-left: 4px;
}
.blm-chips li form {
  margin: 0;
}
.blm-chips .blm-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--m);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 6px;
}

@media (max-width: 980px) {
  .blm-edit {
    grid-template-columns: 1fr;
  }
  .blm-side {
    order: -1;
  }
}
@media (max-width: 560px) {
  .blm-pager {
    flex-wrap: wrap;
  }
  .blm-tools {
    margin-left: 0;
  }
}
.blm-banner {
  padding: 11px 16px;
  border-radius: 13px;
  font-size: 0.86rem;
}
.blm-banner.warn {
  background: var(--wab);
  color: var(--wat);
}
.blm-banner.info {
  background: var(--inb);
  color: var(--int);
}

.blm-review {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blm-review .blm-f {
  margin: 0;
}
.blm-review input[type=text] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 12px;
  font-size: 0.84rem;
  background: var(--surf);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.blm-privacy {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  align-items: flex-start;
  line-height: 1.4;
}
.blm-privacy input {
  margin-top: 2px;
  flex: none;
}

.blm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.blm-stats div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.blm-stats dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m);
}
.blm-stats dd {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.blm-versions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.blm-versions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.blm-versions li:last-child {
  border: 0;
}
.blm-versions small {
  display: block;
  color: var(--m);
  font-size: 0.72rem;
}

.blm-linkcheck {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.blm-links {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.8rem;
}
.blm-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blm-links li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 4px 10px;
}
.blm-links li span {
  overflow-wrap: anywhere;
}
.blm-links li small {
  grid-column: 2;
  color: var(--m);
}
.blm-links li b {
  font-weight: 800;
}
.blm-links li.ok b {
  color: var(--okt);
}
.blm-links li.broken b {
  color: var(--bdt);
}
.blm-links li.unverified b {
  color: var(--wat);
}

.blm-split {
  margin-left: 0;
  border: 1px solid var(--line) !important;
  background: var(--surf) !important;
}
.blm-split.on {
  border-color: var(--o) !important;
  color: var(--o) !important;
}

.blm-pane {
  min-width: 0;
}

.blm-editarea {
  display: block;
}

@media (min-width: 1100px) {
  .blm.is-split .blm-edit {
    grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr);
  }
  .blm.is-split .blm-editarea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }
  .blm.is-split .blm-editarea textarea[data-blm-content] {
    min-height: 520px;
  }
  .blm.is-split .blm-editarea .blm-pane {
    display: flex;
    flex-direction: column;
  }
  .blm.is-split .blm-editarea .blm-pane .blm-prose {
    flex: 1;
    min-height: 520px;
    max-height: 640px;
    overflow: auto;
  }
}
@media (max-width: 1099px) {
  .blm-split {
    display: none;
  }
}