@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");._authLayout_10og8_1 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f7;
  position: relative;
}

._authLayoutHeader_10og8_9 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 32px 40px;
  flex-shrink: 0;
  z-index: 2;
}

._authLayoutHeaderLogo_10og8_21 {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

._authLayoutHeaderText_10og8_27 {
  font-size: 24px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
}

._authLayoutContent_10og8_35 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 250ms, color 250ms, box-shadow 250ms;
  user-select: none;
  text-align: center;
  padding: 10px;
  border: 1px solid transparent;
}
.button.left-aligned {
  justify-content: flex-start;
}
.button.loading {
  cursor: not-allowed;
}
.button__spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.6s linear infinite;
}
.button__text {
  display: inline-block;
}
.button__text .filterCount {
  color: var(--color-primary, #00A9CE);
  padding-left: 4px;
}
.button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 20px;
  width: 20px;
}
.button__icon svg {
  display: block;
}
.button__icon--start {
  margin-right: 4px;
}
.button__icon--end {
  margin-left: 4px;
}
.button__icon--dropdown {
  margin-left: 8px;
  transition: transform 250ms;
}
.button__icon--dropdown svg path {
  fill: #fff;
}
.button__icon--dropdown.open {
  transform: rotate(180deg);
}
.button__icon--dropdown.open svg path {
  fill: #919eab;
}
.button.contained {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.contained:hover:not(.disabled) {
  background: linear-gradient(to bottom, #FFC72C, #E2A100);
  border: 1px solid #E2A100;
  color: #14181F;
}
.button.contained.primary {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  border-color: var(--color-primary-contained, #00A9CE);
  border-radius: 12px;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00A9CE;
  border: 1px solid #00A9CE;
  border-radius: 8px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.07em;
  min-width: 158px;
  height: 40px;
  padding: 10px 14px;
  gap: 4px;
}
.button.contained.primary:hover:not(.disabled) {
  background: #FFC72C;
  border: 1px solid #FFC72C;
  color: #14181F;
}
.button.contained.info {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  color: #212b36;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.07em;
  min-width: 120px;
  height: 40px;
  padding: 10px 14px;
  gap: 4px;
}
.button.contained.info:hover:not(.disabled) {
  background: #f5f5f5;
  border: 1px solid #d0d0d1;
  color: #212b36;
}
.button.contained.success {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #15ac77;
  border: 1px solid #15ac77;
  border-radius: 8px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.07em;
  min-width: 120px;
  height: 40px;
  padding: 10px 14px;
  gap: 4px;
}
.button.contained.success:hover:not(.disabled) {
  background: #0e8a5f;
  border: 1px solid #0e8a5f;
  color: #fff;
}
.button.contained.warning {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button.contained.warning:hover:not(.disabled) {
  background: linear-gradient(to bottom, #FFC72C, #E2A100);
  border: 1px solid #E2A100;
  color: #14181F;
}
.button.contained.error {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-error-dark, #fb3748);
  border: 1px solid var(--color-error-dark, #fb3748);
  border-radius: 12px;
}
.button.contained.error:hover:not(.disabled) {
  background: var(--color-error-dark, #fb3748);
  border: 1px solid var(--color-error-dark, #fb3748);
  color: #fff;
}
.button.outlined {
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  background-color: transparent;
  border-color: var(--color-neutral-dark, #212b36);
  border: 1px solid var(--color-neutral-dark, #212b36);
}
.button.outlined:hover:not(.disabled) {
  background-color: rgba(var(--color-neutral-dark, #212b36), 0.08);
  color: var(--color-neutral-dark, #212b36);
  border: 1px solid var(--color-neutral-dark, #212b36);
}
.button.outlined.primary {
  color: #00A9CE;
  font-size: 14px;
  background-color: transparent;
  border-color: #00A9CE;
  border-radius: 12px;
  border: 1px solid #00A9CE;
}
.button.outlined.primary:hover:not(.disabled) {
  background-color: rgba(0, 169, 206, 0.08);
  color: #00A9CE;
  border: 1px solid #00A9CE;
}
.button.outlined.primary {
  color: #00A9CE;
  border-color: #00A9CE;
  background-color: transparent;
}
.button.outlined.primary:hover:not(.disabled) {
  background-color: rgba(0, 169, 206, 0.08);
  border-color: #00A9CE;
  color: #00A9CE;
}
.button.outlined.secondary {
  color: #00A9CE;
  font-size: 14px;
  background-color: transparent;
  border-color: #00A9CE;
  background: transparent;
  border: 1px solid #ffcccf;
  border-radius: 8px;
  color: #fe5b65;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  padding: 10px 14px;
}
.button.outlined.secondary:hover:not(.disabled) {
  background-color: rgba(254, 91, 101, 0.08);
  border: 1px solid #fe5b65;
  color: #fe5b65;
}
.button.outlined.info {
  color: #1f81ec;
  font-size: 14px;
  background-color: transparent;
  border-color: #1f81ec;
  border: 1px solid #1f81ec;
}
.button.outlined.info:hover:not(.disabled) {
  background-color: rgba(31, 129, 236, 0.08);
  color: #1f81ec;
  border: 1px solid #1f81ec;
}
.button.outlined.default {
  background: transparent;
  border: 1px solid #b6b7ba;
  border-radius: 8px;
  color: #14181f;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  padding: 10px 14px;
  height: 40px;
  min-width: 158px;
}
.button.outlined.default:hover:not(.disabled) {
  background: rgba(20, 24, 31, 0.04);
  border: 1px solid #8a8b8e;
  color: #14181f;
}
.button.outlined.info {
  background: #e9f2fd;
  border: 1px solid #1f81ec;
  border-radius: 8px;
  color: #1f81ec;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  padding: 10px 14px;
  height: 40px;
  min-width: 158px;
}
.button.outlined.info:hover:not(.disabled) {
  background: #d4e5fa;
  border: 1px solid #1a6fc9;
  color: #1a6fc9;
}
.button.outlined.success {
  color: var(--color-success, #4caf50);
  font-size: 14px;
  background-color: transparent;
  border-color: var(--color-success, #4caf50);
  border: 1px solid var(--color-success, #4caf50);
}
.button.outlined.success:hover:not(.disabled) {
  background-color: rgba(var(--color-success, #4caf50), 0.08);
  color: var(--color-success, #4caf50);
  border: 1px solid var(--color-success, #4caf50);
}
.button.outlined.warning {
  color: var(--color-warning, #ff9800);
  font-size: 14px;
  background-color: transparent;
  border-color: var(--color-warning, #ff9800);
  border: 1px solid var(--color-warning, #ff9800);
}
.button.outlined.warning:hover:not(.disabled) {
  background-color: rgba(var(--color-warning, #ff9800), 0.08);
  color: var(--color-warning, #ff9800);
  border: 1px solid var(--color-warning, #ff9800);
}
.button.outlined.error {
  color: var(--color-error-dark, #f44336);
  font-size: 14px;
  background-color: transparent;
  border-color: var(--color-error-dark, #f44336);
  border: 1px solid var(--color-error-dark, #f44336);
}
.button.outlined.error:hover:not(.disabled) {
  background-color: rgba(var(--color-error-dark, #f44336), 0.08);
  color: var(--color-error-dark, #f44336);
  border: 1px solid var(--color-error-dark, #f44336);
}
.button.text {
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  background-color: transparent;
}
.button.text:hover:not(.disabled) {
  background-color: rgba(var(--color-neutral-dark, #212b36), 0.1);
  color: var(--color-neutral-dark, #212b36);
}
.button.text.primary {
  color: var(--color-primary, #00A9CE);
  font-size: 14px;
  background-color: transparent;
}
.button.text.primary:hover:not(.disabled) {
  background-color: rgba(var(--color-primary, #00A9CE), 0.1);
  color: var(--color-primary, #00A9CE);
}
.button.text.secondary {
  color: #707a8f;
  font-size: 14px;
  background-color: transparent;
  background: transparent;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  color: #707a8f;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.8px;
  padding: 10px 24px;
}
.button.text.secondary:hover:not(.disabled) {
  background-color: rgba(112, 122, 143, 0.08);
  border: 1px solid #d0d0d1;
  color: #5a6375;
}
.button.text.info {
  color: var(--color-info, #00b8d9);
  font-size: 14px;
  background-color: transparent;
}
.button.text.info:hover:not(.disabled) {
  background-color: rgba(var(--color-info, #00b8d9), 0.1);
  color: var(--color-info, #00b8d9);
}
.button.text.success {
  color: var(--color-success, #4caf50);
  font-size: 14px;
  background-color: transparent;
}
.button.text.success:hover:not(.disabled) {
  background-color: rgba(var(--color-success, #4caf50), 0.1);
  color: var(--color-success, #4caf50);
}
.button.text.warning {
  color: var(--color-warning, #ff9800);
  font-size: 14px;
  background-color: transparent;
}
.button.text.warning:hover:not(.disabled) {
  background-color: rgba(var(--color-warning, #ff9800), 0.1);
  color: var(--color-warning, #ff9800);
}
.button.text.error {
  color: var(--color-error-dark, #f44336);
  font-size: 14px;
  background-color: transparent;
}
.button.text.error:hover:not(.disabled) {
  background-color: rgba(var(--color-error-dark, #f44336), 0.1);
  color: var(--color-error-dark, #f44336);
}
.button.text.primary {
  background-color: var(--color-primary-contained, #00A9CE);
  color: #fff;
  border-color: transparent;
}
.button.text.primary .button__icon svg path {
  fill: #fff;
  stroke: #fff;
}
.button.text.primary:hover:not(.disabled) {
  background-color: #FFC72C;
  color: #14181F;
}
.button.text.primary:hover:not(.disabled) .button__icon svg path {
  fill: #14181F;
  stroke: #14181F;
}
.button.soft {
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-neutral-dark, #212b36);
  background-color: var(--color-neutral-lighter, #f5f5f5);
  border-radius: 8px;
}
.button.soft:hover:not(.disabled) {
  background-color: #e8e8e8;
  color: var(--color-neutral-dark, #212b36);
}
.button.soft.primary {
  color: var(--color-primary, #00A9CE);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-primary, #00A9CE);
  background-color: rgba(0, 169, 206, 0.08);
  border-radius: 8px;
}
.button.soft.primary:hover:not(.disabled) {
  background-color: #FFF4CC;
  color: #B76E00;
}
.button.soft.info {
  color: var(--color-info, #00b8d9);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-info, #00b8d9);
  background-color: var(--color-info-lighter, #e0f7fa);
  border-radius: 8px;
}
.button.soft.info:hover:not(.disabled) {
  background-color: #e8e8e8;
  color: var(--color-info, #00b8d9);
}
.button.soft.success {
  color: var(--color-success, #4caf50);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-success, #4caf50);
  background-color: var(--color-success-lighter, #e8f5e9);
  border-radius: 8px;
}
.button.soft.success:hover:not(.disabled) {
  background-color: #e8e8e8;
  color: var(--color-success, #4caf50);
}
.button.soft.warning {
  color: var(--color-warning, #ff9800);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-warning, #ff9800);
  background-color: var(--color-warning-lighter, #fff3e0);
  border-radius: 8px;
}
.button.soft.warning:hover:not(.disabled) {
  background-color: #e8e8e8;
  color: var(--color-warning, #ff9800);
}
.button.soft.error {
  color: var(--color-error, #fb3748);
  font-size: 14px;
  background-color: transparent;
  font-size: 16px;
  color: var(--color-error, #fb3748);
  background-color: var(--color-error-lighter, #ffebee);
  border-radius: 8px;
}
.button.soft.error:hover:not(.disabled) {
  background-color: #e8e8e8;
  color: var(--color-error, #fb3748);
}
.button:focus-visible {
  outline: none;
}
.button.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.button.large {
  padding: 18px 22px;
  min-height: 44px;
  font-size: 16px !important;
}
.button.medium {
  padding: 10px 24px;
  font-size: 16px;
}
.button.small {
  padding: 8px 8px;
  font-size: 12px;
}

.button-wrapper {
  position: relative;
  display: inline-block;
}
.button-wrapper.has-dropdown .button.with-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open {
  background: transparent;
  border-color: #dadfe3;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open .button_text:hover {
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open .button__icon--start svg path {
  fill: var(--color-primary, #00A9CE);
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open:hover {
  background: transparent;
  border-color: #dadfe3;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.outlined.primary {
  background: transparent;
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.outlined.primary:hover {
  background: transparent;
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.contained.primary {
  background: transparent;
  border: 1px solid #dadfe3;
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.contained.primary:hover {
  background: transparent;
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.soft.primary {
  background: transparent;
  border: 1px solid #dadfe3;
  color: #0d1f2d;
}
.button-wrapper.has-dropdown .button.with-dropdown.dropdown-open.soft.primary:hover {
  background: transparent;
  color: #0d1f2d;
}

.button-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  border: 1px solid #dadfe3;
  margin: 0;
  padding: 8px;
  z-index: 1000;
  min-width: 150px;
}
.button-dropdown.top {
  top: auto;
  bottom: calc(100% + 8px);
}
.button-dropdown__item {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 250ms;
  font-size: 16px;
  color: #505862;
  font-weight: 500;
  border-radius: 12px;
}
.button-dropdown__item:first-child {
  color: var(--color-primary, #00A9CE);
}
.button-dropdown__item:hover {
  background-color: #f6f7f8;
}
.button-dropdown__item:active {
  background-color: #eaedf0;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.input-container {
  position: relative;
  display: flex;
  flex-direction: column;
}
.input-container.standard .input {
  border: 1px solid var(--color-neutral-darker);
  color: var(--color-neutral-dark);
  border-radius: 8px;
  transition: border-color 250ms;
  padding: 8px 12px;
  border: 1px solid #e8e8e9;
  min-height: 40px;
}
.input-container.standard.has-start-icon .input {
  padding-left: 42px;
}
.input-container.standard.hovered .input {
  border-color: var(--color-primary, #00A9CE);
  cursor: pointer;
}
.input-container.standard.focused .input {
  border-color: var(--color-primary, #00A9CE);
}
.input-container.standard.error .input {
  border-color: var(--color-error, #ff5630);
  background-color: #ffeff0;
}
.input-container.standard.disabled .input {
  background-color: var(--color-neutral-darker, #f5f5f5);
  border-color: var(--color-neutral-darker, #ddd);
  color: #8b98a6;
  cursor: not-allowed;
}
.input-container.standard.read-only .input {
  background-color: #f6f7f8;
  color: #505862;
  cursor: default;
}
.input-container.standard.read-only.hovered .input {
  border-color: #dadfe3;
}
.input-container.standard.read-only.focused .input {
  border-color: #dadfe3;
}
.input-container.outlined .input {
  border: 1px solid var(--color-neutral-dark);
  border-radius: 6px;
  transition: border-color 250ms;
  padding: 10px 16px;
  min-height: 40px;
}
.input-container.outlined.has-start-icon .input {
  padding-left: 42px;
}
.input-container.outlined.hovered .input {
  box-shadow: inset 0 0 0 1px var(--color-light);
}
.input-container.outlined.focused .input {
  box-shadow: inset 0 0 0 2px var(--color-primary, #00A9CE);
}
.input-container.outlined.error .input {
  box-shadow: inset 0 0 0 2px var(--color-error, #ff5630);
}
.input-container.outlined.disabled .input {
  background-color: var(--color-neutral-lighter, #f5f5f5);
  box-shadow: inset 0 0 0 1px var(--color-neutral, #ddd);
  cursor: not-allowed;
}
.input-container.outlined.read-only .input {
  background-color: #f6f7f8;
  border: 1px solid var(--color-neutral-darker);
  color: #505862;
  cursor: default;
}
.input-container.outlined.read-only.hovered .input {
  border: 1px solid var(--color-neutral-darker);
}
.input-container.outlined.read-only.focused .input {
  border: 1px solid var(--color-neutral-darker);
}
.input-container.underline .input {
  border: 1px solid var(--color-neutral-dark);
  border-radius: 6px;
  padding: 10px 16px;
  min-height: 40px;
  border: none;
  border-bottom: 1px solid var(--color-neutral, #ddd);
  transition: border-color 250ms;
}
.input-container.underline.has-start-icon .input {
  padding-left: 42px;
}
.input-container.underline.hovered .input {
  border-bottom-color: var(--color-neutral-dark, #c1c1c1);
}
.input-container.underline.focused .input {
  border-bottom-color: var(--color-primary, #00A9CE);
}
.input-container.underline.error .input {
  border-bottom-color: var(--color-error, #ff5630);
}
.input-container.underline.disabled .input {
  background-color: var(--color-neutral-lighter, #f5f5f5);
  border-bottom-color: var(--color-neutral, #ddd);
  cursor: not-allowed;
}
.input-container.underline.read-only .input {
  background-color: #f6f7f8;
  border-bottom-color: var(--color-neutral, #ddd);
  color: #505862;
  cursor: default;
}
.input-container.underline.read-only.hovered .input {
  border-bottom-color: var(--color-neutral, #ddd);
}
.input-container.underline.read-only.focused .input {
  border-bottom-color: var(--color-neutral, #ddd);
}
.input-container .input-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  align-items: center;
  min-width: 250px;
}
.input-container .input-wrapper .start-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  color: var(--color-neutral-dark, #72808f);
  pointer-events: none;
  transition: color 250ms;
}
.input-container .input-wrapper .copy-button {
  border-top-right-radius: 89px;
  border-bottom-right-radius: 89px;
  border: none;
  border-left: none;
  padding: 10px 16px;
  background-color: var(--color-primary, #00A9CE);
  color: white;
  cursor: pointer;
}
.input-container .input-wrapper .copy-button:hover {
  background-color: var(--color-primary, #00A9CE);
}
.input-container .input-wrapper .eye-button {
  position: absolute;
  right: 3%;
  top: 3%;
  bottom: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.input-container.focused .start-icon {
  color: var(--color-primary, #00A9CE);
}
.input-container.error .start-icon {
  color: var(--color-error, #ff5630);
}
.input-container.disabled .start-icon {
  color: var(--color-neutral-dark, #bdbdbd);
}
.input-container.read-only .start-icon {
  color: var(--color-neutral-dark, #72808f);
}
.input-container.read-only.focused .start-icon {
  color: var(--color-neutral-dark, #72808f);
}
.input-container .input-label {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #707a8f;
  line-height: 20px;
  letter-spacing: 0.08px;
  transition: color 250ms;
  font-weight: 500;
}
.input-container .input-label.focused {
  color: var(--color-primary, #00A9CE);
}
.input-container .input-label.error {
  color: var(--color-error, #ff5630);
}
.input-container .input-label.required::after {
  content: " *";
  color: #00A9CE;
}
.input-container .input-label.disabled {
  color: var(--color-neutral-dark, #bdbdbd);
}
.input-container .input-label.read-only {
  color: var(--color-neutral-dark);
}
.input-container .input-label.read-only.focused {
  color: var(--color-neutral-dark);
}
.input-container .input {
  width: 100%;
  font-size: 16px;
  transition: border-color 250ms ease;
  outline: none;
}
.input-container .input:focus {
  caret-color: var(--color-primary, #00A9CE);
}
.input-container .input:disabled {
  cursor: not-allowed;
}
.input-container .input-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-error, #ff5630);
}._login_4s509_1 {
  flex: 1;
  display: flex;
  min-height: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #f5f5f7;
  background-image: linear-gradient(rgba(245, 245, 247, 0.92), rgba(245, 245, 247, 0.92));
  background-size: cover;
  background-position: center;
}
._login__title_4s509_13 {
  font-size: 24px;
  margin-bottom: 1rem;
  color: #0d1f2d;
  font-weight: bold;
}
._login__description_4s509_19 {
  font-size: 14px;
  color: #606b77;
  margin-bottom: 2rem;
  font-weight: regular;
}
._login__logo_4s509_25 {
  position: absolute;
  left: 50%;
  top: 0;
  background-color: #fff;
  padding: 1.2rem;
  border: none;
  border-radius: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
._login__logo_4s509_25 img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
._login__form_4s509_46 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  max-width: 100%;
  box-sizing: border-box;
}
._login__wrapper_4s509_56 {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 3rem 2rem 2rem 2rem;
  border-radius: 40px;
  min-width: 460px;
  max-width: 460px;
  position: relative;
}
._login_4s509_1 ._staff-login_4s509_66,
._login_4s509_1 ._user-login_4s509_67 {
  margin-top: 2rem;
}
._login_4s509_1 ._user-login_4s509_67 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._login_4s509_1 ._staff-login_4s509_66 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._login_4s509_1 ._user-selection_4s509_80 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._login_4s509_1 ._login-tabs_4s509_85 {
  width: 100%;
}
._login_4s509_1 ._login-tabs_4s509_85 .tab-group {
  width: 100%;
}
._login_4s509_1 ._login-tabs_4s509_85 ._staff-login_4s509_66 {
  background-color: rgba(0, 169, 206, 0.0784313725);
  border: 1px solid rgba(0, 169, 206, 0.0784313725);
  padding: 12px;
  border-radius: 8px;
  color: var(--primary-color, #00A9CE);
  font-size: 14px;
}
._login_4s509_1 ._login-tabs_4s509_85 ._staff-login_4s509_66:hover {
  border: 1px solid #00A9CE;
  cursor: pointer;
}
._login_4s509_1 ._login-tabs_4s509_85 ._admin-login_4s509_103 {
  background-color: #e6f6ff;
  border: 1px solid #e6f6ff;
  padding: 12px;
  border-radius: 8px;
  color: #00b8d9;
  font-size: 14px;
}
._login_4s509_1 ._login-tabs_4s509_85 ._admin-login_4s509_103:hover {
  border: 1px solid #00b8d9;
  cursor: pointer;
}
._login__title_4s509_13 {
  font-size: 24px;
  margin-bottom: 1rem;
  color: #333;
}
._login__input_4s509_120 {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}
._login__button_4s509_128 {
  width: 100%;
  padding: 0.75rem;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
._login__button_4s509_128:hover {
  background-color: #555;
}
._login__image_4s509_142 {
  position: relative;
  height: 100%;
  overflow: hidden;
}
._login__image_4s509_142 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1024px) {
  ._login_4s509_1 {
    grid-template-columns: 5fr 7fr;
  }
}
@media screen and (max-width: 768px) {
  ._login_4s509_1 {
    grid-template-columns: 1fr;
  }
  ._login__image_4s509_142 {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  ._login__form_4s509_46 {
    padding: 2rem 1rem;
  }
  ._login__title_4s509_13 {
    font-size: 20px;
  }
  ._login__input_4s509_120 {
    padding: 0.5rem;
    font-size: 14px;
  }
  ._login__button_4s509_128 {
    padding: 0.5rem;
    font-size: 14px;
  }
}

._logo_4s509_182 {
  margin-bottom: 24px;
  width: 150px;
}

._title_4s509_187 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #333;
}

._companyList_4s509_194 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._companyItem_4s509_200 {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

._companyItem_4s509_200:hover {
  border-color: #00c853;
}

._selected_4s509_215 {
  border-color: #00c853;
  background-color: #e8f5e9;
}

._otp-input-container_4s509_220 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
._otp-input-container_4s509_220 label {
  font-size: 15px;
  color: #212b36;
  font-weight: 500;
  margin-bottom: 16px;
  align-self: flex-start;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input {
  width: 50px;
  height: 56px;
  border: 1.5px solid #dfe3e8;
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #919eab;
  background: #ffffff;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex: 1;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input::placeholder {
  color: #919eab;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input:focus {
  border-color: var(--primary-color, #00A9CE);
  outline: none;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input:hover:not(:focus) {
  border-color: #919eab;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input {
  /*       &:not(:placeholder-shown),
  &[value]:not([value=""]) {
    border-color: var(--primary-color, #00A9CE);
    color: var(--primary-color, #00A9CE);
  }

  &.otp-input-filled {
    border-color: var(--primary-color, #00A9CE);
    color: var(--primary-color, #00A9CE);
  } */
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input:disabled {
  background-color: #f4f6f8;
  border-color: #dfe3e8;
  color: #919eab;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input::-webkit-outer-spin-button, ._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
@media screen and (max-width: 480px) {
  ._otp-input-container_4s509_220 ._otp-inputs_4s509_234 {
    gap: 8px;
  }
  ._otp-input-container_4s509_220 ._otp-inputs_4s509_234 input {
    width: 45px;
    height: 50px;
    font-size: 20px;
  }
}

._verify-button_4s509_300 {
  margin-top: 24px;
  width: 100%;
  height: 48px;
  background-color: var(--primary-color, #00A9CE);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._verify-button_4s509_300:hover {
  background-color: rgb(0, 148.0800970874, 180.5);
}
._verify-button_4s509_300:disabled {
  background-color: #dfe3e8;
  cursor: not-allowed;
}

._timer_4s509_321 {
  margin-top: 16px;
  color: #637381;
  font-size: 14px;
  text-align: center;
}
._timer_4s509_321 span {
  color: var(--primary-color, #00A9CE);
  font-weight: 600;
}

._resend-link_4s509_332 {
  margin-top: 16px;
  color: var(--primary-color, #00A9CE);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
._resend-link_4s509_332:hover {
  text-decoration: underline;
}
._resend-link_4s509_332:disabled {
  color: #919eab;
  cursor: not-allowed;
  text-decoration: none;
}

._otp-verification_4s509_349 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

._otp-header-back_4s509_358 {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 1rem;
}

._back-button_4s509_365 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
._back-button_4s509_365:hover {
  background: #f5f5f5;
}

._otp-form_4s509_381 {
  width: 100%;
}

._otp-header_4s509_358 {
  margin-bottom: 1rem;
  width: 100%;
  text-align: left;
}
._otp-header_4s509_358 h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}
._otp-header_4s509_358 p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
}

._otp-input_4s509_220 {
  width: 50px;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
._otp-input_4s509_220:focus {
  outline: none;
  border-color: #00A9CE;
  box-shadow: 0 0 0 2px rgba(0, 169, 206, 0.1);
}

._otp-footer_4s509_418 {
  margin-top: 1rem;
  width: 100%;
}
._otp-footer_4s509_418 ._timer_4s509_321 {
  color: #0d1f2d;
  font-size: 14px;
  text-align: left;
}
._otp-footer_4s509_418 ._resend-button_4s509_427 {
  background: none;
  border: none;
  color: #00A9CE;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}
._otp-footer_4s509_418 ._resend-button_4s509_427:hover {
  color: #e65a00;
}

._login-options_4s509_439 {
  display: flex;
  justify-content: end;
  align-items: center;
}
._login-options_4s509_439 ._remember-me_4s509_444 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
._login-options_4s509_439 ._remember-me_4s509_444 input[type=checkbox] {
  margin: 0;
}
._login-options_4s509_439 ._forgot-password-link_4s509_455 {
  background: none;
  border: none;
  color: var(--primary-color, #00A9CE);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
._login-options_4s509_439 ._forgot-password-link_4s509_455:hover {
  text-decoration: underline;
}

._forgot-password-header_4s509_467 {
  margin: 1rem 0 2rem 0;
}
._forgot-password-header_4s509_467 h2 {
  margin-bottom: 0.5rem;
  font-size: 24px;
  color: #0d1f2d;
}
._forgot-password-header_4s509_467 p {
  font-family: 15px;
  color: #606b77;
}

._create-new-password_4s509_480 ._create-new-password-header_4s509_480 {
  margin: 1.5rem 0;
}
._create-new-password_4s509_480 ._create-new-password-header_4s509_480 h2 {
  margin-bottom: 0.5rem;
  font-size: 24px;
  color: #0d1f2d;
}
._create-new-password_4s509_480 ._create-new-password-header_4s509_480 p {
  font-size: 15px;
  color: #606b77;
}
._create-new-password_4s509_480 ._create-new-password-form_4s509_492 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
._create-new-password_4s509_480 ._create-new-password-form-field_4s509_497 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._create-new-password_4s509_480 ._create-new-password-form-field-label_4s509_502 {
  font-size: 15px;
  color: #606b77;
}
._create-new-password_4s509_480 ._create-new-password-form-field-input_4s509_506 {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}
._create-new-password_4s509_480 ._create-new-password-form-field-input-error_4s509_512 {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}
._create-new-password_4s509_480 ._create-new-password-form-field-input-error-message_4s509_517 {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}
._create-new-password_4s509_480 ._create-new-password-form-field-input-error-message-icon_4s509_522 {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

._container_4s509_528 {
  width: 100%;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.tab-group {
  display: flex;
  flex-direction: column;
}
.tab-group.horizontal .tab-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #e8e8e9;
}
.tab-group.vertical {
  flex-direction: row;
}
.tab-group.vertical .tab-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tab-group .tab {
  width: 138px;
  height: 48px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease;
  color: #667085;
  position: relative;
  z-index: 2;
  text-align: center;
}
.tab-group .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: transparent;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.25s ease;
}
.tab-group .tab:hover:not(.active) {
  color: #475467;
}
.tab-group .tab.active {
  font-weight: 700;
  color: var(--color-primary, #00A9CE);
}
.tab-group .tab.active::after {
  background-color: var(--color-primary, #00A9CE);
}
.tab-group.full-width .tab {
  flex: 1;
}
.tab-group .sliding-underline {
  position: absolute;
  bottom: 0;
  height: 4px;
  background-color: var(--color-primary, #00A9CE);
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
.tab-group .tab-content {
  margin-top: 16px;
  padding: 16px;
}@font-face {
  font-family: "Gilroy";
  font-weight: 700;
  font-style: normal;
  src: url("/fonts/Gilroy-Bold.ttf") format("truetype");
  font-display: swap;
}
._error-page_1nekf_8 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  padding: 2rem;
  overflow: hidden;
}

._error-page-background_1nekf_19 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

._error-page-light_1nekf_28 {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(0, 169, 206, 0.15) 0%, rgba(0, 169, 206, 0.08) 30%, rgba(0, 169, 206, 0.02) 60%, transparent 80%);
  pointer-events: none;
  animation: _pulse_1nekf_1 4s ease-in-out infinite;
}

._error-page-grid_1nekf_40 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 169, 206, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 169, 206, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

._error-page-content_1nekf_51 {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

._error-page-code-container_1nekf_63 {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 32px;
  padding: 60px 80px 50px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(0, 169, 206, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: _fadeInScale_1nekf_1 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
._error-page-code-container_1nekf_63::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 169, 206, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(0, 169, 206, 0.2) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 169, 206, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
._error-page-code-container_1nekf_63::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(0, 169, 206, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

._error-page-title_1nekf_102 {
  font-family: "Gilroy", sans-serif;
  font-size: 10rem;
  font-weight: 700;
  background: linear-gradient(135deg, #66D1E3 0%, #00A9CE 40%, #007A95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  line-height: 0.9;
  letter-spacing: 0.08em;
  display: inline-block;
  text-shadow: 0 0 80px rgba(0, 169, 206, 0.5);
  filter: drop-shadow(0 0 30px rgba(0, 169, 206, 0.3));
}

._error-page-subtitle_1nekf_118 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  animation: _fadeInUp_1nekf_1 0.6s ease-out 0.2s backwards;
  letter-spacing: 0.02em;
}

._error-page-description_1nekf_127 {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.7;
  max-width: 480px;
  animation: _fadeInUp_1nekf_1 0.6s ease-out 0.3s backwards;
}

._error-page-actions_1nekf_136 {
  display: flex;
  gap: 1rem;
  justify-content: center;
  animation: _fadeInUp_1nekf_1 0.6s ease-out 0.4s backwards;
  margin-top: 1rem;
}
._error-page-actions_1nekf_136 button {
  background: linear-gradient(135deg, #66D1E3 0%, #00A9CE 100%);
  border: none;
  color: #ffffff;
  padding: 0.875rem 2.5rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0, 169, 206, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
._error-page-actions_1nekf_136 button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
._error-page-actions_1nekf_136 button:hover {
  background: linear-gradient(135deg, #00A9CE 0%, #007A95 100%);
  box-shadow: 0 12px 32px rgba(0, 169, 206, 0.5), 0 6px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
._error-page-actions_1nekf_136 button:hover::before {
  left: 100%;
}
._error-page-actions_1nekf_136 button:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(0, 169, 206, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

._error-page-particles_1nekf_180 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes _fadeInUp_1nekf_1 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeInScale_1nekf_1 {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _pulse_1nekf_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes _float_1nekf_1 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}
@media (max-width: 640px) {
  ._error-page_1nekf_8 {
    padding: 1.5rem;
  }
  ._error-page-code-container_1nekf_63 {
    padding: 40px 50px 35px;
    border-radius: 24px;
  }
  ._error-page-title_1nekf_102 {
    font-size: 5rem !important;
  }
  ._error-page-subtitle_1nekf_118 {
    font-size: 1.35rem;
  }
  ._error-page-description_1nekf_127 {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }
  ._error-page-actions_1nekf_136 {
    width: 100%;
    padding: 0 0.5rem;
  }
  ._error-page-actions_1nekf_136 button {
    width: 100%;
    padding: 1rem 2rem;
  }
}
@media (max-width: 400px) {
  ._error-page-title_1nekf_102 {
    font-size: 4rem !important;
  }
  ._error-page-code-container_1nekf_63 {
    padding: 32px 40px 28px;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

._light_1h8ir_70 {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

._dark_1h8ir_105 {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

._dashboardLayout_1h8ir_140 {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #f6f7f8;
  padding: 1rem 1rem 1rem 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
._dashboardLayout_1h8ir_140._sidebarOpen_1h8ir_150 ._dashboardLayoutMainContent_1h8ir_150 {
  filter: brightness(0.7);
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 {
  width: 80px;
  padding: 0 0.5rem;
  scrollbar-width: 1px !important;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarSkeletonItem_1h8ir_158 {
  justify-content: center;
  padding: 12px 8px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarSkeletonItem_1h8ir_158 ._dashboardLayoutSidebarSkeletonItemText_1h8ir_162 {
  display: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarSkeletonItem_1h8ir_158 ._dashboardLayoutSidebarSkeletonItemIcon_1h8ir_165 {
  margin: 0;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 {
  background: transparent;
  border: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 {
  border: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  border-radius: 12px;
  color: #fff;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItem_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background: #fff;
  border: 1px solid #00A9CE;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItem_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg path {
  stroke: #00A9CE;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 {
  padding: 0 !important;
  justify-content: center;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItemLinkContent_1h8ir_175 {
  justify-content: center;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItemLinkContent_1h8ir_175 span {
  display: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  margin: 0;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._submenuArrow_1h8ir_201 {
  display: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px 12px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 ._dashboardLayoutSidebarLogoContent_1h8ir_210 {
  gap: 4px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 ._dashboardLayoutSidebarLogoContent_1h8ir_210 img {
  width: 48px;
  height: 48px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 img {
  width: 42px;
  height: 42px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 img:hover {
  transform: scale(1.1);
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarLogo_1h8ir_204 ._collapseButton_1h8ir_226 {
  width: 32px;
  height: 32px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooter_1h8ir_230 {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-top: 1px solid #e8e8e9;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarNavSubmenu_1h8ir_240._open_1h8ir_181 {
  left: 52px;
  z-index: 9999;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemButton_1h8ir_244 {
  width: 32px;
  height: 32px;
  padding: 6px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemButton_1h8ir_244:last-child {
  padding: 8px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemButton_1h8ir_244 ._dashboardLayoutSidebarFooterItemButtonIcon_1h8ir_252 svg {
  width: 18px;
  height: 18px;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemButton_1h8ir_244 ._dashboardLayoutSidebarFooterItemButtonIcon_1h8ir_252 span {
  display: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemButton_1h8ir_244 ._dashboardLayoutSidebarFooterItemButtonArrow_1h8ir_259 {
  display: none;
}
._dashboardLayout_1h8ir_140._sidebarCollapsed_1h8ir_153 ._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarFooterItem_1h8ir_244 ._dashboardLayoutSidebarFooterItemTitle_1h8ir_262 {
  display: none;
}

._dashboardLayoutBackdrop_1h8ir_266 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  transition: opacity 0.3s ease;
}

._dashboardLayoutSidebar_1h8ir_153 {
  width: 300px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 20;
  height: calc(100vh - 2rem);
  overflow: hidden;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
._dashboardLayoutSidebar_1h8ir_153._open_1h8ir_181 {
  width: 250px;
  left: 0;
}
._dashboardLayoutSidebar_1h8ir_153 ._dashboardLayoutSidebarContent_1h8ir_294 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
._dashboardLayoutSidebar_1h8ir_153._collapsed_1h8ir_300 ._dashboardLayoutSidebarNavItemLink_1h8ir_172._open_1h8ir_181 {
  border: 1px solid #f6f7f8;
}
._dashboardLayoutSidebar_1h8ir_153._collapsed_1h8ir_300 ._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 {
  border: 1px solid #f6f7f8;
}

._dashboardLayoutSidebarLogo_1h8ir_204 {
  font-weight: bold;
  text-align: center;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px 12px;
  transition: all 0.3s ease;
}
._dashboardLayoutSidebarLogo_1h8ir_204 img {
  cursor: pointer;
  width: 68px;
  height: 68px;
  transition: all 0.3s ease;
}
._dashboardLayoutSidebarLogo_1h8ir_204 ._dashboardLayoutSidebarLogoContent_1h8ir_210 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._dashboardLayoutSidebarLogo_1h8ir_204 ._dashboardLayoutSidebarLogoContent_1h8ir_210 ._dashboardLayoutSidebarLogoText_1h8ir_331 {
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #707a8f;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

._collapseButton_1h8ir_226 {
  background: #e8e8e9;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: #e8e8e9;
  width: 32px;
  height: 32px;
  border: 1px solid #e8e8e9;
}
._collapseButton_1h8ir_226:hover {
  background-color: rgba(99, 115, 129, 0.08);
  color: #212b36;
}
._collapseButton_1h8ir_226 svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
._collapseButton_1h8ir_226._collapsed_1h8ir_300 svg {
  transform: rotate(180deg);
}

._dashboardLayoutSidebarFooter_1h8ir_230 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterButton_1h8ir_374 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #505766;
  cursor: pointer;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterButton_1h8ir_374 svg {
  flex-shrink: 0;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterButton_1h8ir_374 span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterIconButton_1h8ir_395 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #637381;
  width: 40px;
  height: 40px;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterIconButton_1h8ir_395 svg {
  width: 24px;
  height: 24px;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileIconButton_1h8ir_411 {
  background: #f1f2f4;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileIconButton_1h8ir_411:hover {
  background: #e8e8e9;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileContainer_1h8ir_420 {
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  flex-direction: column;
  padding: 16px 1rem;
  border-top: 1px solid #e8e8e9;
  flex-shrink: 0;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfile_1h8ir_411 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #00A9CE;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfile_1h8ir_411:hover {
  background: #007A95;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileAvatar_1h8ir_445 {
  width: 40px;
  height: 40px;
  border-radius: 56px;
  background: #f1f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  overflow: hidden;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileAvatarImage_1h8ir_457 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileInfo_1h8ir_463 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileName_1h8ir_471 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileEmail_1h8ir_481 {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.5%;
  color: #ffeff0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileClose_1h8ir_491 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
._dashboardLayoutSidebarFooter_1h8ir_230 ._sidebarFooterProfileClose_1h8ir_491:hover {
  opacity: 0.8;
}

._profilePopoverContent_1h8ir_507 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

._profilePopoverItem_1h8ir_514 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: background 0.2s ease;
}
._profilePopoverItem_1h8ir_514:hover {
  background: #f6f7f8;
}
._profilePopoverItem_1h8ir_514 svg {
  flex-shrink: 0;
}

._dashboardLayoutSidebarSkeleton_1h8ir_158 {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._dashboardLayoutSidebarSkeletonItem_1h8ir_158 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
}
._dashboardLayoutSidebarSkeletonItem_1h8ir_158:nth-child(2n) ._dashboardLayoutSidebarSkeletonItemText_1h8ir_162 {
  max-width: 100px;
}
._dashboardLayoutSidebarSkeletonItem_1h8ir_158:nth-child(3n) ._dashboardLayoutSidebarSkeletonItemText_1h8ir_162 {
  max-width: 140px;
}

._dashboardLayoutSidebarSkeletonItemIcon_1h8ir_165 {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background-color: #e0e0e0;
  flex-shrink: 0;
  animation: _skeleton-pulse_1h8ir_1 1.2s ease-in-out infinite alternate;
}

._dashboardLayoutSidebarSkeletonItemText_1h8ir_162 {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  flex: 1;
  max-width: 120px;
  animation: _skeleton-pulse_1h8ir_1 1.2s ease-in-out infinite alternate;
}

._dashboardLayoutSidebarNav_1h8ir_168 {
  padding-top: 1rem;
}
._dashboardLayoutSidebarNav_1h8ir_168 ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

._dashboardLayoutSidebarNavItem_1h8ir_168 {
  cursor: pointer;
  position: relative;
  width: 100%;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  border-radius: 12px;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 {
  border: none;
  color: #fff;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._submenuArrow_1h8ir_201 path {
  stroke: #fff;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background-color: #E6F7FB;
  border: none;
  color: #00A9CE;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 path {
  stroke: #00A9CE;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168._open_1h8ir_181 {
  background: #fff;
  border-radius: 12px;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 {
  color: #505862;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._submenuArrow_1h8ir_201 path {
  stroke: #72808f;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE) !important;
  border-radius: 12px;
  border: none !important;
  color: #fff;
}
._dashboardLayoutSidebarNavItem_1h8ir_168._active_1h8ir_168._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLink_1h8ir_172 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 path {
  stroke: #fff !important;
}
._dashboardLayoutSidebarNavItem_1h8ir_168:not(._active_1h8ir_168, ._open_1h8ir_181):hover {
  background: #fff;
  border-radius: 16px;
}
._dashboardLayoutSidebarNavItem_1h8ir_168:not(._active_1h8ir_168, ._open_1h8ir_181):hover ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  border: 1px solid #00A9CE;
  color: #00A9CE;
}
._dashboardLayoutSidebarNavItem_1h8ir_168:not(._active_1h8ir_168, ._open_1h8ir_181):hover svg path {
  stroke: #00A9CE !important;
}

._dashboardLayoutSidebarNavItemLink_1h8ir_172 {
  display: flex;
  align-items: center;
  padding: 8px;
  font-weight: 600;
  border: 1px solid #f6f7f8;
  justify-content: space-between;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._active_1h8ir_168 {
  background: #fff;
  border: 1px solid #00A9CE;
  border-radius: 12px;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: none;
  color: #fff;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._active_1h8ir_168 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg path {
  stroke: #fff;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._open_1h8ir_181 {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #00A9CE;
  color: #505862;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._open_1h8ir_181 ._submenuArrow_1h8ir_201 path {
  stroke: #72808f;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border-radius: 12px;
  border: none;
  color: #fff;
}
._dashboardLayoutSidebarNavItemLink_1h8ir_172._open_1h8ir_181 ._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 path {
  stroke: #fff;
}

._dashboardLayoutSidebarNavItemLinkContent_1h8ir_175 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
}

._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 {
  border: 1px solid #dadfe3;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #72808f;
}

._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg {
  width: 22px;
  height: 22px;
  color: currentColor;
}
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg path,
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg circle,
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg rect,
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg line,
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg polyline,
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg polygon,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg path,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg circle,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg rect,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg line,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg polyline,
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg polygon {
  stroke: currentColor !important;
  stroke-width: 1.35px;
}
._dashboardLayoutSidebarNavItemLinkContentIcon_1h8ir_175 svg [fill]:not([fill=none]),
._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 svg [fill]:not([fill=none]) {
  fill: currentColor !important;
}

._submenuArrow_1h8ir_201 {
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}
._submenuArrow_1h8ir_201._active_1h8ir_168 {
  transform: rotate(0deg);
}

._dashboardLayoutSidebarNavSubmenu_1h8ir_240 {
  position: fixed;
  left: 290px;
  top: auto;
  min-width: 200px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
  transition: all 0.2s ease;
  z-index: 1100;
  font-size: 14px;
  border: 1px solid #dadfe3;
  padding: 8px;
}
._dashboardLayoutSidebarNavSubmenu_1h8ir_240._open_1h8ir_181 {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  display: block;
  visibility: visible;
}
._dashboardLayoutSidebarNavSubmenu_1h8ir_240 a:hover {
  color: #637381;
  text-decoration: none;
  cursor: pointer;
}

._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697 {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697:not(:last-child) {
  margin-bottom: 0.3rem;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697._active_1h8ir_168 {
  background: linear-gradient(to bottom, #00A9CE, #00A9CE);
  border: 1px solid #007A95;
  border-radius: 12px;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697._active_1h8ir_168 ._dashboardLayoutSidebarNavSubmenuItemLink_1h8ir_697 {
  border: none;
  color: #fff;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697._active_1h8ir_168 ._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 {
  background-color: #E6F7FB;
  border: none;
  color: #00A9CE;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697._active_1h8ir_168 ._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 path {
  stroke: #00A9CE;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697:not(._active_1h8ir_168):hover {
  background-color: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  border-radius: 12px;
  cursor: pointer;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697:not(._active_1h8ir_168):hover ._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 {
  color: #00A9CE;
}
._dashboardLayoutSidebarNavSubmenuItem_1h8ir_697:not(._active_1h8ir_168):hover svg path {
  stroke: #00A9CE;
}

._dashboardLayoutSidebarNavSubmenuItemLink_1h8ir_697 {
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  gap: 0.5rem;
}

._dashboardLayoutSidebarNavSubmenuItemLinkIcon_1h8ir_697 {
  border: 1px solid #dadfe3;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #72808f;
}

._dashboardLayoutSidebarFooterItem_1h8ir_244 {
  border-top: 1px solid #dadfe3;
  padding-top: 1rem;
}

._dashboardLayoutSidebarFooterItemTitle_1h8ir_262 {
  font-size: 13px;
  color: #505862;
}

._dashboardLayoutSidebarFooterItemButton_1h8ir_244 {
  background: white;
  border: 1px solid #dadfe3;
  border-radius: 56px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  margin-top: 0.7rem;
  text-decoration: none;
}
._dashboardLayoutSidebarFooterItemButton_1h8ir_244:hover {
  text-decoration: none;
  border: 1px solid #00A9CE;
}

._dashboardLayoutSidebarFooterItemButtonIcon_1h8ir_252 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._dashboardLayoutSidebarFooterItemButtonArrow_1h8ir_259 {
  background-color: #f6f7f8;
  border-radius: 50%;
  padding: 0.2rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._dashboardLayoutMain_1h8ir_150 {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 97vh;
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #dadfe3;
  overflow: hidden;
}

._dashboardLayoutMainContent_1h8ir_150 {
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

._tooltip_1h8ir_889 {
  position: fixed;
  left: 60px;
  background: rgba(33, 43, 54, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}
._tooltip_1h8ir_889:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid rgba(33, 43, 54, 0.9);
}

._dashboardLayoutSidebarNavItem_1h8ir_168:hover ._tooltip_1h8ir_889 {
  opacity: 1;
  visibility: visible;
}

._profilePopover_1h8ir_507 {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
  width: max-content;
}
._profilePopover_1h8ir_507 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
._profilePopover_1h8ir_507 li {
  padding: 8px;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  align-items: center;
}
._profilePopover_1h8ir_507 li:hover {
  background-color: #f0f0f0;
}
._profilePopover_1h8ir_507 li a {
  text-decoration: none;
  font-size: 14px;
  list-style-type: none;
}

._languagePopover_1h8ir_952 {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 4px;
  width: max-content;
}
._languagePopover_1h8ir_952 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
._languagePopover_1h8ir_952 li {
  padding: 8px;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
._languagePopover_1h8ir_952 li:hover {
  background-color: #f0f0f0;
}

._dashboardLayoutMainTopbarActionsProfile_1h8ir_979 {
  position: relative;
  display: inline-block;
}

._dashboardLayoutMainTopbarActionsLanguage_1h8ir_984 {
  position: relative;
  display: inline-block;
}

@keyframes _spin_1h8ir_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes _skeleton-pulse_1h8ir_1 {
  0% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #f0f0f0;
  }
}
@media (max-width: 768px) {
  ._dashboardLayoutSidebar_1h8ir_153 {
    position: absolute;
    left: -250px;
    top: 0;
    height: 100%;
    transition: all 0.3s ease;
    width: 250px;
    z-index: 20;
  }
  ._dashboardLayoutSidebar_1h8ir_153._open_1h8ir_181 {
    background-color: #fff;
    left: 0;
  }
}
._profileDrawerContent_1h8ir_1020 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._profileDrawerHeader_1h8ir_1026 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: linear-gradient(to bottom, #00A9CE 50%, #ffffff 50%);
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  min-height: 196px;
  position: relative;
}

._profileDrawerHeaderAvatarWrapper_1h8ir_1038 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

._profileDrawerHeaderAvatar_1h8ir_1038 {
  width: 84px;
  height: 84px;
  border-radius: 56px;
  background: #ffeff0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid #fff;
}
._profileDrawerHeaderAvatar_1h8ir_1038 svg {
  width: 84px;
  height: 84px;
}

._profileDrawerHeaderAvatarImage_1h8ir_1062 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

._profileDrawerHeaderEditButton_1h8ir_1069 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f1f2f4;
  border: 1.5px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  transition: all 0.2s ease;
}
._profileDrawerHeaderEditButton_1h8ir_1069:hover {
  background: #e8e8e9;
}
._profileDrawerHeaderEditButton_1h8ir_1069 svg {
  width: 14px;
  height: 14px;
}

._profileDrawerHeaderChip_1h8ir_1093 {
  position: absolute;
  top: calc(35% + 42px + 8px);
  left: 16px;
  z-index: 1;
}

._profileDrawerHeaderInfo_1h8ir_1100 {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

._profileDrawerHeaderName_1h8ir_1112 {
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
  margin: 0;
  text-align: center;
}

._profileDrawerHeaderTitle_1h8ir_1120 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #666f82;
  text-align: center;
}

._profileDrawerForm_1h8ir_1129 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._profileDrawerFooter_1h8ir_1138 {
  display: flex;
  justify-content: space-between;
}

._photoModalFooter_1h8ir_1143 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

._photoPreviewContainer_1h8ir_1149 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

._photoCropper_1h8ir_1158 {
  max-width: 100%;
  max-height: 300px;
}
._photoCropper_1h8ir_1158 .ReactCrop__crop-selection {
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
._photoCropper_1h8ir_1158 .ReactCrop__drag-handle {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #e8e8e9;
  border-radius: 50%;
}

._photoPreviewImage_1h8ir_1174 {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

._photoPreviewRemove_1h8ir_1180 {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}
._photoPreviewRemove_1h8ir_1180:hover {
  background: rgba(0, 0, 0, 0.8);
}

._photoModalHeader_1h8ir_1200 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e9;
}
._photoModalHeader_1h8ir_1200 h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
}

._photoModalHeaderIcon_1h8ir_1215 {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffeff0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._photoModalCloseButton_1h8ir_1225 {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s ease;
}
._photoModalCloseButton_1h8ir_1225:hover {
  background: #f6f7f8;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.popover-container {
  position: relative;
  display: inline-block;
}

.popover {
  position: absolute;
  padding: 8px;
  background-color: #fff;
  color: #14181F;
  border-radius: 12px;
  border: 1px solid #E8E8E9;
  white-space: nowrap;
  font-size: 14px;
  z-index: 10000;
  transition: opacity 250ms ease;
  box-shadow: 0px 4px 30px 0px rgba(77, 84, 100, 0.1);
  min-width: 160px;
}
.popover.popover-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
}
.popover.popover-right {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 4px;
}
.popover.popover-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
}
.popover.popover-left {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 4px;
}
.popover {
  /* Portal ile render edildiğinde (fixed positioning) mixin konumları devre dışı; top/left inline ile verilir. Bottom ile aynı kutu stili. */
}
.popover.popover--portal {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
  isolation: isolate;
  background-color: #fff;
  backface-visibility: hidden;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1001;
  max-width: 90vw;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
}
.drawer--right {
  right: 0;
  animation: slideInRight 0.3s ease-out;
}
.drawer--left {
  left: 0;
  animation: slideInLeft 0.3s ease-out;
}
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e9;
  flex-shrink: 0;
  background-color: #fff;
}
.drawer__header--dark {
  background-color: #00A9CE;
  border-bottom-color: transparent;
}
.drawer__header--dark .drawer__title {
  color: #fff;
}
.drawer__header--dark .drawer__close {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.drawer__header--dark .drawer__close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.drawer__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer__title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer__title-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  background-color: #f1f2f4;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #d3d6dc;
  color: #2f333c;
  line-height: 20px;
  letter-spacing: 0.08px;
}
.drawer__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer__header-action, .drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 10px;
}
.drawer__header-action:hover, .drawer__close:hover {
  background-color: #f6f7f8;
  color: #14181f;
}
.drawer__content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  gap: 24px;
}
.drawer__content::-webkit-scrollbar {
  width: 6px;
}
.drawer__content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.drawer__content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.drawer__content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.drawer__footer {
  padding: 16px 24px;
  border-top: 1px solid #e8e8e9;
  flex-shrink: 0;
  background-color: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 250ms ease;
  white-space: nowrap;
}
.chip.medium {
  padding: 2px 10px;
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08px;
}
.chip.small {
  padding: 2px 8px;
  height: 20px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08px;
}
.chip__content {
  display: flex;
  align-items: center;
}
.chip__avatar {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.chip.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chip.filled.success {
  background-color: #15ac77;
  color: #ffffff;
  border: none;
}
.chip.filled.success:hover:not(.disabled) {
  background-color: #129663;
}
.chip.filled.error {
  background-color: #fb3748;
  color: #ffffff;
  border: none;
}
.chip.filled.error:hover:not(.disabled) {
  background-color: #e02d3d;
}
.chip.filled.warning {
  background-color: #ff9500;
  color: #ffffff;
  border: none;
}
.chip.filled.warning:hover:not(.disabled) {
  background-color: #e68600;
}
.chip.filled.info {
  background-color: #2e90fa;
  color: #ffffff;
  border: none;
}
.chip.filled.info:hover:not(.disabled) {
  background-color: #2a82e4;
}
.chip.filled.primary {
  background-color: var(--color-primary, #00A9CE);
  color: #ffffff;
  border: none;
}
.chip.filled.primary:hover:not(.disabled) {
  background-color: #FFC72C;
  color: #14181F;
}
.chip.filled.default {
  background-color: #667085;
  color: #ffffff;
  border: none;
}
.chip.filled.default:hover:not(.disabled) {
  background-color: #5a6170;
}
.chip.filled.secondary {
  background-color: #7f56d9;
  color: #ffffff;
  border: none;
}
.chip.filled.secondary:hover:not(.disabled) {
  background-color: #6f4bc3;
}
.chip.outlined {
  background-color: transparent;
  border: 1px solid;
}
.chip.outlined.success {
  border-color: #15ac77;
  color: #15ac77;
}
.chip.outlined.success:hover:not(.disabled) {
  background-color: rgba(21, 172, 119, 0.08);
}
.chip.outlined.error {
  border-color: #fb3748;
  color: #fb3748;
}
.chip.outlined.error:hover:not(.disabled) {
  background-color: rgba(251, 55, 72, 0.08);
}
.chip.outlined.warning {
  border-color: #ff9500;
  color: #ff9500;
}
.chip.outlined.warning:hover:not(.disabled) {
  background-color: rgba(255, 149, 0, 0.08);
}
.chip.outlined.info {
  border-color: #2e90fa;
  color: #2e90fa;
}
.chip.outlined.info:hover:not(.disabled) {
  background-color: rgba(46, 144, 250, 0.08);
}
.chip.outlined.primary {
  border-color: var(--color-primary, #00A9CE);
  color: var(--color-primary, #00A9CE);
}
.chip.outlined.primary:hover:not(.disabled) {
  background-color: #FFF4CC;
  color: #B76E00;
}
.chip.outlined.default {
  border-color: #667085;
  color: #667085;
}
.chip.outlined.default:hover:not(.disabled) {
  background-color: rgba(102, 112, 133, 0.08);
}
.chip.outlined.secondary {
  border-color: #7f56d9;
  color: #7f56d9;
}
.chip.outlined.secondary:hover:not(.disabled) {
  background-color: rgba(127, 86, 217, 0.08);
}
.chip.soft {
  border: none;
}
.chip.soft.success {
  background-color: #ecfdf3;
  color: #15ac77;
}
.chip.soft.success:hover:not(.disabled) {
  background-color: #d9fbe9;
}
.chip.soft.error {
  background-color: #fef3f2;
  color: #fb3748;
}
.chip.soft.error:hover:not(.disabled) {
  background-color: #fde4e2;
}
.chip.soft.warning {
  background-color: #fff8e1;
  color: #ff9500;
}
.chip.soft.warning:hover:not(.disabled) {
  background-color: #fff3cd;
}
.chip.soft.info {
  background-color: #eff8ff;
  color: #2e90fa;
}
.chip.soft.info:hover:not(.disabled) {
  background-color: #dff0ff;
}
.chip.soft.primary {
  background-color: #E6F7FB;
  color: var(--color-primary, #00A9CE);
}
.chip.soft.primary:hover:not(.disabled) {
  background-color: #E6F7FB;
}
.chip.soft.default {
  background-color: #f2f4f7;
  color: #667085;
}
.chip.soft.default:hover:not(.disabled) {
  background-color: #e5e8ec;
}
.chip.soft.secondary {
  background-color: #f4f3ff;
  color: #7f56d9;
}
.chip.soft.secondary:hover:not(.disabled) {
  background-color: #e8e5ff;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 800;
}
.modal.loading {
  background-color: rgba(0, 0, 0, 0.9);
}
.modal.loading .modal-content {
  opacity: 0.7;
  pointer-events: none;
}
.modal.loading .spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-top: 6px solid #fff;
  background-color: var(--primary-color, #00A9CE);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
.modal .modal-content {
  background-color: #fff;
  border-radius: 12px;
  width: 100%;
  max-height: 90vh;
  z-index: 900;
  display: flex;
  flex-direction: column;
  transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}
.modal .modal-content.sm-size {
  max-width: 400px;
}
.modal .modal-content.md-size {
  max-width: 500px;
}
.modal .modal-content.lg-size {
  max-width: 700px;
}
.modal .modal-content.xl-size {
  max-width: 900px;
}
.modal .modal-content.fullscreen-size {
  max-width: 95vw;
  max-height: 95vh;
  width: 95vw;
  height: 95vh;
}
@media (max-width: 768px) {
  .modal .modal-content {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
  .modal .modal-content.sm-size, .modal .modal-content.md-size, .modal .modal-content.lg-size, .modal .modal-content.xl-size {
    max-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem);
  }
}
@media (max-width: 480px) {
  .modal .modal-content {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
    border-radius: 8px;
  }
  .modal .modal-content.sm-size, .modal .modal-content.md-size, .modal .modal-content.lg-size, .modal .modal-content.xl-size {
    max-width: calc(100vw - 1rem);
    width: calc(100vw - 1rem);
  }
}
.modal .modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid #dadfe3;
}
.modal .modal-content .modal-header .modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal .modal-content .modal-header .modal-header-left .back-button {
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  transition: all 0.2s ease;
}
.modal .modal-content .modal-header .modal-header-left .back-button:hover {
  background: #e5e5e5;
  color: #333;
}
.modal .modal-content .modal-header .modal-header-left h3 {
  margin: 0;
  color: #14181f;
  font-size: 18px;
  font-weight: 500;
}
.modal .modal-content .modal-header .modal-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .modal-content .modal-header button.close-button {
  background: none;
  border: 1px solid #e8e8e9;
  font-size: 16px;
  cursor: pointer;
  color: #72808f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.modal .modal-content .modal-header button.close-button:hover {
  background: #f5f5f5;
  color: #333;
}
.modal .modal-content .step-progress-bar {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.modal .modal-content .step-progress-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #f97316;
  transition: width 0.3s ease;
  width: 0;
}
.modal .modal-content .step-progress-item.active {
  width: 100%;
}
.modal .modal-content .modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.modal .modal-content .modal-body .staff-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 460px;
  overflow: auto;
}
.modal .modal-content .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal .modal-content .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.modal .modal-content .modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.modal .modal-content .modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.modal .modal-content .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  gap: 16px;
  flex-shrink: 0;
  border-top: 1px solid #dadfe3;
  background-color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.react-datetime-picker {
  height: 50px;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.file-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file-input-container .file-input-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  font-weight: 500;
  color: #707a8f;
}
.file-input-container .supported-formats {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.file-input-container .supported-formats .formats-link {
  color: #00A9CE;
  text-decoration: underline;
  cursor: pointer;
  position: relative;
}
.file-input-container .supported-formats .formats-link:hover {
  color: #B76E00;
}
.file-input-container .supported-formats .formats-link:hover .formats-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.file-input-container .supported-formats .formats-link .formats-tooltip {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: #1a1a2e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  z-index: 10;
}
.file-input-container .supported-formats .formats-link .formats-tooltip::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 12px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #1a1a2e;
}
.file-input-container .supported-formats .max-size {
  color: #707a8f;
}
.file-input-container .file-drop-zone {
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 24px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-input-container .file-drop-zone:hover {
  border-color: #FFC72C;
  background-color: rgba(255, 246, 237, 0.64) !important;
}
.file-input-container .file-drop-zone.drag-over {
  border-color: #FFC72C;
  background-color: rgba(255, 246, 237, 0.64) !important;
  transform: scale(1.02);
}
.file-input-container .file-drop-zone.has-files {
  padding: 16px;
  text-align: left;
}
.file-input-container .file-drop-zone .drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.file-input-container .file-drop-zone .drop-zone-content .upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #00A9CE;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-input-container .file-drop-zone .drop-zone-content .drop-zone-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.file-input-container .file-drop-zone .drop-zone-content .drop-zone-text p {
  font-family: "Inter", sans-serif;
  margin: 0;
  color: #707a8f;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5%;
  text-align: center;
}
.file-input-container .file-drop-zone .drop-zone-content .drop-zone-text .file-select-button {
  margin-top: 12px;
  color: #00A9CE;
  border-color: #00A9CE;
  background: transparent;
}
.file-input-container .file-drop-zone .drop-zone-content .drop-zone-text .file-select-button:hover:not(.disabled) {
  color: #00A9CE;
  border-color: #00A9CE;
  background: rgba(0, 169, 206, 0.08);
}
.file-input-container .file-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file-input-container .file-list .file-item {
  display: flex;
  background-color: #f6f7f8;
  flex-direction: column;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.2s ease;
  border: 1px solid #f6f7f8;
}
.file-input-container .file-list .file-item:hover {
  border-color: #d0d7de;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e1e5e9;
}
.file-input-container .file-list .file-item.existing-file {
  background-color: #f0f7ff;
  border-color: #c8e1ff;
}
.file-input-container .file-list .file-item .file-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.file-input-container .file-list .file-item .file-item-header .file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.pdf {
  background-color: #fff;
  padding: 0.4rem;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.doc {
  background-color: #2684ff;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.xls {
  background-color: #36b37e;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.default {
  background-color: var(--color-neutral-dark, #666);
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.image-preview {
  background-color: #fff;
  padding: 0;
  overflow: hidden;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-icon.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-details .file-name {
  font-size: 14px;
  font-weight: 500;
  color: #0d1f2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.file-input-container .file-list .file-item .file-item-header .file-info .file-details .file-size {
  font-size: 12px;
  color: #72808f;
}
.file-input-container .file-list .file-item .file-item-header .file-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .upload-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .upload-status.completed {
  color: #505862;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .upload-status.uploading {
  color: #505862;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .upload-status.error {
  color: #fb3748;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .upload-status svg {
  width: 16px;
  height: 16px;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .progress-percentage {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #00A9CE);
  min-width: 35px;
  text-align: right;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .remove-file-button {
  background: #fff;
  border: 1px solid #dadfe3;
  color: var(--color-neutral-light, #656d76);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.file-input-container .file-list .file-item .file-item-header .file-actions .remove-file-button svg {
  width: 16px;
  height: 16px;
}
.file-input-container .file-list .file-item .upload-progress {
  margin-top: 8px;
  width: 100%;
}
.file-input-container .file-list .file-item .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background-color: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.file-input-container .file-list .file-item .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00A9CE 0%, #66D1E3 100%);
  transition: width 0.3s ease;
  border-radius: 3px;
}
.file-input-container .file-input-error {
  font-size: 12px;
  color: var(--color-error, #cf222e);
  margin-top: 4px;
}
.file-input-container.error .file-drop-zone {
  border-color: var(--color-error, #cf222e);
  background-color: #fff8f8;
}
.file-input-container.error .file-input-label {
  color: var(--color-error, #cf222e);
}
.file-input-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.file-input-container.disabled .file-drop-zone {
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.file-input-container.outlined .file-drop-zone {
  border-style: dotted;
  background-color: white;
}
.file-input-container.outlined .file-drop-zone:hover {
  background-color: rgba(255, 246, 237, 0.64) !important;
}
.file-input-container.outlined .file-drop-zone.drag-over {
  background-color: rgba(255, 246, 237, 0.64) !important;
}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.textarea-container {
  position: relative;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
}
.textarea-container.standard .textarea {
  border: 1px solid var(--color-neutral-darker, #e8e8e9);
  padding: 12px 8px;
  border-radius: 8px;
  background: #fff;
  min-height: 80px;
  transition: border-color 250ms;
}
.textarea-container.standard.hovered .textarea {
  border-color: var(--color-primary, #00A9CE);
  cursor: pointer;
}
.textarea-container.standard.focused .textarea {
  border-color: var(--color-primary, #00A9CE);
}
.textarea-container.standard.error .textarea {
  border-color: var(--color-error, #ff5630);
}
.textarea-container.standard.disabled .textarea {
  background-color: #f8f8f9;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: not-allowed;
}
.textarea-container.outlined .textarea {
  box-shadow: inset 0 0 0 1px var(--color-neutral, #ddd);
  padding: 4px;
  border-radius: 6px;
  transition: box-shadow 250ms;
}
.textarea-container.outlined.hovered .textarea {
  box-shadow: inset 0 0 0 1px var(--color-neutral-dark, #c1c1c1);
}
.textarea-container.outlined.focused .textarea {
  box-shadow: inset 0 0 0 2px var(--color-primary, #00A9CE);
}
.textarea-container.outlined.error .textarea {
  box-shadow: inset 0 0 0 2px var(--color-error, #ff5630);
}
.textarea-container.outlined.disabled .textarea {
  background-color: #f8f8f9;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: not-allowed;
}
.textarea-container.underline .textarea {
  border: none;
  border-bottom: 1px solid var(--color-neutral, #ddd);
  padding: 4px 0;
  transition: border-color 250ms;
}
.textarea-container.underline.hovered .textarea {
  border-bottom-color: var(--color-neutral-dark, #c1c1c1);
}
.textarea-container.underline.focused .textarea {
  border-bottom-color: var(--color-primary, #00A9CE);
}
.textarea-container.underline.error .textarea {
  border-bottom-color: var(--color-error, #ff5630);
}
.textarea-container.underline.disabled .textarea {
  background-color: #f8f8f9;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: not-allowed;
}
.textarea-container .textarea-label {
  font-size: 14px;
  color: #707a8f;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  margin-bottom: 4px;
}
.textarea-container .textarea-label.focused {
  color: var(--color-primary, #00A9CE);
}
.textarea-container .textarea-label.error {
  color: var(--color-error, #ff5630);
}
.textarea-container .textarea-label.disabled {
  color: var(--color-neutral, #bdbdbd);
}
.textarea-container .textarea {
  width: 100%;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  resize: none;
  padding: 12px 8px;
  color: inherit;
}
.textarea-container .textarea::placeholder {
  color: #9fa6b4;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.005em;
}
.textarea-container .textarea:focus {
  outline: none;
}
.textarea-container .textarea:disabled {
  cursor: not-allowed;
}
.textarea-container .textarea-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-error, #ff5630);
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_926dm_35 {
  width: 100%;
}
._root_926dm_35 .textarea {
  min-height: 200px;
  border-radius: 6px;
  border: 1px solid var(--color-neutral-darker, #e8e8e9);
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.dropdown-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.dropdown-container.disabled .dropdown-header {
  background-color: #f8f8f9;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: not-allowed;
  color: #707a8f;
}
.dropdown-container .dropdown-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 14px;
  color: #707a8f;
  line-height: 20px;
  letter-spacing: 0.08px;
  transition: color 250ms;
  font-weight: 500;
}
.dropdown-container .dropdown-label.error {
  color: var(--color-error, #ff5630);
}
.dropdown-container .dropdown-label .dropdown-label-icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: currentColor;
}
.dropdown-container .dropdown-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px;
}
.dropdown-container .dropdown-search-wrapper .dropdown-search {
  width: 100%;
  padding: 8px 40px 8px 8px;
  border: 1px solid var(--color-primary-darker, #dadfe3);
  border-radius: 6px;
}
.dropdown-container .dropdown-search-wrapper .dropdown-search:target {
  border: 1px solid var(--color-primary);
}
.dropdown-container .dropdown-search-wrapper .dropdown-search:focus, .dropdown-container .dropdown-search-wrapper .dropdown-search:focus-visible {
  border: 1px solid var(--color-primary);
  outline: none;
}
.dropdown-container .dropdown-search-wrapper .dropdown-search-icon {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dropdown-container .dropdown-header {
  min-height: 40px;
  display: flex;
  color: #505862;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--color-primary-darker);
  cursor: pointer;
  border-radius: 8px;
  transition: border-color 250ms;
  gap: 8px;
}
.dropdown-container .dropdown-header:hover {
  border-color: #FFC72C;
}
.dropdown-container .dropdown-header.focused {
  border-color: #FFC72C;
}
.dropdown-container .dropdown-header.focused .dropdown-header-icon svg path {
  stroke: #FFC72C;
}
.dropdown-container .dropdown-header.error {
  border-color: var(--color-error, #ff5630);
}
.dropdown-container .dropdown-header .dropdown-header-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.dropdown-container .dropdown-header .dropdown-selected {
  color: #505862;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Multi-select: allow tags to wrap to next line so long text doesn't cover X icon */
}
.dropdown-container .dropdown-header .dropdown-selected:has(.selected-tags) {
  overflow: visible;
  white-space: normal;
  min-width: 0;
  padding-right: 52px; /* clear ve ok ikonu için boşluk */
}
.dropdown-container .dropdown-header .dropdown-selected .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
}
.dropdown-container .dropdown-header .dropdown-selected .selected-tags .tag {
  background-color: #f1f2f4;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #2f333c;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.08px;
  max-width: 100%;
  min-width: 0;
  /* Uzun metin tag içinde alt satıra geçer, X ikonu her zaman görünür kalır */
  word-break: break-word;
  white-space: normal;
}
.dropdown-container .dropdown-header .dropdown-selected .selected-tags .tag .tag-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.dropdown-container .dropdown-header .dropdown-selected .selected-tags .tag .tag-delete > div {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: none !important;
}
.dropdown-container .dropdown-header .dropdown-clear {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 16px;
  margin-left: 8px;
  position: absolute;
  right: 50px;
}
.dropdown-container .dropdown-header .dropdown-icon {
  transition: transform 250ms;
  width: 18px;
  height: 18px;
}
.dropdown-container .dropdown-header .dropdown-icon.open {
  transform: rotate(180deg);
}
.dropdown-container .dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid var(--color-neutral, #ddd);
  border-radius: 6px;
  /* margin-top: $spacing-xxs; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
}
.dropdown-container .dropdown-list.position-top {
  top: auto;
  bottom: 100%;
}
.dropdown-container .dropdown-list .dropdown-option {
  padding: 8px;
  cursor: pointer;
  color: var(--color-neutral-dark);
  transition: background-color 250ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.4;
}
.dropdown-container .dropdown-list .dropdown-option:hover {
  background-color: #f6f7f8;
  color: #B76E00;
}
.dropdown-container .dropdown-list .dropdown-option.selected {
  color: #B76E00;
  font-weight: 600;
}
.dropdown-container .dropdown-list .dropdown-option .checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dropdown-container .dropdown-list .dropdown-loading {
  padding: 8px;
  text-align: center;
  color: var(--color-neutral-dark);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in;
}
.dropdown-container .dropdown-list .dropdown-loading .loading-indicator {
  font-size: 12px;
}
.dropdown-container .dropdown-list .dropdown-option {
  animation: fadeIn 0.2s ease-in;
}
.dropdown-container .dropdown-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-error, #ff5630);
}

.loading-indicator {
  opacity: 0.6;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Portal-rendered list — document.body'ye ekleniyor, .dropdown-container dışında */
.dropdown-list-portal {
  z-index: 10050; /* Modal overlay z-index'inin üstünde */
  background-color: #fff;
  border: 1px solid var(--color-neutral, #ddd);
  border-radius: var(--radius-xs, 6px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
}
.dropdown-list-portal .dropdown-search-wrapper {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 4px 8px 8px;
  z-index: 1;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
}
.dropdown-list-portal .dropdown-search-wrapper .dropdown-search {
  flex: 1;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.dropdown-list-portal .dropdown-search-wrapper .dropdown-search:focus {
  border-color: #FFC72C;
}
.dropdown-list-portal .dropdown-search-wrapper .dropdown-search-icon {
  position: absolute;
  right: 16px;
  color: #94a3b8;
  pointer-events: none;
}
.dropdown-list-portal .dropdown-option {
  padding: 8px 12px;
  cursor: pointer;
  color: #334155;
  transition: background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.4;
  font-size: 14px;
}
.dropdown-list-portal .dropdown-option:hover {
  background-color: #f6f7f8;
  color: #B76E00;
}
.dropdown-list-portal .dropdown-option.selected {
  color: #B76E00;
  font-weight: 600;
}
.dropdown-list-portal .dropdown-loading {
  padding: 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_1dr9p_35 {
  width: 100%;
}
._root_1dr9p_35 .dropdown-header {
  border-radius: 6px;
  border: 1px solid var(--color-neutral-darker, #e8e8e9);
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_14cgy_35 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
}
._root_14cgy_35._root_disabled_14cgy_44 {
  cursor: not-allowed;
}

._input_14cgy_48 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

._boxWrap_14cgy_56 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._box_14cgy_56 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-dark, #212b36);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 250ms ease, background-color 250ms ease;
}
._input_14cgy_48:checked ~ ._boxWrap_14cgy_56 ._box_14cgy_56 {
  border-color: var(--color-primary, #00A9CE);
  background-color: var(--color-primary, #00A9CE);
  box-shadow: inset 0 0 0 6px #fff;
}
._root_14cgy_35:hover:not(._root_disabled_14cgy_44) ._boxWrap_14cgy_56 ._box_14cgy_56 {
  border-color: var(--color-primary, #00A9CE);
}

._answer_14cgy_83 {
  flex: 1;
  min-height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-neutral-darker, #e8e8e9);
  border-radius: 6px;
  background-color: #f8f8f9;
  transition: background-color 250ms ease;
}
._input_14cgy_48:checked ~ ._answer_14cgy_83 {
  background-color: #f8f8f9;
}
._root_14cgy_35:hover:not(._root_disabled_14cgy_44) ._input_14cgy_48:not(:checked) ~ ._answer_14cgy_83 {
  background-color: #f1f1f1;
}

._label_14cgy_101 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: var(--color-neutral-dark, #14181f);
  text-align: left;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_82zsi_35 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
}
._root_82zsi_35._root_disabled_82zsi_44 {
  cursor: not-allowed;
}
._root_82zsi_35._root_disabled_82zsi_44 ._answer_82zsi_47 {
  background-color: #f8f8f9;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
}

._input_82zsi_54 {
  position: absolute !important;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

._boxWrap_82zsi_62 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._box_82zsi_62 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-dark, #212b36);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 250ms ease, background-color 250ms ease;
}
._input_82zsi_54:checked ~ ._boxWrap_82zsi_62 ._box_82zsi_62 {
  border-color: var(--color-primary, #00A9CE);
  background-color: var(--color-primary, #00A9CE);
}
._input_82zsi_54:checked ~ ._boxWrap_82zsi_62 ._box_82zsi_62 svg path {
  stroke: #fff;
}
._root_82zsi_35:hover:not(._root_disabled_82zsi_44) ._boxWrap_82zsi_62 ._box_82zsi_62 {
  border-color: var(--color-primary, #00A9CE);
}

._answer_82zsi_47 {
  flex: 1;
  min-height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-neutral-darker, #e8e8e9);
  border-radius: 6px;
  background-color: #f8f8f9;
  transition: background-color 250ms ease;
}
._input_82zsi_54:checked ~ ._answer_82zsi_47 {
  background-color: #f8f8f9;
}
._root_82zsi_35:hover:not(._root_disabled_82zsi_44) ._input_82zsi_54:not(:checked) ~ ._answer_82zsi_47 {
  background-color: #f1f1f1;
}

._label_82zsi_109 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: var(--color-neutral-dark, #14181f);
  text-align: left;
}

/* Question text style (Inter Medium 16 / 24, 0.5% letter-spacing) */
._question_82zsi_119 {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-neutral-dark, #14181f);
  margin-bottom: 8px;
}

._questionHint_82zsi_129 {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: #939598;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_kj0ip_35 {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
._root_kj0ip_35._root_disabled_kj0ip_41 {
  cursor: not-allowed;
}
._root_kj0ip_35._root_disabled_kj0ip_41 ._star_kj0ip_44 {
  cursor: not-allowed;
}

._star_kj0ip_44 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-primary, #00A9CE);
  transition: transform 250ms ease;
}
._star_kj0ip_44:hover:not(:disabled) {
  transform: scale(1.1);
}
._star_kj0ip_44:focus-visible {
  outline: 2px solid var(--color-primary, #00A9CE);
  outline-offset: 2px;
  border-radius: 2px;
}
._star_kj0ip_44 svg {
  display: block;
  flex-shrink: 0;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._root_k9gya_35 {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
._root_k9gya_35._root_disabled_k9gya_41 {
  cursor: not-allowed;
}
._root_k9gya_35._root_disabled_k9gya_41 ._num_k9gya_44 {
  cursor: not-allowed;
}

._numbers_k9gya_48 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._num_k9gya_44 {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-primary, #00A9CE);
  border-radius: 8px;
  background-color: #fff;
  color: var(--color-primary, #00A9CE);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease;
}
._num_k9gya_44:hover:not(:disabled) {
  background-color: #ffeff0;
}
._num_k9gya_44:focus-visible {
  outline: 2px solid var(--color-primary, #00A9CE);
  outline-offset: 2px;
}
._num_k9gya_44._num_selected_k9gya_82 {
  background-color: #ffeff0;
}

._labels_k9gya_86 {
  display: flex;
  width: auto;
  padding: 0;
  font-size: 12px;
  color: #939598;
  line-height: 1.2;
  width: 210px;
  justify-content: space-between;
}

._labelMin_k9gya_97 {
  text-align: center;
}

._labelMax_k9gya_101 {
  width: 36px;
  text-align: center;
}

._root_disabled_k9gya_41 ._num_k9gya_44 {
  cursor: not-allowed;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._header_1rlhx_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #dadfe3;
}

._headerTitle_1rlhx_44 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
}

._headerCloseBtn_1rlhx_51 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._headerCloseBtn_1rlhx_51:hover {
  background: #f5f5f5;
}

._body_1rlhx_69 {
  padding: 20px 24px;
  background: #fff;
  overflow-y: auto;
  max-height: 70vh;
}

._surveySection_1rlhx_76 {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e8e8e9;
}
._surveySection_1rlhx_76:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

._surveyHeader_1rlhx_87 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

._surveyTitle_1rlhx_95 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
}

._surveyType_1rlhx_102 {
  font-size: 12px;
  color: #707a8f;
}

._surveyCompleted_1rlhx_107 {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #15ac77;
  font-size: 12px;
  font-weight: 600;
}

._questionBlock_1rlhx_116 {
  margin-bottom: 24px;
}
._questionBlock_1rlhx_116:last-child {
  margin-bottom: 0;
}

._questionLabel_1rlhx_123 {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  line-height: 1.4;
}

._questionRequired_1rlhx_132 {
  color: #00A9CE;
  margin-left: 2px;
}

._optionsGroup_1rlhx_137 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._footer_1rlhx_143 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  width: 100%;
}

._btnCancel_1rlhx_152 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
}
._btnCancel_1rlhx_152:hover {
  background: #f5f5f5;
}

._btnFinish_1rlhx_169 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  background: #00A9CE;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
}
._btnFinish_1rlhx_169:hover:not(:disabled) {
  background: #c91d26;
}
._btnFinish_1rlhx_169:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._loadingWrap_1rlhx_190 {
  padding: 40px 24px;
  text-align: center;
  color: #707a8f;
}

._errorWrap_1rlhx_196 {
  padding: 24px;
  text-align: center;
  color: #00A9CE;
}

._successWrap_1rlhx_202 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
}

._successIcon_1rlhx_212 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f7ef;
  color: #15ac77;
}

._successTitle_1rlhx_223 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
}

._successMessage_1rlhx_230 {
  margin: 0;
  font-size: 14px;
  color: #505766;
  line-height: 1.5;
  max-width: 360px;
}._bellWrapper_w6rj3_1 {
  position: relative;
  display: inline-flex;
}

._bellButton_w6rj3_6 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e6e8ec;
  background: #ffffff;
  color: #505766;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
._bellButton_w6rj3_6:hover {
  background: #f5f6f8;
  border-color: #d5d8de;
}
._bellButton_w6rj3_6._active_w6rj3_24 {
  border-color: #00A9CE;
  background: #E6F7FB;
  color: #00A9CE;
}

._badge_w6rj3_30 {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #00A9CE;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

._panel_w6rj3_47 {
  width: 380px;
  max-width: 90vw;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

._panelHeader_w6rj3_58 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f3;
}
._panelHeader_w6rj3_58 h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1f2430;
}
._panelHeader_w6rj3_58 button {
  border: none;
  background: transparent;
  color: #00A9CE;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
._panelHeader_w6rj3_58 button:hover {
  background: #fdecec;
}
._panelHeader_w6rj3_58 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._panelList_w6rj3_89 {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

._empty_w6rj3_95 {
  padding: 32px 16px;
  text-align: center;
  color: #8b92a3;
  font-size: 13px;
}

._item_w6rj3_102 {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease;
}
._item_w6rj3_102:hover {
  background: #f7f8fa;
}
._item_w6rj3_102._unread_w6rj3_113 {
  background: #fbf4f4;
  border-left-color: #00A9CE;
}

._itemBody_w6rj3_118 {
  flex: 1;
  min-width: 0;
}

._itemTitle_w6rj3_123 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2430;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._itemMessage_w6rj3_133 {
  font-size: 12px;
  color: #505766;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._itemMeta_w6rj3_144 {
  margin-top: 4px;
  font-size: 11px;
  color: #8b92a3;
}

._itemDot_w6rj3_150 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00A9CE;
  margin-top: 6px;
  flex-shrink: 0;
}

._itemDotPlaceholder_w6rj3_159 {
  width: 8px;
  flex-shrink: 0;
}

._panelFooter_w6rj3_164 {
  padding: 10px 16px;
  border-top: 1px solid #eef0f3;
  text-align: center;
}
._panelFooter_w6rj3_164 a {
  font-size: 13px;
  color: #00A9CE;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
._panelFooter_w6rj3_164 a:hover {
  text-decoration: underline;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._headerTopbar_1nu5f_35 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  margin: 0 0 24px 0;
}

._headerTopbarLeft_1nu5f_43 {
  display: flex;
  align-items: center;
  gap: 24px;
}

._headerTopbarLeftContent_1nu5f_49 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._headerTopbarLeftIcon_1nu5f_55 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid #dadfe3;
}

._headerTopbarLeftTitle_1nu5f_65 {
  font-size: 24px;
  font-weight: 500;
  color: #14181f;
  margin: 0;
  line-height: 32px;
  font-family: "Inter", sans-serif;
}

._headerTopbarLeftDescription_1nu5f_74 {
  font-size: 14px;
  color: #72808f;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

._headerTopbarRight_1nu5f_81 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
}
._headerTopbarRight_1nu5f_81 ._headerTopbarRightItemAvatar_1nu5f_88 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f1f2f4;
  overflow: hidden;
}
._headerTopbarRight_1nu5f_81 ._headerTopbarRightItemAvatar_1nu5f_88 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._headerTopbarRight_1nu5f_81 ._headerTopbarRightItemCircle_1nu5f_103 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
._headerTopbarRight_1nu5f_81 ._headerTopbarRightItemCircle_1nu5f_103 svg {
  display: block;
}
._headerTopbarRight_1nu5f_81 a {
  display: flex;
  align-items: center;
  color: #72808f;
  transition: color 0.2s ease;
}
._headerTopbarRight_1nu5f_81 a:hover {
  color: #2b3641;
}

._headerTopbarActionsProfile_1nu5f_129 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 4px 12px 4px 4px;
  border-radius: 24px;
  transition: all 0.2s ease;
  background: #f6f7f8;
  border: 1px solid #f6f7f8;
}
._headerTopbarActionsProfile_1nu5f_129:hover:not(._active_1nu5f_141) {
  background-color: #f8f9fa;
  border-color: #e9ecef;
}
._headerTopbarActionsProfile_1nu5f_129._active_1nu5f_141 {
  background-color: #fff;
  border-color: var(--color-primary, #00A9CE);
}

._profileTrigger_1nu5f_150 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

._headerTopbarActionsProfileImage_1nu5f_157 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
  flex-shrink: 0;
}

._headerTopbarActionsProfileInfo_1nu5f_166 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

._profileName_1nu5f_174 {
  font-size: 14px;
  font-weight: 600;
  color: #2b3641;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  transition: color 0.2s ease;
}

._profileEmail_1nu5f_187 {
  font-size: 12px;
  color: #72808f;
  line-height: 1.2;
  margin: 2px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  transition: color 0.2s ease;
}

._profileArrow_1nu5f_199 {
  display: flex;
  align-items: center;
  color: #72808f;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._profileArrow_1nu5f_199._open_1nu5f_206 {
  transform: rotate(180deg);
}

._avatarLoadingSpinner_1nu5f_210 {
  width: 40px;
  height: 40px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #00A9CE;
  border-radius: 50%;
  animation: _spin_1nu5f_1 1s linear infinite;
  flex-shrink: 0;
}

._profilePopover_1nu5f_220 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #dadfe3;
  border-radius: 16px;
  z-index: 1000;
  min-width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 1;
  transform: translateY(0);
  animation: _popoverFadeIn_1nu5f_1 0.2s ease-out;
  padding: 0.5rem;
}
._profilePopover_1nu5f_220 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
._profilePopover_1nu5f_220 li {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
._profilePopover_1nu5f_220 li._divider_1nu5f_246 {
  border-bottom: 1px solid #dadfe3;
  height: 1px;
  margin: 0.5rem 0;
}
._profilePopover_1nu5f_220 li:hover {
  border-radius: 12px;
}
._profilePopover_1nu5f_220 li:last-child:hover {
  background-color: #f6f7f8;
  border-radius: 12px;
}
._profilePopover_1nu5f_220 li:last-child:hover svg path {
  stroke: #00A9CE;
}
._profilePopover_1nu5f_220 li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  width: 100%;
  color: #505862;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}
._profilePopover_1nu5f_220 li a:hover {
  background-color: #f6f7f8;
  border-radius: 12px;
}
._profilePopover_1nu5f_220 li a:hover svg path {
  stroke: #00A9CE;
}

._menuIcon_1nu5f_280 {
  width: 20px;
  height: 20px;
  color: #72808f;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

._logoutItem_1nu5f_288 {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  width: 100%;
  color: #505862;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  border-radius: 12px;
}
._logoutItem_1nu5f_288 ._menuIcon_1nu5f_280 {
  width: 20px;
  height: 20px;
  color: #72808f;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

._active_1nu5f_141 {
  background-color: #fff;
  border-color: var(--color-primary, #00A9CE);
}

._open_1nu5f_206 {
  transform: rotate(180deg);
}

._divider_1nu5f_246 {
  border-bottom: 1px solid #dadfe3;
  height: 1px;
  margin: 0.5rem 0;
}

@keyframes _spin_1nu5f_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes _popoverFadeIn_1nu5f_1 {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
._languageMenu_1nu5f_342 {
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 4px;
}

._languageMenuHeader_1nu5f_349 {
  font-size: 12px;
  font-weight: 600;
  color: #72808f;
  letter-spacing: 0.5px;
  padding: 8px 12px 4px;
  border-bottom: 1px solid #e8e8e9;
  margin-bottom: 4px;
}

._languageButton_1nu5f_359 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: #f6f7f8;
  border: 1px solid #e8e8e9;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._languageButton_1nu5f_359:hover {
  background: #f1f2f4;
  border-color: #dadfe3;
}

._languageButtonLabel_1nu5f_375 {
  font-size: 14px;
  font-weight: 500;
  color: #505766;
}

._languageButtonFlag_1nu5f_381 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
._languageButtonFlag_1nu5f_381 svg {
  width: 24px;
  height: 24px;
}

._languageMenuItem_1nu5f_394 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 8px;
  width: 100%;
}
._languageMenuItem_1nu5f_394:hover {
  background-color: #f3f4f6;
}
._languageMenuItem_1nu5f_394._languageMenuItemActive_1nu5f_412 {
  background-color: rgba(0, 169, 206, 0.08);
  color: var(--color-primary, #00A9CE);
}

._languageMenuFlag_1nu5f_417 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._languageMenuFlag_1nu5f_417 svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.info-card {
  background-color: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 250ms ease;
}
.info-card--clickable {
  cursor: pointer;
  user-select: none;
}
.info-card--clickable:hover {
  border-color: #d3d6dc;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.info-card--clickable:focus-visible {
  outline: 2px solid #00A9CE;
  outline-offset: 2px;
}
.info-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.info-card__title {
  font-size: 14px;
  font-weight: 500;
  color: #707a8f;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
}
.info-card__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary, #00A9CE);
}
.info-card__value {
  font-size: 24px;
  font-weight: 500;
  color: #14181f;
  line-height: 32px;
}

@media (max-width: 768px) {
  .info-card {
    padding: 16px;
  }
  .info-card__value {
    font-size: 32px;
  }
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}
.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}
.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}
.disabled {
  cursor: not-allowed;
}
.disabled > * {
  pointer-events: none;
}
* {
  font-family: "Inter", sans-serif;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 250ms;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-container.tooltip-container--table-cell {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.tooltip {
  padding: 8px 10px;
  background-color: var(--color-neutral-dark, #333);
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  white-space: normal;
  max-width: 500px;
  width: max-content;
  transition: opacity 250ms ease, transform 250ms ease;
  z-index: 10000;
  word-wrap: break-word;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.tooltip.top::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  top: 100%;
  left: 50%;
  transform: translateX(-35%) !important;
  border-color: #333 transparent transparent transparent;
}
.tooltip.right::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  top: 50%;
  left: -12px;
  transform: translateY(-35%) !important;
  border-color: transparent #333 transparent transparent;
}
.tooltip.bottom::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  bottom: 100%;
  left: 50%;
  transform: translateX(-35%) !important;
  border-color: transparent transparent #333 transparent;
}
.tooltip.left::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  top: 50%;
  right: -12px;
  transform: translateY(-35%) !important;
  border-color: transparent transparent transparent #333;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.table-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
}
.table-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-primary-darker);
  z-index: 1;
}
.table-header tr th {
  font-weight: 600;
  color: #637381;
  background-color: #fff;
  position: sticky;
  top: 0;
}

.table {
  width: 100%;
  border-collapse: separate;
  min-height: 480px;
  border-spacing: 0;
}
.table .table-body {
  position: relative;
  border-left: 1px solid var(--color-primary-darker);
  border-right: 1px solid var(--color-primary-darker);
  border-bottom: 1px solid var(--color-primary-darker);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.table .table-body .table-row {
  height: 68.2px !important;
  max-height: 68.2px !important;
  min-height: 68.2px !important;
  display: table-row;
}
.table .table-body .table-row td {
  height: 68.2px !important;
  max-height: 68.2px !important;
  min-height: 68.2px !important;
  vertical-align: middle;
  padding: 0.8rem;
  box-sizing: border-box;
  overflow: hidden;
}
.table .table-body:not(.empty) .table-row:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.table .table-body tr:last-child td {
  border-bottom: none;
}
.table .table-body tr:last-child td:first-child {
  border-bottom-left-radius: 15px;
}
.table .table-body tr:last-child td:last-child {
  border-bottom-right-radius: 15px;
}
.table th,
.table td {
  padding: 0.8rem;
  text-align: left;
  color: #212b36;
  border-bottom: 1px solid #eee;
}
.table th:last-child,
.table td:last-child {
  border-right: none;
}
.table input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: 0;
}
.table th {
  font-weight: bold;
}
.table td {
  vertical-align: middle;
}
.table .profile-picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.table .actions {
  position: relative;
}
.table .actions .action-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table .actions .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 120px;
  max-width: 200px;
  transform: translateX(-10px);
}
.table .actions .dropdown-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
}
.table .actions .dropdown-menu button:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.table .actions .dropdown-menu button:last-child {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.table .actions .dropdown-menu button:hover {
  background-color: #f5f5f5;
}
.table .actions .dropdown-menu svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.table-skeleton__body tr:hover {
  background-color: transparent !important;
}
.table-skeleton__header-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-skeleton__cell-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-skeleton__header-text {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
  max-width: 120px;
  flex: 1;
}
.table-skeleton__header-text--short {
  max-width: 60px;
}
.table-skeleton__cell {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
  flex: 1;
}
.table-skeleton__cell--short {
  max-width: 80px;
}
.table-skeleton__cell--medium {
  max-width: 140px;
}
.table-skeleton__cell--long {
  max-width: 200px;
}
.table-skeleton__checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  background-color: #e0e0e0;
  border-radius: 3px;
  animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}
.table-skeleton__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.table-skeleton__action-dot {
  width: 6px;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 50%;
  animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}
.table-skeleton__action-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.table-skeleton__action-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes skeleton-pulse {
  0% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #f0f0f0;
  }
}
.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #E8E8E9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  gap: 12px;
}
.table-pagination .pagination-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.table-pagination .pagination-left .pagination-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707A8F;
  white-space: nowrap;
}
.table-pagination .pagination-left .dropdown-container {
  width: auto;
}
.table-pagination .pagination-left .pagination-details {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707A8F;
  white-space: nowrap;
  margin-left: 8px;
}
.table-pagination .pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.table-pagination .pagination-controls .pagination-arrow {
  background: none;
  border: 1px solid #E8E8E9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707A8F;
  transition: all 0.2s ease;
}
.table-pagination .pagination-controls .pagination-arrow:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
.table-pagination .pagination-controls .pagination-arrow:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #E8E8E9;
}
.table-pagination .pagination-controls .pagination-arrow svg {
  width: 16px;
  height: 16px;
}
.table-pagination .pagination-controls .pagination-numbers {
  display: flex;
  gap: 4px;
}
.table-pagination .pagination-controls .pagination-numbers .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #E8E8E9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181F;
  transition: all 0.2s ease;
}
.table-pagination .pagination-controls .pagination-numbers .pagination-number.active {
  background: #FFEFF0;
  color: #00A9CE;
  border-color: #00A9CE;
}
.table-pagination .pagination-controls .pagination-numbers .pagination-number:hover:not(.active) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
.table-pagination .pagination-controls .pagination-numbers .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707A8F;
  font-size: 14px;
  border: 1px solid #E8E8E9;
  border-radius: 6px;
}

.leave-dates-cell {
  position: relative;
}
.leave-dates-cell .leave-dates-container {
  position: relative;
  cursor: pointer;
}
.leave-dates-cell .leave-dates-container .leave-dates-tooltip {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 200px;
  left: 0;
  top: 100%;
  white-space: normal;
}
.leave-dates-cell .leave-dates-container:hover .leave-dates-tooltip {
  display: block;
}

.truncate-text {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  color: #14181F;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08px;
}

.base-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.base-actions svg {
  cursor: pointer;
}

.table-container {
  flex-direction: column;
  gap: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.table-container:has(.flex-table-body--content) {
  flex: 0 1 auto;
}
.table-container .table-filters {
  display: flex;
  align-items: end;
  gap: 1rem;
  padding: 10px 16px;
  flex-shrink: 0;
}
.table-container .table-filters .filter {
  flex: 4;
}
.table-container .table-filters .search-input {
  flex: 8;
}
.table-container .table-wrapper {
  border-radius: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  scroll-behavior: smooth;
  border: 1px solid var(--color-primary-darker);
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
}
.table-container .table-wrapper:has(.flex-table-body--content) {
  flex: 0 1 auto;
  overflow: visible;
}

.flex-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  min-height: 0;
}
.flex-table .flex-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, 1fr);
  border-bottom: 1px solid var(--color-primary-darker);
  flex-shrink: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.flex-table .flex-table-header .flex-cell {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08px;
  color: #707A8F;
  background-color: #fff;
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #F1F2F4;
  display: flex;
  align-items: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.flex-table .flex-table-header .flex-cell .row-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  margin-right: 12px;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid #D3D6DC;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
  transition: all 0.15s ease;
}
.flex-table .flex-table-header .flex-cell .row-checkbox:hover {
  border-color: var(--color-primary);
}
.flex-table .flex-table-header .flex-cell .row-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.flex-table .flex-table-header .flex-cell .row-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.flex-table .flex-table-body {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  position: relative;
  overflow-y: auto;
  overflow-x: visible;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}
.flex-table .flex-table-body .flex-table-row {
  height: 68.2px;
  flex-shrink: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, 1fr);
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 1;
}
.flex-table .flex-table-body .flex-table-row.has-open-dropdown {
  z-index: 1000 !important;
}
.flex-table .flex-table-body .flex-table-row.has-open-dropdown .flex-cell {
  z-index: 1001;
  overflow: visible;
}
.flex-table .flex-table-body .flex-table-row.has-open-dropdown .flex-cell .tooltip-container {
  overflow: hidden;
}
.flex-table .flex-table-body .flex-table-row.has-open-dropdown .flex-cell .truncate-text {
  overflow: hidden;
}
.flex-table .flex-table-body .flex-table-row:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.flex-table .flex-table-body .flex-table-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.flex-table .flex-table-body .flex-table-row .flex-cell {
  padding: 16px;
  text-align: left;
  color: #212b36;
  display: flex;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}
.flex-table .flex-table-body .flex-table-row .flex-cell .row-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  margin-right: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.flex-table .flex-table-body .flex-table-row .flex-cell .truncate-text {
  flex: 1;
  min-width: 0;
}
.flex-table .flex-table-body .flex-table-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 68.2px;
}
.flex-table .flex-table-body .flex-table-empty .flex-cell {
  padding: 0.8rem;
  text-align: center;
  color: #212b36;
  width: 100%;
}
.flex-table .flex-table-body--expand .flex-table-row {
  height: auto;
  flex: 1;
  min-height: 68.2px;
}
.flex-table .flex-table-body--content {
  flex: 0 1 auto;
  overflow-y: visible;
}
.flex-table .flex-table-body--content .flex-table-row {
  height: 68.2px;
  flex-shrink: 0;
}
.flex-table .row-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  margin-right: 12px;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid #D3D6DC;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
  transition: all 0.15s ease;
}
.flex-table .row-checkbox:hover {
  border-color: var(--color-primary);
}
.flex-table .row-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.flex-table .row-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.flex-table .actions-column {
  grid-column: auto/span 1;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  justify-content: center !important;
  align-items: center !important;
  position: relative;
  overflow: visible !important;
  padding-right: 1rem !important;
  /* 3 nokta aksiyon ikonu: tasarım 1px border, 8px radius, 40x40 (Figma Gray Button) */
}
.flex-table .actions-column > div > button,
.flex-table .actions-column > button {
  border: 1px solid #e8e8e9 !important;
  border-radius: 8px;
  min-width: 40px;
  min-height: 40px;
  padding: 10px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.flex-table .actions-column > div > button:hover,
.flex-table .actions-column > button:hover {
  background-color: #f1f2f4 !important;
  border-color: #e8e8e9 !important;
}
.flex-table .actions-column .error {
  border: 0;
  display: flex;
  align-items: center;
}
.flex-table .actions-column .error:hover:not(.disabled) {
  background-color: transparent;
  border: 0;
}
.flex-table .actions-column .error .button__icon--start {
  margin-right: 0;
}
._section_1jes3_2 {
  position: relative;
  background: radial-gradient(120% 60% at 0% 0%, rgba(34, 197, 94, 0.07), transparent 55%), radial-gradient(120% 60% at 100% 100%, rgba(139, 92, 246, 0.06), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  /* Üstte ince gradient şerit — creative aksan */
}
._section_1jes3_2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #3b82f6, #8b5cf6);
  opacity: 0.9;
}

._sectionHeader_1jes3_25 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_1jes3_31 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
  margin: 0;
}

._sectionLink_1jes3_40 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e9;
  background: rgba(255, 255, 255, 0.85);
  color: #707a8f;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
._sectionLink_1jes3_40:hover {
  background: #14181f;
  color: #fff;
  border-color: #14181f;
  transform: translateX(2px);
}

._colName_1jes3_62 {
  min-width: 180px;
}._section_5c4sm_1 {
  position: relative;
  background: radial-gradient(120% 60% at 100% 0%, rgba(236, 72, 153, 0.06), transparent 55%), radial-gradient(120% 60% at 0% 100%, rgba(59, 130, 246, 0.07), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
._section_5c4sm_1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
  opacity: 0.9;
}

._sectionHeader_5c4sm_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_5c4sm_29 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
  margin: 0;
}

._sectionLink_5c4sm_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e9;
  background: rgba(255, 255, 255, 0.85);
  color: #707a8f;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
._sectionLink_5c4sm_38:hover {
  background: #14181f;
  color: #fff;
  border-color: #14181f;
  transform: translateX(2px);
}

._list_5c4sm_60 {
  list-style: none;
  padding: 12px 8px;
  gap: 18px;
  display: flex;
  flex-direction: column;
}

._item_5c4sm_68 {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  gap: 12px;
  border-radius: 12px;
  flex-direction: row;
  border: 1px solid rgba(241, 242, 244, 0.9);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
._item_5c4sm_68:hover {
  border-color: #e8e8e9;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

._itemImageWrap_5c4sm_86 {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f2f4;
}

._itemImage_5c4sm_86 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._itemImagePlaceholder_5c4sm_101 {
  width: 100%;
  height: 100%;
  background: #e8e8e9;
}

._itemBody_5c4sm_107 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._itemTopRow_5c4sm_115 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

._itemTitle_5c4sm_122 {
  font-size: 14px;
  font-weight: 600;
  color: #2f333c;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

._itemTime_5c4sm_132 {
  font-size: 12px;
  color: #707a8f;
  flex-shrink: 0;
}

._itemBottomRow_5c4sm_138 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

._tagWrap_5c4sm_146 {
  flex-shrink: 0;
}

._detailLink_5c4sm_150 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: #00A9CE;
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
._detailLink_5c4sm_150:hover {
  opacity: 0.9;
}

._detailArrow_5c4sm_168 {
  flex-shrink: 0;
}

._section_5c4sm_1 .tab-group.horizontal .tab-list {
  border-bottom-color: #f1f2f4;
}

._pagination_5c4sm_176 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid #f1f2f4;
}
._pagination_5c4sm_176 ._pagination-numbers_5c4sm_184 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._paginationArrow_5c4sm_190 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #f1f2f4;
  border-radius: 8px;
  background: #fff;
  color: #2f333c;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
._paginationArrow_5c4sm_190:hover:not(:disabled) {
  background: #f5f5f6;
  border-color: #e8e8e9;
}
._paginationArrow_5c4sm_190:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-number {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #f1f2f4;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #2f333c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination-number:hover {
  background: #f5f5f6;
  border-color: #e8e8e9;
}

.pagination-number.active {
  background: #00A9CE;
  border-color: #00A9CE;
  color: #fff;
}._section_1ekol_1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._header_1ekol_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._title_1ekol_13 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #2f333c;
}

._grid_1ekol_21 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

._card_1ekol_27 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-left: 4px solid #707a8f;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
._card_1ekol_27:hover {
  border-color: #d3d6dc;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
._card_1ekol_27:focus-visible {
  outline: 2px solid #00A9CE;
  outline-offset: 2px;
}

._accent-red_1ekol_51 {
  border-left-color: #00A9CE;
}

._accent-amber_1ekol_55 {
  border-left-color: #f59e0b;
}

._accent-blue_1ekol_59 {
  border-left-color: #3b82f6;
}

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

._cardLabel_1ekol_70 {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #707a8f;
  line-height: 18px;
}

._cardArrow_1ekol_78 {
  color: #707a8f;
  flex-shrink: 0;
}

._cardValue_1ekol_83 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: #14181f;
}

._cardHint_1ekol_91 {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #707a8f;
  line-height: 16px;
}._root_12r0j_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: radial-gradient(120% 60% at 0% 0%, rgba(139, 92, 246, 0.07), transparent 55%), radial-gradient(120% 60% at 100% 100%, rgba(59, 130, 246, 0.08), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
}

._header_12r0j_14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._title_12r0j_20 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
}

._body_12r0j_29 {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
@media (max-width: 760px) {
  ._body_12r0j_29 {
    grid-template-columns: 1fr;
  }
}

._chartWrap_12r0j_41 {
  min-width: 0;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empty_12r0j_49 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #707a8f;
}

._legend_12r0j_55 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._legendItem_12r0j_64 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(232, 232, 233, 0.8);
  backdrop-filter: blur(2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
._legendItem_12r0j_64:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

._legendRow_12r0j_83 {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1/2;
}

._legendDot_12r0j_90 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

._legendLabel_12r0j_99 {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2f333c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

._legendCount_12r0j_110 {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
  grid-column: 2/3;
  grid-row: 1/2;
}

._legendBar_12r0j_119 {
  grid-column: 1/2;
  grid-row: 2/3;
  height: 6px;
  border-radius: 999px;
  background: #f1f2f4;
  overflow: hidden;
}

._legendBarFill_12r0j_128 {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

._legendPct_12r0j_134 {
  grid-column: 2/3;
  grid-row: 2/3;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._legendEmpty_12r0j_143 {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #707a8f;
  text-align: center;
  padding: 16px;
}._root_1h997_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: radial-gradient(120% 60% at 100% 0%, rgba(6, 182, 212, 0.08), transparent 55%), radial-gradient(120% 60% at 0% 100%, rgba(139, 92, 246, 0.08), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
}

._header_1h997_14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

._title_1h997_22 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
}

._chips_1h997_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._chip_1h997_31 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(232, 232, 233, 0.9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(4px);
  font-family: "Inter", sans-serif;
}

._chipLabel_1h997_51 {
  font-size: 11px;
  font-weight: 500;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._chipValue_1h997_59 {
  font-size: 14px;
  font-weight: 700;
  color: #14181f;
}

._chipSuccess_1h997_65 ._chipValue_1h997_59 {
  color: #6d28d9;
}

._chipCompletion_1h997_69 ._chipValue_1h997_59 {
  color: #0891b2;
}

._chartWrap_1h997_73 {
  min-height: 300px;
  margin: 0 -8px;
}

._empty_1h997_78 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #707a8f;
  text-align: center;
  padding: 32px;
}._pageContainer_5slkw_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._infoCardGrid_5slkw_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

._periodBar_5slkw_13 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

._periodLabel_5slkw_20 {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #707a8f;
}

._periodSegmented_5slkw_27 {
  display: inline-flex;
  padding: 2px;
  background: #f1f2f4;
  border-radius: 8px;
}

._periodButton_5slkw_34 {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
._periodButton_5slkw_34:hover {
  color: #14181f;
}

._periodButtonActive_5slkw_50 {
  background: #fff;
  color: #14181f;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

._chartsRow_5slkw_56 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 1024px) {
  ._chartsRow_5slkw_56 {
    grid-template-columns: 1fr;
  }
}

._tablesRow_5slkw_67 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  min-height: 680px;
}
._tablesRow_5slkw_67[data-single=true] {
  grid-template-columns: 1fr;
}
@media (max-width: 1024px) {
  ._tablesRow_5slkw_67 {
    grid-template-columns: 1fr;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.datepicker-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.datepicker-container .datepicker-label {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5%;
  color: #14181f;
  margin-bottom: 4px;
  transition: color 250ms;
}
.datepicker-container .datepicker-label.focused {
  color: var(--color-primary, #00A9CE);
}
.datepicker-container .datepicker-label.error {
  color: var(--color-error, #ff5630);
}
.datepicker-container .datepicker-label.disabled {
  color: var(--color-neutral-dark, #bdbdbd);
}
.datepicker-container .datepicker-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 40px;
  max-height: 40px;
}
.datepicker-container .datepicker-input-wrapper .datepicker-start-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  transition: color 250ms;
  pointer-events: none;
}
.datepicker-container .datepicker-input-wrapper .datepicker-input {
  width: 100%;
  font-size: 16px;
  transition: border-color 250ms ease;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}
.datepicker-container .datepicker-input-wrapper .datepicker-input:hover {
  border-color: var(--color-primary, #00A9CE);
  cursor: pointer;
}
.datepicker-container .datepicker-input-wrapper .datepicker-input:focus {
  caret-color: var(--color-primary, #00A9CE);
}
.datepicker-container .datepicker-input-wrapper .datepicker-input:disabled {
  cursor: not-allowed;
  background-color: var(--color-neutral-darker, #f5f5f5);
  color: #8b98a6;
}
.datepicker-container .datepicker-input-wrapper .datepicker-end-icons {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.datepicker-container .datepicker-input-wrapper .datepicker-end-icons .datepicker-clear {
  background: #f6f7f8;
  width: 16px;
  height: 16px;
  border: none;
  color: var(--color-neutral-dark);
  cursor: pointer;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 250ms;
}
.datepicker-container .datepicker-input-wrapper .datepicker-end-icons .datepicker-clear:hover {
  background-color: var(--color-neutral-darker);
  color: var(--color-error);
}
.datepicker-container .datepicker-input-wrapper .datepicker-end-icons .datepicker-arrow-icon {
  display: flex;
  align-items: center;
  transition: color 250ms, transform 250ms;
}
.datepicker-container .datepicker-input-wrapper .datepicker-end-icons .datepicker-arrow-icon svg {
  transition: transform 250ms;
}
.datepicker-container.standard .datepicker-input {
  border: 1px solid #e8e8e9;
  color: var(--color-neutral-dark);
  border-radius: 8px;
  transition: border-color 250ms;
  padding: 10px 12px 10px 40px;
  border: 1px solid #e8e8e9;
  min-height: 40px;
  max-height: 40px;
}
.datepicker-container.standard.hovered .datepicker-input {
  border-color: var(--color-light, #c1c1c1);
}
.datepicker-container.standard.focused .datepicker-input {
  border-color: var(--color-primary, #00A9CE);
}
.datepicker-container.standard.focused .datepicker-icons .datepicker-calendar-icon {
  color: var(--color-primary, #00A9CE);
}
.datepicker-container.standard.error .datepicker-input {
  border-color: var(--color-error, #ff5630);
}
.datepicker-container.standard.disabled .datepicker-input {
  background-color: var(--color-neutral-darker, #f5f5f5);
  border-color: var(--color-neutral-darker, #ddd);
  color: #8b98a6;
  cursor: not-allowed;
}
.datepicker-container.outlined .datepicker-input {
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  transition: border-color 250ms;
  padding: 10px 12px 10px 40px;
  min-height: 40px;
  max-height: 40px;
}
.datepicker-container.outlined.hovered .datepicker-input {
  box-shadow: inset 0 0 0 1px var(--color-light);
}
.datepicker-container.outlined.focused .datepicker-input {
  border: 1px solid var(--color-primary, #00A9CE);
}
.datepicker-container.outlined.error .datepicker-input {
  box-shadow: inset 0 0 0 2px var(--color-error, #ff5630);
}
.datepicker-container.underline .datepicker-input {
  border: 1px solid var(--color-neutral-dark);
  border-radius: 6px;
  padding: 10px 12px 10px 40px;
  border: none;
  border-bottom: 1px solid var(--color-neutral, #ddd);
  transition: border-color 250ms;
  min-height: 40px;
  max-height: 40px;
}
.datepicker-container.underline.focused .datepicker-input {
  border-bottom-color: var(--color-primary, #00A9CE);
}
.datepicker-container.underline.error .datepicker-input {
  border-bottom-color: var(--color-error, #ff5630);
}
.datepicker-container .datepicker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid var(--color-neutral, #ddd);
  border-radius: 12px;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  padding: 16px;
}
.datepicker-container .datepicker-dropdown .datepicker-header {
  display: flex;
  border-radius: 8px;
  background-color: #f6f7f8;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.datepicker-container .datepicker-dropdown .datepicker-header .datepicker-nav-button {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-neutral-dark);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 250ms;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.datepicker-container .datepicker-dropdown .datepicker-header .datepicker-nav-button:hover {
  background-color: var(--color-primary);
  color: white;
}
.datepicker-container .datepicker-dropdown .datepicker-header .datepicker-month-year {
  font-weight: 600;
  color: var(--color-neutral-dark);
  font-size: 14px;
}
.datepicker-container .datepicker-dropdown .datepicker-header .datepicker-month-year.clickable {
  cursor: pointer;
  transition: all 250ms;
  padding: 4px 8px;
  border-radius: 6px;
}
.datepicker-container .datepicker-dropdown .datepicker-header .datepicker-month-year.clickable:hover {
  /* background-color: rgba(0, 169, 206, 0.1); */
  color: #00A9CE;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-weekdays .datepicker-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-dark);
  padding: 8px 0;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  row-gap: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-bg {
  background-color: #E6F7FB;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-bg.first-in-row {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-bg.first-in-row .datepicker-day {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-bg.last-in-row {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-bg.last-in-row .datepicker-day {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  font-size: 12px;
  color: var(--color-neutral-dark);
  transition: all 250ms;
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 500;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day:hover:not(.disabled):not(.other-month):not(.selected):not(.in-range) {
  background-color: #FFF4CC;
  color: #B76E00;
  border-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.other-month {
  color: #c1c7cd !important;
  opacity: 0.3;
  cursor: not-allowed;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.today {
  font-weight: 700;
  color: #fff;
  background-color: #00A9CE;
  border-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.selected {
  background-color: #00A9CE;
  color: white;
  font-weight: 600;
  border-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.in-range {
  background-color: #E6F7FB;
  color: #505862;
  border-radius: 0;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.range-start {
  background-color: #00A9CE;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  z-index: 2;
  /*                         &::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 50%;
                  height: 100%;
                  background-color: #E6F7FB;
              } */
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.range-end {
  background-color: #00A9CE;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  z-index: 2;
  /* 
              &::before {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 50%;
                  height: 100%;
                  background-color: #E6F7FB;

              } */
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.range-start.range-end {
  border-radius: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.range-start.range-end::before, .datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.range-start.range-end::after {
  display: none;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-days .datepicker-day.disabled {
  color: var(--color-neutral-light);
  cursor: not-allowed;
  opacity: 0.3;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-months .datepicker-month {
  background: none;
  border: none;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  font-size: 12px;
  color: var(--color-neutral-dark);
  transition: all 250ms;
  font-weight: 500;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-months .datepicker-month:hover {
  background-color: #FFF4CC;
  color: #B76E00;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-months .datepicker-month.current {
  font-weight: 700;
  color: #fff;
  background-color: #00A9CE;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-months .datepicker-month.selected {
  background-color: #00A9CE;
  color: white;
  font-weight: 600;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-years {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-years .datepicker-year {
  background: none;
  border: none;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  font-size: 12px;
  color: var(--color-neutral-dark);
  transition: all 250ms;
  font-weight: 500;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-years .datepicker-year:hover {
  background-color: #FFF4CC;
  color: #B76E00;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-years .datepicker-year.current {
  font-weight: 700;
  color: #fff;
  background-color: #00A9CE;
}
.datepicker-container .datepicker-dropdown .datepicker-calendar .datepicker-years .datepicker-year.selected {
  background-color: #00A9CE;
  color: white;
  font-weight: 600;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e8eaed;
  margin-top: 16px;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown {
  flex: 1;
  min-width: 0;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown .dropdown-container {
  min-width: 0;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown .dropdown-header {
  min-height: 40px;
  max-height: 40px;
  padding: 8px;
  font-size: 12px;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown .dropdown-header .dropdown-header-icon svg {
  width: 16px;
  height: 16px;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown .dropdown-header .dropdown-selected {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.datepicker-container .datepicker-dropdown .datepicker-time-selector .time-dropdown .dropdown-header .dropdown-icon svg {
  width: 18px;
  height: 18px;
}
.datepicker-container .datepicker-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-error, #ff5630);
}

.focused .datepicker-start-icon,
.focused .datepicker-end-icons .datepicker-arrow-icon {
  color: var(--color-primary, #00A9CE);
}

.error .datepicker-start-icon,
.error .datepicker-end-icons .datepicker-arrow-icon {
  color: var(--color-error, #ff5630);
}

.disabled .datepicker-start-icon,
.disabled .datepicker-end-icons .datepicker-arrow-icon {
  color: var(--color-neutral-dark, #bdbdbd);
}

.datepicker-arrow-icon {
  display: flex;
  align-items: center;
  transition: color 250ms, transform 250ms;
}
.datepicker-arrow-icon.open {
  transform: rotate(180deg);
}

/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}
.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}
.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}
.disabled {
  cursor: not-allowed;
}
.disabled > * {
  pointer-events: none;
}
* {
  font-family: "Inter", sans-serif;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 250ms;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
.page-header {
  margin-bottom: 24px;
}
.page-header__title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-neutral-dark, #212b36);
  margin: 0 0 20px 0;
}
.page-header__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header__actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.page-header__actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-header__search {
  width: 100%;
  max-width: 320px;
}
.page-header__search .input-container {
  margin-bottom: 0;
}
.page-header__search .input {
  padding-left: 40px;
}
.page-header__sort {
  position: relative;
}
.page-header__sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #dadfe3;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.page-header__sort-btn:hover {
  background-color: #f9fafb;
  border-color: #c4c4c4;
}
.page-header__sort-btn {
  /* Kırmızı sadece dropdown açıkken (tıklandığında), varsayılan durumda gri */
}
.page-header__sort-btn.active {
  background-color: #E6F7FB;
  border-color: var(--color-primary, #00A9CE);
}
.page-header__sort-btn.active svg path {
  stroke: var(--color-primary, #00A9CE);
}
.page-header__sort-btn {
  /* has-selection: sadece dropdown açıkken (active) kırmızı gösteriyoruz; kapalıyken gri kalır */
}
.page-header__sort-btn svg {
  color: #72808f;
}
.page-header__sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 215px;
  background-color: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 100;
  animation: sortDropdownFadeIn 0.2s ease;
}
.page-header__sort-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #212b36;
  cursor: pointer;
  transition: background-color 0.15s ease;
  gap: 8px;
}
.page-header__sort-option:hover {
  background-color: #f9fafb;
}
.page-header__sort-option.selected {
  color: var(--color-primary, #00A9CE);
  background-color: #E6F7FB;
}
.page-header__filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  height: 44px;
  min-width: 100px;
  width: 100px;
  box-sizing: border-box;
  border: 1px solid #dadfe3;
  border-radius: 8px;
  background-color: #ffffff;
  color: #505862;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  outline: none;
}
.page-header__filter-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(231, 33, 43, 0.25);
}
.page-header__filter-btn:hover {
  background-color: #f9fafb;
  border-color: #c4c4c4;
}
.page-header__filter-btn.active {
  background-color: #ffeff0;
  border: 1px solid var(--color-primary, #00A9CE);
  color: var(--color-primary, #00A9CE);
}
.page-header__filter-btn.active svg path {
  stroke: var(--color-primary, #00A9CE);
}
.page-header__filter-btn svg {
  color: #72808f;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.page-header__filter-text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08px;
}
.page-header__view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background-color: #f1f1f1;
  border-radius: 8px;
}
.page-header__view-toggle .view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: #72808f;
  cursor: pointer;
  transition: all 0.2s ease;
}
.page-header__view-toggle .view-toggle-btn:hover {
  background-color: #dadfe3;
  color: #505862;
}
.page-header__view-toggle .view-toggle-btn.active {
  background-color: #ffffff;
  color: var(--color-primary, #00A9CE);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.page-header__view-toggle .view-toggle-btn svg {
  color: currentColor;
}
.page-header__filter-panel {
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease;
}
.page-header__filter-panel--open {
  position: relative;
  z-index: 110;
  max-height: 1200px;
  opacity: 1;
  overflow: visible;
  animation: slideDown 0.3s ease;
}
.filter-panel {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.filter-panel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.filter-panel__fields .filter-field .dropdown-container,
.filter-panel__fields .filter-field .input-container {
  margin-bottom: 0;
}
.filter-panel__fields .filter-field__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
}
.filter-panel__fields .filter-field__daterange-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-panel__fields .filter-field__daterange-separator {
  color: #72808f;
  font-weight: 500;
}
.filter-panel__fields .filter-field--daterange {
  grid-column: span 2;
}
.filter-panel__fields .filter-field--daterange .turkish-datetime-picker {
  flex: 1;
}
.filter-panel__fields .filter-field__number-with-suffix {
  display: flex;
  align-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s;
}
.filter-panel__fields .filter-field__number-with-suffix:focus-within {
  border-color: #00A9CE;
}
.filter-panel__fields .filter-field__number-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-size: 14px;
  color: #14181f;
  background: transparent;
  min-width: 0;
}
.filter-panel__fields .filter-field__number-input::placeholder {
  color: #9ca3af;
}
.filter-panel__fields .filter-field__number-input {
  /* Hide number input spinners */
  -moz-appearance: textfield;
}
.filter-panel__fields .filter-field__number-input::-webkit-outer-spin-button, .filter-panel__fields .filter-field__number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-panel__fields .filter-field__number-suffix {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #505766;
  background: #f9fafb;
  border-left: 1px solid #d0d5dd;
  white-space: nowrap;
}
.filter-panel__fields .filter-field__range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.filter-panel__fields .filter-field__range-value {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}
.filter-panel__fields .filter-field__range-slider {
  position: relative;
  padding-top: 4px;
  padding-bottom: 4px;
}
.filter-panel__fields .filter-field__range-track {
  position: relative;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
}
.filter-panel__fields .filter-field__range-fill {
  position: absolute;
  height: 100%;
  background: #00A9CE;
  border-radius: 2px;
}
.filter-panel__fields .filter-field__range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.filter-panel__fields .filter-field__range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00A9CE;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.filter-panel__fields .filter-field__range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00A9CE;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.filter-panel__fields .filter-field__range-input--min {
  z-index: 3;
}
.filter-panel__fields .filter-field__range-input--max {
  z-index: 2;
}
.filter-panel__fields .filter-field__range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
}
.filter-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.filter-panel__actions button {
  min-width: 120px;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sortDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .page-header__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header__actions-left {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header__actions-right {
    justify-content: space-between;
  }
  .page-header__search {
    max-width: 100%;
  }
  .filter-panel__fields {
    grid-template-columns: 1fr;
  }
  .filter-panel__actions {
    flex-direction: column-reverse;
  }
  .filter-panel__actions button {
    width: 100%;
  }
}.file-image {
  display: block;
  max-width: 100%;
  height: auto;
}
.file-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  min-height: 80px;
  color: #999;
}
.file-image__placeholder-icon {
  font-size: 24px;
  line-height: 1;
  opacity: 0.5;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.catalog-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  overflow: hidden;
  transition: all 250ms ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  gap: 16px;
}
.catalog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.catalog-card--clickable {
  cursor: pointer;
}
.catalog-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-neutral-light, #f1f1f1);
  border-radius: 8px;
}
.catalog-card__image .file-image,
.catalog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}
.catalog-card__image .file-image--placeholder {
  min-height: 100%;
}
.catalog-card__image:hover .file-image, .catalog-card__image:hover img {
  transform: scale(1.05);
}
.catalog-card__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.catalog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.catalog-card__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.catalog-card__duration {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 12px;
  font-weight: 18px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
}
.catalog-card__duration span {
  white-space: nowrap;
}
.catalog-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.catalog-card__title {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-card__description {
  font-size: 12px;
  line-height: 18px;
  color: #707a8f;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-card__educator {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
  margin: 0;
  font-weight: 400;
}
.catalog-card__status-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.catalog-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #72808f;
  font-size: 14px;
}
.catalog-card__status:not(.catalog-card__status--participant):not(.catalog-card__status--datetime):not(.catalog-card__status--deadline) {
  margin-top: auto;
  padding-top: 8px;
}
.catalog-card__status svg {
  flex-shrink: 0;
}
.catalog-card__status span {
  font-weight: 400;
}
.catalog-card__status--deadline span {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
}
.catalog-card__status--participant span {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
}
.catalog-card__status--datetime span {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
}
.catalog-card__action {
  margin-top: 12px;
}
.catalog-card__button {
  width: 100%;
  justify-content: center;
  border: 1px solid #b6b7ba !important;
  border-radius: 8px;
  color: #14181f;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  padding: 10px 14px;
}
.catalog-card__button:hover {
  background-color: #f6f7f8;
  border: 1px solid #b6b7ba !important;
  color: #14181f;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._filterContainer_1793n_35 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._catalogGrid_1793n_41 {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
._catalogGrid_1793n_41._grid_1793n_46 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
._catalogGrid_1793n_41._list_1793n_49 {
  grid-template-columns: 1fr;
}

._loadingState_1793n_53,
._errorMessage_1793n_54,
._emptyState_1793n_55 {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
  color: var(--text-secondary, #637381);
}

._errorMessage_1793n_54 {
  color: var(--error, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}

._loadMore_1793n_68 {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.confirm-modal {
  background-color: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
  animation: scaleIn 0.2s ease-out;
}
.confirm-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 24px;
  position: relative;
  border-bottom: 1px solid #E8E8E9;
}
.confirm-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: #E8F7F1;
  border-radius: 12px;
  color: #93D9C0;
  border: 1px solid #93D9C0;
}
.confirm-modal__icon--danger {
  background-color: #ffeff0;
  color: #fb3748;
  border-color: #fb3748;
}
.confirm-modal__title {
  margin: 0;
  font-size: 18px;
  line-height: 28x;
  font-weight: 600;
  letter-spacing: 0.08px;
  color: #14181F;
  flex: 1;
  color: #2F333C;
}
.confirm-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: #707A8F;
  transition: all 0.2s ease;
}
.confirm-modal__close:hover {
  background-color: #F6F7F8;
  color: #14181F;
}
.confirm-modal__body {
  padding: 24px;
  gap: 24px;
  text-align: left;
}
.confirm-modal__message {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.08px;
  color: #666F82;
  text-align: left;
}
.confirm-modal__message .highlight-success {
  color: #15AC77;
  font-weight: 700;
  text-decoration: underline;
}
.confirm-modal__message .highlight-error {
  color: #FE5B65;
  font-weight: 700;
  text-decoration: underline;
}
.confirm-modal__message .highlight-warning {
  color: #F59E0B;
  font-weight: 700;
  text-decoration: underline;
}
.confirm-modal__poll-name {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #14181F;
}
.confirm-modal__exam-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.confirm-modal__stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #FFFFFF;
  border: 1px solid #E8E8E9;
  border-radius: 12px;
}
.confirm-modal__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
}
.confirm-modal__stat-icon--success {
  background-color: #E8F7F1;
  color: #15AC77;
}
.confirm-modal__stat-icon--purple {
  background-color: #F3EEFF;
  color: #8B5CF6;
}
.confirm-modal__stat-icon--blue {
  background-color: #EEF4FF;
  color: #3B82F6;
}
.confirm-modal__stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.confirm-modal__stat-value {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5%;
  color: #14181F;
}
.confirm-modal__stat-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #707A8F;
}
.confirm-modal__exam-description {
  padding: 24px;
  background-color: #FFFFFF;
  border: 1px solid #E8E8E9;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #2F333C;
}
.confirm-modal__poll-dates {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #F6F7F8;
  border-radius: 12px;
}
.confirm-modal__date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #707A8F;
}
.confirm-modal__date-item svg {
  flex-shrink: 0;
}
.confirm-modal__date-label {
  font-size: 14px;
  font-weight: 500;
  color: #707A8F;
}
.confirm-modal__date-value {
  font-size: 14px;
  font-weight: 600;
  color: #14181F;
}
.confirm-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid #E8E8E9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}._sidebar_1cwhv_1 {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._cover_1cwhv_11 {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
}

._title_1cwhv_18 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

._block_1cwhv_24 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._subhead_1cwhv_30 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

._progressHeader_1cwhv_38 {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

._milestones_1cwhv_44 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._milestoneBtn_1cwhv_53 {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
}
._milestoneBtn_1cwhv_53:hover {
  background: rgba(0, 0, 0, 0.04);
}

._milestoneIcon_1cwhv_68 {
  width: 18px;
  display: inline-flex;
  justify-content: center;
}

._dot_1cwhv_74 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  display: inline-block;
}

._milestone-done_1cwhv_82 ._dot_1cwhv_74,
._milestone-done_1cwhv_82 ._milestoneIcon_1cwhv_68 {
  color: #52c41a;
}

._milestone-active_1cwhv_87 ._dot_1cwhv_74 {
  background: #1677ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.2);
}

._milestone-upcoming_1cwhv_92 {
  opacity: 0.55;
}

._milestoneLabel_1cwhv_96 {
  flex: 1;
}

._ctaWrap_1cwhv_100 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._cta_1cwhv_100 {
  font-weight: 600;
}

._cta-success_1cwhv_110 {
  background: #52c41a !important;
  border-color: #52c41a !important;
  color: #fff !important;
}

._ctaPulse_1cwhv_116 {
  animation: _ctaPulse_1cwhv_116 1.8s infinite;
}

@keyframes _ctaPulse_1cwhv_116 {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(22, 119, 255, 0);
  }
}
._ctaHint_1cwhv_128 {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}

._meta_1cwhv_134 {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
._meta_1cwhv_134 dt {
  color: rgba(0, 0, 0, 0.55);
}
._meta_1cwhv_134 dd {
  margin: 0;
}

._instructors_1cwhv_148 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

._cancelBtn_1cwhv_158 {
  all: unset;
  padding: 8px 12px;
  border: 1px solid rgba(255, 77, 79, 0.4);
  color: #ff4d4f;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}
._cancelBtn_1cwhv_158:hover {
  background: rgba(255, 77, 79, 0.08);
}._wrapper_1gwh4_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  padding: 32px 16px;
}

._card_1gwh4_9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  padding: 40px 32px 32px;
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

._iconRing_1gwh4_24 {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4338ca;
  box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.08);
}

._title_1gwh4_36 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}

._subtitle_1gwh4_44 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748b;
  max-width: 420px;
}

._action_1gwh4_52 {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
._action_1gwh4_52 > * {
  min-width: 180px;
}._hero_14rwu_1 {
  display: flex;
  gap: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0;
  scroll-margin-top: 24px;
}

._cover_14rwu_11 {
  width: 240px;
  flex-shrink: 0;
  background-color: #f1f5f9;
  background-size: cover;
  background-position: center;
  border-right: 1px solid #e2e8f0;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
}

._body_14rwu_22 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
  flex: 1;
  min-width: 0;
}

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

._title_14rwu_37 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 28px;
  letter-spacing: -0.02em;
}

._code_14rwu_46 {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.04em;
}

._metaRow_14rwu_53 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 6px;
}

._metaItem_14rwu_60 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  line-height: 18px;
}
._metaItem_14rwu_60 > :first-child {
  color: #94a3b8;
}

@media (max-width: 720px) {
  ._hero_14rwu_1 {
    flex-direction: column;
  }
  ._cover_14rwu_11 {
    width: 100%;
    height: 160px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 14px 14px 0 0;
  }
  ._body_14rwu_22 {
    padding: 20px 20px;
  }
}
._section_g2qsx_2 {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 20px 24px;
  scroll-margin-top: 24px;
}

._header_g2qsx_10 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
._header_g2qsx_10 h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

._hero_g2qsx_22 {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}
@media (max-width: 767px) {
  ._hero_g2qsx_22 {
    grid-template-columns: 1fr;
  }
}
._hero_g2qsx_22 img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
}

._metaGrid_g2qsx_39 {
  display: grid;
  grid-template-columns: repeat(2, max-content 1fr);
  gap: 4px 16px;
  font-size: 14px;
}
._metaGrid_g2qsx_39 dt {
  color: rgba(0, 0, 0, 0.55);
}
._metaGrid_g2qsx_39 dd {
  margin: 0;
}

._chips_g2qsx_52 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

._description_g2qsx_59 {
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  white-space: pre-wrap;
}

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

._resourceRow_g2qsx_71 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
._resourceRow_g2qsx_71:hover {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

._resourceLeft_g2qsx_89 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

._fileBadge_g2qsx_97 {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, #64748b, #475569);
  text-transform: uppercase;
}
._fileBadge_g2qsx_97[data-ext=pdf] {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
._fileBadge_g2qsx_97[data-ext=doc], ._fileBadge_g2qsx_97[data-ext=docx] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
._fileBadge_g2qsx_97[data-ext=xls], ._fileBadge_g2qsx_97[data-ext=xlsx] {
  background: linear-gradient(135deg, #10b981, #047857);
}
._fileBadge_g2qsx_97[data-ext=ppt], ._fileBadge_g2qsx_97[data-ext=pptx] {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}
._fileBadge_g2qsx_97[data-ext=zip], ._fileBadge_g2qsx_97[data-ext=rar] {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
._fileBadge_g2qsx_97[data-ext=png], ._fileBadge_g2qsx_97[data-ext=jpg], ._fileBadge_g2qsx_97[data-ext=jpeg], ._fileBadge_g2qsx_97[data-ext=gif] {
  background: linear-gradient(135deg, #ec4899, #be185d);
}
._fileBadge_g2qsx_97[data-ext=mp4], ._fileBadge_g2qsx_97[data-ext=mov] {
  background: linear-gradient(135deg, #06b6d4, #0e7490);
}

._resourceInfo_g2qsx_134 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._resourceName_g2qsx_141 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._resourceMeta_g2qsx_150 {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

._resourceMetaDot_g2qsx_158 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.3);
}

._downloadButton_g2qsx_165 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease;
}
._downloadButton_g2qsx_165:hover {
  background: #b91c1c;
  color: #fff;
}

._downloadDisabled_g2qsx_184 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.35);
  background: rgba(15, 23, 42, 0.03);
}

._headerCount_g2qsx_195 {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.5);
  background: rgba(15, 23, 42, 0.05);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ─── Sertifika kartı ─────────────────────────────────────── */
._certificateCard_g2qsx_205 {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 640px) {
  ._certificateCard_g2qsx_205 {
    grid-template-columns: 1fr;
  }
}

._certificateVisual_g2qsx_217 {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 132px;
}
._certificateVisual_g2qsx_217::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4), transparent 50%), radial-gradient(circle at 80% 80%, rgba(180, 83, 9, 0.15), transparent 50%);
}

._certificateIcon_g2qsx_234 {
  position: relative;
  z-index: 1;
  font-size: 56px;
  filter: drop-shadow(0 4px 8px rgba(180, 83, 9, 0.25));
}

._certificateInfo_g2qsx_241 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

._certificateBadge_g2qsx_248 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

._certificateMetaList_g2qsx_261 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 480px) {
  ._certificateMetaList_g2qsx_261 {
    grid-template-columns: 1fr;
  }
}

._certificateMetaItem_g2qsx_272 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.05);
}

._certificateMetaLabel_g2qsx_282 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(15, 23, 42, 0.5);
}

._certificateMetaValue_g2qsx_290 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.9);
  word-break: break-all;
}

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

._certActionPrimary_g2qsx_303,
._certActionSecondary_g2qsx_304 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

._certActionPrimary_g2qsx_303 {
  background: #b91c1c;
  color: #fff;
}
._certActionPrimary_g2qsx_303:hover {
  background: #991b1b;
  color: #fff;
}

._certActionSecondary_g2qsx_304 {
  background: #fff;
  color: rgba(15, 23, 42, 0.85);
  border-color: rgba(15, 23, 42, 0.12);
}
._certActionSecondary_g2qsx_304:hover {
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

._certificatePreparing_g2qsx_337 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

._certificatePreparingIcon_g2qsx_347 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

._certificatePreparingText_g2qsx_359 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
._certificatePreparingText_g2qsx_359 strong {
  color: #92400e;
  font-weight: 600;
}
._certificatePreparingText_g2qsx_359 span {
  color: rgba(146, 64, 14, 0.8);
}

/* ─── Modül kart (Sınav / Anket ortak) ─────────────────────── */
._moduleCard_g2qsx_374 {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 640px) {
  ._moduleCard_g2qsx_374 {
    grid-template-columns: 1fr;
  }
}

._moduleVisual_g2qsx_386 {
  position: relative;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 88px;
  font-size: 38px;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08));
}
._moduleVisual_g2qsx_386[data-tone=exam] {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
}
._moduleVisual_g2qsx_386[data-tone=survey] {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%);
}
._moduleVisual_g2qsx_386[data-tone=passed] {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #6ee7b7 100%);
}
._moduleVisual_g2qsx_386[data-tone=failed] {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 50%, #fca5a5 100%);
}
._moduleVisual_g2qsx_386[data-tone=locked] {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
}

._moduleVisualIcon_g2qsx_413 {
  position: relative;
  z-index: 1;
}

._moduleBody_g2qsx_418 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

._moduleTitleRow_g2qsx_425 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._moduleName_g2qsx_432 {
  font-size: 15px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.9);
}

._moduleChip_g2qsx_438 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.7);
}

._moduleChipPrimary_g2qsx_450 {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

._moduleChipSuccess_g2qsx_455 {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

._moduleChipDanger_g2qsx_460 {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

._moduleChipWarning_g2qsx_465 {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

._statusBanner_g2qsx_470 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
._statusBanner_g2qsx_470[data-tone=success] {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  color: #047857;
}
._statusBanner_g2qsx_470[data-tone=danger] {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}
._statusBanner_g2qsx_470[data-tone=info] {
  background: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}
._statusBanner_g2qsx_470[data-tone=warning] {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
  color: #b45309;
}

._statusBannerIcon_g2qsx_501 {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

._attemptList_g2qsx_507 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._attemptListTitle_g2qsx_516 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(15, 23, 42, 0.5);
  margin: 0 0 6px 0;
}

._attemptItem_g2qsx_525 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 8px;
  font-size: 13px;
}

._attemptNumber_g2qsx_536 {
  flex-shrink: 0;
  min-width: 28px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.5);
  font-size: 12px;
}

._attemptDate_g2qsx_544 {
  flex: 1;
  color: rgba(15, 23, 42, 0.65);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._attemptResult_g2qsx_553 {
  flex-shrink: 0;
  margin-left: auto;
}

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

._moduleActionPrimary_g2qsx_564,
._moduleActionSecondary_g2qsx_565,
._moduleActionDanger_g2qsx_566 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

._moduleActionPrimary_g2qsx_564 {
  background: #b91c1c;
  color: #fff;
}
._moduleActionPrimary_g2qsx_564:hover:not(:disabled) {
  background: #991b1b;
}

._moduleActionDanger_g2qsx_566 {
  background: #f59e0b;
  color: #fff;
}
._moduleActionDanger_g2qsx_566:hover:not(:disabled) {
  background: #d97706;
}

._moduleActionSecondary_g2qsx_565 {
  background: #fff;
  color: rgba(15, 23, 42, 0.85);
  border-color: rgba(15, 23, 42, 0.12);
}
._moduleActionSecondary_g2qsx_565:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

/* Durum badge satırı: "Geçti / Kaldı / Tamamlandı" net gösterimi. */
._statusBadgeRow_g2qsx_607 {
  display: flex;
  margin-bottom: 12px;
}

._statusBadge_g2qsx_607 {
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 600;
  line-height: 1;
}

/* Yumuşak bilgi notu — disabled buton yerine "neden engellendim" açıklaması. */
._infoNote_g2qsx_621 {
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}._grid_136dx_1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

._card_136dx_7 {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}
._card_136dx_7 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._card_136dx_7 header h3 {
  margin: 0;
  font-size: 15px;
}

._meta_136dx_26 {
  display: flex;
  gap: 12px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
}

._locationLink_136dx_33 {
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
._locationLink_136dx_33:hover {
  color: #1677ff;
  text-decoration: underline;
}

._pastNote_136dx_44 {
  font-size: 13px;
  color: #52c41a;
}

._joinPulse_136dx_49 {
  animation: _vcPulse_136dx_1 1.8s infinite;
}

@keyframes _vcPulse_136dx_1 {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(22, 119, 255, 0);
  }
}
._filesSection_136dx_61 {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._filesToggle_136dx_69 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.65);
  font-size: 13px;
}
._filesToggle_136dx_69:hover {
  color: #1677ff;
}

._filesChevron_136dx_84 {
  margin-left: auto;
  font-size: 12px;
}

._filesList_136dx_89 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._filesItem_136dx_98 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.75);
}

._filesName_136dx_107 {
  flex: 1;
  word-break: break-word;
}._layout_10vhc_1 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}
@media (max-width: 1023px) {
  ._layout_10vhc_1 {
    grid-template-columns: 1fr;
  }
}

._layoutSolo_10vhc_12 {
  display: block;
}

._nav_10vhc_16 {
  min-width: 0;
}

._accordion_10vhc_20 {
  background: transparent;
}

._chapterHead_10vhc_24 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

._chapterMeta_10vhc_31 {
  color: rgba(0, 0, 0, 0.55);
  font-size: 12px;
}

._objList_10vhc_36 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._objRow_10vhc_42 {
  all: unset;
  display: grid;
  grid-template-columns: 20px 1fr max-content 20px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
._objRow_10vhc_42:hover {
  background: rgba(0, 0, 0, 0.04);
}

._objRowActive_10vhc_57 {
  background: rgba(22, 119, 255, 0.08);
}

._objIcon_10vhc_61 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

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

._objStatus_10vhc_74 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

._playerPane_10vhc_81 {
  min-width: 0;
}

._objDuration_10vhc_85 {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}

._done_10vhc_90 {
  color: #52c41a;
}

._inProg_10vhc_94 {
  color: #faad14;
}

._notStarted_10vhc_98 {
  color: rgba(0, 0, 0, 0.4);
}

._player_10vhc_81 {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 16px;
  min-height: 360px;
}

._playerEmpty_10vhc_109 {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.45);
}

._playerHeader_10vhc_117 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
._playerHeader_10vhc_117 h3 {
  margin: 0;
  font-size: 15px;
}

._playerNav_10vhc_129 {
  display: flex;
  gap: 8px;
}

._playerVideo_10vhc_134 {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 70vh;
  background: #000;
  border-radius: 6px;
  display: block;
}

._playerImage_10vhc_143 {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

._playerJitsi_10vhc_152 {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 75vh;
  border: none;
  border-radius: 6px;
  background: #000;
  display: block;
  overflow: hidden;
}

._playerLink_10vhc_163 {
  padding: 24px;
  text-align: center;
}

._playerFileCard_10vhc_168 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  margin: 48px auto 0;
  max-width: 720px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #fff;
}

._playerFileLeft_10vhc_181 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._fileBadge_10vhc_188 {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  background: linear-gradient(135deg, #64748b, #475569);
  text-transform: uppercase;
}
._fileBadge_10vhc_188[data-ext=pdf] {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
._fileBadge_10vhc_188[data-ext=doc], ._fileBadge_10vhc_188[data-ext=docx] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
._fileBadge_10vhc_188[data-ext=xls], ._fileBadge_10vhc_188[data-ext=xlsx] {
  background: linear-gradient(135deg, #10b981, #047857);
}
._fileBadge_10vhc_188[data-ext=ppt], ._fileBadge_10vhc_188[data-ext=pptx] {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}
._fileBadge_10vhc_188[data-ext=zip], ._fileBadge_10vhc_188[data-ext=rar] {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
._fileBadge_10vhc_188[data-ext=png], ._fileBadge_10vhc_188[data-ext=jpg], ._fileBadge_10vhc_188[data-ext=jpeg], ._fileBadge_10vhc_188[data-ext=gif] {
  background: linear-gradient(135deg, #ec4899, #be185d);
}
._fileBadge_10vhc_188[data-ext=mp3], ._fileBadge_10vhc_188[data-ext=wav], ._fileBadge_10vhc_188[data-ext=m4a] {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
}
._fileBadge_10vhc_188[data-ext=mp4], ._fileBadge_10vhc_188[data-ext=mov], ._fileBadge_10vhc_188[data-ext=webm] {
  background: linear-gradient(135deg, #06b6d4, #0e7490);
}

._playerFileInfo_10vhc_228 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._playerFileName_10vhc_235 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._playerFileMeta_10vhc_244 {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.5);
}

._playerFileActions_10vhc_249 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._playerAudio_10vhc_257 {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

._downloadButton_10vhc_263 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
._downloadButton_10vhc_263:hover {
  background: #b91c1c;
  color: #fff;
}

._questionOverlay_10vhc_283 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483646;
  padding: 16px;
}

._questionCard_10vhc_294 {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
._questionCard_10vhc_294 h4 {
  margin: 0 0 16px;
  font-size: 18px;
}

._questionOptions_10vhc_307 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

._questionOption_10vhc_307 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
._questionOption_10vhc_307:hover {
  border-color: #1677ff;
}

._questionOptionSelected_10vhc_328 {
  border-color: #1677ff;
  background: rgba(22, 119, 255, 0.06);
}

._questionError_10vhc_333 {
  margin: 0 0 12px;
  color: #ff4d4f;
  font-size: 13px;
}

._questionOk_10vhc_339 {
  margin: 0 0 12px;
  color: #52c41a;
  font-size: 13px;
}

._questionActions_10vhc_345 {
  display: flex;
  justify-content: flex-end;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._card_19hg2_36 {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  min-height: 192px;
  transition: box-shadow 0.2s ease;
}
._card_19hg2_36:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._card__imageWrap_19hg2_51 {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}

._card__rawHtml_19hg2_60 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
  /* Sertifika 842x595px; scale(0.19) ile 160x113 görünür, layout'ta yer kaplamasın diye absolute */
}
._card__rawHtml_19hg2_60 > * {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0.19);
  transform-origin: top left;
}

._card__image_19hg2_51 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._card__placeholder_19hg2_82 {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  background: linear-gradient(145deg, #faf8f5 0%, #ebe6df 100%);
  border: 1px solid #e0d9d0;
  color: #8b7355;
  font-family: Georgia, serif;
}

._card__placeholderTitle_19hg2_98 {
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

._card__placeholderSub_19hg2_104 {
  font-size: 8px;
  margin-bottom: 8px;
}

._card__placeholderName_19hg2_109 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

._card__placeholderMeta_19hg2_115 {
  font-size: 8px;
  letter-spacing: 0.05em;
}

._card__body_19hg2_120 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._card__header_19hg2_128 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

._card__title_19hg2_135 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
  margin: 0;
  flex: 1;
  min-width: 0;
}

._card__actions_19hg2_146 {
  position: relative;
  flex-shrink: 0;
}

._card__menuTrigger_19hg2_151 {
  min-width: 32px;
  padding: 4px;
  color: #707a8f;
}

._card__menu_19hg2_151 {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 140px;
}

._card__menuItem_19hg2_172 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  color: #14181f;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
._card__menuItem_19hg2_172:hover {
  background: #f5f5f5;
}

._card__menuIcon_19hg2_190 {
  flex-shrink: 0;
  color: #707a8f;
}

._card__details_19hg2_195 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._card__detail_19hg2_195 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
  color: #14181f;
}

._card__detailIcon_19hg2_213 {
  flex-shrink: 0;
  color: #707a8f;
}

._card__detailLabel_19hg2_218 {
  color: #707a8f;
  flex-shrink: 0;
}

._card__detailValue_19hg2_223 {
  color: #14181f;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._pageContainer_z3dqp_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._tabsWrapper_z3dqp_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

._certificateGrid_z3dqp_15 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 24px;
}

._emptyState_z3dqp_21 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_z3dqp_30 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_z3dqp_42 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_z3dqp_49 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_z3dqp_58 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_z3dqp_68 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_z3dqp_68 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_z3dqp_68 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_z3dqp_68 .pagination-number._active_z3dqp_92 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_z3dqp_68 .pagination-number:hover:not(._active_z3dqp_92) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_z3dqp_68 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_z3dqp_113 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_z3dqp_113:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_z3dqp_113:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_z3dqp_113 svg {
  width: 16px;
  height: 16px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1rem 0;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb__link {
  color: #72808f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
  transition: color 250ms ease-in-out;
  cursor: pointer;
}
.breadcrumb__link:hover {
  color: var(--color-primary, #00A9CE);
  text-decoration: none;
}
.breadcrumb__link--button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.breadcrumb__separator {
  display: flex;
  align-items: center;
  color: var(--color-neutral-dark, #637381);
  font-size: 16px;
  user-select: none;
}
.breadcrumb__separator svg {
  flex-shrink: 0;
}
.breadcrumb__text {
  color: var(--color-neutral-dark, #637381);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
}
.breadcrumb__text--active {
  color: var(--color-primary, #00A9CE);
}
._container_swuye_2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  min-height: 0;
}

._breadcrumbContainer_swuye_10 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._backButton_swuye_16 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
}
._backButton_swuye_16:hover {
  background-color: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

._pageTitle_swuye_36 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #14181f;
  margin: 0;
}

._pageLayout_swuye_44 {
  display: flex;
  gap: 24px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1400px) {
  ._pageLayout_swuye_44 {
    flex-direction: column;
  }
}

._leftColumn_swuye_57 {
  flex-shrink: 0;
  width: 700px;
}
@media (max-width: 1400px) {
  ._leftColumn_swuye_57 {
    width: 100%;
    max-width: 700px;
  }
}

._rightColumn_swuye_68 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._certificateCard_swuye_77 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
}

._certificatePreview_swuye_84 {
  padding: 24px;
  background: #faf8f5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 320px;
}

._certificateRawHtml_swuye_93 {
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  position: relative;
  /* Sertifika 842x595; scale(0.756) ile ~636x450 görünür */
  height: 450px;
}
._certificateRawHtml_swuye_93 > * {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0.756);
  transform-origin: top left;
}

._certificatePlaceholder_swuye_109 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: #707a8f;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

._downloadButtonWrap_swuye_121 {
  padding: 16px 24px;
  border-top: 1px solid #e8e8e9;
}

._certificateDetails_swuye_126 {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid #e8e8e9;
}

._detailItem_swuye_134 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

._detailLabel_swuye_143 {
  color: #707a8f;
  font-weight: 500;
  letter-spacing: 0.08px;
}

._detailValue_swuye_149 {
  color: #14181f;
  font-weight: 500;
  letter-spacing: 0.08px;
  text-align: right;
}

._pageHeader_swuye_156 {
  margin-bottom: 0;
}

._tableSection_swuye_160 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
._tableSection_swuye_160 .table-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
._tableSection_swuye_160 .table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
._tableSection_swuye_160 .table {
  height: 100%;
}._previewWrapper_1je1j_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: auto;
}

._certificateContainer_1je1j_9 {
  position: relative;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

._templateImage_1je1j_18 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

._overlayContainer_1je1j_28 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

._textOverlay_1je1j_37 {
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

._fieldLabel_1je1j_45 {
  font-size: 10px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  font-family: Arial, sans-serif;
}

@media (max-width: 900px) {
  ._previewWrapper_1je1j_1 {
    transform: scale(0.8);
    transform-origin: top center;
  }
}
@media (max-width: 600px) {
  ._previewWrapper_1je1j_1 {
    transform: scale(0.5);
    transform-origin: top center;
  }
}._editor_eiwn2_1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: flex-start;
}

._canvasWrap_eiwn2_8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: auto;
}

._canvas_eiwn2_8 {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  max-width: 100%;
}

._bgImage_eiwn2_26 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

._overlay_eiwn2_35 {
  position: absolute;
  cursor: move;
  padding: 2px 4px;
  border: 1px dashed transparent;
  border-radius: 3px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
}
._overlay_eiwn2_35:hover {
  border-color: rgba(79, 70, 229, 0.5);
  background: rgba(79, 70, 229, 0.05);
}

._overlayActive_eiwn2_50 {
  border: 1px dashed #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

._overlayDragging_eiwn2_56 {
  cursor: grabbing;
  opacity: 0.85;
}

._fieldLabel_eiwn2_61 {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

._hint_eiwn2_69 {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  text-align: center;
}

._sidebar_eiwn2_76 {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  position: sticky;
  top: 16px;
}

._sidebarHead_eiwn2_85 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
._sidebarHead_eiwn2_85 h4 {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
}

._resetBtn_eiwn2_97 {
  background: none;
  border: none;
  color: #4f46e5;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
._resetBtn_eiwn2_97:hover {
  text-decoration: underline;
}

._fieldTabs_eiwn2_109 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}

._fieldTab_eiwn2_109 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
._fieldTab_eiwn2_109:hover {
  border-color: #94a3b8;
}

._fieldTabActive_eiwn2_130 {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
._fieldTabActive_eiwn2_130:hover {
  border-color: #4f46e5;
}

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

._row_eiwn2_145 {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
._row_eiwn2_145 label {
  color: #475569;
  font-weight: 500;
}
._row_eiwn2_145 input[type=number],
._row_eiwn2_145 input[type=text],
._row_eiwn2_145 select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  width: 100%;
}
._row_eiwn2_145 input[type=number]:focus,
._row_eiwn2_145 input[type=text]:focus,
._row_eiwn2_145 select:focus {
  outline: none;
  border-color: #4f46e5;
}
._row_eiwn2_145 input[type=color] {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
}

._alignRow_eiwn2_181 {
  display: flex;
  gap: 4px;
}

._alignBtn_eiwn2_186 {
  flex: 1;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px;
  font-size: 11px;
  cursor: pointer;
}
._alignBtn_eiwn2_186:hover {
  background: #f1f5f9;
}

._alignBtnActive_eiwn2_199 {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
._alignBtnActive_eiwn2_199:hover {
  background: #4338ca;
}

@media (max-width: 960px) {
  ._editor_eiwn2_1 {
    grid-template-columns: 1fr;
  }
  ._sidebar_eiwn2_76 {
    position: static;
  }
}._wrap_whl63_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

._title_whl63_8 {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

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

._chip_whl63_14 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid transparent;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
._chip_whl63_14:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}
._chip_whl63_14 span {
  font-weight: 500;
}
._chip_whl63_14 code {
  font-size: 11px;
  opacity: 0.7;
}._container_6pxhq_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 96px;
}

._breadcrumbContainer_6pxhq_8 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._backButton_6pxhq_14 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
}
._backButton_6pxhq_14:hover {
  background-color: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

/* ------------------------------------------------------------------ */
/* Stepper                                                             */
/* ------------------------------------------------------------------ */
._stepper_6pxhq_37 {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._stepItem_6pxhq_47 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: default;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

._stepItem_completed_6pxhq_59 {
  cursor: pointer;
}
._stepItem_completed_6pxhq_59:hover {
  background: #f6f7f8;
}

._stepBadge_6pxhq_66 {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #dadfe3;
  background: #fff;
  color: #707a8f;
  transition: all 0.2s ease;
}

._stepItem_active_6pxhq_82 ._stepBadge_6pxhq_66 {
  background: #00A9CE;
  border-color: #00A9CE;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 169, 206, 0.15);
}

._stepItem_completed_6pxhq_59 ._stepBadge_6pxhq_66 {
  background: #14181f;
  border-color: #14181f;
  color: #fff;
}

._stepText_6pxhq_95 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._stepLabel_6pxhq_102 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._stepItem_pending_6pxhq_111 ._stepLabel_6pxhq_102 {
  color: #707a8f;
}

._stepDescription_6pxhq_115 {
  font-size: 12px;
  color: #707a8f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._stepConnector_6pxhq_123 {
  flex: 1;
  height: 2px;
  background: #e8e8e9;
  border-radius: 2px;
  align-self: center;
  min-width: 24px;
}

._stepConnector_completed_6pxhq_132 {
  background: #14181f;
}

@media (max-width: 900px) {
  ._stepper_6pxhq_37 {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  ._stepConnector_6pxhq_123 {
    display: none;
  }
}
/* ------------------------------------------------------------------ */
/* Step panel base                                                     */
/* ------------------------------------------------------------------ */
._stepPanel_6pxhq_149 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._statusBlock_6pxhq_155 {
  padding: 48px 24px;
  text-align: center;
  font-size: 16px;
  color: #707a8f;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._statusBlock_error_6pxhq_165 {
  color: #00A9CE;
  background: #E6F7FB;
  border-color: #00A9CE;
}

/* ------------------------------------------------------------------ */
/* Step 1 - Templates                                                  */
/* ------------------------------------------------------------------ */
._hiddenFileInput_6pxhq_174 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

._templatesGrid_6pxhq_182 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}
@media (max-width: 1400px) {
  ._templatesGrid_6pxhq_182 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  ._templatesGrid_6pxhq_182 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  ._templatesGrid_6pxhq_182 {
    grid-template-columns: 1fr;
  }
}

._uploadCard_6pxhq_207 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  border: 2px dashed #d0d5db;
  border-radius: 12px;
  background: #faf8f5;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #707a8f;
  min-height: 0;
  aspect-ratio: 1.414/1;
  font-family: inherit;
}
._uploadCard_6pxhq_207:hover:not(:disabled) {
  border-color: #00A9CE;
  background: #E6F7FB;
  color: #00A9CE;
}
._uploadCard_6pxhq_207:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._uploadCardIcon_6pxhq_234 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8e8e9;
  color: inherit;
}

._uploadCardTitle_6pxhq_246 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  text-align: center;
}

._uploadCardHint_6pxhq_253 {
  font-size: 12px;
  color: #707a8f;
  text-align: center;
}

._templateCard_6pxhq_259 {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  border: 2px solid #e8e8e9;
  background: #faf8f5;
}
._templateCard_6pxhq_259:hover {
  border-color: #c4c7cc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

._templateCardSelected_6pxhq_273 {
  border-color: #00A9CE;
  box-shadow: 0 0 0 3px rgba(0, 169, 206, 0.15);
}

._templatePreview_6pxhq_278 {
  position: relative;
  aspect-ratio: 1.414/1;
  overflow: hidden;
}

._templateImage_6pxhq_284 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._templateSelectedBadge_6pxhq_291 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00A9CE;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._templateDeleteButton_6pxhq_305 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #505766;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}
._templateDeleteButton_6pxhq_305:hover {
  background: #00A9CE;
  color: #fff;
}
._templateCard_6pxhq_259:hover ._templateDeleteButton_6pxhq_305 {
  opacity: 1;
}

._templateMeta_6pxhq_332 {
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #f1f2f4;
}

._templateName_6pxhq_338 {
  font-size: 13px;
  font-weight: 500;
  color: #14181f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Step 2 - Info form + live preview                                   */
/* ------------------------------------------------------------------ */
._infoStep_6pxhq_351 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  ._infoStep_6pxhq_351 {
    grid-template-columns: 1fr;
  }
}

._infoForm_6pxhq_363 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

._requiredBanner_6pxhq_370 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #E6F7FB;
  border: 1px solid #ffd2d5;
  border-radius: 10px;
  font-size: 13px;
  color: #b1161d;
}

._requiredBannerDot_6pxhq_382 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00A9CE;
  flex-shrink: 0;
}

._formCard_6pxhq_390 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._formCardHeader_6pxhq_396 {
  padding: 20px 24px 12px;
  border-bottom: 1px solid #f1f2f4;
  background: #fafbfc;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

._formCardTitle_6pxhq_404 {
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 4px;
}

._formCardSubtitle_6pxhq_411 {
  font-size: 13px;
  color: #707a8f;
  margin: 0;
}

._formCardBody_6pxhq_417 {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._livePreview_6pxhq_424 {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}
@media (max-width: 1100px) {
  ._livePreview_6pxhq_424 {
    position: static;
  }
}

._livePreviewLabel_6pxhq_441 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #707a8f;
}

._livePreviewFrame_6pxhq_449 {
  width: 100%;
  aspect-ratio: 1.414/1;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f7f8;
  position: relative;
}

._livePreviewScale_6pxhq_458 {
  position: absolute;
  inset: 0;
  transform: scale(0.38);
  transform-origin: top left;
  width: 263.1578947368%;
  height: 263.1578947368%;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Step 3 - Final preview                                              */
/* ------------------------------------------------------------------ */
._previewStep_6pxhq_471 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  ._previewStep_6pxhq_471 {
    grid-template-columns: 1fr;
  }
}

._finalPreviewWrapper_6pxhq_483 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
._finalPreviewWrapper_6pxhq_483 > div {
  width: 100%;
  max-width: 100%;
}

._summaryCard_6pxhq_499 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px 24px;
}
._summaryCard_6pxhq_499 h4 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #14181f;
}
._summaryCard_6pxhq_499 dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._summaryCard_6pxhq_499 dl > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._summaryCard_6pxhq_499 dt {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #707a8f;
}
._summaryCard_6pxhq_499 dd {
  margin: 0;
  font-size: 14px;
  color: #14181f;
  word-break: break-word;
}

._hiddenRenderRoot_6pxhq_536 {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 1100px;
  pointer-events: none;
  opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Wizard footer                                                       */
/* ------------------------------------------------------------------ */
._wizardFooter_6pxhq_548 {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
  margin-top: 8px;
  z-index: 5;
}

._wizardFooterRight_6pxhq_564 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */
._paginationBar_6pxhq_573 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_6pxhq_585 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._pageSizeDropdown_6pxhq_592 {
  width: 80px;
  flex-shrink: 0;
}

._paginationLabel_6pxhq_597,
._paginationDetails_6pxhq_598 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_6pxhq_598 {
  margin-left: 8px;
}

._paginationControls_6pxhq_611 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_6pxhq_611 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_6pxhq_611 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_6pxhq_611 .pagination-number._active_6pxhq_635 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_6pxhq_611 .pagination-number:hover:not(._active_6pxhq_635) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_6pxhq_611 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_6pxhq_656 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_6pxhq_656:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_6pxhq_656:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_6pxhq_656 svg {
  width: 16px;
  height: 16px;
}

._fieldHint_6pxhq_683 {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

._patternPreview_6pxhq_691 {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._patternPreviewLabel_6pxhq_703 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

._patternPreviewValue_6pxhq_711 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 6px;
}

._patternPreviewHint_6pxhq_721 {
  width: 100%;
  font-size: 12px;
  color: #94a3b8;
}
._patternPreviewHint_6pxhq_721 code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #e2e8f0;
  padding: 1px 6px;
  border-radius: 4px;
  color: #475569;
}

._summaryHint_6pxhq_735 {
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._header_ho6wy_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px 8px 0 0;
  gap: 12px;
}

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

._headerIcon_ho6wy_53 {
  flex-shrink: 0;
  color: #707a8f;
}

._headerTitle_ho6wy_58 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._headerActions_ho6wy_68 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

._pdfGenerating_ho6wy_75 {
  font-size: 12px;
  white-space: nowrap;
}

._headerBtn_ho6wy_80 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  padding: 0;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._headerBtn_ho6wy_80 svg {
  color: #505766;
}
._headerBtn_ho6wy_80:hover {
  background: #f5f5f5;
  border-color: #e8e8e9;
}
._headerBtn_ho6wy_80:hover svg {
  color: #505766;
}

._body_ho6wy_106 {
  padding: 24px;
  background: #f5f5f5;
  min-height: 400px;
  border: 1px solid #e8e8e9;
  border-top: none;
  border-radius: 0 0 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._loading_ho6wy_118 {
  padding: 40px 0;
  text-align: center;
  color: #707a8f;
  width: 100%;
}

._error_ho6wy_125 {
  padding: 40px 24px;
  text-align: center;
  color: #b33;
  width: 100%;
}

._htmlContainer_ho6wy_132 {
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e8e8e9;
}
._wrap_1ltph_2 {
  background: linear-gradient(135deg, #E6F7FB 0%, #ffffff 60%, #E6F7FB 100%);
  border: 1px solid #fee2e2;
}

._list_1ltph_7 {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 8px 4px 16px 4px;
  gap: 0;
  overflow-x: auto;
}

._item_1ltph_17 {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 0;
  min-width: 160px;
  position: relative;
}

._btn_1ltph_26 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  border-radius: 10px;
  transition: background 0.15s ease;
  z-index: 1;
}
._btn_1ltph_26:hover {
  background: rgba(255, 255, 255, 0.6);
}

._iconWrap_1ltph_45 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

._body_1ltph_60 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

._title_1ltph_67 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 18px;
}

._desc_1ltph_74 {
  font-size: 11.5px;
  color: #64748b;
  line-height: 16px;
  max-width: 160px;
}

._connector_1ltph_81 {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(to right, #e2e8f0 0 6px, transparent 6px 12px);
  z-index: 0;
}

/* States */
._state_done_1ltph_92 ._iconWrap_1ltph_45 {
  background: #dcfce7;
  border-color: #15803d;
  color: #15803d;
}

._state_done_1ltph_92 + ._item_1ltph_17 ._connector_1ltph_81,
._state_done_1ltph_92 ._connector_1ltph_81 {
  background: #15803d;
}

._state_active_1ltph_103 ._iconWrap_1ltph_45 {
  background: #E6F7FB;
  border-color: #00A9CE;
  color: #00A9CE;
  box-shadow: 0 0 0 4px rgba(0, 169, 206, 0.12);
  animation: _pulse_1ltph_1 1.6s ease-in-out infinite;
}

._state_active_1ltph_103 ._title_1ltph_67 {
  color: #00A9CE;
}

._state_upcoming_1ltph_115 ._iconWrap_1ltph_45 {
  background: #f8fafc;
}

/* Devamsızlıktan / yönetici kararıyla "tamamlamadı" — kırmızı X, sönük başlık */
._state_failed_1ltph_120 ._iconWrap_1ltph_45 {
  background: #fee2e2;
  border-color: #b91c1c;
  color: #b91c1c;
}

._state_failed_1ltph_120 ._title_1ltph_67 {
  color: #b91c1c;
}

._state_failed_1ltph_120 ._desc_1ltph_74 {
  color: #b91c1c;
}

._state_failed_1ltph_120 + ._item_1ltph_17 ._connector_1ltph_81,
._state_failed_1ltph_120 ._connector_1ltph_81 {
  background: repeating-linear-gradient(to right, #fecaca 0 6px, transparent 6px 12px);
}

@keyframes _pulse_1ltph_1 {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(0, 169, 206, 0.12);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(231, 33, 43, 0.18);
  }
}
@media (max-width: 720px) {
  ._list_1ltph_7 {
    flex-direction: column;
  }
  ._item_1ltph_17 {
    flex-direction: row;
    align-items: center;
  }
  ._btn_1ltph_26 {
    flex-direction: row;
    text-align: left;
    width: 100%;
  }
  ._body_1ltph_60 {
    align-items: flex-start;
  }
  ._desc_1ltph_74 {
    max-width: none;
  }
  ._connector_1ltph_81 {
    display: none;
  }
}._card_1vxj6_1 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  position: relative;
  scroll-margin-top: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
._card_1vxj6_1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #94a3b8;
}

._iconCircle_1vxj6_24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 26px;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
}

._body_1vxj6_37 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

._kicker_1vxj6_45 {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._title_1vxj6_53 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 26px;
  letter-spacing: -0.01em;
}

._description_1vxj6_62 {
  margin: 2px 0 0 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 20px;
  max-width: 680px;
}

._progressWrap_1vxj6_70 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
._progressWrap_1vxj6_70 .ant-progress {
  flex: 1;
  margin: 0;
}

._progressLabel_1vxj6_81 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  min-width: 40px;
  text-align: right;
}

._countdown_1vxj6_89 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  width: fit-content;
}

._actions_1vxj6_104 {
  display: inline-flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

._statusBadge_1vxj6_111 {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #15803d;
  padding: 3px 10px;
  background: #dcfce7;
  border-radius: 999px;
}

/* ---- Accent variants ---- */
._accent_primary_1vxj6_127::before {
  background: #00A9CE;
}

._accent_primary_1vxj6_127 ._iconCircle_1vxj6_24 {
  background: #E6F7FB;
  color: #00A9CE;
}

._accent_success_1vxj6_136::before {
  background: #15803d;
}

._accent_success_1vxj6_136 ._iconCircle_1vxj6_24 {
  background: #dcfce7;
  color: #15803d;
}

._accent_success_1vxj6_136 ._title_1vxj6_53 {
  color: #14532d;
}

._accent_warning_1vxj6_149::before {
  background: #f59e0b;
}

._accent_warning_1vxj6_149 ._iconCircle_1vxj6_24 {
  background: #fef3c7;
  color: #b45309;
}

._accent_muted_1vxj6_158::before {
  background: #cbd5e1;
}

._accent_muted_1vxj6_158 ._iconCircle_1vxj6_24 {
  background: #f1f5f9;
  color: #94a3b8;
}

@media (max-width: 640px) {
  ._card_1vxj6_1 {
    flex-direction: column;
    padding: 18px;
  }
  ._statusBadge_1vxj6_111 {
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
  }
}
._page_1gpxj_2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 32px 24px;
  min-height: 0;
}

._topBar_1gpxj_10 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}

._backButton_1gpxj_17 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.15s ease;
}
._backButton_1gpxj_17:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._breadcrumbLink_1gpxj_37 {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
}
._breadcrumbLink_1gpxj_37:hover {
  color: #0f172a;
  text-decoration: underline;
}

._breadcrumbSep_1gpxj_50 {
  font-size: 13px;
  color: #cbd5e1;
}

._breadcrumbCurrent_1gpxj_55 {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 480px;
}

._loading_1gpxj_65,
._empty_1gpxj_66 {
  padding: 48px;
  text-align: center;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

/* ----------------------------------------------------------- */
/* Main layout — Hero + Timeline full-width, sidebar + body   */
/* ----------------------------------------------------------- */
._layout_1gpxj_78 {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1023px) {
  ._layout_1gpxj_78 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._sidebar_1gpxj_90 {
  position: sticky;
  top: 16px;
  align-self: start;
}
@media (max-width: 1023px) {
  ._sidebar_1gpxj_90 {
    position: static;
  }
}

._main_1gpxj_101 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

._fullRow_1gpxj_108 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.switch {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 9999px;
  display: inline-block;
  cursor: pointer;
  transition: background-color 250ms;
}
.switch.default {
  background-color: #00A9CE;
}
.switch.primary {
  background-color: var(--color-primary, #00A9CE);
}
.switch.success {
  background-color: var(--color-success, #22c55e);
}
.switch.info {
  background-color: var(--color-info, #00b8d9);
}
.switch.warning {
  background-color: var(--color-warning, #ffab00);
}
.switch.error {
  background-color: var(--color-error, red);
}
.switch.unchecked {
  /* Unchecked: koyu gri, açık arka planda net görünsün */
  background-color: #9ca3af;
}
.switch.unchecked.hover:not(.disabled) {
  background-color: #6b7280;
}
.switch.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.switch .switch-toggle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: #fff;
  transition: transform 250ms;
}
.switch.checked .switch-toggle {
  transform: translateX(20px);
}.document-upload-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0;
}
.document-upload-modal-content .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.document-upload-modal-content .form-field .field-label {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
}
.document-upload-modal-content .visibility-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.document-upload-modal-content .visibility-field .visibility-label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-weight: 500;
  color: #707a8f;
}
.document-upload-modal-content .visibility-field .visibility-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}
.document-upload-modal-content .visibility-field .visibility-switch .switch-label {
  font-size: 14px;
  color: #c41e3a;
  font-weight: 500;
}

.document-upload-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}.unit-add-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0;
}
.unit-add-modal-content .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.unit-add-modal-content .form-field .field-label {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
}
.unit-add-modal-content .unit-duration-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.unit-add-modal-content .unit-add-modal-muted {
  margin-top: 8px;
  font-size: 13px;
  color: #707a8f;
}
.unit-add-modal-content .unit-add-modal-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.unit-add-modal-content .unit-add-modal-objectives {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.unit-add-modal-content .unit-add-modal-objective {
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.unit-add-modal-content .unit-add-modal-objective-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.unit-add-modal-content .unit-add-modal-objective-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
}
.unit-add-modal-content .unit-add-modal-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.unit-add-modal-content .unit-add-modal-question {
  padding: 10px;
  border: 1px dashed #e3e8f3;
  border-radius: 10px;
  background: #fbfcff;
}
.unit-add-modal-content .unit-add-modal-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #707a8f;
}
.unit-add-modal-content .unit-add-modal-options {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.unit-add-modal-content .unit-add-modal-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.unit-add-modal-content .unit-add-modal-icon-btn {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: #1a1a2e;
  opacity: 0.9;
}
.unit-add-modal-content .unit-add-modal-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.unit-add-modal-content .unit-add-modal-remove-link {
  margin-top: 10px;
  border: none;
  background: transparent;
  color: #c51d26;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  padding: 0;
}
.unit-add-modal-content .unit-add-modal-question-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.unit-add-modal-content .unit-add-modal-question-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
}
.unit-add-modal-content .unit-add-modal-question-section-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

.unit-add-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.map-component {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.map-component .map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
}
.map-component .map-loading .loading-spinner {
  text-align: center;
  color: #666;
}
.map-component .map-loading .loading-spinner .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #f97316;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}
.map-component .map-loading .loading-spinner p {
  margin: 0;
  font-size: 14px;
}
.map-component .map-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  gap: 8px;
  align-items: center;
}
.map-component .map-controls .search-input {
  flex: 1;
  position: relative;
}
.map-component .map-controls .search-input .search-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.map-component .map-controls .search-input .search-field:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.map-component .map-controls .current-location-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.map-component .map-controls .current-location-btn:hover {
  background: #f9fafb;
  border-color: #3b82f6;
}
.map-component .map-controls .current-location-btn svg {
  color: #6b7280;
}
.map-component .leaflet-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: 1;
}
.map-component .leaflet-container .leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.map-component .leaflet-container .leaflet-popup-content {
  margin: 8px 12px;
  font-size: 14px;
}
.map-component .leaflet-container .marker-popup {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}
.map-component .leaflet-container .marker-popup svg {
  color: #ef4444;
  flex-shrink: 0;
}
.map-component .map-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: #e8f4f8;
  border-radius: 8px;
  overflow: hidden;
}
.map-component .map-container .map-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.map-component .map-container .map-content .map-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}
.map-component .map-container .map-content .map-grid .grid-line {
  position: absolute;
  background: #ccc;
}
.map-component .map-container .map-content .map-grid .grid-line.horizontal {
  width: 100%;
  height: 1px;
}
.map-component .map-container .map-content .map-grid .grid-line.vertical {
  height: 100%;
  width: 1px;
}
.map-component .map-container .map-content .map-roads {
  position: absolute;
  width: 100%;
  height: 100%;
}
.map-component .map-container .map-content .map-roads .road {
  position: absolute;
  background: #ffd700;
  border-radius: 2px;
}
.map-component .map-container .map-content .map-roads .road.horizontal {
  width: 100%;
  height: 8px;
}
.map-component .map-container .map-content .map-roads .road.vertical {
  height: 100%;
  width: 8px;
}
.map-component .map-container .map-content .map-buildings {
  position: absolute;
  width: 100%;
  height: 100%;
}
.map-component .map-container .map-content .map-buildings .building {
  position: absolute;
  background: #8b4513;
  border-radius: 2px;
  width: 20px;
  height: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.map-component .map-container .map-content .map-marker {
  position: absolute;
  z-index: 1000;
  animation: bounce 2s infinite;
}
.map-component .map-container .map-content .map-marker .marker-label {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #f97316;
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-component .selected-location-info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  z-index: 1000;
}
.map-component .selected-location-info svg {
  color: #f97316;
  margin-right: 8px;
  flex-shrink: 0;
}
.map-component .selected-location-info span {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .map-component .map-search {
    top: 8px;
    left: 8px;
    right: 8px;
  }
  .map-component .map-search .search-input-container .search-button {
    padding: 12px 12px;
    font-size: 12px;
  }
  .map-component .map-controls {
    bottom: 8px;
    right: 8px;
  }
  .map-component .map-controls .current-location-button {
    width: 40px;
    height: 40px;
  }
  .map-component .selected-location-info {
    bottom: 8px;
    left: 8px;
    right: 60px;
    padding: 8px 12px;
  }
  .map-component .selected-location-info span {
    font-size: 12px;
  }
}
.custom-marker {
  background: transparent !important;
  border: none !important;
}

.custom-marker-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}._wrapper_f946a_1 {
  position: relative;
  width: 100%;
}

._results_f946a_6 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 260px;
  overflow-y: auto;
}

._resultRow_f946a_23 {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #14181f;
  line-height: 1.35;
}
._resultRow_f946a_23:hover {
  background: #f6f7f8;
}

._statusRow_f946a_35 {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: #707a8f;
}._form_l7a52_1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding-right: 4px;
}

._footer_l7a52_10 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}

._mapLabel_l7a52_17 {
  font-size: 13px;
  font-weight: 500;
  color: #707a8f;
  margin-top: 4px;
}

._coordsHint_l7a52_24 {
  font-size: 12px;
  color: #707a8f;
  padding: 6px 10px;
  background: #f6f7f8;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.checkbox-with-text {
  display: flex;
  align-items: center;
}

.checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 10px;
  flex-shrink: 0;
}

.label {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-align: left;
  position: relative;
}
.label.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

input[type=checkbox] {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid #ddd;
  transition: all 0.2s ease;
}
input[type=checkbox]:not(:checked) {
  background-color: white;
}
input[type=checkbox]:checked {
  position: relative;
  background-color: #E6F7FB;
  border-color: var(--color-primary);
}
input[type=checkbox]:disabled {
  cursor: not-allowed;
}

.checkbox-with-text.bordered input[type=checkbox] {
  border: 1px solid #e8e8e9;
  box-sizing: border-box;
}
.checkbox-with-text.bordered input[type=checkbox]:disabled {
  border-color: #e8e8e9;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.instructor-select-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
  min-height: 320px;
}

.instructor-select-modal-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
}

.instructor-select-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.instructor-select-modal-table thead {
  position: sticky;
  top: 0;
  background: #f8f8f9;
  z-index: 1;
}
.instructor-select-modal-table thead tr {
  border-bottom: 1px solid #e8e8e9;
}
.instructor-select-modal-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.instructor-select-modal-table .instructor-select-modal-th-check {
  width: 48px;
  padding-right: 8px;
}
.instructor-select-modal-table .instructor-select-modal-th-name {
  min-width: 180px;
}
.instructor-select-modal-table .instructor-select-modal-th-tc {
  min-width: 140px;
}
.instructor-select-modal-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.instructor-select-modal-table tbody tr:hover {
  background: #fafafa;
}
.instructor-select-modal-table tbody tr:last-child {
  border-bottom: none;
}
.instructor-select-modal-table td {
  padding: 12px 16px;
  color: #1a1a2e;
  vertical-align: middle;
}
.instructor-select-modal-table .instructor-select-modal-td-check {
  width: 48px;
  padding-right: 8px;
}

.instructor-select-modal-selected {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e8e8e9;
}
.instructor-select-modal-selected .instructor-select-modal-selected-label {
  font-size: 13px;
  font-weight: 500;
  color: #707a8f;
}

.instructor-select-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.instructor-select-modal-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: #f1f2f4;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #2f333c;
}
.instructor-select-modal-tag .instructor-select-modal-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #707a8f;
  border-radius: 4px;
}
.instructor-select-modal-tag .instructor-select-modal-tag-remove svg {
  width: 16px;
  height: 16px;
  color: #707a8f;
}
.instructor-select-modal-tag .instructor-select-modal-tag-remove:hover {
  background: #e8e8e9;
}
.instructor-select-modal-tag .instructor-select-modal-tag-remove:hover svg {
  color: #707a8f;
}

.instructor-select-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}._container_1ja36_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 2px;
}

._header_1ja36_8 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

._title_1ja36_17 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text, #111827);
}

._subtitle_1ja36_24 {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 14px;
}

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

._countPill_1ja36_37 {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-bg-subtle, #f3f4f6);
  color: var(--color-text, #111827);
}

._countPill_1ja36_37._completed_1ja36_46 {
  background: #dcfce7;
  color: #166534;
}

._countPill_1ja36_37._notCompleted_1ja36_51 {
  background: #fef3c7;
  color: #92400e;
}

._countPill_1ja36_37._blacklisted_1ja36_56 {
  background: #fee2e2;
  color: #991b1b;
}

._countPill_1ja36_37._pending_1ja36_61 {
  background: #e0e7ff;
  color: #3730a3;
}

._toolbar_1ja36_66 {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-subtle, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
}

._toolbarLabel_1ja36_79 {
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 500;
}

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

._groupBlock_1ja36_91 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._groupBlock_1ja36_91 + ._groupBlock_1ja36_91 {
  margin-top: 16px;
}

._groupHeader_1ja36_100 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-bg-subtle, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
}

._groupTitle_1ja36_110 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #111827);
}

._groupMeta_1ja36_116 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
}

._tableWrap_1ja36_123 {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

._table_1ja36_123 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

._table_1ja36_123 thead {
  background: var(--color-bg-subtle, #f9fafb);
  position: sticky;
  top: 0;
  z-index: 2;
}

._table_1ja36_123 th,
._table_1ja36_123 td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border, #f3f4f6);
}

._table_1ja36_123 th {
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

._table_1ja36_123 tbody tr:last-child td {
  border-bottom: none;
}

._table_1ja36_123 tbody tr:hover {
  background: var(--color-bg-subtle, #fafafa);
}

._nameCell_1ja36_167 {
  font-weight: 500;
  color: var(--color-text, #111827);
}

._metaCell_1ja36_172 {
  color: var(--color-text-secondary, #6b7280);
  font-size: 13px;
}

._signalBar_1ja36_177 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._signalTrack_1ja36_183 {
  flex: 1;
  min-width: 80px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border, #e5e7eb);
  overflow: hidden;
}

._signalFill_1ja36_192 {
  height: 100%;
  border-radius: 999px;
  background: #10b981;
}

._signalFillWarn_1ja36_198 {
  background: #f59e0b;
}

._signalFillLow_1ja36_202 {
  background: #ef4444;
}

._signalBadge_1ja36_206 {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

._signalBadge_1ja36_206._ok_1ja36_213 {
  background: #dcfce7;
  color: #166534;
}

._signalBadge_1ja36_206._no_1ja36_51 {
  background: #fee2e2;
  color: #991b1b;
}

._signalBadge_1ja36_206._neutral_1ja36_223 {
  background: var(--color-bg-subtle, #f3f4f6);
  color: var(--color-text-secondary, #6b7280);
}

._segmented_1ja36_228 {
  display: inline-flex;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

._segButton_1ja36_236 {
  padding: 6px 12px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  transition: background 120ms ease, color 120ms ease;
  border-right: 1px solid var(--color-border, #e5e7eb);
}

._segButton_1ja36_236:last-child {
  border-right: none;
}

._segButton_1ja36_236:hover {
  background: var(--color-bg-subtle, #f9fafb);
}

._segButton_1ja36_236._active_1ja36_255 {
  color: #fff;
  font-weight: 600;
}

._segButton_1ja36_236._active_1ja36_255._completed_1ja36_46 {
  background: #16a34a;
}

._segButton_1ja36_236._active_1ja36_255._notCompleted_1ja36_51 {
  background: #f59e0b;
}

._segButton_1ja36_236._active_1ja36_255._blacklisted_1ja36_56 {
  background: #dc2626;
}

._excuseCell_1ja36_272 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

._excuseMuted_1ja36_279 {
  color: var(--color-text-secondary, #9ca3af);
  font-size: 13px;
}

._excuseError_1ja36_284 {
  color: #dc2626;
  font-size: 11px;
  line-height: 1.2;
}

._blacklistSection_1ja36_290 {
  border: 1px solid #fecaca;
  background: #E6F7FB;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._blacklistTitle_1ja36_300 {
  margin: 0;
  color: #991b1b;
  font-size: 15px;
  font-weight: 600;
}

._blacklistHint_1ja36_307 {
  margin: 0;
  color: #7f1d1d;
  font-size: 13px;
}

._blacklistGrid_1ja36_313 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

._field_1ja36_319 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text, #111827);
}

._field_1ja36_319 select,
._field_1ja36_319 input,
._field_1ja36_319 textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e7eb);
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}

._field_1ja36_319 textarea {
  min-height: 64px;
  resize: vertical;
}

._checkbox_1ja36_343 {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

._emptyState_1ja36_349 {
  padding: 40px;
  text-align: center;
  color: var(--color-text-secondary, #6b7280);
}

._loadingState_1ja36_355 {
  padding: 40px;
  text-align: center;
  color: var(--color-text-secondary, #6b7280);
}._wrap_bh630_1 {
  display: grid;
  gap: 8px;
}

._header_bh630_6 {
  width: 100%;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

._label_bh630_18 {
  font-size: 14px;
  font-weight: 600;
  color: #273142;
}

._summary_bh630_24 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 13px;
}

._chevron_bh630_32 {
  color: #00a8cf;
  font-size: 14px;
}

._box_bh630_37 {
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

._search_bh630_44 {
  padding: 10px;
  border-bottom: 1px solid #eef1f5;
}

._search_bh630_44 input {
  width: 100%;
  border: 1px solid #dfe3ea;
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}

._tree_bh630_57 {
  max-height: 280px;
  overflow: auto;
  padding: 8px 0;
}

._row_bh630_63 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-right: 10px;
}

._toggle_bh630_71 {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #6b7280;
}

._togglePlaceholder_bh630_80 {
  width: 26px;
}

._checkbox_bh630_84 {
  width: 16px;
  height: 16px;
}

._name_bh630_89 {
  font-size: 14px;
  color: #273142;
}

._path_bh630_94 {
  font-size: 12px;
  color: #7a8496;
}

._state_bh630_99 {
  padding: 18px;
  color: #7a8496;
  text-align: center;
  font-size: 14px;
}

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

._chip_bh630_112 {
  border-radius: 999px;
  background: #eef8fb;
  color: #087d9d;
  padding: 5px 7px 5px 9px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._chipRemove_bh630_123 {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #d9eef5;
  color: #087d9d;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

._chipRemove_bh630_123:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._error_bh630_143 {
  color: #e03137;
  font-size: 12px;
}._container_zacju_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._pageHeader_zacju_7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

._breadcrumbContainer_zacju_15 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._backButton_zacju_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
._backButton_zacju_21:hover {
  background: #f6f7f8;
  border-color: #d0d0d1;
}

._actionButtons_zacju_38 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
._actionButtons_zacju_38 > * {
  flex: 1 1 140px;
  min-width: 0;
}
._actionButtons_zacju_38 ._draftButton_zacju_47,
._actionButtons_zacju_38 ._publishButton_zacju_48 {
  height: 40px;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._mainContent_zacju_57 {
  display: grid;
  grid-template-columns: 1fr 329px;
  gap: 24px;
}
@media (max-width: 1200px) {
  ._mainContent_zacju_57 {
    grid-template-columns: 1fr;
  }
}

._loadingState_zacju_68 {
  padding: 48px 24px;
  text-align: center;
  color: #707a8f;
  font-size: 14px;
}

._leftColumn_zacju_75 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._formCard_zacju_81 {
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e9;
}

._cardHeader_zacju_89 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

._cardTitle_zacju_96 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.08px;
  font-weight: 600;
  color: #14181f;
  margin: 0;
  font-family: "Inter", sans-serif;
}

._cardId_zacju_106 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.08px;
  font-weight: 500;
  color: #707a8f;
  font-family: "Inter", sans-serif;
}

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

._formRow_zacju_121 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  ._formRow_zacju_121 {
    grid-template-columns: 1fr;
  }
}

._formField_zacju_132 {
  width: 100%;
}

._educationCodeField_zacju_136 {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
}

._educationCodeInput_zacju_143 {
  flex: 1;
  min-width: 0;
}

._educationCodeGenerateButton_zacju_148 {
  flex-shrink: 0;
  height: 44px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  ._educationCodeField_zacju_136 {
    flex-direction: column;
    align-items: stretch;
  }
  ._educationCodeGenerateButton_zacju_148 {
    width: 100%;
  }
}
._locationCoords_zacju_163 {
  margin-top: 8px;
  font-size: 13px;
  color: #707a8f;
}

._unitsCard_zacju_169 {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e8e8e9;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

._nonUnitContentCard_zacju_179 {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8e8e9;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._nonUnitContentTitle_zacju_189 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.08px;
  font-weight: 500;
  color: #14181f;
  font-family: "Inter", sans-serif;
  margin: 0;
}

._unitsHeader_zacju_199 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e9;
}

._unitsTitle_zacju_207 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.08px;
  font-weight: 500;
  color: #14181f;
  margin: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

._addUnitButton_zacju_221 {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #c51d26;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.5%;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}
._addUnitButton_zacju_221:hover {
  opacity: 0.8;
}
._addUnitButton_zacju_221 svg {
  color: #c51d26;
}

._unitsList_zacju_242 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._unitItem_zacju_248 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  transition: all 0.2s ease;
}
._unitItem_zacju_248:hover {
  border-color: #d0d0d1;
}

._unitInfo_zacju_262 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._unitNumber_zacju_268 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  font-family: "Inter", sans-serif;
}

._unitName_zacju_275 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  font-family: "Inter", sans-serif;
}

._unitMeta_zacju_282 {
  font-size: 12px;
  color: #707a8f;
  font-family: "Inter", sans-serif;
}

._unitActions_zacju_288 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._removeUnitButton_zacju_294 {
  width: 32px;
  height: 32px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._removeUnitButton_zacju_294:hover {
  background: #E6F7FB;
  border-color: #fecaca;
  color: #00A9CE;
}

._liveStreamQuestionsList_zacju_313 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._liveStreamQuestionItem_zacju_319 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}
._liveStreamQuestionItem_zacju_319:hover {
  border-color: #d0d0d1;
}

._liveStreamQuestionGrip_zacju_333 {
  display: flex;
  color: #707a8f;
  flex-shrink: 0;
  padding-top: 2px;
}

._liveStreamQuestionBody_zacju_340 {
  flex: 1;
  min-width: 0;
}

._liveStreamQuestionTitleRow_zacju_345 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

._liveStreamQuestionActions_zacju_353 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._liveStreamQuestionHeading_zacju_360 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  font-family: "Inter", sans-serif;
}

._liveStreamQuestionEditBtn_zacju_367 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  color: #707a8f;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
._liveStreamQuestionEditBtn_zacju_367:hover {
  border-color: #d0d0d1;
  color: #14181f;
  background: #f6f7f8;
}

._liveStreamQuestionText_zacju_387 {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: #14181f;
  font-family: "Inter", sans-serif;
}

._rightColumn_zacju_395 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 1200px) {
  ._rightColumn_zacju_395 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  ._rightColumn_zacju_395 ._sidebarCard_zacju_405 {
    flex: 1 1 calc(50% - 6px);
    min-width: 280px;
  }
}
@media (max-width: 768px) {
  ._rightColumn_zacju_395 ._sidebarCard_zacju_405 {
    flex: 1 1 100%;
  }
}

._sidebarCard_zacju_405 {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e8e8e9;
}

._sidebarCardHeader_zacju_423 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._sidebarCardContent_zacju_429 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._durationRow_zacju_435 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._locationHint_zacju_441 {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #707a8f;
}

._locationModeToggle_zacju_448 {
  display: inline-flex;
  border: 1px solid #d9dde7;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f8fb;
}

._locationModeOption_zacju_456 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #44506a;
  user-select: none;
}
._locationModeOption_zacju_456 + ._locationModeOption_zacju_456 {
  border-left: 1px solid #d9dde7;
}
._locationModeOption_zacju_456 input[type=radio] {
  accent-color: #2f6feb;
  cursor: pointer;
}
._locationModeOption_zacju_456:has(input:checked) {
  background: #ffffff;
  color: #1f2a44;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #2f6feb;
}

._presetPreviewCard_zacju_480 {
  border: 1px solid #e4e8f1;
  background: #fafbfd;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._presetPreviewRow_zacju_490 {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

._presetPreviewLabel_zacju_497 {
  min-width: 92px;
  color: #707a8f;
  font-weight: 500;
}

._presetPreviewValue_zacju_503 {
  color: #1f2a44;
  word-break: break-word;
}

._sidebarCardBody_zacju_508 {
  margin-top: 12px;
}

._budgetApproved_zacju_512 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #0d7a3e;
  background: #e8f5ee;
  border: 1px solid #b8e0cc;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.02em;
}

._sidebarCardTitle_zacju_527 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.08px;
  color: #14181f;
  font-weight: 500;
  font-family: "Inter", sans-serif;
}

._sidebarSubTitle_zacju_536 {
  font-size: 13px;
  line-height: 18px;
  color: #707a8f;
  font-weight: 500;
}

._surveyRelations_zacju_543 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #e8e8e9;
}

._impactDaysRow_zacju_551 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._requiredMark_zacju_557 {
  margin-left: 2px;
  color: #00A9CE;
  font-weight: 500;
}

._sidebarCardTitleWithIcon_zacju_563 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._sidebarCardTitleIcon_zacju_569 {
  flex-shrink: 0;
  color: #14181f;
}

._switchWrapper_zacju_574 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

._switchLabel_zacju_582 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-weight: 500;
  color: #00A9CE;
  font-family: "Inter", sans-serif;
}

._mandatoryHint_zacju_591 {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fdf2f2;
  color: #8a1f1f;
  font-size: 12px;
  line-height: 1.45;
}

._mandatoryHealthBanner_zacju_601 {
  margin: 0 24px 16px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #E6F7FB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #7f1d1d;
}

._mandatoryHealthBannerText_zacju_614 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
._mandatoryHealthBannerText_zacju_614 strong {
  font-size: 14px;
}

._mandatoryHealthBannerActions_zacju_624 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._missingUsersModal_zacju_631 {
  padding: 4px 0 8px;
  max-height: 60vh;
  overflow: auto;
}

._missingUsersEmpty_zacju_637 {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

._missingUsersTableWrapper_zacju_644 {
  width: 100%;
  overflow-x: auto;
}

._missingUsersTable_zacju_644 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
._missingUsersTable_zacju_644 thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f9fafb;
  color: #374151;
  font-weight: 500;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
}
._missingUsersTable_zacju_644 tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
  vertical-align: top;
}
._missingUsersTable_zacju_644 tbody tr:hover {
  background: #f9fafb;
}

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

._instructorTag_zacju_674 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: #f5f5f5;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1a2e;
}

._instructorTagRemove_zacju_692 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.15s ease;
}
._instructorTagRemove_zacju_692:hover {
  background: #e8e8e9;
  color: #1a1a2e;
}
._instructorTagRemove_zacju_692:focus-visible {
  outline: 2px solid #00A9CE;
  outline-offset: 1px;
}

._instructorButton_zacju_715 {
  width: 100%;
  justify-content: center;
}

._fieldLabel_zacju_720 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5%;
  font-weight: 500;
  color: #707a8f;
  margin-bottom: 8px;
  display: block;
}

._documentList_zacju_731 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

._documentItem_zacju_738 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  transition: all 0.2s ease;
}
._documentItem_zacju_738:hover {
  border-color: #d0d0d1;
}

._documentInfo_zacju_752 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._documentIcon_zacju_758 {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
._documentIcon_zacju_758::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 14px;
  height: 6px;
  background: #d97706;
  border-radius: 2px 2px 0 0;
}
._documentIcon_zacju_758::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  right: 4px;
  bottom: 6px;
  background: #fcd34d;
  border-radius: 0 4px 4px 4px;
}
._documentIcon_zacju_758 ._fileCount_zacju_788 {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #00A9CE;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

._documentDetails_zacju_805 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._documentName_zacju_811 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  font-family: "Inter", sans-serif;
}

._documentStatus_zacju_818 {
  font-size: 12px;
  font-weight: 500;
  color: #10b981;
  font-family: "Inter", sans-serif;
}

._documentActions_zacju_825 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._removeDocumentButton_zacju_831 {
  width: 32px;
  height: 32px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._removeDocumentButton_zacju_831:hover {
  background: #E6F7FB;
  border-color: #fecaca;
  color: #00A9CE;
}

._addDocumentArea_zacju_850 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border: 1px dashed #e8e8e9;
  border-radius: 8px;
  background: #fafafa;
  gap: 16px;
}

._addDocumentText_zacju_862 {
  font-size: 14px;
  color: #707a8f;
  margin: 0;
  text-align: center;
  font-family: "Inter", sans-serif;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_4k32g_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

._statCards_4k32g_42 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

._statCards_4k32g_42 .info-card__icon svg {
  filter: brightness(0) invert(1) !important;
}

._statCards_4k32g_42 .info-card__value {
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

._skeleton_4k32g_58 {
  min-height: 112px;
  border-radius: 12px;
  background: #f1f2f4;
  animation: _catalogStatsPulse_4k32g_1 1.5s ease-in-out infinite;
}

@keyframes _catalogStatsPulse_4k32g_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
._topCategories_4k32g_73 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 16px 24px;
}

._topCategoriesTitle_4k32g_80 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  line-height: 1.4;
}

._topCategoriesList_4k32g_88 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._topCategoriesItem_4k32g_97 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f2f4;
}
._topCategoriesItem_4k32g_97:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

._topCategoriesName_4k32g_110 {
  font-size: 14px;
  font-weight: 500;
  color: #2f333c;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._topCategoriesCount_4k32g_120 {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  font-variant-numeric: tabular-nums;
}._modalHeader_4gd4l_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e9;
}

._headerLeft_4gd4l_9 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._headerTitle_4gd4l_15 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #14181f;
}

._headerBadge_4gd4l_23 {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background-color: #f1f2f4;
  border: 1px solid #d3d6dc;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #2f333c;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.08px;
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._closeButton_4gd4l_42 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
  border-radius: 8px;
  gap: 4px;
}
._closeButton_4gd4l_42:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._modalContent_4gd4l_61 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(80vh - 200px);
  overflow: hidden;
}

._toolbar_4gd4l_69 {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

._toolbarField_4gd4l_85 {
  min-width: 180px;
}

._bulkExcuseWrap_4gd4l_89 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
}

._toolbarRight_4gd4l_96 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._toolbarRight_4gd4l_96 .button.outlined.success {
  background-color: #e8f7f1;
  border-color: #15ac77;
  color: #15ac77;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  gap: 4px;
}
._toolbarRight_4gd4l_96 .button.outlined.success:hover:not(._disabled_4gd4l_111) {
  background-color: #d4f0e5;
  border-color: #15ac77;
}
._toolbarRight_4gd4l_96 .button.outlined.error {
  background-color: #E6F7FB;
  border-color: #fe5b65;
  color: #fe5b65;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  gap: 4px;
}
._toolbarRight_4gd4l_96 .button.outlined.error:hover:not(._disabled_4gd4l_111) {
  background-color: #E6F7FB;
  border-color: #fe5b65;
}

._downloadButton_4gd4l_130 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
  border-radius: 8px;
}
._downloadButton_4gd4l_130:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._tableContainer_4gd4l_148 {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
._tableContainer_4gd4l_148 .table-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._tableContainer_4gd4l_148 .table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}
._tableContainer_4gd4l_148 .flex-table {
  height: 100%;
}
._tableContainer_4gd4l_148 .flex-table-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
._tableContainer_4gd4l_148 .table-pagination {
  flex-shrink: 0;
}
._tableContainer_4gd4l_148 .personnel-id-column {
  min-width: 120px;
}
._tableContainer_4gd4l_148 .personnel-name-column {
  min-width: 160px;
}
._tableContainer_4gd4l_148 .title-column {
  min-width: 140px;
}
._tableContainer_4gd4l_148 .department-column {
  min-width: 160px;
}
._tableContainer_4gd4l_148 .status-column {
  min-width: 120px;
}
._tableContainer_4gd4l_148 .row-checkbox {
  border-radius: 6px;
}
._tableContainer_4gd4l_148 .row-checkbox:checked {
  background-color: #00A9CE;
  border-color: #00A9CE;
}
._tableContainer_4gd4l_148 .row-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
._tableContainer_4gd4l_148 .row-checkbox:hover {
  border-color: #00A9CE;
}

._modalFooter_4gd4l_217 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

._saveButton_4gd4l_223 {
  min-width: 120px;
}

._excuseCell_4gd4l_227 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

._excuseMuted_4gd4l_234 {
  color: #bdbdbd;
}

._excuseError_4gd4l_238 {
  font-size: 12px;
  color: #00A9CE;
  font-weight: 500;
}
._headerTitle_klqui_2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

._loadingState_klqui_14,
._emptyState_klqui_15 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #707A8F;
  font-size: 14px;
}

._educationTitle_klqui_24 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.08px;
  color: #2F333C;
}

._imageContainer_klqui_33 {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

._educationImage_klqui_39 {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

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

._detailItem_klqui_52 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

._detailLabel_klqui_59 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #707A8F;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  min-width: 160px;
  flex-shrink: 0;
}

._detailIcon_klqui_71 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707A8F;
}

._detailValue_klqui_78 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #14181F;
  text-align: right;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

._chipGroup_klqui_90 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._descriptionSection_klqui_97 {
  background-color: #F6F7F8;
  border-radius: 12px;
  padding: 16px;
}

._descriptionTitle_klqui_103 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #14181F;
}

._descriptionText_klqui_111 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #4D5464;
}

._footerContainer_klqui_119 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

._footerButton_klqui_125 {
  max-width: 200px !important;
}

._joinButton_klqui_129 {
  margin-right: 8px;
  border-color: #00A9CE !important;
  color: #00A9CE !important;
  background-color: rgba(0, 169, 206, 0.08) !important;
}
._joinButton_klqui_129:hover:not(:disabled) {
  background-color: rgba(0, 169, 206, 0.12) !important;
  border-color: #00A9CE !important;
  color: #00A9CE !important;
}

/* ============================================================
   Redesign — Gruplu kartlar
============================================================ */
._hero_klqui_144 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(135deg, #fafbfd 0%, #f3f5fa 100%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

._heroTitle_klqui_154 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #0f172a;
  letter-spacing: -0.01em;
}

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

._demandBlock_klqui_169 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

._demandHeader_klqui_177 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._demandLabelWrap_klqui_183 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._demandCount_klqui_194 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

._demandBar_klqui_200 {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

._demandBarFill_klqui_207 {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Section kartları */
._section_klqui_215 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sectionHeader_klqui_225 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._sectionGrid_klqui_238 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

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

._field_klqui_250 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

._fieldRow_klqui_257 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

._fieldLabel_klqui_264 {
  font-size: 11.5px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._fieldValue_klqui_272 {
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}

._fieldValueLarge_klqui_280 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

._empty_klqui_15 {
  color: #cbd5e1;
  font-style: italic;
  font-weight: 400;
}

._durationBadge_klqui_293 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
}

/* Content card (açıklama + içerik) */
._contentCard_klqui_306 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

._contentTitle_klqui_313 {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._contentText_klqui_322 {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}._section_17swy_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
}

._header_17swy_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._header_17swy_9 h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

._uploadWrap_17swy_22 {
  position: relative;
}

._hiddenInput_17swy_26 {
  display: none;
}

._empty_17swy_30 {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

._list_17swy_36 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._row_17swy_45 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

._nameButton_17swy_55 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
._nameButton_17swy_55:hover ._name_17swy_55 {
  color: #2563eb;
  text-decoration: underline;
}

._name_17swy_55 {
  font-size: 14px;
  color: #111827;
  word-break: break-word;
}

._meta_17swy_78 {
  font-size: 12px;
  color: #6b7280;
}

._removeButton_17swy_83 {
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  padding: 4px;
  border-radius: 4px;
}
._removeButton_17swy_83:hover {
  background: #fee2e2;
}
._removeButton_17swy_83:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._body_1b5lj_1 {
  min-height: 200px;
  max-height: min(75vh, 620px);
  overflow-y: auto;
  padding: 4px 2px;
}

._subtitle_1b5lj_8 {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ---------- Empty state ---------- */
._emptyState_1b5lj_21 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 14px;
}

._emptyIcon_1b5lj_31 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
  color: #6366f1;
  font-size: 32px;
}

._emptyTitle_1b5lj_43 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

._emptyHint_1b5lj_50 {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
  max-width: 320px;
  line-height: 1.5;
}

/* ---------- Loading skeleton ---------- */
._skeletonList_1b5lj_59 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._skeletonCard_1b5lj_65 {
  height: 128px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: _shimmer_1b5lj_1 1.4s ease-in-out infinite;
}

@keyframes _shimmer_1b5lj_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
._errorBanner_1b5lj_81 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #E6F7FB;
  color: #b91c1c;
  font-size: 0.875rem;
  border: 1px solid #fecaca;
}

/* ---------- List ---------- */
._list_1b5lj_94 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._card_1b5lj_103 {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
._card_1b5lj_103:hover {
  box-shadow: 0 6px 18px -8px rgba(17, 24, 39, 0.12);
  border-color: #c7d2fe;
}

/* Card header (name + jitsi) */
._cardHeader_1b5lj_116 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

._cardHeaderLeft_1b5lj_126 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._classIcon_1b5lj_133 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

._classTitle_1b5lj_147 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
._classTitle_1b5lj_147 strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._classTitle_1b5lj_147 small {
  font-size: 0.75rem;
  color: #6b7280;
}

._jitsiChip_1b5lj_166 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Meta grid (tarih, lokasyon, kontenjan) */
._metaGrid_1b5lj_181 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

._metaItem_1b5lj_188 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
}

._metaLabel_1b5lj_198 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._metaValue_1b5lj_209 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #111827;
  word-break: break-word;
  line-height: 1.4;
}

/* Schedule */
._scheduleBlock_1b5lj_218 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

._scheduleHeader_1b5lj_224 {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

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

._scheduleChip_1b5lj_233 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  background: #eff6ff;
  color: #1e40af;
  border-radius: 8px;
  border: 1px solid #dbeafe;
}
._scheduleChip_1b5lj_233 strong {
  font-weight: 600;
}
._scheduleChip_1b5lj_233 span {
  color: #3b82f6;
}

/* Participants */
._participantsBlock_1b5lj_258 {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
}

._participantsHeader_1b5lj_264 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
._participantsHeader_1b5lj_264 ._label_1b5lj_270 {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._participantsCount_1b5lj_278 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #374151;
  border-radius: 999px;
}

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

._participantChip_1b5lj_295 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.8125rem;
  transition: background 0.15s ease;
}
._participantChip_1b5lj_295:hover {
  background: #f3f4f6;
}

._avatar_1b5lj_310 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: white;
  background: #6366f1;
  flex-shrink: 0;
}

._participantName_1b5lj_324 {
  font-weight: 500;
  color: #111827;
}

._participantTitle_1b5lj_329 {
  font-size: 0.6875rem;
  color: #6b7280;
}

._participantsEmpty_1b5lj_334 {
  margin: 0;
  padding: 10px;
  font-size: 0.8125rem;
  color: #9ca3af;
  text-align: center;
  background: #fafafa;
  border-radius: 8px;
  font-style: italic;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._header_1ekp4_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #dadfe3;
}

._headerLeft_1ekp4_44 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerIcon_1ekp4_50 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00A9CE;
}

._headerTitle_1ekp4_57 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
}

._headerCloseBtn_1ekp4_64 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._headerCloseBtn_1ekp4_64:hover {
  background: #f5f5f5;
  border-color: #e8e8e9;
}

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

._fieldGroup_1ekp4_89 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_1ekp4_95 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._errorText_1ekp4_101 {
  font-size: 12px;
  color: #00A9CE;
}

._educationLockedLabel_1ekp4_106 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._educationLockedChip_1ekp4_112 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #dadfe3;
  border-radius: 8px;
  background: #f5f5f5;
  color: #14181f;
  font-size: 14px;
  width: fit-content;
  max-width: 100%;
}
._educationLockedChip_1ekp4_112 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._headerTitle_oglyo_2 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._headerIcon_oglyo_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #00A9CE;
  color: #fff;
  flex-shrink: 0;
}

._headerTitleText_oglyo_21 {
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  word-break: break-word;
}

._drawerContent_oglyo_35 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  min-width: 0;
  overflow-x: hidden;
}

._loadingState_oglyo_44,
._errorState_oglyo_45 {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #666f82;
}

._errorState_oglyo_45 {
  color: #c62828;
}

._fieldRow_oglyo_56 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._fieldLabel_oglyo_63 {
  font-size: 14px;
  font-weight: 500;
  color: #666f82;
  margin-right: 4px;
}

._fieldsGrid_oglyo_70 {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #f8f8f9;
}

._fieldItem_oglyo_79 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._fieldIcon_oglyo_86 {
  flex-shrink: 0;
  color: #666f82;
}

._fieldValue_oglyo_91 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  margin-left: auto;
}

._section_oglyo_98 {
  margin-top: 4px;
  min-width: 0;
}

._sectionTitle_oglyo_103 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 8px 0;
}

/* Read-only metin alanı (talep açıklaması ve cevap) */
._sectionBodyBox_oglyo_111 {
  font-size: 14px;
  line-height: 1.5;
  color: #34314a;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fafafa;
  min-height: 60px;
  min-width: 0;
}

._sectionBody_oglyo_111 {
  font-size: 14px;
  line-height: 1.5;
  color: #34314a;
  margin: 0;
  white-space: pre-wrap;
}

._sectionMeta_oglyo_135 {
  font-size: 12px;
  color: #666f82;
  margin: 8px 0 0 0;
}

/* Talep ile Cevap arası mavi ayırıcı çizgi */
._sectionDivider_oglyo_142 {
  height: 0;
  border: none;
  border-top: 2px solid #e8e8e9;
  margin: 20px 0 16px 0;
}

._attachmentList_oglyo_149 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._attachmentItem_oglyo_158 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._attachmentIcon_oglyo_168 {
  flex-shrink: 0;
  color: #666f82;
}

._attachmentInfo_oglyo_173 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._attachmentName_oglyo_181 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._attachmentSize_oglyo_187 {
  font-size: 12px;
  color: #666f82;
}

._downloadButton_oglyo_192 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
._downloadButton_oglyo_192:hover {
  background: #f6f7f8;
}

._footer_oglyo_207 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e8e8e9;
  background: #fff;
}

._attachButton_oglyo_216 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
._attachButton_oglyo_216:hover {
  background: #f6f7f8;
  border-color: #d0d0d1;
}

._inputWrap_oglyo_234 {
  flex: 1;
  min-width: 0;
}
._inputWrap_oglyo_234 .input {
  width: 100%;
}

._sendButton_oglyo_242 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #00A9CE;
  cursor: pointer;
  flex-shrink: 0;
}
._sendButton_oglyo_242:hover:not(:disabled) {
  background: #c41e26;
}
._sendButton_oglyo_242:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Karşılıklı konuşma (thread) ---- */
._thread_oglyo_264 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

._msgRow_oglyo_271 {
  display: flex;
  width: 100%;
  min-width: 0;
}

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

._msgRowClient_oglyo_281 {
  justify-content: flex-start;
}

._bubble_oglyo_285 {
  max-width: 80%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

/* Personel (biz) – sağda, marka tonu */
._bubbleStaff_oglyo_294 {
  background: #fdeaeb;
  border-color: #f6c9cc;
  border-bottom-right-radius: 4px;
}

/* Talep sahibi – solda, nötr */
._bubbleClient_oglyo_301 {
  background: #f6f7f8;
  border-bottom-left-radius: 4px;
}

._bubbleMeta_oglyo_306 {
  font-size: 12px;
  color: #666f82;
  margin-bottom: 4px;
  font-weight: 500;
}

._bubbleContent_oglyo_313 {
  font-size: 14px;
  line-height: 1.5;
  color: #2f333c;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

._bubbleFile_oglyo_322 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._lockedNote_oglyo_333 {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #666f82;
  font-size: 13px;
  text-align: center;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._body_1g6ds_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._subtitle_1g6ds_41 {
  display: block;
  color: #505766;
  font-size: 14px;
}

._viewButton_1g6ds_47 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #505766;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._viewButton_1g6ds_47:hover {
  background: #f5f5f5;
  border-color: #e8e8e9;
}._pageContainer_lwn6z_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

._actionButton_lwn6z_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_lwn6z_8:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_lwn6z_8:focus {
  outline: none;
}

._actionMenu_lwn6z_30 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_lwn6z_36 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #4D5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_lwn6z_36:hover {
  background: #F6F7F8;
}
._actionMenuItem_lwn6z_36._error_lwn6z_58 {
  color: var(--color-error, #ef4444);
}
._actionMenuItem_lwn6z_36._error_lwn6z_58:hover {
  background: rgba(239, 68, 68, 0.08);
}

.education-code-column {
  min-width: 140px;
  font-weight: 500;
}
.education-name-column {
  min-width: 180px;
  flex: 1;
}
.educator-column {
  min-width: 130px;
}
.format-column {
  min-width: 100px;
}
.target-audience-column {
  min-width: 110px;
}
.registration-column {
  min-width: 110px;
  text-align: center;
}
.date-column {
  min-width: 110px;
}
.status-column {
  min-width: 130px;
}._form_1l6vv_1 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

._section_1l6vv_7 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._sectionHeader_1l6vv_13 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._sectionNumber_1l6vv_19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

._sectionTitle_1l6vv_34 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._sectionSubtitle_1l6vv_42 {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._grid2_1l6vv_49 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  ._grid2_1l6vv_49 {
    grid-template-columns: 1fr;
  }
}

._inlineHint_1l6vv_60 {
  margin: 0;
  padding: 8px 12px;
  background: #fef9c3;
  color: #854d0e;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
}

._statusCards_1l6vv_70 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  ._statusCards_1l6vv_70 {
    grid-template-columns: 1fr;
  }
}

._statusCard_1l6vv_70 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
._statusCard_1l6vv_70:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
._statusCard_1l6vv_70:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

._statusCardActive_1l6vv_102 ._statusCardIcon_1l6vv_102 {
  background: #dcfce7;
  color: #166534;
}

._statusCardPassive_1l6vv_107 ._statusCardIcon_1l6vv_102 {
  background: #fee2e2;
  color: #991b1b;
}

._statusCardSelected_1l6vv_112._statusCardActive_1l6vv_102 {
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
._statusCardSelected_1l6vv_112._statusCardActive_1l6vv_102 ._statusCardRadio_1l6vv_117 {
  border-color: #16a34a;
}
._statusCardSelected_1l6vv_112._statusCardActive_1l6vv_102 ._statusCardRadioInner_1l6vv_120 {
  background: #16a34a;
  transform: scale(1);
}

._statusCardSelected_1l6vv_112._statusCardPassive_1l6vv_107 {
  border-color: #dc2626;
  background: #E6F7FB;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
._statusCardSelected_1l6vv_112._statusCardPassive_1l6vv_107 ._statusCardRadio_1l6vv_117 {
  border-color: #dc2626;
}
._statusCardSelected_1l6vv_112._statusCardPassive_1l6vv_107 ._statusCardRadioInner_1l6vv_120 {
  background: #dc2626;
  transform: scale(1);
}

._statusCardIcon_1l6vv_102 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

._statusCardBody_1l6vv_148 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._statusCardLabel_1l6vv_156 {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._statusCardDescription_1l6vv_163 {
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._statusCardRadio_1l6vv_117 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

._statusCardRadioInner_1l6vv_120 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: all 0.15s ease;
}._rootCategoryName_1ik3w_1 {
  font-weight: 600;
  color: #1e293b;
}

._subCategoryName_1ik3w_6 {
  font-weight: 400;
  color: #334155;
}

._treeCell_1ik3w_11 {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-height: 32px;
}

._treeGuide_1ik3w_19 {
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 50%;
  width: 12px;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  border-bottom-left-radius: 0;
  pointer-events: none;
}

._chevron_1ik3w_31 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
._chevron_1ik3w_31:hover {
  background: #f1f5f9;
  color: #0f172a;
}
._chevron_1ik3w_31:focus {
  outline: none;
}

._chevronOpen_1ik3w_54 {
  color: #0f172a;
}

._chevronPlaceholder_1ik3w_58 {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

._spinner_1ik3w_65 {
  width: 12px;
  height: 12px;
  border: 2px solid #e2e8f0;
  border-top-color: #64748b;
  border-radius: 50%;
  animation: _spin_1ik3w_65 0.7s linear infinite;
}

@keyframes _spin_1ik3w_65 {
  to {
    transform: rotate(360deg);
  }
}
._iconWrap_1ik3w_79 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}

._iconRoot_1ik3w_89 {
  background: #eef2ff;
  color: #4f46e5;
}

._iconLeaf_1ik3w_94 {
  background: #f1f5f9;
  color: #64748b;
}

._emptyHint_1ik3w_99 {
  font-size: 13px;
  font-style: italic;
  color: #94a3b8;
  padding-left: 34px;
}

._breadcrumb_1ik3w_106 {
  margin-left: 8px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

._childCountBadge_1ik3w_113 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-left: 4px;
}

._actionButton_1ik3w_130 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_1ik3w_130:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_1ik3w_130:focus {
  outline: none;
}

._actionMenu_1ik3w_152 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_1ik3w_158 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #4d5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_1ik3w_158:hover {
  background: #f6f7f8;
}
._actionMenuItem_1ik3w_158._error_1ik3w_180 {
  color: var(--color-error, #ef4444);
}
._actionMenuItem_1ik3w_158._error_1ik3w_180:hover {
  background: rgba(239, 68, 68, 0.08);
}

._nameColumn_1ik3w_187 {
  min-width: 260px;
  flex: 1;
}

._descriptionColumn_1ik3w_192 {
  min-width: 180px;
  max-width: 320px;
}

._descriptionCell_1ik3w_197 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._statusColumn_1ik3w_205 {
  min-width: 100px;
}

._statusBadge_1ik3w_209 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

._statusActive_1ik3w_219 {
  background: #dcfce7;
  color: #166534;
}

._statusPassive_1ik3w_224 {
  background: #fee2e2;
  color: #991b1b;
}._page_1krcc_1 {
  padding: 24px;
}

._status_1krcc_5 {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
._status_1krcc_5._active_1krcc_13 {
  background: #e8f7ef;
  color: #16834a;
}
._status_1krcc_5._passive_1krcc_17 {
  background: #f1f2f5;
  color: #6b7280;
}

._actions_1krcc_22 {
  display: flex;
  gap: 8px;
}

._iconButton_1krcc_27 {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  height: 34px;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
._iconButton_1krcc_27:hover {
  background: #f8fafc;
}

._form_1krcc_42 {
  display: grid;
  gap: 16px;
}

._switchRow_1krcc_47 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}._form_othss_1 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

._section_othss_7 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._sectionHeader_othss_13 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._sectionNumber_othss_19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

._sectionTitle_othss_34 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._sectionSubtitle_othss_42 {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._grid2_othss_49 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  ._grid2_othss_49 {
    grid-template-columns: 1fr;
  }
}

._inlineHint_othss_60 {
  margin: 0;
  padding: 8px 12px;
  background: #fef9c3;
  color: #854d0e;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
}

._typeCards_othss_70 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  ._typeCards_othss_70 {
    grid-template-columns: 1fr;
  }
}

._typeCard_othss_70 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  position: relative;
}
._typeCard_othss_70:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
._typeCard_othss_70:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

._typeCardActive_othss_103 {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
._typeCardActive_othss_103 ._typeCardRadio_othss_108 {
  border-color: #4f46e5;
}
._typeCardActive_othss_103 ._typeCardRadioInner_othss_111 {
  background: #4f46e5;
  transform: scale(1);
}

._typeCardCentral_othss_116 ._typeCardIcon_othss_116 {
  background: #dbeafe;
  color: #1e40af;
}

._typeCardBranch_othss_121 ._typeCardIcon_othss_116 {
  background: #ede9fe;
  color: #6d28d9;
}

._typeCardIcon_othss_116 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

._typeCardBody_othss_136 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._typeCardLabel_othss_144 {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._typeCardDescription_othss_151 {
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._typeCardRadio_othss_108 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

._typeCardRadioInner_othss_111 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: all 0.15s ease;
}._tabBar_16ghh_1 {
  padding: 0 24px;
  margin-bottom: 4px;
}

._rootCategoryName_16ghh_6 {
  font-weight: 600;
  color: #1e293b;
}

._subCategoryName_16ghh_11 {
  font-weight: 400;
  color: #334155;
}

._virtualName_16ghh_16 {
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}

._treeCell_16ghh_22 {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-height: 32px;
}

._treeGuide_16ghh_30 {
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 50%;
  width: 12px;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  border-bottom-left-radius: 0;
  pointer-events: none;
}

._chevron_16ghh_42 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
._chevron_16ghh_42:hover {
  background: #f1f5f9;
  color: #0f172a;
}
._chevron_16ghh_42:focus {
  outline: none;
}

._chevronOpen_16ghh_65 {
  color: #0f172a;
}

._chevronPlaceholder_16ghh_69 {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

._iconWrap_16ghh_76 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}

._iconOrg_16ghh_86 {
  background: #fef3c7;
  color: #b45309;
}

._iconRoot_16ghh_91 {
  background: #eef2ff;
  color: #4f46e5;
}

._iconLeaf_16ghh_96 {
  background: #f1f5f9;
  color: #64748b;
}

._typeChip_16ghh_101 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  margin-left: 4px;
}

._typeCentralChip_16ghh_112 {
  background: #dbeafe;
  color: #1e40af;
}

._typeBranchChip_16ghh_117 {
  background: #ede9fe;
  color: #6d28d9;
}

._childCountBadge_16ghh_122 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-left: 4px;
}

._breadcrumb_16ghh_139 {
  margin-left: 8px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

._actionButton_16ghh_146 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_16ghh_146:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_16ghh_146:focus {
  outline: none;
}

._actionMenu_16ghh_168 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_16ghh_174 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4d5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_16ghh_174:hover {
  background: #f6f7f8;
}
._actionMenuItem_16ghh_174._error_16ghh_195 {
  color: var(--color-error, #ef4444);
}
._actionMenuItem_16ghh_174._error_16ghh_195:hover {
  background: rgba(239, 68, 68, 0.08);
}

._nameColumn_16ghh_202 {
  min-width: 260px;
  flex: 1;
}

._descriptionColumn_16ghh_207 {
  min-width: 180px;
  max-width: 320px;
}

._descriptionCell_16ghh_212 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._form_17m1f_1 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

._section_17m1f_7 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._sectionHeader_17m1f_13 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._sectionNumber_17m1f_19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

._sectionTitle_17m1f_34 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._sectionSubtitle_17m1f_42 {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._grid2_17m1f_49 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  ._grid2_17m1f_49 {
    grid-template-columns: 1fr;
  }
}._actionButton_93p1e_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_93p1e_1:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_93p1e_1:focus {
  outline: none;
}

._actionMenu_93p1e_23 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_93p1e_29 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #4d5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_93p1e_29:hover {
  background: #f6f7f8;
}
._actionMenuItem_93p1e_29._error_93p1e_50 {
  color: var(--color-error, #ef4444);
}
._actionMenuItem_93p1e_29._error_93p1e_50:hover {
  background: rgba(239, 68, 68, 0.08);
}

._nameColumn_93p1e_57 {
  min-width: 240px;
  flex: 1;
}

._codeColumn_93p1e_62 {
  min-width: 140px;
}

._usersColumn_93p1e_66 {
  min-width: 110px;
}

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

._iconWrap_93p1e_76 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}

._companyName_93p1e_88 {
  font-weight: 600;
  color: #0f172a;
}

._codeBadge_93p1e_93 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  font-family: ui-monospace, Menlo, monospace;
}

._userCountBadge_93p1e_105 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
}._container_2ldmo_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

._toolbar_2ldmo_8 {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
._toolbar_2ldmo_8 > :first-child {
  max-width: 320px;
  flex: 1;
}

._tableWrapper_2ldmo_19 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
}

._table_2ldmo_19 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._table_2ldmo_19 th {
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #707a8f;
  background: #fafbfc;
  border-bottom: 1px solid #e8e8e9;
}
._table_2ldmo_19 td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f4;
  color: #14181f;
}
._table_2ldmo_19 tbody tr:last-child td {
  border-bottom: none;
}
._table_2ldmo_19 tbody tr:hover td {
  background: #fafbfc;
}

._addressCell_2ldmo_53 {
  color: #505766;
  max-width: 420px;
}

._coordsCell_2ldmo_58 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #505766;
  white-space: nowrap;
}

._emptyCell_2ldmo_65 {
  padding: 48px 16px !important;
  text-align: center;
  color: #707a8f;
}

._actionsCol_2ldmo_71 {
  width: 100px;
  text-align: right;
}

._actions_2ldmo_71 {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

._iconButton_2ldmo_82 {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #505766;
  transition: all 0.15s ease;
}
._iconButton_2ldmo_82:hover {
  background: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

._iconButtonDanger_2ldmo_101:hover {
  background: #E6F7FB;
  border-color: #ffd2d5;
  color: #00A9CE;
}._body_10yj0_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._field_10yj0_7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_10yj0_13 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

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

._targetBtn_10yj0_25 {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #d3d6dc;
  background: #fff;
  color: #4d5464;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
._targetBtn_10yj0_25:hover {
  border-color: #b8bec8;
  background: #f6f7f8;
}

._targetBtnActive_10yj0_41 {
  border-color: #00A9CE;
  background: #E6F7FB;
  color: #00A9CE;
}

._textarea_10yj0_47 {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  font-family: inherit;
  color: #14181f;
  border: 1px solid #d3d6dc;
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
._textarea_10yj0_47::placeholder {
  color: #94a3b8;
}
._textarea_10yj0_47:focus {
  outline: none;
  border-color: #00A9CE;
  box-shadow: 0 0 0 1px rgba(0, 169, 206, 0.15);
}

._hint_10yj0_69 {
  margin: 0;
  font-size: 12px;
  color: #707a8f;
}._dateColumn_zw07g_1 {
  min-width: 140px;
}

._recipientColumn_zw07g_5 {
  min-width: 180px;
  max-width: 240px;
}

._messageColumn_zw07g_10 {
  min-width: 200px;
  max-width: 360px;
}

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

._statusColumn_zw07g_22 {
  min-width: 100px;
}._body_10yj0_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._field_10yj0_7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_10yj0_13 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

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

._targetBtn_10yj0_25 {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid #d3d6dc;
  background: #fff;
  color: #4d5464;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
._targetBtn_10yj0_25:hover {
  border-color: #b8bec8;
  background: #f6f7f8;
}

._targetBtnActive_10yj0_41 {
  border-color: #00A9CE;
  background: #E6F7FB;
  color: #00A9CE;
}

._textarea_10yj0_47 {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  font-family: inherit;
  color: #14181f;
  border: 1px solid #d3d6dc;
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
._textarea_10yj0_47::placeholder {
  color: #94a3b8;
}
._textarea_10yj0_47:focus {
  outline: none;
  border-color: #00A9CE;
  box-shadow: 0 0 0 1px rgba(0, 169, 206, 0.15);
}

._hint_10yj0_69 {
  margin: 0;
  font-size: 12px;
  color: #707a8f;
}._dateColumn_wz8i5_1 {
  min-width: 140px;
}

._recipientColumn_wz8i5_5 {
  min-width: 180px;
  max-width: 240px;
}

._subjectColumn_wz8i5_10 {
  min-width: 140px;
  max-width: 220px;
}

._messageColumn_wz8i5_15 {
  min-width: 200px;
  max-width: 360px;
}

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

._statusColumn_wz8i5_27 {
  min-width: 100px;
}._page_1yseo_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 40px;
}

/* KPI ------------------------------------------------------------------ */
._kpiGrid_1yseo_9 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  ._kpiGrid_1yseo_9 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  ._kpiGrid_1yseo_9 {
    grid-template-columns: 1fr;
  }
}

/* Layout --------------------------------------------------------------- */
._mainGrid_1yseo_26 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  ._mainGrid_1yseo_26 {
    grid-template-columns: 1fr;
  }
}

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

._chartsRow_1yseo_43 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  ._chartsRow_1yseo_43 {
    grid-template-columns: 1fr;
  }
}

/* Card base ------------------------------------------------------------ */
._card_1yseo_55 {
  position: relative;
  background: radial-gradient(120% 60% at 0% 0%, rgba(99, 102, 241, 0.06), transparent 55%), radial-gradient(120% 60% at 100% 100%, rgba(59, 130, 246, 0.06), transparent 55%), #fff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

._calendarCard_1yseo_67 {
  padding-bottom: 8px;
}

._chartCard_1yseo_71 {
  min-height: 340px;
}

._cardHeader_1yseo_75 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
._cardHeader_1yseo_75 h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}
._cardHeader_1yseo_75 p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
}

/* Calendar tweaks ------------------------------------------------------ */
._calendarWrap_1yseo_96 {
  --fc-border: #f1f5f9;
  --fc-indigo: #6366f1;
  --fc-indigo-soft: rgba(99, 102, 241, 0.1);
}
._calendarWrap_1yseo_96 .fc {
  font-family: inherit;
}
._calendarWrap_1yseo_96 .fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 16px;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--fc-border);
}
._calendarWrap_1yseo_96 .fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
._calendarWrap_1yseo_96 .fc .fc-button-primary {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.15s ease;
}
._calendarWrap_1yseo_96 .fc .fc-button-primary:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
._calendarWrap_1yseo_96 .fc .fc-button-primary:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
._calendarWrap_1yseo_96 .fc .fc-button-primary.fc-button-active,
._calendarWrap_1yseo_96 .fc .fc-button-primary:not(:disabled).fc-button-active,
._calendarWrap_1yseo_96 .fc .fc-button-primary:not(:disabled):active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
._calendarWrap_1yseo_96 .fc .fc-today-button {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
  font-weight: 600;
}
._calendarWrap_1yseo_96 .fc .fc-today-button:hover {
  background: #e0e7ff;
  color: #3730a3;
}
._calendarWrap_1yseo_96 .fc .fc-today-button:disabled {
  opacity: 0.5;
  background: #f1f5f9;
  color: #94a3b8;
}
._calendarWrap_1yseo_96 .fc .fc-button-group {
  gap: 6px;
  display: inline-flex;
}
._calendarWrap_1yseo_96 .fc .fc-prev-button, ._calendarWrap_1yseo_96 .fc .fc-next-button {
  padding: 6px 10px;
}
._calendarWrap_1yseo_96 .fc-theme-standard,
._calendarWrap_1yseo_96 .fc-theme-standard .fc-scrollgrid {
  border-color: var(--fc-border);
  border-radius: 12px;
  overflow: hidden;
}
._calendarWrap_1yseo_96 .fc-theme-standard td,
._calendarWrap_1yseo_96 .fc-theme-standard th {
  border-color: var(--fc-border);
}
._calendarWrap_1yseo_96 .fc .fc-col-header-cell {
  background: #f8fafc;
  padding: 10px 0;
}
._calendarWrap_1yseo_96 .fc .fc-col-header-cell-cushion {
  color: #64748b;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px;
}
._calendarWrap_1yseo_96 .fc .fc-daygrid-day {
  transition: background 0.15s ease;
}
._calendarWrap_1yseo_96 .fc .fc-daygrid-day:hover {
  background: #f8fafc;
}
._calendarWrap_1yseo_96 .fc .fc-day-today {
  background-color: var(--fc-indigo-soft) !important;
}
._calendarWrap_1yseo_96 .fc .fc-day-today .fc-daygrid-day-number {
  color: #fff;
  background: var(--fc-indigo);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 4px 4px 0 0;
}
._calendarWrap_1yseo_96 .fc .fc-daygrid-day-top {
  flex-direction: row;
  justify-content: flex-end;
}
._calendarWrap_1yseo_96 .fc .fc-daygrid-day-number {
  color: #334155;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 8px 2px;
}
._calendarWrap_1yseo_96 .fc .fc-day-other .fc-daygrid-day-number {
  color: #cbd5e1;
}
._calendarWrap_1yseo_96 .fc .fc-day-sat .fc-daygrid-day-number,
._calendarWrap_1yseo_96 .fc .fc-day-sun .fc-daygrid-day-number {
  color: #9ca3af;
}
._calendarWrap_1yseo_96 .fc-event {
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
._calendarWrap_1yseo_96 .fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}
._calendarWrap_1yseo_96 .fc-daygrid-dot-event {
  padding: 3px 6px;
  border-radius: 6px;
}
._calendarWrap_1yseo_96 .fc-daygrid-dot-event:hover {
  background: #f1f5f9;
}
._calendarWrap_1yseo_96 .fc .fc-list-event:hover td {
  background: #f8fafc;
}
._calendarWrap_1yseo_96 .fc .fc-list-day-cushion {
  background: #f8fafc;
}
._calendarWrap_1yseo_96 .fc .fc-timegrid-slot {
  height: 2.4em;
}
._calendarWrap_1yseo_96 .fc .fc-timegrid-now-indicator-line {
  border-color: #ef4444;
  border-width: 2px;
}
._calendarWrap_1yseo_96 .fc .fc-timegrid-now-indicator-arrow {
  border-top-color: #ef4444;
  border-bottom-color: #ef4444;
}

._legendRow_1yseo_264 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._legendItem_1yseo_270 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

._swatch_1yseo_278 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Event list (sidebar) ------------------------------------------------- */
._eventList_1yseo_286 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._eventItem_1yseo_295 {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._eventItem_1yseo_295:hover {
  background: #f8fafc;
  border-color: #dbeafe;
}

._eventDot_1yseo_311 {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

._eventInfo_1yseo_317 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._eventTitle_1yseo_324 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._eventMeta_1yseo_333 {
  font-size: 11.5px;
  color: #64748b;
}

._daysChip_1yseo_338 {
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

._daysChipUrgent_1yseo_348 {
  background: #fee2e2;
  color: #b91c1c;
}

._emptyCell_1yseo_353 {
  padding: 20px 4px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

._chartBody_1yseo_360 {
  flex: 1;
  min-height: 0;
}

/* Donut layout -------------------------------------------------------- */
._donutLayout_1yseo_366 {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
@media (max-width: 520px) {
  ._donutLayout_1yseo_366 {
    grid-template-columns: 1fr;
  }
}

._donutChart_1yseo_378 {
  position: relative;
}
._donutChart_1yseo_378 .apexcharts-canvas {
  margin: 0 auto;
}

._donutCenter_1yseo_385 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

._donutCenterValue_1yseo_396 {
  font-size: 34px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
}

._donutCenterLabel_1yseo_404 {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._donutLegend_1yseo_412 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._donutLegendItem_1yseo_421 {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
}

._donutLegendDot_1yseo_428 {
  margin-top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

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

._donutLegendLabel_1yseo_443 {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

._donutLegendValueRow_1yseo_449 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

._donutLegendValue_1yseo_449 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

._donutLegendPct_1yseo_462 {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
}

._donutLegendBarTrack_1yseo_471 {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
  margin-top: 2px;
}

._donutLegendBarFill_1yseo_480 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}.progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.progress-bar-container.small .progress-bar-wrapper {
  height: 8px;
}
.progress-bar-container.medium .progress-bar-wrapper {
  height: 8px;
}
.progress-bar-container.large .progress-bar-wrapper {
  height: 8px;
}

.progress-bar-wrapper {
  width: 100%;
  background-color: #f1f2f4;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
}
.progress-bar-fill.success {
  background-color: #15ac77;
}
.progress-bar-fill.warning {
  background-color: #fe9431;
}
.progress-bar-fill.error {
  background-color: #fe5b65;
}

.progress-bar-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
}

.progress-bar-score {
  color: #666f82;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
}

.progress-bar-percentage {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5%;
}
.progress-bar-percentage.success {
  color: #15ac77;
}
.progress-bar-percentage.warning {
  color: #fe9431;
}
.progress-bar-percentage.error {
  color: #fe5b65;
}._root_12s5p_1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._title_12s5p_7 {
  font-size: 13px;
  font-weight: 600;
  color: #4d5464;
}

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

._card_12s5p_19 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._media_12s5p_29 {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8fafc;
}

._audio_12s5p_37 {
  width: 100%;
}

._fileFallback_12s5p_41 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._fileIcon_12s5p_47 {
  min-width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7fb;
  color: #00a9ce;
  font-size: 12px;
  font-weight: 700;
}

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

._fileName_12s5p_67 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  word-break: break-word;
}

._fileMeta_12s5p_74 {
  font-size: 12px;
  color: #707a8f;
}

._download_12s5p_79 {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #00a9ce;
  text-decoration: none;
  cursor: pointer;
}
._download_12s5p_79:disabled {
  cursor: default;
  opacity: 0.6;
}

._remove_12s5p_95 {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: #d92d20;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}._root_cxxl1_1 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  margin-right: 0;
}

._questionsColumns_cxxl1_13 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  ._questionsColumns_cxxl1_13 {
    flex-direction: column;
  }
}

._questionsListColumn_cxxl1_26 {
  flex: 0 0 320px;
  min-width: 0;
}
@media (max-width: 900px) {
  ._questionsListColumn_cxxl1_26 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

._previewQuestionsListCard_cxxl1_38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
  min-height: 720px;
  overflow-y: auto;
}

._previewQuestionItem_cxxl1_50 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

._previewQuestionItemActive_cxxl1_62 {
  border-color: #00A9CE;
  background: #E6F7FB;
}
._previewQuestionItemActive_cxxl1_62 ._previewQuestionIndex_cxxl1_66 {
  color: #00A9CE;
}

._previewQuestionIndex_cxxl1_66 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._previewQuestionStatus_cxxl1_76 {
  flex-shrink: 0;
}

._previewQuestionStatusCircle_cxxl1_80 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e8e8e9;
  background: #fff;
  display: inline-block;
}

._previewQuestionStatusCircleAnswered_cxxl1_89 {
  background: #e8f7f1;
  border-color: #15ac77;
}

._previewQuestionStatusCircleActive_cxxl1_94 {
  border-color: #00A9CE;
}

._questionEditorColumn_cxxl1_98 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  ._questionEditorColumn_cxxl1_98 {
    width: 100%;
  }
}

._previewContent_cxxl1_110 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._previewProgressRow_cxxl1_119 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

._previewProgressBar_cxxl1_127 {
  max-width: 100%;
}
._previewProgressBar_cxxl1_127 .progress-bar-wrapper {
  height: 4px;
}
._previewProgressBar_cxxl1_127 .progress-bar-fill {
  background-color: #00A9CE !important;
}

._previewProgressLabel_cxxl1_137 {
  font-size: 13px;
  font-weight: 500;
  color: #00A9CE;
  white-space: nowrap;
}

._previewQuestionCard_cxxl1_144 {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._previewQuestionTitle_cxxl1_151 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 12px 0;
  font-family: "Inter", sans-serif;
}

._previewQuestionText_cxxl1_160 {
  font-size: 14px;
  line-height: 20px;
  color: #14181f;
}
._previewQuestionText_cxxl1_160 ul,
._previewQuestionText_cxxl1_160 ol {
  margin: 8px 0 8px 24px;
  padding-left: 20px;
}
._previewQuestionText_cxxl1_160 li {
  margin: 4px 0;
}
._previewQuestionText_cxxl1_160 a {
  color: #0077b6;
  text-decoration: underline;
  word-break: break-word;
}

._previewQuestionImage_cxxl1_179 {
  margin: 12px 0;
}
._previewQuestionImage_cxxl1_179 img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  object-fit: contain;
}

._previewQuestionHint_cxxl1_190 {
  font-size: 13px;
  color: #707a8f;
  margin: 0 0 12px 0;
}

._previewAnswerFeedback_cxxl1_196 {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

._previewAnswerFeedbackIcon_cxxl1_208 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._previewAnswerFeedbackCorrect_cxxl1_219 {
  border-color: #bfe9d8;
  background: #e8f7f1;
  color: #0f7a55;
}

._previewAnswerFeedbackIncorrect_cxxl1_225 {
  border-color: #f3c2c2;
  background: #fdecec;
  color: #b42318;
}

._previewAnswerFeedbackNeutral_cxxl1_231 {
  border-color: #d9e5f5;
  background: #f5f8fc;
  color: #2f5c8f;
}

._previewOptionsList_cxxl1_237 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._previewOptionItem_cxxl1_246 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: default;
}

._previewOptionItemClickable_cxxl1_257 {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
._previewOptionItemClickable_cxxl1_257:hover {
  border-color: #d0d2d6;
  background: #f6f7f8;
}

._previewOptionItemCorrect_cxxl1_266,
._previewOptionItemSelected_cxxl1_267 {
  border-color: #15ac77;
  background: #e8f7f1;
}

._previewOptionItemIncorrect_cxxl1_272 {
  border-color: #f3c2c2;
  background: #fdecec;
}

._previewOptionRadio_cxxl1_277 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #e8e8e9;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

._previewOptionItemCorrect_cxxl1_266 ._previewOptionRadio_cxxl1_277,
._previewOptionItemSelected_cxxl1_267 ._previewOptionRadio_cxxl1_277,
._previewOptionItemIncorrect_cxxl1_272 ._previewOptionRadio_cxxl1_277 {
  border-color: #15ac77;
}

._previewOptionItemIncorrect_cxxl1_272 ._previewOptionRadio_cxxl1_277 {
  border-color: #d92d20;
}

._previewOptionItemIncorrect_cxxl1_272 ._previewOptionText_cxxl1_299 {
  color: #b42318;
}

._previewOptionText_cxxl1_299 {
  font-size: 14px;
  color: #14181f;
}

._previewContinueWrap_cxxl1_308 {
  margin-top: 20px;
}

._previewContinueButton_cxxl1_312 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: #00A9CE;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
}
._previewContinueButton_cxxl1_312:hover:not(:disabled) {
  background: #c91d26;
}
._previewContinueButton_cxxl1_312:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._previewBottomNav_cxxl1_336 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 12px;
}

._previewNavButton_cxxl1_345 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
._previewNavButton_cxxl1_345:hover:not(:disabled) {
  background: #E6F7FB;
  border-color: #00A9CE;
  color: #00A9CE;
}
._previewNavButton_cxxl1_345:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._previewCenterInfo_cxxl1_368 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

._previewTimer_cxxl1_375 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._previewTimerBox_cxxl1_381 {
  min-width: 71px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #2f333c;
}

._previewTimerSeparator_cxxl1_399 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #9fa6b4;
}._root_1gwgr_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_1gwgr_7 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._toolbar_1gwgr_13 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
._toolbar_1gwgr_13 button {
  border: 1px solid #d6d9de;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
._toolbar_1gwgr_13 ._importButton_1gwgr_26 {
  margin-left: auto;
  color: var(--color-primary, #00a9ce);
  border-color: var(--color-primary, #00a9ce);
  font-weight: 500;
}

._editor_1gwgr_33 {
  min-height: 180px;
  border: 1px solid #d6d9de;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  outline: none;
  line-height: 1.5;
}
._editor_1gwgr_33:empty:before {
  content: attr(data-placeholder);
  color: #98a2b3;
}
._editor_1gwgr_33 ul,
._editor_1gwgr_33 ol {
  margin: 8px 0 8px 24px;
  padding-left: 20px;
}
._editor_1gwgr_33 li {
  margin: 4px 0;
}
._editor_1gwgr_33 a {
  color: #0077b6;
  text-decoration: underline;
  word-break: break-word;
}
._container_zag2q_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

._pageHeader_zag2q_9 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-self: flex-start;
}

._breadcrumbContainer_zag2q_19 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._backButton_zag2q_25 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
._backButton_zag2q_25:hover {
  background: #f6f7f8;
  border-color: #d1d5db;
}
._backButton_zag2q_25:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(231, 33, 43, 0.2);
}

._stepperRow_zag2q_48 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

._stepper_zag2q_48 {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

._stepConnectorWrapper_zag2q_65 {
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
}

._step_zag2q_48 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #707a8f;
  transition: color 0.2s ease;
}
._step_zag2q_48:hover {
  color: #14181f;
}

._stepActive_zag2q_88 {
  color: #00A9CE;
}
._stepActive_zag2q_88 ._stepIcon_zag2q_91 {
  border-color: #00A9CE;
  background: #E6F7FB;
}
._stepActive_zag2q_88 ._stepIcon_zag2q_91 svg path {
  stroke: #00A9CE;
}

._stepChecked_zag2q_99 {
  color: #14181f;
}
._stepChecked_zag2q_99 ._stepIcon_zag2q_91 {
  border-color: #00A9CE;
  background: #00A9CE;
  color: #fff;
}

._stepIcon_zag2q_91 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  transition: all 0.2s ease;
}

._stepperContainer_zag2q_120 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

._stepLabel_zag2q_128 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

._nextButtonWrap_zag2q_135 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

._stepConnector_zag2q_65 {
  width: 232px;
  flex-shrink: 0;
  height: 2px;
  background: #e8e8e9;
  margin-bottom: 25px;
  transition: background 0.2s ease;
}
._stepConnector_zag2q_65._stepConnectorCompleted_zag2q_150 {
  background: #00A9CE;
}
._stepConnector_zag2q_65._stepConnectorCurrent_zag2q_153 {
  background: linear-gradient(to right, #00A9CE 50%, #e8e8e9 50%);
}

._inlineBackButton_zag2q_157 {
  margin-right: auto;
}

._actionButtons_zag2q_161 {
  display: flex;
  gap: 8px;
}
._actionButtons_zag2q_161 ._draftButton_zag2q_165 {
  flex: 1 1 50%;
  min-width: 0;
  height: 40px;
  padding: 10px 24px;
  border-radius: 8px;
}
._actionButtons_zag2q_161 ._publishButton_zag2q_172 {
  flex: 1 1 50%;
  min-width: 0 !important;
  height: 40px;
  padding: 10px 24px;
  border-radius: 8px;
}

._formCard_zag2q_180 {
  max-width: 550px;
  width: 100%;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e9;
  background: #fff;
  margin-right: 140px;
}

._cardTitle_zag2q_192 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0 0 8px 0;
  text-align: center;
}

._cardDescription_zag2q_203 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #707a8f;
  margin: 0 0 24px 0;
  text-align: center;
}

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

._formRow_zag2q_220 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 600px) {
  ._formRow_zag2q_220 {
    grid-template-columns: 1fr;
  }
}

._formField_zag2q_232 {
  width: 100%;
}

._durationDropdown_zag2q_236 {
  min-width: 120px;
  /* Sınav süresi input ile aynı hizada: label + 40px input yüksekliği */
  padding-top: 22px;
}
@media (max-width: 600px) {
  ._durationDropdown_zag2q_236 {
    min-width: 100%;
    padding-top: 0;
  }
}

._inputPrefix_zag2q_248 {
  font-size: 14px;
  color: #707a8f;
  font-weight: 500;
}

._placeholderStep_zag2q_254 {
  padding: 32px;
  text-align: center;
  color: #707a8f;
  font-size: 14px;
  background: #f6f7f8;
  border-radius: 8px;
}

._questionsStep_zag2q_263 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  margin-right: 0;
}
._questionsStep_zag2q_263 ._cardTitle_zag2q_192,
._questionsStep_zag2q_263 ._cardDescription_zag2q_203 {
  margin: 0;
}

._questionsColumns_zag2q_279 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  ._questionsColumns_zag2q_279 {
    flex-direction: column;
  }
}

._questionsListColumn_zag2q_292 {
  flex: 0 0 320px;
  min-width: 0;
}
@media (max-width: 900px) {
  ._questionsListColumn_zag2q_292 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

._previewQuestionsListCard_zag2q_304 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
  min-height: 720px;
  overflow-y: auto;
}

._previewQuestionItem_zag2q_316 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

._previewQuestionItemActive_zag2q_328 {
  border-color: #00A9CE;
  background: #E6F7FB;
}
._previewQuestionItemActive_zag2q_328 ._previewQuestionIndex_zag2q_332 {
  color: #00A9CE;
}

._previewQuestionIndex_zag2q_332 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._previewQuestionStatus_zag2q_342 {
  flex-shrink: 0;
}

._previewQuestionStatusCircle_zag2q_346 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e8e8e9;
  background: #fff;
  display: inline-block;
}

._previewQuestionStatusCircleAnswered_zag2q_355 {
  background: #e8f7f1;
  border-color: #15ac77;
}

._previewQuestionStatusCircleActive_zag2q_360 {
  border-color: #00A9CE;
}

._questionsListCard_zag2q_364 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
  min-height: 720px;
  overflow-y: auto;
}

._questionListItem_zag2q_376 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
._questionListItem_zag2q_376:hover {
  border-color: #d0d2d6;
  background: #f6f7f8;
}

._questionListItemActive_zag2q_392 {
  border-color: #00A9CE;
  background: #E6F7FB;
}
._questionListItemActive_zag2q_392 ._questionListLabel_zag2q_396,
._questionListItemActive_zag2q_392 ._questionListDrag_zag2q_397,
._questionListItemActive_zag2q_392 ._questionListEdit_zag2q_398 {
  color: #00A9CE;
}
._questionListItemActive_zag2q_392 ._questionListDrag_zag2q_397 svg path,
._questionListItemActive_zag2q_392 ._questionListEdit_zag2q_398 svg path {
  stroke: #00A9CE;
}

._questionListItemDragging_zag2q_406 {
  opacity: 0.5;
}

._questionListItemDragOver_zag2q_410 {
  border-color: #00A9CE;
  border-style: dashed;
  background: #E6F7FB;
}

._questionListDrag_zag2q_397 {
  display: flex;
  align-items: center;
  color: #707a8f;
  flex-shrink: 0;
  cursor: grab;
}
._questionListDrag_zag2q_397:active {
  cursor: grabbing;
}

._questionListContent_zag2q_427 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._questionListLabel_zag2q_396 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._questionListText_zag2q_441 {
  font-size: 13px;
  line-height: 18px;
  color: #707a8f;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._questionListEdit_zag2q_398 {
  display: flex;
  align-items: center;
  color: #707a8f;
  flex-shrink: 0;
}

._questionEditorColumn_zag2q_459 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  ._questionEditorColumn_zag2q_459 {
    width: 100%;
  }
}

._questionEditorCard_zag2q_471 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._questionEditorHeader_zag2q_482 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

._questionEditorTitle_zag2q_490 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #14181f;
  margin: 0;
  font-family: "Inter", sans-serif;
}

._questionDeleteBtn_zag2q_499 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
._questionDeleteBtn_zag2q_499:hover:not(:disabled) {
  color: #00A9CE;
  background: #E6F7FB;
  border-color: #00A9CE;
}
._questionDeleteBtn_zag2q_499:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._questionEditorBody_zag2q_523 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

._questionField_zag2q_531 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._questionField_zag2q_531 ._questionLabel_zag2q_536 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._addImageLink_zag2q_542 {
  font-size: 14px;
  font-weight: 500;
  color: #00A9CE;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  align-self: flex-start;
  text-decoration: underline;
}
._addImageLink_zag2q_542:hover {
  text-decoration: underline;
}

._questionImagePreview_zag2q_558 {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}
._questionImagePreview_zag2q_558 img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  object-fit: contain;
}
._questionImagePreview_zag2q_558 ._removeImageBtn_zag2q_570 {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
._questionImagePreview_zag2q_558 ._removeImageBtn_zag2q_570:hover {
  background: rgba(0, 0, 0, 0.7);
}

._checkboxRow_zag2q_590 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #14181f;
  cursor: pointer;
}
._checkboxRow_zag2q_590 input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s, background-color 0.2s;
}
._checkboxRow_zag2q_590 input[type=checkbox]:checked {
  border-color: #00A9CE;
  background-color: #00A9CE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l4 4 8-8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

._switchLabel_zag2q_620 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  margin-bottom: 8px;
}

._switchHint_zag2q_628 {
  font-size: 13px;
  color: #707a8f;
  margin: 0 0 12px;
  line-height: 18px;
}

._switchControl_zag2q_635 {
  display: flex;
  align-items: center;
}

._correctAnswerHint_zag2q_640 {
  font-size: 13px;
  color: #707a8f;
  margin: 0;
  line-height: 18px;
}

._answerOptions_zag2q_647 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._answerOptionRow_zag2q_653 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

._answerOptionRowSelected_zag2q_661 ._answerRadio_zag2q_661 {
  border-color: #15ac77;
  background-color: #e8f7f1;
}

._answerRadio_zag2q_661 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #e8e8e9;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
._answerRadio_zag2q_661:hover {
  border-color: #00A9CE;
}

._removeOptionBtn_zag2q_683 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
._removeOptionBtn_zag2q_683:hover:not(:disabled) {
  color: #00A9CE;
  background: #E6F7FB;
  border-color: #00A9CE;
}
._removeOptionBtn_zag2q_683:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._answerOptionInputWrap_zag2q_708 {
  flex: 1;
  min-width: 0;
}

._addOptionLink_zag2q_713 {
  font-size: 14px;
  font-weight: 500;
  color: #00A9CE;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  align-self: flex-start;
  text-decoration: underline;
}
._addOptionLink_zag2q_713:hover {
  text-decoration: underline;
}

._addQuestionBtn_zag2q_729 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #00A9CE;
  border-radius: 8px;
  background: #00A9CE;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
._addQuestionBtn_zag2q_729:hover {
  background: #0091b1;
  border-color: #0091b1;
}

._previewStep_zag2q_757 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  margin-right: 0;
}
._previewStep_zag2q_757 ._cardTitle_zag2q_192,
._previewStep_zag2q_757 ._cardDescription_zag2q_203 {
  margin: 0;
}

._previewContent_zag2q_773 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._previewProgressRow_zag2q_782 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

._previewProgressBar_zag2q_790 {
  max-width: 100%;
}
._previewProgressBar_zag2q_790 ._progress-bar-wrapper_zag2q_793 {
  height: 4px;
}
._previewProgressBar_zag2q_790 ._progress-bar-fill_zag2q_796 {
  background-color: #00A9CE !important;
}

._previewProgressLabel_zag2q_800 {
  font-size: 13px;
  font-weight: 500;
  color: #00A9CE;
  white-space: nowrap;
}

._previewSummary_zag2q_807 {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #f6f7f8;
}

._previewSummaryTitle_zag2q_814 {
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 16px 0;
  font-family: "Inter", sans-serif;
}

._previewSummaryList_zag2q_822 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._previewSummaryRow_zag2q_829 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._previewSummaryRow_zag2q_829 dt {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  margin: 0;
}
._previewSummaryRow_zag2q_829 dd {
  font-size: 14px;
  color: #14181f;
  margin: 0;
}

._previewQuestionCard_zag2q_846 {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._previewQuestionTitle_zag2q_853 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 12px 0;
  font-family: "Inter", sans-serif;
}

._previewQuestionText_zag2q_862 {
  font-size: 14px;
  line-height: 20px;
  color: #14181f;
}

._previewQuestionImage_zag2q_868 {
  margin: 12px 0;
}
._previewQuestionImage_zag2q_868 img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  object-fit: contain;
}

._previewQuestionHint_zag2q_879 {
  font-size: 13px;
  color: #707a8f;
  margin: 0 0 12px 0;
}

._previewOptionsList_zag2q_885 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._previewOptionItem_zag2q_894 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._previewOptionItemCorrect_zag2q_904 {
  border-color: #15ac77;
  background: #e8f7f1;
}

._previewOptionRadio_zag2q_909 {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #e8e8e9;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

._previewOptionItemCorrect_zag2q_904 ._previewOptionRadio_zag2q_909 {
  border-color: #15ac77;
}

._previewOptionText_zag2q_925 {
  font-size: 14px;
  color: #14181f;
}

._previewBottomNav_zag2q_930 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 12px;
}

._previewNavButton_zag2q_939 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
._previewNavButton_zag2q_939:hover:not(:disabled) {
  background: #E6F7FB;
  border-color: #00A9CE;
  color: #00A9CE;
}
._previewNavButton_zag2q_939:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._previewCenterInfo_zag2q_962 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

._previewExamDate_zag2q_969 {
  font-size: 12px;
  color: #707a8f;
}

._previewTimer_zag2q_974 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._previewTimerBox_zag2q_980 {
  min-width: 71px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #2f333c;
}

._previewTimerSeparator_zag2q_998 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #9fa6b4;
}._tabContainer_10nl6_1 {
  margin-bottom: 24px;
}

._actionButton_10nl6_5 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_10nl6_5:hover {
  color: #374151;
}

._actionMenu_10nl6_20 {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
}

._actionMenuItem_10nl6_27 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
._actionMenuItem_10nl6_27:hover {
  background-color: #f3f4f6;
}
._actionMenuItem_10nl6_27._error_10nl6_44 {
  color: #ef4444;
}
._actionMenuItem_10nl6_27._error_10nl6_44:hover {
  background-color: #E6F7FB;
}

._actionMenuIcon_10nl6_51 {
  flex-shrink: 0;
}

._actionMenuLabel_10nl6_55 {
  white-space: nowrap;
}._drawerContent_142hc_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
  overflow-y: auto;
}

._examName_142hc_9 {
  margin: 0 0 8px 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
}

._infoCard_142hc_19 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}

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

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

._detailIcon_142hc_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 6px;
  color: #707a8f;
  flex-shrink: 0;
}

._detailLabel_142hc_50 {
  flex: 1;
  font-size: 14px;
  color: #707a8f;
}

._detailValue_142hc_56 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  text-align: right;
}

._descriptionSection_142hc_63 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._descriptionTitle_142hc_73 {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  line-height: 24px;
}

._examDescription_142hc_82 {
  margin: 0;
  font-size: 14px;
  color: #4d5464;
  line-height: 1.6;
}

._questionsSection_142hc_89 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

._questionsSectionTitle_142hc_95 {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
  flex-shrink: 0;
}

._questionsWrapper_142hc_106 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

._questionCard_142hc_116 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._questionCard_142hc_116 + ._questionCard_142hc_116 {
  padding-top: 24px;
  border-top: 1px solid #e8e8e9;
}

._questionHeader_142hc_127 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._questionNumber_142hc_133 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  background: #00A9CE;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

._questionText_142hc_147 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  line-height: 1.5;
  padding-top: 3px;
}
._questionText_142hc_147 ul,
._questionText_142hc_147 ol {
  margin: 8px 0 8px 24px;
  padding-left: 20px;
}
._questionText_142hc_147 li {
  margin: 4px 0;
}
._questionText_142hc_147 a {
  color: #0077b6;
  text-decoration: underline;
  word-break: break-word;
}

._questionMeta_142hc_169 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #707a8f;
  padding-left: 36px;
}

._metaBadge_142hc_178 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  color: #505766;
}

._optionsList_142hc_189 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 36px;
}

._optionItem_142hc_196 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4d5464;
}

._optionBullet_142hc_204 {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  flex-shrink: 0;
}

._optionBulletCheckbox_142hc_212 {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  flex-shrink: 0;
}

._optionCorrect_142hc_220 {
  color: #16a34a;
  font-weight: 500;
}

._optionCorrect_142hc_220 ._optionBullet_142hc_204,
._optionCorrect_142hc_220 ._optionBulletCheckbox_142hc_212 {
  border-color: #16a34a;
  background: #16a34a;
}

._correctIcon_142hc_231 {
  color: #16a34a;
  flex-shrink: 0;
}

._questionImage_142hc_236 {
  padding-left: 36px;
}

._questionImage_142hc_236 img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  object-fit: contain;
}

._loading_142hc_248 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #707a8f;
  font-size: 14px;
}

._error_142hc_257 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #00A9CE;
  font-size: 14px;
}._breadcrumbContainer_1ff0r_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

._backButton_1ff0r_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._backButton_1ff0r_9:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._examTitle_1ff0r_27 {
  margin: 16px 0 24px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #14181f;
}

._statsRow_1ff0r_35 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) {
  ._statsRow_1ff0r_35 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  ._statsRow_1ff0r_35 {
    grid-template-columns: 1fr;
  }
}

._statCard_1ff0r_52 {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._statHeader_1ff0r_62 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._statLabel_1ff0r_68 {
  font-size: 14px;
  font-weight: 400;
  color: #707a8f;
  line-height: 1.4;
}

._statIcon_1ff0r_75 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statIconRed_1ff0r_85 {
  background: #E6F7FB;
}

._statValue_1ff0r_89 {
  font-size: 28px;
  font-weight: 700;
  color: #14181f;
  line-height: 1.2;
}

._pageContainer_1ff0r_96 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

._tableWrapper_1ff0r_102 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 24px;
}

._table_1ff0r_102 {
  width: 100%;
  border-collapse: collapse;
}
._table_1ff0r_102 thead tr {
  border-bottom: 1px solid #e8e8e9;
}
._table_1ff0r_102 thead th {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #fafafa;
}
._table_1ff0r_102 tbody tr {
  border-bottom: 1px solid #f0f0f1;
  transition: background-color 0.15s ease;
}
._table_1ff0r_102 tbody tr:last-child {
  border-bottom: none;
}
._table_1ff0r_102 tbody tr:hover {
  background-color: #fafafa;
}
._table_1ff0r_102 tbody td {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #4d5464;
  vertical-align: middle;
}

._nameCell_1ff0r_146 {
  font-weight: 500;
  color: #14181f !important;
}

._inspectBtn_1ff0r_151 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #505766;
  transition: all 0.15s ease;
  white-space: nowrap;
}
._inspectBtn_1ff0r_151:hover {
  background-color: #f6f7f8;
  border-color: #d0d0d0;
}
._inspectBtn_1ff0r_151 svg {
  flex-shrink: 0;
}

._loading_1ff0r_174 {
  padding: 24px;
  text-align: center;
  color: #666f82;
}

._emptyState_1ff0r_180 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_1ff0r_189 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_1ff0r_202 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_1ff0r_209 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationPageSizeDropdown_1ff0r_218 {
  max-width: 80px;
}
._paginationPageSizeDropdown_1ff0r_218 .dropdown-container {
  max-width: 100%;
}
._paginationPageSizeDropdown_1ff0r_218 .dropdown-header {
  max-width: 100%;
}

._paginationDetails_1ff0r_228 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_1ff0r_238 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_1ff0r_238 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_1ff0r_238 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_1ff0r_238 .pagination-number._active_1ff0r_262 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_1ff0r_238 .pagination-number:hover:not(._active_1ff0r_262) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_1ff0r_238 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_1ff0r_283 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_1ff0r_283:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_1ff0r_283:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_1ff0r_283 svg {
  width: 16px;
  height: 16px;
}._breadcrumbContainer_m3wkp_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

._backButton_m3wkp_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._backButton_m3wkp_9:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._titleRow_m3wkp_27 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 24px;
  flex-wrap: wrap;
}

._examTitle_m3wkp_35 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #14181f;
}

._attendeeBadge_m3wkp_43 {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  background: #fff;
}

._downloadBtn_m3wkp_55 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: #505766;
  transition: all 0.15s ease;
}
._downloadBtn_m3wkp_55:hover {
  background-color: #f6f7f8;
  border-color: #d0d0d0;
}

._statsRow_m3wkp_74 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  ._statsRow_m3wkp_74 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  ._statsRow_m3wkp_74 {
    grid-template-columns: 1fr;
  }
}

._statCard_m3wkp_91 {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._statHeader_m3wkp_101 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._statLabel_m3wkp_107 {
  font-size: 14px;
  font-weight: 400;
  color: #707a8f;
  line-height: 1.4;
}

._statIcon_m3wkp_114 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statIconBlue_m3wkp_124 {
  background: #eef4ff;
}

._statIconGreen_m3wkp_128 {
  background: #f0fdf4;
}

._statIconRed_m3wkp_132 {
  background: #E6F7FB;
}

._statIconGray_m3wkp_136 {
  background: #f6f7f8;
}

._statValue_m3wkp_140 {
  font-size: 28px;
  font-weight: 700;
  color: #14181f;
  line-height: 1.2;
}

._questionsSection_m3wkp_147 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

._questionCard_m3wkp_154 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._questionCard_m3wkp_154._correct_m3wkp_163 {
  border-color: #22c55e;
  border-left: 3px solid #22c55e;
}
._questionCard_m3wkp_154._wrong_m3wkp_167 {
  border-color: #00A9CE;
  border-left: 3px solid #00A9CE;
}
._questionCard_m3wkp_154._empty_m3wkp_171 {
  border-color: #e8e8e9;
  border-left: 3px solid #c4c9d4;
}

._questionNumber_m3wkp_176 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
._questionNumber_m3wkp_176._correct_m3wkp_163 {
  color: #22c55e;
}
._questionNumber_m3wkp_176._wrong_m3wkp_167 {
  color: #00A9CE;
}
._questionNumber_m3wkp_176._empty_m3wkp_171 {
  color: #707a8f;
}

._questionText_m3wkp_192 {
  font-size: 14px;
  font-weight: 400;
  color: #14181f;
  line-height: 1.6;
  margin: 0;
}
._questionText_m3wkp_192 ul,
._questionText_m3wkp_192 ol {
  margin: 8px 0 8px 24px;
  padding-left: 20px;
}
._questionText_m3wkp_192 li {
  margin: 4px 0;
}
._questionText_m3wkp_192 a {
  color: #0077b6;
  text-decoration: underline;
  word-break: break-word;
}

._optionsList_m3wkp_213 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._optionItem_m3wkp_219 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f1;
  border-radius: 8px;
  font-size: 14px;
  color: #4d5464;
  line-height: 1.5;
  transition: background 0.15s ease;
}
._optionItem_m3wkp_219:last-child {
  border-bottom: none;
}
._optionItem_m3wkp_219._optionCorrectSelected_m3wkp_234 {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14181f;
  font-weight: 500;
}
._optionItem_m3wkp_219._optionCorrectMissed_m3wkp_240 {
  background: #fefce8;
  border-color: #fef08a;
  color: #14181f;
}
._optionItem_m3wkp_219._optionWrongSelected_m3wkp_245 {
  background: #E6F7FB;
  border-color: #fecdd3;
  color: #14181f;
  font-weight: 500;
}

._optionIcon_m3wkp_252 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
._optionIcon_m3wkp_252._correctSelectedIcon_m3wkp_261 {
  background: #22c55e;
  border: 2px solid #22c55e;
}
._optionIcon_m3wkp_252._correctMissedIcon_m3wkp_265 {
  background: transparent;
  border: 2px solid #22c55e;
}
._optionIcon_m3wkp_252._wrongIcon_m3wkp_269 {
  background: #00A9CE;
  border: 2px solid #00A9CE;
}
._optionIcon_m3wkp_252._emptyIcon_m3wkp_273 {
  width: 0;
  height: 0;
  min-width: 0;
}

._optionText_m3wkp_279 {
  flex: 1;
}

._loading_m3wkp_283 {
  padding: 48px;
  text-align: center;
  color: #666f82;
  font-size: 14px;
}

._errorState_m3wkp_290 {
  padding: 48px;
  text-align: center;
  color: #00A9CE;
  font-size: 14px;
}.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 664px;
  min-height: 54px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid;
  box-shadow: 0 4px 30px rgba(77, 84, 100, 0.1);
  background: #ffffff;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}

.snackbar__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.snackbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.snackbar__text {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #2f333c;
}

.snackbar__title {
  font-weight: 600;
}

.snackbar__message {
  font-weight: 400;
}

.snackbar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #72808f;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Success variant */
.snackbar--success {
  border-color: #15ac77;
  background: #ffffff;
}
.snackbar--success .snackbar__title {
  color: #15ac77;
}
.snackbar--success .snackbar__close {
  color: #15ac77;
}
.snackbar--success .snackbar__close:hover {
  background: rgba(21, 172, 119, 0.08);
  color: #15ac77;
}

/* Fail variant - use error color */
.snackbar--fail {
  border-color: var(--color-error-dark, #fb3748);
  background: #ffffff;
}
.snackbar--fail .snackbar__icon {
  color: var(--color-error-dark, #fb3748);
}
.snackbar--fail .snackbar__title {
  color: var(--color-error-dark, #fb3748);
}
.snackbar--fail .snackbar__close {
  color: var(--color-error-dark, #fb3748);
}
.snackbar--fail .snackbar__close:hover {
  background: rgba(251, 55, 72, 0.08);
  color: var(--color-error-dark, #fb3748);
}
._toastWrapper_1h08k_2 {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

._tabContainer_1h08k_8 {
  margin-bottom: 24px;
}

._categoryActions_1h08k_12 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

._actionButton_1h08k_18 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_1h08k_18:hover {
  color: #374151;
}

/* Submenu: tasarım 207px genişlik, 12px radius, 8px padding (Popover’da), border 1px #E8E8E9 */
._actionMenu_1h08k_34 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 207px;
}

._actionMenuItem_1h08k_41 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.15s ease;
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  /* Detayı Gör, Katılımcıları Gör, Arşivle: metin + ikon #505766 */
  color: #505766;
}
._actionMenuItem_1h08k_41:hover {
  background-color: #f1f2f4;
}
._actionMenuItem_1h08k_41._error_1h08k_64 {
  color: #ef4444;
}
._actionMenuItem_1h08k_41._error_1h08k_64:hover {
  background-color: #E6F7FB;
}
._actionMenuItem_1h08k_41._error_1h08k_64 {
  /* Düzenle ve Sil: ikon da kırmızı (default), currentColor bazen SVG’de devralınmıyor */
}
._actionMenuItem_1h08k_41._error_1h08k_64 ._actionMenuIcon_1h08k_73 {
  color: #ef4444;
}

/* İkonlar yazı ile aynı renkte (24x24); varsayılan (Arşivle vb.) #505766 */
._actionMenuIcon_1h08k_73 {
  flex-shrink: 0;
  color: currentColor;
}

._actionMenuItem_1h08k_41:not(._error_1h08k_64) ._actionMenuIcon_1h08k_73 {
  color: #505766;
}

._actionMenuLabel_1h08k_87 {
  flex: 1;
}._container_1efgo_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 262px;
  flex-shrink: 0;
}

._typeButton_1efgo_9 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f8f9;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
._typeButton_1efgo_9:hover {
  background: #fff;
  border-color: #e8e8e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
._typeButton_1efgo_9:active {
  background: #E6F7FB;
  border-color: #00A9CE;
}
._typeButton_1efgo_9 svg {
  color: #505862;
  flex-shrink: 0;
}

._typeLabel_1efgo_35 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5%;
  color: #505862;
}._card_zvwhj_1 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._cardHeader_zvwhj_11 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._typeInfo_zvwhj_18 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._typeIcon_zvwhj_24 {
  color: #00A9CE;
}

._typeLabel_zvwhj_28 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #14181f;
}

._headerActions_zvwhj_36 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._deleteButton_zvwhj_42 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #00A9CE;
  transition: all 0.2s ease;
}
._deleteButton_zvwhj_42:hover {
  background-color: #E6F7FB;
  border-color: #00A9CE;
}

._cardBody_zvwhj_61 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._categoryField_zvwhj_67 {
  max-width: 450px;
}

._optionsSection_zvwhj_71 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._optionRow_zvwhj_77 {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 450px;
}

._optionInputWrapper_zvwhj_84 {
  flex: 1;
}

._removeOptionButton_zvwhj_88 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._removeOptionButton_zvwhj_88:hover {
  background-color: #f6f7f8;
}

._addOptionButton_zvwhj_107 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #00A9CE;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5%;
  transition: opacity 0.2s ease;
  margin-top: 4px;
}
._addOptionButton_zvwhj_107:hover {
  opacity: 0.8;
}
._addOptionButton_zvwhj_107 svg {
  flex-shrink: 0;
  color: #00A9CE;
}._container_1gka4_1 {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

._leftColumn_1gka4_9 {
  flex-shrink: 0;
}

._rightColumn_1gka4_13 {
  flex: 1;
  min-width: 0;
  max-width: 786px;
  border: 1px solid #e8e8e9;
  padding: 20px;
  border-radius: 12px;
}

._questionsList_1gka4_22 {
  display: flex;
  gap: 28px;
  flex-direction: column;
}

._questionItem_1gka4_28 {
  position: relative;
  border-radius: 12px;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

._questionItemDragging_1gka4_34 {
  opacity: 0.5;
}

._questionItemDragOver_1gka4_38 {
  box-shadow: 0 0 0 2px #00A9CE inset;
}

._dragHandle_1gka4_42 {
  position: absolute;
  top: 12px;
  left: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #707a8f;
  cursor: grab;
  user-select: none;
}
._dragHandle_1gka4_42:hover {
  color: #00A9CE;
}
._dragHandle_1gka4_42:active {
  cursor: grabbing;
}

._emptyState_1gka4_62 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px;
  background: #f6f7f8;
  border: 1px dashed #e8e8e9;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #707a8f;
  text-align: center;
}._container_2rmyy_1 {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

._leftColumn_2rmyy_9 {
  flex-shrink: 0;
  width: 300px;
}

._rightColumn_2rmyy_14 {
  flex: 1;
  min-width: 0;
}

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

._infoBlock_2rmyy_25 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
}

._infoLabel_2rmyy_35 {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._infoValue_2rmyy_41 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #14181f;
  white-space: pre-wrap;
  word-break: break-word;
}

._questionsList_2rmyy_50 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

._questionItem_2rmyy_56 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._questionText_2rmyy_62 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #14181f;
}

._questionHint_2rmyy_71 {
  font-weight: 400;
  color: #707a8f;
}

._optionsList_2rmyy_76 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._emptyState_2rmyy_82 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px;
  background: #f6f7f8;
  border: 1px dashed #e8e8e9;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #707a8f;
  text-align: center;
}._container_oqg40_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

._pageHeader_oqg40_8 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-self: flex-start;
}

._breadcrumbContainer_oqg40_18 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._backButton_oqg40_24 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
._backButton_oqg40_24:hover {
  background: #f6f7f8;
  border-color: #d1d5db;
}
._backButton_oqg40_24:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(231, 33, 43, 0.2);
}

._stepperRow_oqg40_47 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

._stepper_oqg40_47 {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

._stepConnectorWrapper_oqg40_64 {
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
}

._step_oqg40_47 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #707a8f;
  transition: color 0.2s ease;
}
._step_oqg40_47:hover {
  color: #14181f;
}

._stepActive_oqg40_87 {
  color: #00A9CE;
}
._stepActive_oqg40_87 ._stepIcon_oqg40_90 {
  border-color: #00A9CE;
  background: #E6F7FB;
}
._stepActive_oqg40_87 ._stepIcon_oqg40_90 svg path {
  stroke: #00A9CE;
}

._stepChecked_oqg40_98 {
  color: #14181f;
}
._stepChecked_oqg40_98 ._stepIcon_oqg40_90 {
  border-color: #00A9CE;
  background: #00A9CE;
  color: #fff;
}

._stepIcon_oqg40_90 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  transition: all 0.2s ease;
}

._stepperContainer_oqg40_119 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

._stepLabel_oqg40_127 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

._nextButtonWrap_oqg40_134 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

._stepConnector_oqg40_64 {
  width: 232px;
  flex-shrink: 0;
  height: 2px;
  background: #e8e8e9;
  margin-bottom: 25px;
  transition: background 0.2s ease;
}
._stepConnector_oqg40_64._stepConnectorCompleted_oqg40_149 {
  background: #00A9CE;
}
._stepConnector_oqg40_64._stepConnectorCurrent_oqg40_152 {
  background: linear-gradient(to right, #00A9CE 50%, #e8e8e9 50%);
}

._inlineBackButton_oqg40_156 {
  margin-right: auto;
}

._actionButtons_oqg40_160 {
  display: flex;
  gap: 8px;
}
._actionButtons_oqg40_160 ._draftButton_oqg40_164 {
  flex: 1 1 50%;
  min-width: 0;
  height: 40px;
  padding: 10px 24px;
  border-radius: 8px;
}
._actionButtons_oqg40_160 ._publishButton_oqg40_171 {
  flex: 1 1 50%;
  min-width: 0 !important;
  height: 40px;
  padding: 10px 24px;
  border-radius: 8px;
}

._formCard_oqg40_179 {
  max-width: 550px;
  width: 100%;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e9;
  background: #fff;
  margin-right: 140px;
}

._cardTitle_oqg40_191 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0 0 8px 0;
  text-align: center;
}

._cardDescription_oqg40_202 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #707a8f;
  margin: 0 0 24px 0;
  text-align: center;
}

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

._formRow_oqg40_219 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: flex-end;
}
@media (max-width: 600px) {
  ._formRow_oqg40_219 {
    grid-template-columns: 1fr;
  }
}

._dateRow_oqg40_231 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  ._dateRow_oqg40_231 {
    grid-template-columns: 1fr;
  }
}

._formField_oqg40_242 {
  width: 100%;
}

._switchField_oqg40_246 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

._switchLabel_oqg40_254 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  margin-bottom: 4px;
}

._switchDescription_oqg40_262 {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: #707a8f;
}

._inputPrefix_oqg40_269 {
  font-size: 14px;
  color: #707a8f;
  font-weight: 500;
}

._placeholderStep_oqg40_275 {
  padding: 32px;
  text-align: center;
  color: #707a8f;
  font-size: 14px;
  background: #f6f7f8;
  border-radius: 8px;
  width: 100%;
}
._drawerContent_1assr_2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
  overflow-y: auto;
}

._headerActions_1assr_10 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Eğitim adı en üstte, poll componentlerin üstünde */
._educationName_1assr_17 {
  margin: 0 0 8px 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
}

/* Same structure as AttendeeAnswersDrawer */
._answersSection_1assr_28 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

._pollName_1assr_34 {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
  flex-shrink: 0;
}

._answersWrapper_1assr_45 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}

/* 1. Bilgiler: başlık yok, border + spacing (3. resim / Figma) */
._infoCard_1assr_56 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}

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

/* 2. Açıklama: borderlı section, bilgilerin altında */
._descriptionSection_1assr_70 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._descriptionTitle_1assr_80 {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  line-height: 24px;
}

._pollDescription_1assr_89 {
  margin: 0;
  font-size: 14px;
  color: #4d5464;
  line-height: 1.6;
}

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

._detailIcon_1assr_102 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 6px;
  color: #707a8f;
  flex-shrink: 0;
}

._detailLabel_1assr_114 {
  flex: 1;
  font-size: 14px;
  color: #707a8f;
}

._detailValue_1assr_120 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  text-align: right;
}

._detailValueWithInfo_1assr_127 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  text-align: right;
}

._infoIcon_1assr_137 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  cursor: help;
}

._questionsSection_1assr_145 {
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
}

._questionsTitle_1assr_152 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
}

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

._questionCard_1assr_165 {
  background: #f6f7f8;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._questionHeader_1assr_174 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._questionNumber_1assr_180 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #00A9CE;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

._questionMeta_1assr_194 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._requiredBadge_1assr_201 {
  font-size: 12px;
  font-weight: 500;
  color: #00A9CE;
}

._questionText_1assr_207 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  line-height: 1.5;
}

._optionsList_1assr_215 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-left: 40px;
}

._optionItem_1assr_223 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4d5464;
}

._optionBullet_1assr_231 {
  width: 6px;
  height: 6px;
  background: #707a8f;
  border-radius: 50%;
  flex-shrink: 0;
}

._starRatingDisplay_1assr_239,
._scaleDisplay_1assr_240 {
  margin-top: 8px;
}

._loading_1assr_244 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #707a8f;
  font-size: 14px;
}

._error_1assr_253 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #00A9CE;
  font-size: 14px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
:root {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.light {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #f9fafb;
  --color-neutral-lighter: #ffffff;
  --color-neutral-light: #f1f1f1;
  --color-neutral-dark: #212b36;
  --color-neutral-darker: rgba(145, 158, 171, 0.2);
}

.dark {
  --color-primary: #00A9CE;
  --color-primary-primary-light: #00A9CE;
  --color-primary-primary-contained: #00A9CE;
  --color-primary-lighter: #E6F7FB;
  --color-primary-light: #66D1E3;
  --color-primary-dark: #007A95;
  --color-primary-darker: #B7E4EF;
  --color-info: #00b8d9;
  --color-info-lighter: #cafdf5;
  --color-info-light: #61f3f3;
  --color-info-dark: #006c9c;
  --color-info-darker: #003768;
  --color-success: #22c55e;
  --color-success-lighter: #d3fcd2;
  --color-success-light: #77ed8b;
  --color-success-dark: #118d57;
  --color-success-darker: #065e49;
  --color-warning: #ffab00;
  --color-warning-lighter: #fff5cc;
  --color-warning-light: #ffd666;
  --color-warning-dark: #b76e00;
  --color-warning-darker: #7a4100;
  --color-error: #fb3748;
  --color-error-lighter: #ffe9d5;
  --color-error-light: #ffac82;
  --color-error-dark: #fb3748;
  --color-error-darker: #7a0916;
  --color-neutral: #1c1c1c;
  --color-neutral-lighter: #2c2c2c;
  --color-neutral-light: #3c3c3c;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #5c5c5c;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
}
.avatar__content {
  color: #fff;
}
.avatar.rounded {
  border-radius: 12px;
}
.avatar.color-primary {
  background-color: var(--color-primary, #00A9CE);
  color: #fff;
}
.avatar.color-secondary {
  background-color: var(--color-info-dark, #9c27b0);
  color: #fff;
}
.avatar.color-info {
  background-color: var(--color-info, #00b8d9);
  color: #fff;
}
.avatar.color-success {
  background-color: var(--color-success, #22c55e);
  color: #fff;
}
.avatar.color-warning {
  background-color: var(--color-warning, #ffab00);
  color: #fff;
}
.avatar.color-error {
  background-color: var(--color-error, #ff5630);
  color: #fff;
}
.avatar.color-default {
  background-color: var(--color-neutral-dark, #bdbdbd);
  color: #fff;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}/* Small_Badge_Statistic Card: padding 40 20 16 20, gap 12px (2. 3. resim) */
._attendeeCard_18o6d_2 {
  position: relative;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 40px 20px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 304px;
  transition: box-shadow 0.2s ease;
}
._attendeeCard_18o6d_2:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._statusBadge_18o6d_18 {
  position: absolute;
  top: 12px;
  right: 12px;
}

._cardHeader_18o6d_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

._attendeeInfo_18o6d_31 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

._attendeeName_18o6d_39 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  line-height: 1.4;
}

._attendeeTitle_18o6d_47 {
  margin: 0;
  font-size: 14px;
  color: #707a8f;
  line-height: 1.4;
}

._attendeeEducation_18o6d_54 {
  margin: 4px 0 0;
  font-size: 13px;
  color: #14181f;
  line-height: 1.4;
}

._attendeeEducationLabel_18o6d_61 {
  color: #707a8f;
  font-weight: 500;
}

._cardBody_18o6d_66 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

._progressSection_18o6d_73 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._progressLabel_18o6d_79 {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._progressStats_18o6d_85 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._progressCount_18o6d_91 {
  font-size: 12px;
  color: #4d5464;
}

._progressPercent_18o6d_96 {
  font-size: 14px;
  font-weight: 600;
  color: #00A9CE;
}

._cardFooter_18o6d_102 {
  border-top: 1px solid #e8e8e9;
  padding-top: 16px;
  margin-top: auto;
}

._viewAnswersBtn_18o6d_108 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #00A9CE;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}
._viewAnswersBtn_18o6d_108:hover:not(._disabled_18o6d_123) {
  opacity: 0.85;
}
._viewAnswersBtn_18o6d_108 svg {
  color: #00A9CE;
  flex-shrink: 0;
}
._viewAnswersBtn_18o6d_108._disabled_18o6d_123 {
  color: #c4c9d4;
  cursor: not-allowed;
  text-decoration: none;
}
._viewAnswersBtn_18o6d_108._disabled_18o6d_123 svg {
  color: #c4c9d4;
}._drawerContent_1xdgt_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 4px;
  overflow-y: auto;
}

._answersSection_1xdgt_9 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

._pollName_1xdgt_15 {
  margin: 0 0 0 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
  color: #14181f;
  padding-bottom: 0;
  flex-shrink: 0;
}

._answersWrapper_1xdgt_27 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}

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

._questionCard_1xdgt_43 {
  background: #f6f7f8;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._questionNumber_1xdgt_53 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #00A9CE;
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

._questionRow_1xdgt_67 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._questionContent_1xdgt_73 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._optionsList_1xdgt_81 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._optionItem_1xdgt_87 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  font-size: 14px;
  color: #4d5464;
}

._optionItemSelected_1xdgt_99 {
  border-color: #00A9CE;
  background: #E6F7FB;
  color: #14181f;
}

._checkboxIcon_1xdgt_105 {
  width: 18px;
  height: 18px;
  border: 2px solid #e8e8e9;
  border-radius: 50%;
  flex-shrink: 0;
}

._optionItemSelected_1xdgt_99 ._checkboxIcon_1xdgt_105 {
  border-color: #00A9CE;
  background: #00A9CE;
}

._textAnswer_1xdgt_118 {
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  font-size: 14px;
  color: #14181f;
  line-height: 1.5;
  white-space: pre-wrap;
  min-height: 80px;
}

._singleOptionDisplay_1xdgt_130 {
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  font-size: 14px;
  color: #14181f;
}

._starRatingWrap_1xdgt_139,
._scaleDisplayWrap_1xdgt_140 {
  margin-top: 4px;
}

._loading_1xdgt_144 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #707a8f;
  font-size: 14px;
}

._error_1xdgt_153 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 12px;
  color: #00A9CE;
  font-size: 14px;
  text-align: center;
}

._emptyAnswers_1xdgt_165 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #707a8f;
  font-size: 14px;
}._breadcrumbContainer_12ujs_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

._backButton_12ujs_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._backButton_12ujs_9:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._pageContainer_12ujs_27 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

._attendeeGrid_12ujs_34 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1400px) {
  ._attendeeGrid_12ujs_34 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1100px) {
  ._attendeeGrid_12ujs_34 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  ._attendeeGrid_12ujs_34 {
    grid-template-columns: 1fr;
  }
}

._loading_12ujs_55 {
  padding: 24px;
  text-align: center;
  color: #666f82;
}

._emptyState_12ujs_61 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_12ujs_70 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_12ujs_82 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_12ujs_89 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationPageSizeDropdown_12ujs_98 {
  max-width: 80px;
}
._paginationPageSizeDropdown_12ujs_98 .dropdown-container {
  max-width: 100%;
}
._paginationPageSizeDropdown_12ujs_98 .dropdown-header {
  max-width: 100%;
}

._paginationDetails_12ujs_108 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_12ujs_118 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_12ujs_118 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_12ujs_118 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_12ujs_118 .pagination-number._active_12ujs_142 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_12ujs_118 .pagination-number:hover:not(._active_12ujs_142) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_12ujs_118 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_12ujs_163 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_12ujs_163:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_12ujs_163:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_12ujs_163 svg {
  width: 16px;
  height: 16px;
}._container_vmy3a_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

._headerRow_vmy3a_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

._titleBlock_vmy3a_16 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._title_vmy3a_16 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #14181f;
}

._description_vmy3a_29 {
  margin: 0;
  font-size: 14px;
  color: #707a8f;
}

._formCard_vmy3a_35 {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
}

._switchWrap_vmy3a_46 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._actions_vmy3a_55 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._rowActions_vmy3a_61 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

._iconActionButton_vmy3a_68 {
  min-width: 40px !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
}
._iconActionButton_vmy3a_68 .button__text {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
._iconActionButton_vmy3a_68 svg {
  display: block;
}

._deleteActionButton_vmy3a_84 {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
._deleteActionButton_vmy3a_84:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08) !important;
}

._questionsDrawer_vmy3a_92 {
  padding: 16px;
}

@media (max-width: 900px) {
  ._formCard_vmy3a_35 {
    grid-template-columns: 1fr;
  }
}._section_q6v0v_1 {
  margin-bottom: 24px;
}
._section_q6v0v_1:last-of-type {
  margin-bottom: 0;
}

._sectionTitle_q6v0v_8 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0 0 12px 0;
}

._chipsRow_q6v0v_18 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e8e8e9;
}

._chipWrap_q6v0v_27 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #f2f4f7;
  border: 1px solid #e8e8e9;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #2f333c;
}

._chipRemove_q6v0v_43 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #707a8f;
  transition: color 0.2s ease;
}
._chipRemove_q6v0v_43:hover {
  color: #00A9CE;
}

._instructionText_q6v0v_58 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0;
}

._instructionCount_q6v0v_68 {
  font-weight: 600;
  color: #00A9CE;
}

._trainingField_q6v0v_73 {
  margin-bottom: 0;
  min-height: 300px;
}

._quotaRow_q6v0v_78 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  width: fit-content;
  height: fit-content;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.005em;
}

._quotaIcon_q6v0v_92 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._quotaLabel_q6v0v_99 {
  color: #707a8f; /* Grey/grey-500 */
  flex-shrink: 0;
}

._quotaValue_q6v0v_104 {
  color: #2f333c; /* Grey/grey-900 */
  font-weight: 500;
}

._quotaUsed_q6v0v_109 {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: #3b82f6; /* light blue chip */
  color: #fff;
  font-weight: 500;
  margin-right: 2px;
}

._quotaWarningIcon_q6v0v_119 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00A9CE;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  flex-shrink: 0;
  cursor: help;
}

._footer_q6v0v_135 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

._saveButton_q6v0v_141 {
  min-width: 160px;
}._content_11d1y_1 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

._modalHeader_11d1y_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 8px 10px 4px;
}

._modalHeaderLeft_11d1y_17 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

._headerIcon_11d1y_24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #00a9ce;
  background: linear-gradient(135deg, #e6f7fb 0%, #f5fcfe 100%);
  border: 1px solid #aee8f3;
  box-shadow: 0 6px 16px rgba(0, 169, 206, 0.12);
  flex-shrink: 0;
}

._modalTitle_11d1y_38 {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #14181f;
}

._modalSubtitle_11d1y_47 {
  margin: 1px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #707a8f;
}

._closeButton_11d1y_54 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e1e6eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: #72808f;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
._closeButton_11d1y_54:hover {
  background: #f6f7f8;
  color: #14181f;
  border-color: #cfd7df;
  transform: translateY(-1px);
}

._participantsCard_11d1y_75 {
  padding: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

._sectionHeader_11d1y_82 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

._sectionTitle_11d1y_90 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0;
}

._countBadge_11d1y_100 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e6f7fb;
  color: #0087a6;
  font-size: 13px;
  font-weight: 700;
}

._chipsRow_11d1y_114 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  overflow-y: auto;
}

._chipWrap_11d1y_122 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #f6f7f8;
  border: 1px solid #dfe4ea;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #2f333c;
}

._chipRemove_11d1y_137 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
}
._chipRemove_11d1y_137:hover {
  background: #e8eef3;
  color: #00a9ce;
}

._infoBox_11d1y_156 {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #b9edf7;
  background: #f1fbfd;
  color: #2f333c;
  font-size: 14px;
  line-height: 22px;
}

._instructionCount_11d1y_166 {
  font-weight: 700;
  color: #00a9ce;
  padding: 0 4px;
}

._surveyField_11d1y_172 {
  padding: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
}

._fieldHint_11d1y_179 {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #707a8f;
}

._footerButtons_11d1y_186 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._headerTitle_dy4uw_39 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerActions_dy4uw_45 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._detayButton_dy4uw_51 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #00A9CE;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
._detayButton_dy4uw_51:hover {
  background-color: #E6F7FB;
}

._menuButton_dy4uw_69 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._menuButton_dy4uw_69:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._menuDropdown_dy4uw_86 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

._menuItem_dy4uw_100 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_dy4uw_100:hover {
  background-color: #f3f4f6;
}

._drawerContent_dy4uw_118 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._personnelCard_dy4uw_124 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

._personnelCardTop_dy4uw_133 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

._avatarWrap_dy4uw_139 {
  flex-shrink: 0;
}

._personnelInfo_dy4uw_143 {
  flex: 1;
  min-width: 0;
}

._personnelHeader_dy4uw_148 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

._personnelNameTitle_dy4uw_156 {
  min-width: 0;
}

._personnelName_dy4uw_156 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #14181f;
}

._personnelTitle_dy4uw_168 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #4d5464;
}

._badgesRow_dy4uw_175 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

._contactPills_dy4uw_181 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

._cardEducationProgress_dy4uw_188 {
  width: 100%;
  margin-top: 0;
}

._cardEducationProgressTitle_dy4uw_193 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
}

._cardEducationProgress_dy4uw_188 ._progressLabels_dy4uw_202 {
  margin-top: 8px;
  margin-bottom: 0;
}

._contactPill_dy4uw_181 {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #666f82;
  background: #f8f8f9;
  border: 1px solid #d3d6dc;
  border-radius: 8px;
}

._section_dy4uw_221 {
  margin: 0;
}

._sectionTitle_dy4uw_225 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
}

._sectionCard_dy4uw_234 {
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._progressLabels_dy4uw_202 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #4d5464;
  min-width: 0;
  flex-wrap: wrap;
}

._progressPercent_dy4uw_253 {
  color: #10b981;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

._detailList_dy4uw_260 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._detailItem_dy4uw_266 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._detailIcon_dy4uw_272 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  flex-shrink: 0;
}

._detailLabel_dy4uw_280 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
  flex: 1;
}

._detailValue_dy4uw_289 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
}

._menuWrapper_dy4uw_297 {
  position: relative;
}._stepTabs_1kfr8_1 {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0px 16px;
  margin-bottom: 0;
}

._stepTab_1kfr8_1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;
  width: 100%;
  background: none;
  border: none;
  cursor: default;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: color 0.2s ease;
  pointer-events: none;
}

._stepTabWrapper_1kfr8_26 {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}

._stepTab_1kfr8_1._active_1kfr8_33 {
  color: #00A9CE;
}
._stepTab_1kfr8_1._active_1kfr8_33 ._stepNumber_1kfr8_36 {
  background-color: #00A9CE;
  color: #fff;
  border-color: #00A9CE;
}

._stepTab_1kfr8_1:not(._active_1kfr8_33) ._stepNumber_1kfr8_36 {
  background: #E6F7FB;
  color: #00A9CE;
  border: 1px solid #00A9CE;
}

._stepNumber_1kfr8_36 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d3d6dc;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #4d5464;
  flex-shrink: 0;
}

._stepProgressFull_1kfr8_63 {
  width: calc(100% - 32px);
  height: 1.5px;
  margin: 0 16px;
  background-color: #e8e8e9;
  overflow: hidden;
  border-radius: 0 0 2px 2px;
  box-sizing: border-box;
}

._stepProgressFullBar_1kfr8_73 {
  height: 100%;
  background-color: #00A9CE;
  transition: width 0.3s ease;
}

._footerWrapper_1kfr8_79 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

._requiredHint_1kfr8_86 {
  margin: 0;
  font-size: 12px;
  color: #707a8f;
}

._footerButtons_1kfr8_92 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

._formGrid_1kfr8_100 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 150px;
}

._formFieldFull_1kfr8_107 {
  grid-column: 1/-1;
}

._formField_1kfr8_107 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._modalHeader_1kfr8_117 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e9;
}

._modalHeaderLeft_1kfr8_125 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._modalTitle_1kfr8_131 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
}

._closeButton_1kfr8_138 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #72808f;
  padding: 0;
}
._closeButton_1kfr8_138:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

/* BulkImportStaffModal */
._bulkImportHint_1kfr8_157 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #707a8f;
}

._bulkImportDropzone_1kfr8_163 {
  border: 2px dashed #e8e8e9;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
._bulkImportDropzone_1kfr8_163:hover, ._bulkImportDropzone_1kfr8_163._dragging_1kfr8_171 {
  border-color: #00A9CE;
  background-color: #E6F7FB;
}
._bulkImportDropzone_1kfr8_163._hasFile_1kfr8_175 {
  border-style: solid;
  border-color: #4caf50;
  background-color: #f1f8f4;
}

._bulkImportInput_1kfr8_181 {
  display: none;
}

._bulkImportFileName_1kfr8_185 {
  font-size: 14px;
  font-weight: 500;
  color: #2f333c;
}

._bulkImportPlaceholder_1kfr8_191 {
  font-size: 14px;
  color: #707a8f;
}

._sectionedForm_1kfr8_196 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 4px 8px 4px;
}

._section_1kfr8_196 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._sectionHeader_1kfr8_209 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._sectionBadge_1kfr8_215 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E6F7FB;
  color: #00A9CE;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #00A9CE;
  flex-shrink: 0;
  margin-top: 2px;
}

._sectionTitle_1kfr8_231 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._sectionSubtitle_1kfr8_239 {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 16px;
}

._grid2_1kfr8_246 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  ._grid2_1kfr8_246 {
    grid-template-columns: 1fr;
  }
}

._passwordField_1kfr8_257 {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

._passwordHint_1kfr8_271 {
  font-size: 11.5px;
  color: #64748b;
  line-height: 16px;
}

._passwordToggle_1kfr8_277 {
  background: transparent;
  border: none;
  color: #00A9CE;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
._passwordToggle_1kfr8_277:hover {
  text-decoration: underline;
}
._modalHeader_16mb3_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e9;
}

._modalHeaderLeft_16mb3_10 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._modalTitle_16mb3_16 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
}

._closeButton_16mb3_23 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #72808f;
  padding: 0;
}
._closeButton_16mb3_23:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._content_16mb3_41 {
  padding: 24px;
  /* Dropdown listesinin modal altında kesilmemesi için minimum yükseklik */
  min-height: 320px;
}

._staffName_16mb3_47 {
  margin: 0 0 16px;
  font-size: 14px;
  color: #4d5464;
}
._staffName_16mb3_47 strong {
  color: #14181f;
}

._formField_16mb3_56 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._footerButtons_16mb3_62 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._list_7qg14_35 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._item_7qg14_44 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  transition: color 0.15s ease-in-out;
}

._icon_7qg14_53 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

._met_7qg14_65 {
  color: var(--color-success-dark, #118d57);
}
._met_7qg14_65 ._icon_7qg14_53 {
  background-color: var(--color-success-lighter, #d3fcd2);
  color: var(--color-success-dark, #118d57);
}

._unmet_7qg14_73 {
  color: var(--color-neutral-dark, #919eab);
}
._unmet_7qg14_73 ._icon_7qg14_53 {
  background-color: var(--color-neutral-lighter, #f4f6f8);
  color: var(--color-neutral-dark, #919eab);
}

._label_7qg14_81 {
  flex: 1;
}._formStack_avqic_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

._formField_avqic_8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}._toastWrapper_1wx15_1 {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

._actionButton_1wx15_9 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_1wx15_9:hover {
  color: #374151;
}

._actionMenu_1wx15_24 {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
}

._actionMenuItem_1wx15_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
._actionMenuItem_1wx15_31:hover {
  background-color: #f3f4f6;
}

._actionMenuItemDisabled_1wx15_49 {
  cursor: not-allowed;
  color: #9ca3af;
}
._actionMenuItemDisabled_1wx15_49:hover {
  background-color: transparent;
}._root_1sllv_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._summary_1sllv_7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 16px;
  padding: 16px;
  background: #f6f7f8;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

._summaryItem_1sllv_17 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._summaryLabel_1sllv_23 {
  font-size: 12px;
  line-height: 18px;
  color: #666f82;
}

._summaryValue_1sllv_29 {
  font-size: 15px;
  font-weight: 600;
  color: #14181f;
  line-height: 22px;
}

._pass_1sllv_36 {
  color: #15ac77;
}

._fail_1sllv_40 {
  color: #00A9CE;
}

._previewWrap_1sllv_44 {
  margin: 0 -8px;
  min-height: 320px;
}

._stateMessage_1sllv_49 {
  padding: 24px;
  text-align: center;
  color: #666f82;
  font-size: 14px;
}

._errorMessage_1sllv_56 {
  padding: 24px;
  text-align: center;
  color: #00A9CE;
  font-size: 14px;
}._pageContainer_r8cs2_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

._progressCell_r8cs2_12 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex-shrink: 0;
}

._progressLabels_r8cs2_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
}

._timeText_r8cs2_29 {
  color: #666f82;
}

._fractionText_r8cs2_33 {
  font-weight: 600;
  color: #fe9431;
}

._detailButton_r8cs2_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
._detailButton_r8cs2_38:hover {
  background: rgba(232, 232, 233, 0.5);
  color: #14181f;
}

._scoreCell_r8cs2_57 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._scorePass_r8cs2_63 {
  color: #15ac77;
}

._scoreFail_r8cs2_67 {
  color: #00A9CE;
}

._scoreIconPass_r8cs2_71 {
  display: inline-flex;
  color: #15ac77;
}

._scoreIconFail_r8cs2_76 {
  display: inline-flex;
  color: #00A9CE;
}

._actionsCell_r8cs2_81 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

._actionTextBtn_r8cs2_89 {
  padding: 8px 14px;
  min-height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  color: #14181f;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
._actionTextBtn_r8cs2_89:hover {
  background: rgba(232, 232, 233, 0.5);
  color: #14181f;
  border-color: #d3d6dc;
}._container_1loy1_1 {
  padding: 0 24px 24px;
}

._startScreen_1loy1_5 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 24px;
}

._startCard_1loy1_13 {
  max-width: 480px;
  width: 100%;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
  text-align: center;
}

._startTitle_1loy1_23 {
  font-size: 20px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 16px 0;
  font-family: "Inter", sans-serif;
}

._startExamName_1loy1_31 {
  font-size: 18px;
  font-weight: 500;
  color: #14181f;
  margin: 0 0 12px 0;
}

._startMeta_1loy1_38 {
  font-size: 14px;
  color: #707a8f;
  margin: 0 0 24px 0;
}

._startError_1loy1_44 {
  font-size: 14px;
  color: #00A9CE;
  margin: 0 0 16px 0;
}

._startActions_1loy1_50 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

._loading_1loy1_57,
._error_1loy1_58 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 24px;
  color: #707a8f;
  font-size: 14px;
}

._backLink_1loy1_69 {
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #00A9CE;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
._backLink_1loy1_69:hover {
  background: #E6F7FB;
  border-color: #00A9CE;
}._breadcrumbContainer_2uw2h_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

._backButton_2uw2h_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._backButton_2uw2h_9:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._pageLayout_2uw2h_27 {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: flex-start;
}

._leftColumn_2uw2h_34 {
  flex-shrink: 0;
  width: 360px;
}

._rightColumn_2uw2h_39 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._pageHeader_2uw2h_47 {
  margin-bottom: 0;
}

._toolbar_2uw2h_51 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

._toolbarLeft_2uw2h_60 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

._toolbarSearch_2uw2h_68 {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

._toolbarBtn_2uw2h_74 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  font-size: 14px;
}
._toolbarBtn_2uw2h_74:hover, ._toolbarBtn_2uw2h_74._active_2uw2h_86 {
  background: #f6f7f8;
  color: #14181f;
}

._toolbarBtnText_2uw2h_91 {
  white-space: nowrap;
}

._toolbarRight_2uw2h_95 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._tableSection_2uw2h_101 {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

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

._certificateGrid_2uw2h_114 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 24px;
}

._certificateCard_2uw2h_120 {
  display: flex;
  width: 100%;
  min-height: 192px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

._certificatePreview_2uw2h_130 {
  flex: 0 0 33%;
  min-width: 0;
  background: linear-gradient(135deg, #E6F7FB 0%, #fee2e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

._certificatePreviewInner_2uw2h_140 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #00A9CE;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  min-height: 140px;
}

._certificatePreviewTitle_2uw2h_153 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #991b1b;
  margin-bottom: 8px;
}

._certificatePreviewName_2uw2h_161 {
  font-size: 14px;
  font-style: italic;
  color: #14181f;
}

._certificateDetails_2uw2h_167 {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._certificateDetailsHeader_2uw2h_175 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

._certificateCardTitle_2uw2h_183 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #14181f;
  flex: 1;
  min-width: 0;
}

._downloadBtn_2uw2h_193 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._downloadBtn_2uw2h_193:hover {
  background: #f6f7f8;
  color: #14181f;
}

._certificateDetailList_2uw2h_212 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._certificateDetailItem_2uw2h_218 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4d5464;
}
._certificateDetailItem_2uw2h_218 span {
  flex: 1;
  min-width: 0;
}

._certDetailIcon_2uw2h_230 {
  flex-shrink: 0;
  color: #707a8f;
}

._logTimeline_2uw2h_235 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
}

._logTimelineLine_2uw2h_243 {
  position: absolute;
  left: 153px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: #00A9CE;
  border-radius: 1px;
}

._logEntry_2uw2h_253 {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

._logTime_2uw2h_235 {
  flex: 0 0 140px;
  font-size: 14px;
  color: #4d5464;
  padding-top: 14px;
  padding-right: 16px;
}

._logDotWrap_2uw2h_268 {
  flex: 0 0 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}

._logDot_2uw2h_268 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00A9CE;
  flex-shrink: 0;
  z-index: 1;
}

._logCard_2uw2h_285 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  margin-left: 0;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  min-width: 0;
}

._logCardContent_2uw2h_299 {
  flex: 1;
  min-width: 0;
}

._logCardTitle_2uw2h_304 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
}

._logCardDescription_2uw2h_311 {
  margin: 0;
  font-size: 14px;
  color: #4d5464;
}

._emptyText_2uw2h_317 {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #666f82;
  font-size: 14px;
}

._loading_2uw2h_325 {
  padding: 24px;
  text-align: center;
  color: #666f82;
}

._menuButton_2uw2h_331 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._menuButton_2uw2h_331:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._iconButton_2uw2h_349 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._iconButton_2uw2h_349:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._progressCell_2uw2h_365 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._emailLink_2uw2h_371 {
  color: #2563eb;
  text-decoration: none;
}
._emailLink_2uw2h_371:hover {
  text-decoration: underline;
}._headerTitle_1o51k_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._menuWrapper_1o51k_7 {
  position: relative;
}

._menuButton_1o51k_11 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
}
._menuButton_1o51k_11:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._menuDropdown_1o51k_30 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8e9;
  padding: 4px;
  z-index: 10;
}

._menuItem_1o51k_44 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_1o51k_44:hover {
  background: #f3f4f6;
}

._drawerContent_1o51k_62 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._drawerContent_1o51k_62 .input-container ._input_1o51k_67,
._drawerContent_1o51k_62 .input-container input {
  background-color: #f1f2f4 !important;
}
._drawerContent_1o51k_62 .textarea-container ._textarea_1o51k_71,
._drawerContent_1o51k_62 .textarea-container textarea {
  background-color: #f1f2f4 !important;
}
._drawerContent_1o51k_62 .dropdown-container ._dropdown-header_1o51k_75,
._drawerContent_1o51k_62 .dropdown-container.disabled ._dropdown-header_1o51k_75 {
  background-color: #f1f2f4 !important;
}

._twoColumnRow_1o51k_80 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._fieldGroup_1o51k_86 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
._fieldGroup_1o51k_86 label {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}
._fieldGroup_1o51k_86 ._fieldValue_1o51k_97 {
  font-size: 14px;
  color: #14181f;
  line-height: 1.5;
}

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

._documentItem_1o51k_109 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
}

._documentIcon_1o51k_119 {
  flex-shrink: 0;
  color: #ef4444;
}

._documentInfo_1o51k_124 {
  flex: 1;
  font-size: 14px;
  color: #14181f;
}

._documentSize_1o51k_130 {
  font-size: 12px;
  color: #707a8f;
}

._downloadBtn_1o51k_135 {
  display: inline-flex;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #707a8f;
  text-decoration: none;
}
._downloadBtn_1o51k_135:hover {
  color: #14181f;
}._drawerContent_1s1wt_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

._twoColumnRow_1s1wt_8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
._twoColumnRow_1s1wt_8 > * {
  min-width: 0;
}

._footer_1s1wt_17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._headerTitle_1s1wt_23 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._fieldGroup_1s1wt_29 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._fieldGroup_1s1wt_29 > label {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._existingFilesList_1s1wt_40 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._documentItem_1s1wt_46 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
}

._documentIcon_1s1wt_56 {
  flex-shrink: 0;
  color: #ef4444;
}

._documentInfoWrap_1s1wt_61 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._documentInfo_1s1wt_61 {
  font-size: 14px;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._documentSize_1s1wt_77 {
  font-size: 12px;
  color: #707a8f;
}

._downloadLink_1s1wt_82 {
  font-size: 13px;
  color: #4f46e5;
  text-decoration: none;
}
._downloadLink_1s1wt_82:hover {
  text-decoration: underline;
}

._removeFileBtn_1s1wt_91 {
  display: inline-flex;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #707a8f;
}
._removeFileBtn_1s1wt_91:hover {
  color: #dc2626;
}._toastWrapper_dsjl7_1 {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

._actionButton_dsjl7_9 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_dsjl7_9:hover {
  color: #374151;
}

._actionMenu_dsjl7_24 {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
}

._actionMenuItem_dsjl7_31 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
._actionMenuItem_dsjl7_31:hover {
  background-color: #f3f4f6;
}

._reasonChip_dsjl7_49 {
  display: inline-block;
}

._confirmModalName_dsjl7_53 {
  text-decoration: underline;
  color: #666f82;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}._content_jaic6_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0;
}

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

._sectionTitle_jaic6_14 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #707a8f;
}

._kv_jaic6_25 {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
._kv_jaic6_25 > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
._kv_jaic6_25 dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a92a2;
}
._kv_jaic6_25 dd {
  margin: 0;
  font-size: 14px;
  color: #14181f;
  word-break: break-word;
}

._stats_jaic6_50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

._statCard_jaic6_56 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  background: #fafbfc;
  text-align: center;
}

._statValue_jaic6_68 {
  font-size: 20px;
  font-weight: 700;
  color: #14181f;
  line-height: 1.1;
}
._statValue_jaic6_68._success_jaic6_74 {
  color: #16a34a;
}
._statValue_jaic6_68._warning_jaic6_77 {
  color: #d97706;
}
._statValue_jaic6_68._danger_jaic6_80 {
  color: #dc2626;
}
._statValue_jaic6_68._muted_jaic6_83 {
  color: #707a8f;
}

._statLabel_jaic6_87 {
  margin-top: 4px;
  font-size: 11px;
  color: #707a8f;
  line-height: 1.3;
}

._classList_jaic6_94 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._classItem_jaic6_103 {
  padding: 12px 14px;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._classHeader_jaic6_113 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

._className_jaic6_120 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._classMeta_jaic6_129 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #707a8f;
}

._classLoc_jaic6_137 {
  color: #505766;
}

._empty_jaic6_141 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  font-size: 13px;
  border: 1px dashed #e8e8e9;
  border-radius: 10px;
}._actionCell_4ezz1_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._statusChip_4ezz1_8 {
  flex-shrink: 0;
}

._actionButton_4ezz1_12 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_4ezz1_12:hover {
  color: #374151;
}

._actionMenu_4ezz1_27 {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
}

._actionMenuItem_4ezz1_34 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
._actionMenuItem_4ezz1_34:hover {
  background-color: #f3f4f6;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._breadcrumbContainer_537l6_35 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
}

._backButton_537l6_43 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._backButton_537l6_43:hover {
  background: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

._pageContent_537l6_63 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

._mainLayout_537l6_70 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1200px) {
  ._mainLayout_537l6_70 {
    grid-template-columns: 1fr;
  }
}

._tableSection_537l6_84 {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

._approvalCartColumn_537l6_92 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

._approvalCart_537l6_92 {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  background: #fff;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1200px) {
  ._approvalCart_537l6_92 {
    position: static;
  }
}

._approvalCartTitle_537l6_117 {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.08px;
  line-height: 18px;
  text-align: center;
  border-bottom: 1px solid #e8e8e9;
  padding-bottom: 16px;
  /* Extend to full width so border isn't inset by parent padding */
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

._cartList_537l6_134 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-top: 20px;
}

._cartItem_537l6_145 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #f1f2f4;
  border-radius: 8px;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
}

._cartItemName_537l6_158 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
}

._cartItemTc_537l6_170 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
  flex: 1;
  min-width: 0;
  text-align: right;
}

._cartItemContent_537l6_181 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
}

._cartItemRemove_537l6_189 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: #707a8f;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
._cartItemRemove_537l6_189:hover {
  background: rgba(0, 169, 206, 0.08);
  color: #c41e2a;
}

._cartFooter_537l6_209 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._cartTotalWrap_537l6_218 {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  min-width: 124px;
  min-height: 40px;
}

._cartTotal_537l6_218 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

._submitButton_537l6_242 {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

._emptyCart_537l6_248 {
  font-size: 14px;
  color: #707a8f;
  text-align: center;
  padding: 24px 0;
}

._confirmModalCount_537l6_255 {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dashed;
  color: #14181f;
}._section_1ockk_1 {
  margin-bottom: 24px;
}
._section_1ockk_1:last-of-type {
  margin-bottom: 0;
}

._sectionTitle_1ockk_8 {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
  margin: 0 0 12px 0;
}

._searchRow_1ockk_18 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._searchInput_1ockk_24 {
  width: 100%;
  max-width: 320px;
}
._searchInput_1ockk_24 .input-container {
  margin-bottom: 0;
}

._footer_1ockk_32 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

._cancelButton_1ockk_39 {
  min-width: 120px;
}

._saveButton_1ockk_43 {
  min-width: 160px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._accordion_1q7rh_35 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._accordionItem_1q7rh_46 {
  border-bottom: 1px solid #e8e8e9;
}
._accordionItem_1q7rh_46:last-child {
  border-bottom: none;
}
._accordionItem_1q7rh_46._expanded_1q7rh_52 ._accordionChevron_1q7rh_52 {
  transform: rotate(180deg);
}
._accordionItem_1q7rh_46:not(._expanded_1q7rh_52) ._accordionContent_1q7rh_55 {
  max-height: 0;
  overflow: hidden;
  border-top-width: 0;
}

._accordionHeader_1q7rh_61 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  cursor: pointer;
  background: #fff;
  transition: background 0.2s ease;
  min-height: 56px;
}
._accordionHeader_1q7rh_61:hover {
  background: #f6f7f8;
}

._accordionCheckbox_1q7rh_75 {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-primary, #00A9CE);
}

._accordionIcon_1q7rh_85 {
  flex-shrink: 0;
}

._accordionName_1q7rh_89 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  text-align: left;
}

._badge_1q7rh_98 {
  flex-shrink: 0;
}

._accordionChevron_1q7rh_52 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

._accordionContent_1q7rh_55 {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fafafa;
  border-top: 1px solid #e8e8e9;
  transition: max-height 0.25s ease;
}

._accordionTableWrap_1q7rh_119 {
  padding: 0 24px 24px;
  min-height: 0;
}
._accordionTableWrap_1q7rh_119 .table-container {
  border-radius: 8px;
  overflow: hidden;
}
._accordionTableWrap_1q7rh_119 .flex-table-row:has(._bannedCell_1q7rh_127) {
  background: #fff1f2;
  box-shadow: inset 4px 0 0 #00A9CE;
}
._accordionTableWrap_1q7rh_119 .flex-table-row:has(._bannedCell_1q7rh_127):hover {
  background: #ffe4e6;
}

._bannedCell_1q7rh_127 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

._bannedName_1q7rh_141 {
  font-weight: 700;
  color: #b91c1c;
}

._bannedSuffix_1q7rh_146 {
  font-weight: 500;
  color: #b91c1c;
  margin-left: 2px;
}

._badge_1q7rh_98,
._accordionChevron_1q7rh_52 {
  pointer-events: none;
}._form_amtt1_1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding-right: 4px;
}

._modalFooter_amtt1_10 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

._modalFooterRow_amtt1_17 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
._modalFooterRow_amtt1_17 .button {
  white-space: nowrap;
}

._modalFooterRowMain_amtt1_28 {
  justify-content: flex-end;
  border-top: 1px solid #eef0f2;
  padding-top: 10px;
}

._modalFooterSpacer_amtt1_34 {
  flex: 1;
}

._statusRow_amtt1_38 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f5f7fa;
  border: 1px solid #e5e8ed;
  border-radius: 8px;
}

._statusLabel_amtt1_48 {
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._grid2_amtt1_54 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) {
  ._grid2_amtt1_54 {
    grid-template-columns: 1fr;
  }
}

._mapWrap_amtt1_65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._mapLabel_amtt1_71 {
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._scheduleSection_amtt1_77 {
  border-top: 1px dashed #e1e3e6;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._scheduleHeader_amtt1_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._scheduleHeader_amtt1_85 h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

._scheduleEmpty_amtt1_97 {
  margin: 0;
  font-size: 13px;
  color: #707a8f;
}

._scheduleRow_amtt1_103 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 900px) {
  ._scheduleRow_amtt1_103 {
    grid-template-columns: 1fr;
  }
}

._scheduleRemove_amtt1_115 {
  border: 1px solid #f1d6d6;
  background: #E6F7FB;
  color: #d14343;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 4px;
}
._scheduleRemove_amtt1_115 svg {
  stroke: currentColor;
}

._addSection_amtt1_132 {
  border-top: 1px dashed #e1e3e6;
  padding-top: 12px;
}
._addSection_amtt1_132 h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._addList_amtt1_143 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._addRow_amtt1_152 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

._addName_amtt1_160 {
  font-size: 13px;
  color: #14181f;
}

._addTitle_amtt1_165 {
  font-weight: 400;
  color: #707a8f;
}

._removeSection_amtt1_170 {
  border-top: 1px dashed #e1e3e6;
  padding-top: 12px;
}
._removeSection_amtt1_170 h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._removeList_amtt1_181 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._removeRow_amtt1_190 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fafbfc;
  border: 1px solid #eef0f2;
  border-radius: 8px;
}

._removeName_amtt1_202 {
  font-size: 13px;
  color: #14181f;
}

._removeTitle_amtt1_207 {
  color: #5c6573;
  font-weight: 400;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._breadcrumbContainer_1ax98_36 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
}

._backButton_1ax98_44 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._backButton_1ax98_44:hover {
  background: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

._pageContent_1ax98_64 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

._mainLayout_1ax98_71 {
  flex: 0 0 auto;
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1200px) {
  ._mainLayout_1ax98_71 {
    grid-template-columns: 1fr;
  }
}

._accordionSection_1ax98_85 {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: visible;
}

._loading_1ax98_94 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  font-size: 14px;
}

._approvalCartColumn_1ax98_101 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
}
@media (max-width: 1200px) {
  ._approvalCartColumn_1ax98_101 {
    position: static;
    max-height: none;
  }
}

._approvalCart_1ax98_101 {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1200px) {
  ._approvalCart_1ax98_101 {
    position: static;
  }
}

._approvalCartTitle_1ax98_136 {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.08px;
  line-height: 18px;
  text-align: center;
  border-bottom: 1px solid #e8e8e9;
  padding-bottom: 16px;
  margin-bottom: 16px;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}

._cartList_1ax98_153 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px;
  overflow: visible;
  flex: 1;
  min-height: 0;
  padding-top: 20px;
}

._cartItem_1ax98_164 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #f1f2f4;
  border-radius: 8px;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
}

._cartItemName_1ax98_177 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  flex-shrink: 0;
}

._cartItemTc_1ax98_184 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
  flex: 1;
  min-width: 0;
  text-align: right;
}

._cartItemContent_1ax98_195 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
}

._cartItemRemove_1ax98_203 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: #707a8f;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
._cartItemRemove_1ax98_203:hover {
  background: rgba(0, 169, 206, 0.08);
  color: #c41e2a;
}

._cartFooter_1ax98_223 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._cartTotalWrap_1ax98_232 {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  min-width: 124px;
}

._cartTotal_1ax98_232 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #14181f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

._finalPlanningSection_1ax98_255 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e8e8e9;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 96px;
}

._planningStats_1ax98_265 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1300px) {
  ._planningStats_1ax98_265 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  ._planningStats_1ax98_265 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

._statCard_1ax98_281 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._statCardWarning_1ax98_291 {
  background: #fff7ed;
  border-color: #fbd3a3;
}
._statCardWarning_1ax98_291 ._statLabel_1ax98_295 {
  color: #9a5b18;
}
._statCardWarning_1ax98_291 ._statValue_1ax98_298 {
  color: #b5560f;
}

._statLabel_1ax98_295 {
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  letter-spacing: 0.2px;
}

._statValue_1ax98_298 {
  font-size: 22px;
  font-weight: 700;
  color: #14181f;
  line-height: 1;
}

._subSectionHeader_1ax98_316 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

._subSectionTitle_1ax98_323 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._emptyState_1ax98_332 {
  padding: 40px 16px;
  border: 1px dashed #d8dce3;
  border-radius: 12px;
  background: #fafbfc;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

._emptyTitle_1ax98_344 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
}

._emptySubtitle_1ax98_351 {
  margin: 0;
  font-size: 12px;
  color: #707a8f;
}

._excludedCardWarning_1ax98_357 {
  background: #fff7ed;
  border-color: #fbd3a3;
}

._planningStickyFooter_1ax98_362 {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin: 8px -4px -4px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(20, 24, 31, 0.06);
}

._planningStickyFooterInfo_1ax98_378 {
  font-size: 13px;
  min-width: 0;
  flex: 1;
}

._planningStickyFooterWarning_1ax98_384 {
  color: #b5560f;
  font-weight: 500;
}

._planningStickyFooterHint_1ax98_389 {
  color: #5c6573;
}

._sectionHeader_1ax98_393 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

._sectionHeaderActions_1ax98_400 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  align-self: flex-start;
}

._addGroupButton_1ax98_408 {
  align-self: flex-start;
}
._addGroupButton_1ax98_408 svg {
  stroke: currentColor;
}

._sectionTitle_1ax98_415 {
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
  margin: 0;
}

._sectionSubtitle_1ax98_422 {
  margin: 6px 0 0;
  font-size: 13px;
  color: #707a8f;
}

._planningLayout_1ax98_428 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}
@media (max-width: 1200px) {
  ._planningLayout_1ax98_428 {
    grid-template-columns: 1fr;
  }
}

._planningLeft_1ax98_439,
._planningRight_1ax98_440 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

._panelHeader_1ax98_451 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: #14181f;
}

._panelHeaderLeft_1ax98_460 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._panelCount_1ax98_466 {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #707a8f;
}

._planningActions_1ax98_474 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._selectionHint_1ax98_481 {
  font-size: 12px;
  color: #707a8f;
}

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

._emptyGroup_1ax98_492,
._emptyGroupMembers_1ax98_493,
._emptySchedule_1ax98_494 {
  font-size: 13px;
  color: #707a8f;
  margin: 0;
}

._groupCard_1ax98_500 {
  border: 1px solid #f1f2f4;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fafbfc;
}

._groupFooter_1ax98_510 {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px dashed #e4e7eb;
}

._groupCardDisabled_1ax98_517 {
  opacity: 0.95;
  background: #eef0f3;
  border-style: dashed;
  user-select: none;
}

._savedGroupHeader_1ax98_524 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

._savedGroupTitle_1ax98_540 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
}

._readOnlyField_1ax98_547 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._readOnlyLabel_1ax98_553 {
  font-size: 12px;
  font-weight: 600;
  color: #5c6573;
}

._readOnlyValue_1ax98_559 {
  font-size: 13px;
  color: #14181f;
  line-height: 1.4;
  word-break: break-word;
}

._savedScheduleBlock_1ax98_566 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._savedScheduleList_1ax98_572 {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #14181f;
  line-height: 1.5;
}

._savedMemberLine_1ax98_580 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._savedMemberName_1ax98_587 {
  font-size: 13px;
  color: #14181f;
  line-height: 1.35;
}

._savedMemberTitle_1ax98_593 {
  font-size: 12px;
  color: #5c6573;
  line-height: 1.3;
}

._groupHeader_1ax98_599 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

._groupMetaRow_1ax98_605 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

._groupRemove_1ax98_611 {
  border: 1px solid #f0d7d7;
  background: #E6F7FB;
  color: #d14343;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 6px;
  flex-shrink: 0;
}
._groupRemove_1ax98_611 svg {
  stroke: currentColor;
}

._groupGrid_1ax98_630 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  ._groupGrid_1ax98_630 {
    grid-template-columns: 1fr;
  }
}

._mapField_1ax98_641 {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 900px) {
  ._mapField_1ax98_641 {
    grid-column: span 1;
  }
}

._fieldLabel_1ax98_653 {
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._locationHint_1ax98_659 {
  font-size: 12px;
  color: #707a8f;
}

._coordsRow_1ax98_664 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

._scheduleSection_1ax98_670 {
  border-top: 1px dashed #e1e3e6;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._scheduleHeader_1ax98_678 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._scheduleRow_1ax98_684 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 900px) {
  ._scheduleRow_1ax98_684 {
    grid-template-columns: 1fr;
  }
}

._scheduleRemove_1ax98_696 {
  border: 1px solid #f0d7d7;
  background: #E6F7FB;
  color: #d14343;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: end;
  margin-bottom: 6px;
}
._scheduleRemove_1ax98_696 svg {
  stroke: currentColor;
}

._groupMembers_1ax98_714 {
  border-top: 1px dashed #e1e3e6;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._groupMembersHeader_1ax98_722 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
}

._addSelectedButton_1ax98_730 {
  gap: 6px;
  font-weight: 600;
}
._addSelectedButton_1ax98_730 svg {
  stroke: #fff;
}

._groupMembersList_1ax98_738 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._groupMemberItem_1ax98_744 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

._memberRemove_1ax98_755 {
  border: 1px solid #f1d6d6;
  background: #E6F7FB;
  color: #d14343;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
._memberRemove_1ax98_755 svg {
  stroke: currentColor;
}

._excludedCard_1ax98_357 {
  border: 1px solid #f1f2f4;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._excludedHint_1ax98_781 {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5c6573;
}

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

._submitButton_1ax98_793 {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

._emptyCart_1ax98_799 {
  font-size: 14px;
  color: #707a8f;
  text-align: center;
  padding: 24px 0;
}

._confirmModalCount_1ax98_806 {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dashed;
  color: #14181f;
}

._confirmModalPersonName_1ax98_813 {
  font-weight: 600;
  color: #14181f;
}

._deleteEnrollmentButton_1ax98_818 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #707a8f;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
._deleteEnrollmentButton_1ax98_818:hover {
  background: rgba(0, 169, 206, 0.08);
  color: #c41e2a;
}

/* ============================================================
   HERO — Eğitim context bandı
============================================================ */
._hero_1ax98_838 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fafbfd 0%, #f3f5fa 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

._heroMain_1ax98_849 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

._heroTitleBlock_1ax98_857 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}

._heroTitle_1ax98_857 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 28px;
  letter-spacing: -0.02em;
}

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

._heroChip_1ax98_881 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._heroChipType_1ax98_891 {
  background: #dbeafe;
  color: #1e40af;
}

._heroChipCategory_1ax98_896 {
  background: #ede9fe;
  color: #6d28d9;
}

._heroChipRequired_1ax98_901 {
  background: #fee2e2;
  color: #b91c1c;
}

._heroMetaItem_1ax98_906 {
  font-size: 12.5px;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   STEPPER — Workflow adımları
============================================================ */
._stepper_1ax98_917 {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

._stepItem_1ax98_927 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._stepCircle_1ax98_934 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #e2e8f0;
}

._stepLabel_1ax98_948 {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}

._stepItemActive_1ax98_955 ._stepCircle_1ax98_934 {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
._stepItemActive_1ax98_955 ._stepLabel_1ax98_948 {
  color: #0f172a;
  font-weight: 600;
}

._stepItemComplete_1ax98_966 ._stepCircle_1ax98_934 {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
._stepItemComplete_1ax98_966 ._stepLabel_1ax98_948 {
  color: #166534;
}

._stepConnector_1ax98_975 {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 12px;
  min-width: 30px;
  border-radius: 999px;
}

._stepConnectorComplete_1ax98_984 {
  background: #16a34a;
}

@media (max-width: 768px) {
  ._stepper_1ax98_917 {
    flex-wrap: wrap;
    gap: 10px;
  }
  ._stepConnector_1ax98_975 {
    display: none;
  }
}
/* ============================================================
   STATS STRIP — KPI kartları
============================================================ */
._statsStrip_1ax98_1000 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  ._statsStrip_1ax98_1000 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._statCard_1ax98_281 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  border-left-width: 3px;
  transition: all 0.15s ease;
}

._statValue_1ax98_298 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

._statLabel_1ax98_295 {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

._statCardTotal_1ax98_1038 {
  border-left-color: #4f46e5;
}

._statCardApproved_1ax98_1042 {
  border-left-color: #16a34a;
}
._statCardApproved_1ax98_1042 ._statValue_1ax98_298 {
  color: #15803d;
}

._statCardPending_1ax98_1049 {
  border-left-color: #f59e0b;
}
._statCardPending_1ax98_1049 ._statValue_1ax98_298 {
  color: #b45309;
}

._statCardRejected_1ax98_1056 {
  border-left-color: #ef4444;
}
._statCardRejected_1ax98_1056 ._statValue_1ax98_298 {
  color: #b91c1c;
}

/* ============================================================
   LOADING SKELETON
============================================================ */
._loadingSkeleton_1ax98_1066 {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._skeletonRow_1ax98_1073 {
  height: 56px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: _skeletonShimmer_1ax98_1 1.3s ease-in-out infinite;
  border-radius: 10px;
}

@keyframes _skeletonShimmer_1ax98_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ============================================================
   Cart iyileştirmeleri
============================================================ */
._emptyCart_1ax98_799 {
  padding: 32px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  margin: 8px 0;
}._trigger_3yps6_1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(231, 33, 43, 0.06);
  border: 1px solid rgba(231, 33, 43, 0.2);
  border-radius: 999px;
  cursor: pointer;
  color: #c53036;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
._trigger_3yps6_1:hover {
  background: rgba(0, 169, 206, 0.12);
  border-color: rgba(231, 33, 43, 0.35);
}
._trigger_3yps6_1:focus-visible {
  outline: 2px solid #00A9CE;
  outline-offset: 2px;
}

._count_3yps6_27 {
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: center;
}

._card_3yps6_33 {
  width: min(320px, 100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: min(420px, 100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  box-sizing: border-box;
}
@media (max-width: 540px) {
  ._card_3yps6_33 {
    width: min(280px, 100vw - 24px);
    gap: 10px;
    padding: 12px;
  }
}
._card_3yps6_33 {
  background: radial-gradient(120% 60% at 0% 0%, rgba(139, 92, 246, 0.07), transparent 60%), radial-gradient(120% 60% at 100% 100%, rgba(59, 130, 246, 0.07), transparent 60%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  font-family: "Inter", sans-serif;
}

._cardHeader_3yps6_59 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f3;
}

._cardKey_3yps6_68 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #14181f;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1;
}

._cardMeta_3yps6_79 {
  flex-shrink: 0;
  padding: 2px 8px;
  background: #f1f2f4;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #707a8f;
}

._section_3yps6_89 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._sectionMuted_3yps6_95 {
  font-size: 12px;
  color: #707a8f;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed #e8e8e9;
  border-radius: 8px;
  text-align: center;
}

._sectionTitle_3yps6_105 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._list_3yps6_114 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._listItem_3yps6_123 {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #eef0f3;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._listItemHead_3yps6_133 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

._depLabel_3yps6_141 {
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
}

._depKey_3yps6_147 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #707a8f;
  word-break: break-word;
  overflow-wrap: anywhere;
}

._reason_3yps6_155 {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #2f333c;
}

._reverseList_3yps6_162 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._reverseItem_3yps6_171 {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 8px;
}._overlay_r0fla_1 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

._panel_r0fla_12 {
  background: #fff;
  border-radius: 14px;
  width: min(920px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

._header_r0fla_23 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid #eef2f7;
}
._header_r0fla_23 h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
._header_r0fla_23 p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

._closeBtn_r0fla_44 {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 8px;
}
._closeBtn_r0fla_44:hover {
  color: #0f172a;
}

._searchWrap_r0fla_57 {
  padding: 12px 24px;
  border-bottom: 1px solid #eef2f7;
}

._search_r0fla_57 {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
._search_r0fla_57:focus {
  border-color: #6366f1;
}

._body_r0fla_74 {
  padding: 12px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}

._empty_r0fla_80 {
  padding: 40px 0;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

._list_r0fla_87 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

._row_r0fla_95 {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafbfc;
}

._rowHead_r0fla_102 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
._rowHead_r0fla_102 code {
  font-size: 12.5px;
  font-weight: 600;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 6px;
}

._rowLabel_r0fla_117 {
  color: #475569;
  font-size: 13px;
}

._rowBody_r0fla_122 {
  display: grid;
  gap: 8px;
}

._depGroup_r0fla_127 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._depTitle_r0fla_133 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

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

._chip_r0fla_141 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #312e81;
  font-size: 12px;
}
._chip_r0fla_141 code {
  font-weight: 600;
  font-size: 11.5px;
}
._chip_r0fla_141 small {
  color: #4338ca;
  opacity: 0.8;
  font-size: 11px;
}

._chipMuted_r0fla_167 {
  background: #f1f5f9;
  color: #475569;
}
._chipMuted_r0fla_167 code {
  color: #334155;
}
._chipMuted_r0fla_167 small {
  color: #64748b;
}

._footer_r0fla_178 {
  padding: 10px 24px;
  border-top: 1px solid #eef2f7;
  color: #94a3b8;
  font-size: 12px;
}._splitView_b2c57_1 {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 180px);
}
@media (max-width: 1100px) {
  ._splitView_b2c57_1 {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  ._splitView_b2c57_1 {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 12px;
  }
}

._sidePanel_b2c57_20 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 200px);
}
@media (max-width: 900px) {
  ._sidePanel_b2c57_20 {
    position: static;
    max-height: none;
  }
}

._sidePanelHeader_b2c57_40 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid #f1f2f4;
  background: #fafbfc;
}

._roleList_b2c57_49 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

._sideEmpty_b2c57_59 {
  padding: 32px 16px;
  text-align: center;
  color: #707a8f;
  font-size: 13px;
}

._roleCard_b2c57_66 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
._roleCard_b2c57_66:hover {
  background: #fafbfc;
  border-color: #d0d0d1;
}

._roleCardActive_b2c57_84 {
  border-color: #00A9CE;
  background: #E6F7FB;
  box-shadow: 0 0 0 2px rgba(0, 169, 206, 0.12);
}

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

._roleCardName_b2c57_97 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._roleCardMeta_b2c57_106 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #707a8f;
}

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

._roleCardCount_b2c57_121 {
  flex-shrink: 0;
  font-weight: 500;
  color: #505766;
}

._roleCardDesc_b2c57_127 {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #707a8f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._mainPanel_b2c57_138 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._emptyState_b2c57_148 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 48px 24px;
  color: #707a8f;
  font-size: 14px;
  text-align: center;
}

._detailPanel_b2c57_159 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

._detailHeader_b2c57_166 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f2f4;
  background: #fafbfc;
}
@media (max-width: 1100px) {
  ._detailHeader_b2c57_166 {
    grid-template-columns: minmax(0, 1fr) 220px;
    padding: 16px 18px;
  }
}
@media (max-width: 720px) {
  ._detailHeader_b2c57_166 {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
}

._detailHeaderLeft_b2c57_187 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

._detailEyebrow_b2c57_194 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #707a8f;
}

._detailHeaderRight_b2c57_202 {
  display: flex;
  align-items: flex-end;
}
@media (max-width: 720px) {
  ._detailHeaderRight_b2c57_202 {
    align-items: stretch;
  }
}

._detailStats_b2c57_212 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-bottom: 1px solid #f1f2f4;
  font-size: 12px;
  color: #707a8f;
}
@media (max-width: 720px) {
  ._detailStats_b2c57_212 {
    padding: 10px 16px;
  }
}

._dot_b2c57_228 {
  width: 3px;
  height: 3px;
  background: #c4c7cc;
  border-radius: 50%;
}

._matrixToolbar_b2c57_235 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 24px;
  border-bottom: 1px solid #f1f2f4;
}
@media (max-width: 720px) {
  ._matrixToolbar_b2c57_235 {
    padding: 10px 16px;
  }
}

._matrixSearch_b2c57_249 {
  flex: 1 1 220px;
  min-width: 0;
}

._matrix_b2c57_235 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
@media (max-width: 720px) {
  ._matrix_b2c57_235 {
    padding: 14px 16px;
    gap: 10px;
  }
}

._matrixColumn_b2c57_271 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._matrixEmpty_b2c57_279 {
  flex: 1;
  padding: 48px 16px;
  text-align: center;
  color: #707a8f;
  font-size: 13px;
}

._category_b2c57_287 {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
._category_b2c57_287:hover {
  border-color: #d0d4da;
}

._categoryOpen_b2c57_302 {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
  z-index: 1;
}
._categoryOpen_b2c57_302:hover {
  border-color: #a5b4fc;
}

._categoryHeader_b2c57_311 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease;
  cursor: pointer;
}
._categoryHeader_b2c57_311:hover {
  background: #f8fafc;
}
._categoryOpen_b2c57_302 ._categoryHeader_b2c57_311 {
  border-bottom-color: #eef2f7;
  background: linear-gradient(180deg, #f5f6ff 0%, #fff 100%);
}

._categoryToggle_b2c57_330 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  min-width: 0;
  flex: 1;
}

._chev_b2c57_343 {
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
._categoryOpen_b2c57_302 ._chev_b2c57_343 {
  color: #6366f1;
}

._chevOpen_b2c57_353 {
  transform: rotate(0);
}

._categoryLabel_b2c57_357 {
  font-size: 13px;
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

._categoryRight_b2c57_367 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._categoryCount_b2c57_374 {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
  line-height: 1.5;
}
._categoryOpen_b2c57_302 ._categoryCount_b2c57_374 {
  background: #eef2ff;
  color: #4338ca;
}

._categoryBody_b2c57_389 {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
  border-top: 1px solid #eef2f7;
}

._permRow_b2c57_396 {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #14181f;
}
._permRow_b2c57_396:hover {
  background: #fafbfc;
}
._permRow_b2c57_396 input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}

._roleDescriptionInput_b2c57_414 {
  margin-top: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6dae1;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: #14181f;
  background: #fff;
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}
._roleDescriptionInput_b2c57_414:focus {
  outline: none;
  border-color: #5b6cff;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}
._roleDescriptionInput_b2c57_414:disabled {
  background: #f6f7f9;
  color: #7a8291;
  cursor: not-allowed;
}
._roleDescriptionInput_b2c57_414::placeholder {
  color: #9aa1ad;
}

._permRowLabel_b2c57_442 {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
._permRowLabel_b2c57_442 small {
  font-weight: 400;
  font-size: 11px;
  color: #7a8291;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.2px;
}

._permRowLabelText_b2c57_457 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

._permRowDescription_b2c57_464 {
  font-weight: 400;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

._cbox_b2c57_471 {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
._cbox_b2c57_471 input[type=checkbox] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

._cboxBox_b2c57_483 {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #d0d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
._cbox_b2c57_471 input:checked + ._cboxBox_b2c57_483 {
  background: #00A9CE;
  border-color: #00A9CE;
}
._cbox_b2c57_471 input:checked + ._cboxBox_b2c57_483::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
._cbox_b2c57_471 input:indeterminate + ._cboxBox_b2c57_483 {
  background: #00A9CE;
  border-color: #00A9CE;
}
._cbox_b2c57_471 input:indeterminate + ._cboxBox_b2c57_483::after {
  content: "";
  width: 10px;
  height: 2px;
  background: #fff;
}

._detailFooter_b2c57_517 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #f1f2f4;
  background: #fafbfc;
}
@media (max-width: 720px) {
  ._detailFooter_b2c57_517 {
    padding: 12px 16px;
  }
}

._detailFooterRight_b2c57_533 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}._infoCardsGrid_n0l9x_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

._viewButton_n0l9x_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: #6b7280;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
._viewButton_n0l9x_8:hover {
  color: #374151;
  background-color: #f3f4f6;
}._drawerContent_g961s_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._loadingPlaceholder_g961s_7 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
}

._twoColumnRow_g961s_13 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
._twoColumnRow_g961s_13 > * {
  min-width: 0;
}

._footer_g961s_22 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e8e8e9;
}

._draftButton_g961s_30 {
  background: #f6f7f8;
  border-color: #e8e8e9;
  color: #707a8f;
}
._draftButton_g961s_30:hover:not(:disabled) {
  background: #e8e8e9;
}._headerTitle_1c7dp_1 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._headerIcon_1c7dp_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #00A9CE;
  color: #fff;
  flex-shrink: 0;
}

._headerTitleText_1c7dp_20 {
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._drawerContent_1c7dp_29 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

._loadingState_1c7dp_36,
._errorState_1c7dp_37 {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #666f82;
}

._errorState_1c7dp_37 {
  color: #c62828;
}

._fieldRow_1c7dp_48 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._fieldLabel_1c7dp_55 {
  font-size: 14px;
  font-weight: 500;
  color: #666f82;
  margin-right: 4px;
}

._fieldValue_1c7dp_62 {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._imageWrap_1c7dp_68 {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8e8e9;
  background: #f8f8f9;
}

._image_1c7dp_68 {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
}

._dateRow_1c7dp_83 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

._dateItem_1c7dp_89 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._dateIcon_1c7dp_96 {
  flex-shrink: 0;
  color: #666f82;
}

._section_1c7dp_101 {
  margin-top: 4px;
}

._sectionTitle_1c7dp_105 {
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  margin: 0 0 8px 0;
}

._contentBox_1c7dp_112 {
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
  background: #fff;
}

._sectionBody_1c7dp_120 {
  font-size: 14px;
  line-height: 1.5;
  color: #34314a;
  margin: 0;
  white-space: pre-wrap;
}._bulkActionsBar_xjko3_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 0;
}

._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9 {
  border-color: #666f82 !important;
  color: #666f82 !important;
}
._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9 ._button__icon_xjko3_13 svg,
._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9 ._button__icon_xjko3_13 path,
._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9 ._button__icon_xjko3_13 {
  stroke: #666f82;
  color: #666f82;
}
._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9:hover:not(:disabled) {
  border-color: #666f82 !important;
  color: #666f82 !important;
  background-color: rgba(102, 111, 130, 0.08);
}
._bulkActionsBar_xjko3_1 ._bulkUnpublishBtn_xjko3_9:hover:not(:disabled) ._button__icon_xjko3_13 svg path {
  stroke: #666f82;
}

._titleCell_xjko3_28 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._titleThumb_xjko3_35 {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #00A9CE 0%, #007A95 25%, #ffc107 50%, #28a745 75%, #17a2b8 100%);
}

._titleThumbImg_xjko3_44 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._titleThumbPlaceholder_xjko3_51 {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00A9CE 0%, #007A95 25%, #ffc107 50%, #28a745 75%, #17a2b8 100%);
}

._titleText_xjko3_58 {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._actionButton_xjko3_68 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._actionButton_xjko3_68:hover {
  color: #374151;
}

._actionMenu_xjko3_83 {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
}

._actionMenuItem_xjko3_90 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}
._actionMenuItem_xjko3_90:hover {
  background-color: #f3f4f6;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
._managerPanel_1ea0l_39 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._panelToolbar_1ea0l_45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

._panelHint_1ea0l_53 {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
  opacity: 0.6;
  margin: 0;
}

._categoryList_1ea0l_63 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._categoryRow_1ea0l_69 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
}

._rowDragging_1ea0l_79 {
  opacity: 0.8;
  border-color: var(--color-primary, #00a9ce);
}

._dragHandle_1ea0l_84 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: grab;
  color: var(--color-neutral-dark, #212b36);
}
._dragHandle_1ea0l_84:disabled {
  cursor: default;
  opacity: 0.16;
}

._categoryName_1ea0l_99 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowActions_1ea0l_111 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._iconButton_1ea0l_117 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-neutral-dark, #212b36);
  border-radius: 6px;
}
._iconButton_1ea0l_117:hover {
  background: var(--color-neutral-light, #f1f1f1);
}
._iconButton_1ea0l_117:disabled {
  cursor: default;
  opacity: 0.16;
}

._rotate180_1ea0l_136 {
  display: inline-flex;
  transform: rotate(180deg);
}

._tableActions_1ea0l_141 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

._questionCell_1ea0l_148 {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._answerCell_1ea0l_156 {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

._emptyState_1ea0l_165 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
  text-align: center;
  padding: 40px 24px;
  opacity: 0.6;
}

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

._switchRow_1ea0l_182 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._switchLabel_1ea0l_189 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: var(--color-neutral-dark, #212b36);
}

._drawerFooter_1ea0l_197 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._pageContainer_1hw57_35 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
._accordion_k8ve3_39 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._item_k8ve3_45 {
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
  overflow: hidden;
  transition: border-color 250ms ease;
}
._item_k8ve3_45._open_k8ve3_52 {
  border-color: var(--color-primary, #00a9ce);
}

._header_k8ve3_56 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

._question_k8ve3_69 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
}

._icon_k8ve3_77 {
  display: inline-flex;
  color: var(--color-neutral-dark, #212b36);
  transition: transform 250ms ease;
  flex-shrink: 0;
}

._iconOpen_k8ve3_84 {
  transform: rotate(180deg);
  color: var(--color-primary, #00a9ce);
}

._answer_k8ve3_89 {
  padding: 0 24px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
}
._answer_k8ve3_89 p {
  margin: 0 0 8px;
}
._answer_k8ve3_89 a {
  color: var(--color-primary, #00a9ce);
}
._answer_k8ve3_89 ul,
._answer_k8ve3_89 ol {
  padding-left: 24px;
  margin: 0 0 8px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
._pageContainer_89txj_39 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._categoryList_89txj_45 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

._categoryTitle_89txj_57 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
  margin: 0;
}

._emptyState_89txj_66 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-neutral-dark, #212b36);
  text-align: center;
  padding: 64px 24px;
  opacity: 0.6;
}._headerTitle_1221e_1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerActions_1221e_7 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerActionButton_1221e_13 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 10px;
}
._headerActionButton_1221e_13:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._drawerContent_1221e_31 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

._topRow_1221e_38 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

._topItem_1221e_47 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._topLabel_1221e_53 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #666f82;
  letter-spacing: 0.08px;
}

._topValue_1221e_61 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #14181f;
  letter-spacing: 0.08px;
}

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

._section_1221e_73 {
  border-radius: 12px;
  border: 1px solid #e8e8e9;
  overflow: hidden;
}

._errorSection_1221e_79 {
  border-color: #f4cdcd;
  background-color: #fdf6f6;
}

._sectionHeader_1221e_84 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #f8f8f9;
  border-bottom: 1px solid #e8e8e9;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #14181f;
}

._errorSection_1221e_79 ._sectionHeader_1221e_84 {
  background-color: #fcecec;
  border-bottom-color: #f4cdcd;
  color: #962020;
}

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

._summaryText_1221e_110 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #14181f;
}

._errorOneLiner_1221e_117 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #962020;
  font-weight: 500;
}

._detailList_1221e_125 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._detailItem_1221e_131 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

._detailLabel_1221e_138 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666f82;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  min-width: 140px;
  flex-shrink: 0;
}

._detailIcon_1221e_151 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666f82;
}

._detailValue_1221e_158 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #14181f;
  text-align: left;
  flex: 1;
  letter-spacing: 0.08px;
  word-break: break-word;
}

._recordLink_1221e_169 {
  color: #1f6feb;
  text-decoration: underline;
}
._recordLink_1221e_169:hover {
  color: #0b4cb8;
}

._collapsibleHeader_1221e_177 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background-color: #f8f8f9;
  border: none;
  border-bottom: 1px solid #e8e8e9;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #14181f;
  cursor: pointer;
  text-align: left;
}
._collapsibleHeader_1221e_177:hover {
  background-color: #f1f1f3;
}

._sectionHeaderInner_1221e_197 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._collapsibleArrow_1221e_203 {
  display: inline-block;
  font-size: 14px;
  color: #666f82;
  transition: transform 0.18s ease;
}
._collapsibleArrow_1221e_203[data-open=true] {
  transform: rotate(-180deg);
}

._collapsibleHint_1221e_213 {
  margin: 0;
  font-size: 12px;
  color: #666f82;
}

._developerToggle_1221e_219 {
  align-self: flex-start;
  background: transparent;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  color: #34314a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
}
._developerToggle_1221e_219:hover {
  background-color: #f6f7f8;
}

._developerBlock_1221e_234 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._developerLabel_1221e_240 {
  font-size: 12px;
  font-weight: 600;
  color: #666f82;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._developerBody_1221e_248 {
  margin: 0;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  background-color: #0f172a;
  color: #e2e8f0;
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", Courier, monospace;
  font-size: 12.5px;
  line-height: 18px;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 6px;
  tab-size: 2;
}

._loadingState_1221e_264,
._errorState_1221e_265 {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #666f82;
}

._errorState_1221e_265 {
  color: #c62828;
}._statCards_1kuhc_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

._statCards_1kuhc_1 .info-card__icon svg {
  filter: brightness(0) invert(1) !important;
}

._statCardWrap_1kuhc_12 {
  position: relative;
  border-radius: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
._statCardWrap_1kuhc_12 .info-card {
  height: 100%;
}

._statCardWrapActive_1kuhc_21 .info-card {
  border-width: 2px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

._statCardWrap_neutral_1kuhc_27._statCardWrapActive_1kuhc_21 .info-card {
  border-color: #14181f;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 60%);
}

._statCardWrap_success_1kuhc_32._statCardWrapActive_1kuhc_21 .info-card {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
}
._statCardWrap_success_1kuhc_32._statCardWrapActive_1kuhc_21 .info-card .info-card__value {
  color: #166534;
}

._statCardWrap_warning_1kuhc_40._statCardWrapActive_1kuhc_21 .info-card {
  border-color: #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
._statCardWrap_warning_1kuhc_40._statCardWrapActive_1kuhc_21 .info-card .info-card__value {
  color: #92400e;
}

._statCardWrap_error_1kuhc_48._statCardWrapActive_1kuhc_21 .info-card {
  border-color: #00A9CE;
  background: linear-gradient(180deg, #E6F7FB 0%, #ffffff 60%);
}
._statCardWrap_error_1kuhc_48._statCardWrapActive_1kuhc_21 .info-card .info-card__value {
  color: #b91c1c;
}

._cellDate_1kuhc_56 {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

._cellDatePrimary_1kuhc_62 {
  font-size: 13px;
  font-weight: 500;
  color: #14181f;
  font-variant-numeric: tabular-nums;
}

._cellDateRelative_1kuhc_69 {
  font-size: 11px;
  color: #8a91a0;
}

._cellUser_1kuhc_74 {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

._cellAvatar_1kuhc_81 {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f2f4;
  color: #4d5464;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}

._cellUserName_1kuhc_96 {
  font-size: 13px;
  font-weight: 500;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

._cellOperation_1kuhc_106 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

._cellOperationModule_1kuhc_113 {
  font-size: 12px;
  color: #707a8f;
}

._cellDescription_1kuhc_118 {
  font-size: 13px;
  color: #14181f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

._actionButton_1kuhc_128 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_1kuhc_128:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_1kuhc_128:focus {
  outline: none;
}

._actionMenu_1kuhc_150 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_1kuhc_156 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #4d5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_1kuhc_156:hover {
  background: #f6f7f8;
}

.logs-date-column {
  min-width: 170px;
  width: 180px;
}
.logs-user-column {
  min-width: 200px;
}
.logs-operation-column {
  min-width: 170px;
}
.logs-description-column {
  min-width: 260px;
  flex: 1;
}
.logs-status-column {
  min-width: 120px;
}
.logs-action-column {
  min-width: 60px;
}._stepTabs_1tj69_1 {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 0;
}

._stepTab_1tj69_1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;
  width: 100%;
  background: none;
  border: none;
  cursor: default;
  font-size: 14px;
  font-weight: 500;
  color: #707a8f;
  transition: color 0.2s ease;
  pointer-events: none;
}

._stepTabWrapper_1tj69_26 {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}

._stepTab_1tj69_1._active_1tj69_33 {
  color: #00A9CE;
}
._stepTab_1tj69_1._active_1tj69_33 ._stepNumber_1tj69_36 {
  background-color: #00A9CE;
  color: #fff;
  border-color: #00A9CE;
}

._stepTab_1tj69_1:not(._active_1tj69_33) ._stepNumber_1tj69_36 {
  background: #fff;
  color: #707a8f;
  border: 1px solid #d3d6dc;
}

._stepNumber_1tj69_36 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d3d6dc;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

._stepProgressFull_1tj69_61 {
  width: calc(100% - 32px);
  height: 2px;
  margin: 0 16px;
  background-color: #e8e8e9;
  overflow: hidden;
  border-radius: 0 0 2px 2px;
  box-sizing: border-box;
}

._stepProgressFullBar_1tj69_71 {
  height: 100%;
  background-color: #00A9CE;
  transition: width 0.3s ease;
}

._footerButtons_1tj69_77 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

._footerActions_1tj69_85 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._formGrid_1tj69_91 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding-bottom: 120px;
}

._formFieldFull_1tj69_98 {
  grid-column: 1/-1;
}

._formField_1tj69_98 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._helperText_1tj69_108 {
  font-size: 12px;
  color: #707a8f;
  margin-top: 4px;
  font-style: italic;
}

._sectionDivider_1tj69_115 {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
  margin: 12px 0 4px;
  padding: 10px 14px;
  background-color: #f6f7f8;
  border-left: 3px solid #00A9CE;
  border-radius: 6px;
}

._modalHeader_1tj69_128 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e9;
}

._modalHeaderLeft_1tj69_136 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._modalTitle_1tj69_142 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #14181f;
}

._closeButton_1tj69_149 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #72808f;
  padding: 0;
}
._closeButton_1tj69_149:hover {
  background-color: #f6f7f8;
  color: #14181f;
}/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._headerTitle_zw8x7_39 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerActions_zw8x7_45 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._detayButton_zw8x7_51 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #00A9CE;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
._detayButton_zw8x7_51:hover {
  background-color: #E6F7FB;
}

._menuButton_zw8x7_69 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._menuButton_zw8x7_69:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._menuDropdown_zw8x7_86 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

._menuItem_zw8x7_100 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_zw8x7_100:hover {
  background-color: #f3f4f6;
}

._drawerContent_zw8x7_118 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._personnelCard_zw8x7_124 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

._personnelCardTop_zw8x7_133 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

._avatarWrap_zw8x7_139 {
  flex-shrink: 0;
}

._personnelInfo_zw8x7_143 {
  flex: 1;
  min-width: 0;
}

._personnelHeader_zw8x7_148 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

._personnelNameTitle_zw8x7_156 {
  min-width: 0;
}

._personnelName_zw8x7_156 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #14181f;
}

._personnelTitle_zw8x7_168 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #4d5464;
}

._badgesRow_zw8x7_175 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

._contactPills_zw8x7_181 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

._cardEducationProgress_zw8x7_188 {
  width: 100%;
  margin-top: 0;
}

._cardEducationProgressTitle_zw8x7_193 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
}

._cardEducationProgress_zw8x7_188 ._progressLabels_zw8x7_202 {
  margin-top: 8px;
  margin-bottom: 0;
}

._contactPill_zw8x7_181 {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.005em;
  color: #666f82;
  background: #f8f8f9;
  border: 1px solid #d3d6dc;
  border-radius: 8px;
}

._section_zw8x7_221 {
  margin: 0;
}

._sectionTitle_zw8x7_225 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
}

._sectionCard_zw8x7_234 {
  padding: 16px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._progressLabels_zw8x7_202 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #4d5464;
  min-width: 0;
  flex-wrap: wrap;
}

._progressPercent_zw8x7_253 {
  color: #10b981;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

._detailList_zw8x7_260 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._detailItem_zw8x7_266 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._detailIcon_zw8x7_272 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  flex-shrink: 0;
}

._detailLabel_zw8x7_280 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #666f82;
  flex: 1;
}

._detailValue_zw8x7_289 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #14181f;
}

._menuWrapper_zw8x7_297 {
  position: relative;
}

._absenceWithTooltip_zw8x7_301 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

._absenceTooltipContent_zw8x7_307 {
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  background: #1f2937;
  border-radius: 8px;
  list-style: none;
  margin: 0;
}

._absenceTooltipContent_zw8x7_307 li {
  padding: 2px 0;
}

._loadingState_zw8x7_321 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  font-size: 14px;
}._pageContainer_989jz_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

._actionButton_989jz_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary, #64748b);
  transition: all 0.2s ease;
}
._actionButton_989jz_8:hover {
  background: var(--color-action-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #1e293b);
}
._actionButton_989jz_8:focus {
  outline: none;
}

._actionMenu_989jz_30 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionMenuItem_989jz_36 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 190px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5%;
  color: #4d5464;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
._actionMenuItem_989jz_36:hover {
  background: #f6f7f8;
}
._actionMenuItem_989jz_36._error_989jz_58 {
  color: var(--color-error, #ef4444);
}
._actionMenuItem_989jz_36._error_989jz_58:hover {
  background: rgba(239, 68, 68, 0.08);
}

._progressCell_989jz_65 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.intern-tc-column {
  min-width: 120px;
}
.intern-name-column {
  min-width: 140px;
}
.intern-type-column {
  min-width: 180px;
}
.intern-source-column {
  min-width: 130px;
}
.intern-unit-column {
  min-width: 160px;
}
.intern-progress-column {
  min-width: 160px;
}
.intern-status-column {
  min-width: 120px;
}._breadcrumbContainer_aur0q_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

._backButton_aur0q_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._backButton_aur0q_9:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._pageLayout_aur0q_27 {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: flex-start;
}

._leftColumn_aur0q_34 {
  flex-shrink: 0;
  width: 360px;
}

._rightColumn_aur0q_39 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._pageHeader_aur0q_47 {
  margin-bottom: 0;
}

._tableSection_aur0q_51 {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

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

._certificateCard_aur0q_64 {
  display: flex;
  width: 100%;
  min-height: 192px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

._certificatePreview_aur0q_74 {
  flex: 0 0 33%;
  min-width: 0;
  background: linear-gradient(135deg, #E6F7FB 0%, #fee2e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

._certificatePreviewInner_aur0q_84 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #00A9CE;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  min-height: 140px;
}

._certificatePreviewTitle_aur0q_97 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #991b1b;
  margin-bottom: 8px;
}

._certificatePreviewName_aur0q_105 {
  font-size: 14px;
  font-style: italic;
  color: #14181f;
}

._certificateDetails_aur0q_111 {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._certificateDetailsHeader_aur0q_119 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

._certificateCardTitle_aur0q_127 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #14181f;
  flex: 1;
  min-width: 0;
}

._downloadBtn_aur0q_137 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._downloadBtn_aur0q_137:hover {
  background: #f6f7f8;
  color: #14181f;
}

._certificateDetailList_aur0q_156 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._certificateDetailItem_aur0q_162 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4d5464;
}
._certificateDetailItem_aur0q_162 span {
  flex: 1;
  min-width: 0;
}

._certDetailIcon_aur0q_174 {
  flex-shrink: 0;
  color: #707a8f;
}

._logTimeline_aur0q_179 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
}

._logTimelineLine_aur0q_187 {
  position: absolute;
  left: 153px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: #00A9CE;
  border-radius: 1px;
}

._logEntry_aur0q_197 {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

._logTime_aur0q_179 {
  flex: 0 0 140px;
  font-size: 14px;
  color: #4d5464;
  padding-top: 14px;
  padding-right: 16px;
}

._logDotWrap_aur0q_212 {
  flex: 0 0 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}

._logDot_aur0q_212 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00A9CE;
  flex-shrink: 0;
  z-index: 1;
}

._logCard_aur0q_229 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  margin-left: 0;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  min-width: 0;
}

._logCardContent_aur0q_243 {
  flex: 1;
  min-width: 0;
}

._logCardTitle_aur0q_248 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #14181f;
}

._logCardDescription_aur0q_255 {
  margin: 0;
  font-size: 14px;
  color: #4d5464;
}

._emptyText_aur0q_261 {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #666f82;
  font-size: 14px;
}

._loading_aur0q_269 {
  padding: 24px;
  text-align: center;
  color: #666f82;
}

._menuButton_aur0q_275 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  flex-shrink: 0;
}
._menuButton_aur0q_275:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._iconButton_aur0q_293 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
}
._iconButton_aur0q_293:hover {
  background-color: #f6f7f8;
  color: #14181f;
}

._progressCell_aur0q_309 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._emailLink_aur0q_315 {
  color: #2563eb;
  text-decoration: none;
}
._emailLink_aur0q_315:hover {
  text-decoration: underline;
}._card_tjaba_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 256px;
  padding: 20px 0px 0px 0px;
  gap: 2px;
  background: #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
}
._card_tjaba_1:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._topBar_tjaba_19 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 40px;
  padding: 0px 16px;
}

._menuButton_tjaba_28 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  box-sizing: border-box;
}
._menuButton_tjaba_28:hover {
  background: #f6f7f8;
  color: #14181f;
}

._cardBody_tjaba_47 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
._cardBody_tjaba_47:focus {
  outline: none;
}

._folderIconContainer_tjaba_64 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-bottom: 16px;
}

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

._folderName_tjaba_78 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #14181f;
}

._folderNameContainer_tjaba_88 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}

._lastUpdateRow_tjaba_99 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 8px;
  box-sizing: border-box;
}

._lastUpdateLabel_tjaba_109 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #707a8f;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
}

._lastUpdateDate_tjaba_118 {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #707a8f;
  flex-shrink: 0;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
}

._menuDropdown_tjaba_128 {
  min-width: 140px;
  padding: 4px;
}

._menuItem_tjaba_133 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_tjaba_133:hover {
  background-color: #f3f4f6;
}.library-share-custom-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}.add-folder-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #dadfe3;
}
.add-folder-modal-header .add-folder-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.add-folder-modal-header .add-folder-modal-header-left .add-folder-modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14181f;
}
.add-folder-modal-header .add-folder-modal-header-left h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #14181f;
}
.add-folder-modal-header .add-folder-modal-close {
  background: none;
  border: 1px solid #e8e8e9;
  font-size: 16px;
  cursor: pointer;
  color: #72808f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.add-folder-modal-header .add-folder-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.add-folder-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 0;
}

.add-folder-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-folder-modal-share {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-folder-modal-share .add-folder-modal-share-title {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}
.add-folder-modal-share .add-folder-modal-share-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-folder-modal-radio-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.add-folder-modal-radio-option:hover {
  background: #fafafa;
}
.add-folder-modal-radio-option.selected {
  border-color: var(--primary-color, #00A9CE);
}
.add-folder-modal-radio-option input[type=radio] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #e8e8e9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}
.add-folder-modal-radio-option input[type=radio]:checked {
  border-color: var(--primary-color, #00A9CE);
  border-width: 2px;
}
.add-folder-modal-radio-option input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--primary-color, #00A9CE);
  border-radius: 50%;
}
.add-folder-modal-radio-option .add-folder-modal-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}
.add-folder-modal-radio-option .add-folder-modal-radio-desc {
  font-size: 12px;
  color: #707a8f;
}

.add-folder-modal-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.add-folder-modal-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}.add-document-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #dadfe3;
}
.add-document-modal-header .add-document-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.add-document-modal-header .add-document-modal-header-left .add-document-modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color, #00A9CE);
}
.add-document-modal-header .add-document-modal-header-left h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #14181f;
}
.add-document-modal-header .add-document-modal-close {
  background: none;
  border: 1px solid #e8e8e9;
  font-size: 16px;
  cursor: pointer;
  color: #72808f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.add-document-modal-header .add-document-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.add-document-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 0;
}

.add-document-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-document-modal-share {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-document-modal-share .add-document-modal-share-title {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}
.add-document-modal-share .add-document-modal-share-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-document-modal-radio-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.add-document-modal-radio-option:hover {
  background: #fafafa;
}
.add-document-modal-radio-option.selected {
  border-color: var(--primary-color, #00A9CE);
}
.add-document-modal-radio-option input[type=radio] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #e8e8e9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}
.add-document-modal-radio-option input[type=radio]:checked {
  border-color: var(--primary-color, #00A9CE);
  border-width: 2px;
}
.add-document-modal-radio-option input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--primary-color, #00A9CE);
  border-radius: 50%;
}
.add-document-modal-radio-option .add-document-modal-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}
.add-document-modal-radio-option .add-document-modal-radio-desc {
  font-size: 12px;
  color: #707a8f;
}

.add-document-modal-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.add-document-modal-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}.document-viewer-modal-content {
  width: 100%;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #f6f7f8;
  border-radius: 8px;
  overflow: hidden;
}

.document-viewer-iframe {
  flex: 1;
  width: 100%;
  min-height: 70vh;
  border: none;
}

.document-viewer-empty {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  margin: 0;
}

.document-viewer-download-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 200px;
  padding: 24px;
}

.document-viewer-download-message {
  margin: 0;
  text-align: center;
  color: #707a8f;
  max-width: 400px;
}._pageContainer_cjrtl_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

._section_cjrtl_8 {
  margin: 0;
}

._sectionHeader_cjrtl_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px 24px;
  gap: 16px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
}

._sectionTitle_cjrtl_23 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #14181f;
}

._headerSortGroup_cjrtl_31 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._sectionSortWrap_cjrtl_37 {
  position: relative;
}

._sortBtn_cjrtl_41 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #dadfe3;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #72808f;
}
._sortBtn_cjrtl_41:hover {
  background-color: #f9fafb;
  border-color: #c4c4c4;
}
._sortBtn_cjrtl_41._sortBtnActive_cjrtl_58 {
  background-color: #E6F7FB;
  border-color: var(--color-primary, #00A9CE);
}
._sortBtn_cjrtl_41._sortBtnActive_cjrtl_58 svg path {
  stroke: var(--color-primary, #00A9CE);
}
._sortBtn_cjrtl_41 svg {
  color: #72808f;
}

._sortDropdown_cjrtl_69 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 215px;
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 100;
}

._sortOption_cjrtl_82 {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #212b36;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._sortOption_cjrtl_82:hover {
  background-color: #f9fafb;
}
._sortOption_cjrtl_82._sortOptionSelected_cjrtl_98 {
  color: var(--color-primary, #00A9CE);
  background-color: #E6F7FB;
}

._sectionLink_cjrtl_103 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  box-sizing: border-box;
}
._sectionLink_cjrtl_103 svg,
._sectionLink_cjrtl_103 svg path {
  stroke: currentColor;
}
._sectionLink_cjrtl_103:hover {
  background: #f6f7f8;
  color: #14181f;
}

._foldersGrid_cjrtl_127 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 256px);
  gap: 16px;
}

._foldersLoading_cjrtl_133,
._foldersEmpty_cjrtl_134 {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._foldersPagination_cjrtl_143 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  margin-top: 16px;
  gap: 12px;
}

._paginationLeft_cjrtl_155 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
._paginationLeft_cjrtl_155 ._paginationLabel_cjrtl_161 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #707a8f;
  white-space: nowrap;
}
._paginationLeft_cjrtl_155 ._paginationDetails_cjrtl_168 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_cjrtl_177 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_cjrtl_177 ._paginationArrow_cjrtl_182 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationControls_cjrtl_177 ._paginationArrow_cjrtl_182:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_cjrtl_177 ._paginationArrow_cjrtl_182:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationControls_cjrtl_177 ._paginationArrow_cjrtl_182 svg {
  width: 16px;
  height: 16px;
}
._paginationControls_cjrtl_177 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_cjrtl_177 .pagination-numbers .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_cjrtl_177 .pagination-numbers .pagination-number._active_cjrtl_227 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_cjrtl_177 .pagination-numbers .pagination-number:hover:not(._active_cjrtl_227) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_cjrtl_177 .pagination-numbers .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._documentsTableWrap_cjrtl_248 {
  margin-top: 0;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

._actionButton_cjrtl_255 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  box-sizing: border-box;
}
._actionButton_cjrtl_255:hover {
  background: #f6f7f8;
  color: #14181f;
}

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

._fileIconWrap_cjrtl_280 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #707a8f;
}

._sharedWith_cjrtl_288 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._avatarStack_cjrtl_294 {
  display: flex;
  align-items: center;
}

._avatarCircle_cjrtl_299 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e8e9;
  border: 2px solid #fff;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #4d5464;
}
._avatarCircle_cjrtl_299:first-child {
  margin-left: 0;
}

._plusBadge_cjrtl_317 {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._menuDropdown_cjrtl_324 {
  min-width: 140px;
  padding: 4px;
}

._menuItem_cjrtl_329 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_cjrtl_329:hover {
  background-color: #f3f4f6;
}._breadcrumb_1s3bb_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #707a8f;
}

._breadcrumbLink_1s3bb_9 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #707a8f;
  font-size: 14px;
}
._breadcrumbLink_1s3bb_9:hover {
  color: #14181f;
  text-decoration: underline;
}

._breadcrumbSep_1s3bb_22 {
  color: #707a8f;
}

._breadcrumbCurrent_1s3bb_26 {
  color: #14181f;
  font-weight: 500;
}

._loadingText_1s3bb_31 {
  font-size: 14px;
  color: #707a8f;
}._pageContainer_1a2on_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

._breadcrumb_1a2on_8 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #707a8f;
}

._breadcrumbLink_1a2on_16 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #707a8f;
  font-size: 14px;
}
._breadcrumbLink_1a2on_16:hover {
  color: #14181f;
  text-decoration: underline;
}

._breadcrumbSep_1a2on_29 {
  color: #707a8f;
}

._breadcrumbCurrent_1a2on_33 {
  color: #14181f;
  font-weight: 500;
}

._tableWrap_1a2on_38 {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

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

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

._sharedWith_1a2on_55 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._avatarStack_1a2on_61 {
  display: flex;
  align-items: center;
}

._avatarCircle_1a2on_66 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e8e9;
  border: 2px solid #fff;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #4d5464;
}
._avatarCircle_1a2on_66:first-child {
  margin-left: 0;
}

._plusBadge_1a2on_84 {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._menuDropdown_1a2on_91 {
  min-width: 140px;
  padding: 4px;
}

._menuItem_1a2on_96 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_1a2on_96:hover {
  background-color: #f3f4f6;
}

._actionButton_1a2on_113 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  box-sizing: border-box;
}
._actionButton_1a2on_113:hover {
  background: #f6f7f8;
  color: #14181f;
}._pageContainer_xwvz5_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px 24px;
}

._breadcrumb_xwvz5_8 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #707a8f;
}

._breadcrumbLink_xwvz5_16 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #707a8f;
  font-size: 14px;
}
._breadcrumbLink_xwvz5_16:hover {
  color: #14181f;
  text-decoration: underline;
}

._breadcrumbSep_xwvz5_29 {
  color: #707a8f;
}

._breadcrumbCurrent_xwvz5_33 {
  color: #14181f;
  font-weight: 500;
}

._tableWrap_xwvz5_38 {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

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

._fileIconWrap_xwvz5_50 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #707a8f;
}

._sharedWith_xwvz5_58 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._avatarStack_xwvz5_64 {
  display: flex;
  align-items: center;
}

._avatarCircle_xwvz5_69 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e8e9;
  border: 2px solid #fff;
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #4d5464;
}
._avatarCircle_xwvz5_69:first-child {
  margin-left: 0;
}

._plusBadge_xwvz5_87 {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
}

._menuDropdown_xwvz5_94 {
  min-width: 140px;
  padding: 4px;
}

._menuItem_xwvz5_99 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
._menuItem_xwvz5_99:hover {
  background-color: #f3f4f6;
}

._actionButton_xwvz5_116 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #707a8f;
  box-sizing: border-box;
}
._actionButton_xwvz5_116:hover {
  background: #f6f7f8;
  color: #14181f;
}._pageContainer_1ok7i_1 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 24px 24px;
}

._section_1ok7i_8 {
  margin: 0;
}

._sectionTitle_1ok7i_12 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #14181f;
}

._sectionDesc_1ok7i_19 {
  margin: 0 0 20px;
  font-size: 14px;
  color: #707a8f;
  line-height: 1.5;
}

._actions_1ok7i_26 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

._toastPreview_1ok7i_33 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 664px;
}._pageContainer_kyidh_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._catalogGrid_kyidh_7 {
  display: grid;
  gap: 24px;
  margin-top: 0;
}
._catalogGrid_kyidh_7._grid_kyidh_12 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
._catalogGrid_kyidh_7._list_kyidh_15 {
  grid-template-columns: 1fr;
}

._tableWrap_kyidh_19 {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

._tableEducationCell_kyidh_25 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._tableThumbWrap_kyidh_31 {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

._tableThumb_kyidh_31 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._tableTitle_kyidh_45 {
  font-size: 14px;
  color: #14181f;
  line-height: 1.4;
}

._progressCell_kyidh_51 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

._hoursLeft_kyidh_58 {
  font-size: 12px;
  color: #707a8f;
}

._playButton_kyidh_63 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-color, #00A9CE);
  cursor: pointer;
  transition: background 0.2s ease;
}
._playButton_kyidh_63:hover {
  background: rgba(0, 169, 206, 0.08);
}

._loadingState_kyidh_81,
._errorMessage_kyidh_82 {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary, #637381);
}

._errorMessage_kyidh_82 {
  color: var(--error, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}

._emptyState_kyidh_94 {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary, #637381);
}

._paginationBar_kyidh_100 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_kyidh_112 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_kyidh_119 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_kyidh_128 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_kyidh_138 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_kyidh_138 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_kyidh_138 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_kyidh_138 .pagination-number._active_kyidh_162 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_kyidh_138 .pagination-number:hover:not(._active_kyidh_162) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_kyidh_138 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_kyidh_183 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_kyidh_183:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_kyidh_183:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_kyidh_183 svg {
  width: 16px;
  height: 16px;
}._bar_jw8un_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

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

._fieldSearch_jw8un_16 {
  grid-column: span 2;
}

._extras_jw8un_20 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  grid-column: 1/-1;
}._card_rj573_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  min-height: 110px;
  transition: all 0.15s ease;
}

._head_rj573_13 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

._title_rj573_20 {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 16px;
}

._iconWrap_rj573_28 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}

._value_rj573_40 {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

._foot_rj573_48 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  min-height: 16px;
}

._trend_rj573_57 {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

._trendGood_rj573_63 {
  color: #15803d;
}

._trendBad_rj573_67 {
  color: #b91c1c;
}

._footnote_rj573_71 {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 16px;
}

._success_rj573_77 ._iconWrap_rj573_28 {
  background: #dcfce7;
  color: #15803d;
}

._warning_rj573_82 ._iconWrap_rj573_28 {
  background: #fef3c7;
  color: #b45309;
}

._danger_rj573_87 ._iconWrap_rj573_28 {
  background: #fee2e2;
  color: #b91c1c;
}._wrap_s7tso_1 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 18px 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._head_s7tso_11 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._title_s7tso_17 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

._subtitle_s7tso_24 {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}

._body_s7tso_30 {
  width: 100%;
  position: relative;
}

._state_s7tso_35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_s7tso_46 {
  width: 22px;
  height: 22px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: _spin_s7tso_46 0.7s linear infinite;
}

@keyframes _spin_s7tso_46 {
  to {
    transform: rotate(360deg);
  }
}._tableWrap_zd29f_1 {
  display: flex;
  flex-direction: column;
}

._tableEducationCell_zd29f_6 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._tableThumbWrap_zd29f_12 {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

._tableThumb_zd29f_12 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._tableTitle_zd29f_26 {
  font-size: 14px;
  color: #14181f;
  line-height: 1.4;
}

._loadingState_zd29f_32,
._errorMessage_zd29f_33 {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary, #637381);
}

._errorMessage_zd29f_33 {
  color: var(--error, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}

._detailButton_zd29f_45 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: transparent;
  color: #707a8f;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
._detailButton_zd29f_45:hover {
  background: rgba(232, 232, 233, 0.5);
  color: #14181f;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._card_1mfum_35 {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 298px;
  transition: box-shadow 0.2s ease;
  cursor: default;
}
._card_1mfum_35[role=button] {
  cursor: pointer;
}
._card_1mfum_35:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._cardWithImage_1mfum_54 ._card__body_1mfum_54 {
  border-top: 1px solid #e8e8e9;
  padding-top: 12px;
}
._cardWithImage_1mfum_54 ._card__title_1mfum_58 {
  margin-top: 0;
}

._card__imageWrap_1mfum_62 {
  position: relative;
  width: 100%;
  aspect-ratio: 262/160;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f1f1;
  flex-shrink: 0;
}

._card__image_1mfum_62 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._card__imagePlaceholder_1mfum_78 {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e8e8e9 0%, #d0d0d0 100%);
}

._card__imageHover_1mfum_84 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 6px;
}
._card_1mfum_35:hover ._card__imageHover_1mfum_84 {
  opacity: 1;
}

._card__imageHoverArrowBg_1mfum_99 {
  width: 46px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #bcbcbc;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}

._card__body_1mfum_54 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._card__meta_1mfum_119 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

._card__date_1mfum_127 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #707a8f;
  line-height: 18px;
  font-weight: 500;
}

._card__dateIcon_1mfum_139 {
  flex-shrink: 0;
  color: #707a8f;
}

._card__title_1mfum_58 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #14181f;
  margin-top: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._card__description_1mfum_158 {
  font-size: 12px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  line-height: 18px;
  color: #707a8f;
  margin-top: 8px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 40px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._header_rh3n4_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  gap: 12px;
  border-bottom: 1px solid #dadfe3;
}

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

._headerIcon_rh3n4_52 {
  flex-shrink: 0;
  color: #707a8f;
}

._headerTitle_rh3n4_57 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
}

._headerActions_rh3n4_64 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._headerCloseBtn_rh3n4_71 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._headerCloseBtn_rh3n4_71:hover {
  background: #f5f5f5;
  border-color: #e8e8e9;
}

._body_rh3n4_90 {
  padding: 0;
  background: #fff;
  overflow: auto;
}

._imageWrap_rh3n4_96 {
  width: 450px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
  background: #f1f1f1;
  flex-shrink: 0;
}

._image_rh3n4_96 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._imagePlaceholder_rh3n4_111 {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e8e8e9 0%, #d0d0d0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

._content_rh3n4_121 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 20px;
  gap: 16px;
}

._contentTitle_rh3n4_131 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #14181f;
  line-height: 28px;
}

._contentDescription_rh3n4_141 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #14181f;
  line-height: 20px;
  max-width: 450px;
}._pageContainer_1xtsd_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._announcementGrid_1xtsd_7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 16px;
}

._emptyState_1xtsd_13 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_1xtsd_22 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_1xtsd_34 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_1xtsd_41 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_1xtsd_50 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_1xtsd_60 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_1xtsd_60 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_1xtsd_60 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_1xtsd_60 .pagination-number._active_1xtsd_84 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_1xtsd_60 .pagination-number:hover:not(._active_1xtsd_84) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_1xtsd_60 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_1xtsd_105 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_1xtsd_105:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_1xtsd_105:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_1xtsd_105 svg {
  width: 16px;
  height: 16px;
}._pageContainer_nyste_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._certificateGrid_nyste_7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 24px;
}

._emptyState_nyste_13 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_nyste_22 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_nyste_34 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._paginationLabel_nyste_41 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_nyste_50 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_nyste_60 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_nyste_60 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_nyste_60 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_nyste_60 .pagination-number._active_nyste_84 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_nyste_60 .pagination-number:hover:not(._active_nyste_84) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_nyste_60 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_nyste_105 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_nyste_105:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_nyste_105:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_nyste_105 svg {
  width: 16px;
  height: 16px;
}._pollCard_ow9gy_1 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 192px;
  transition: box-shadow 0.2s ease;
}
._pollCard_ow9gy_1:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

._pollCard__header_ow9gy_16 {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e8e8e9;
  padding-bottom: 12px;
}

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

._pollCard__icon_ow9gy_31 {
  flex-shrink: 0;
  color: #00A9CE;
  background-color: #E6F7FB;
  border-radius: 8px;
  padding: 8px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

._pollCard__title_ow9gy_24 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  color: #14181f;
  line-height: 20px;
  text-align: left;
}

._pollCard__source_ow9gy_55 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f6ff;
  color: #4361ee;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04px;
}

._pollCard__dates_ow9gy_69 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
}

._pollCard__dateRow_ow9gy_77 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._pollCard__dateLabel_ow9gy_83 {
  font-size: 12px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  line-height: 18px;
  color: #707a8f;
  font-weight: 500;
}

._pollCard__dateValue_ow9gy_92 {
  font-size: 12px;
  letter-spacing: 0.08px;
  font-family: "Inter", sans-serif;
  line-height: 18px;
  font-weight: 500;
  color: #14181f;
}

._pollCard__footer_ow9gy_101 {
  margin-left: -20px;
  margin-right: -20px;
  padding: 16px 20px 0;
  border-top: 1px solid #e8e8e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._pollCard__action_ow9gy_111 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #00A9CE;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}
._pollCard__action_ow9gy_111:hover {
  opacity: 0.85;
}
._pollCard__action_ow9gy_111 svg {
  color: #00A9CE;
  flex-shrink: 0;
}

._pollCard__actionText_ow9gy_134 {
  line-height: 1;
}

._pollCard__statusAnswered_ow9gy_138 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #15ac77;
}
._pollCard__statusAnswered_ow9gy_138 svg {
  flex-shrink: 0;
}

._pollCard__statusExpired_ow9gy_150 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #637381;
  cursor: help;
}
._pollCard__statusExpired_ow9gy_150 svg {
  flex-shrink: 0;
  color: #919eab;
}._pageContainer_1sroj_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._pollGrid_1sroj_7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 24px;
}

._emptyState_1sroj_13 {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #707a8f;
}

._paginationBar_1sroj_22 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}

._paginationLeft_1sroj_34 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
._paginationLeft_1sroj_34 .dropdown-container {
  width: auto;
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 96px;
}

._paginationLabel_1sroj_48 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
}

._paginationDetails_1sroj_57 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.08px;
  color: #707a8f;
  white-space: nowrap;
  margin-left: 8px;
}

._paginationControls_1sroj_67 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._paginationControls_1sroj_67 .pagination-numbers {
  display: flex;
  gap: 4px;
}
._paginationControls_1sroj_67 .pagination-number {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
  transition: all 0.2s ease;
}
._paginationControls_1sroj_67 .pagination-number._active_1sroj_91 {
  background: #E6F7FB;
  color: #00A9CE;
  border-color: #00A9CE;
}
._paginationControls_1sroj_67 .pagination-number:hover:not(._active_1sroj_91) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationControls_1sroj_67 .pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  font-size: 14px;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
}

._paginationArrow_1sroj_112 {
  background: none;
  border: 1px solid #e8e8e9;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #707a8f;
  transition: all 0.2s ease;
}
._paginationArrow_1sroj_112:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}
._paginationArrow_1sroj_112:disabled {
  color: #ccc;
  cursor: not-allowed;
  border-color: #e8e8e9;
}
._paginationArrow_1sroj_112 svg {
  width: 16px;
  height: 16px;
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._header_tazty_36 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #dadfe3;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

._headerLeft_tazty_47 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._headerIcon_tazty_53 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00A9CE;
}

._headerTitle_tazty_60 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
}

._headerCloseBtn_tazty_67 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._headerCloseBtn_tazty_67:hover {
  background: #f5f5f5;
  border-color: #e8e8e9;
}

._body_tazty_86 {
  padding: 20px 24px;
  background: #fff;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

._metaRow_tazty_95 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

._metaLeft_tazty_102 {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

._metaDate_tazty_113 {
  font-size: 13px;
  color: #14181f;
  font-weight: 500;
}

._metaRequestNo_tazty_119 {
  font-size: 12px;
  color: #707a8f;
}

._title_tazty_124 {
  font-size: 16px;
  font-weight: 500;
  color: #14181f;
  margin-bottom: 12px;
}

._sectionTitle_tazty_131 {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #14181f;
}

._description_tazty_138 {
  font-size: 14px;
  color: #505766;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

._messageBubble_tazty_147 {
  border-radius: 8px;
  padding: 12px;
  background: #f8f8f9;
  font-size: 14px;
  color: #2f333c;
  border: 1px solid #e8e8e9;
  line-height: 20px;
  letter-spacing: -0.05em;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

._messageMeta_tazty_161 {
  margin-bottom: 4px;
  font-size: 12px;
  color: #707a8f;
}

._attachmentsList_tazty_167 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._attachmentItem_tazty_176 {
  font-size: 13px;
  color: #505766;
}

._attachmentCard_tazty_181 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #f9fafb;
}

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

._attachmentBadge_tazty_197 {
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

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

._attachmentName_tazty_213 {
  font-size: 13px;
  color: #14181f;
}

._downloadButton_tazty_218 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e8e8e9;
  background: #fff;
  color: #505766;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
._downloadButton_tazty_218:hover:not(:disabled) {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #14181f;
}
._downloadButton_tazty_218:disabled {
  opacity: 0.6;
  cursor: default;
}

._loading_tazty_241 {
  padding: 32px 0;
  text-align: center;
  color: #707a8f;
}

/* ---- Karşılıklı konuşma (thread) ---- */
._thread_tazty_248 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

._msgRow_tazty_255 {
  display: flex;
  width: 100%;
  min-width: 0;
}

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

._msgRowStaff_tazty_265 {
  justify-content: flex-start;
}

._bubble_tazty_269 {
  max-width: 80%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e8e8e9;
}

/* Kendi mesajım – sağda, marka tonu */
._bubbleOwn_tazty_278 {
  background: #fdeaeb;
  border-color: #f6c9cc;
  border-bottom-right-radius: 4px;
}

/* Destek ekibi – solda, nötr */
._bubbleStaff_tazty_285 {
  background: #f6f7f8;
  border-bottom-left-radius: 4px;
}

._bubbleMeta_tazty_290 {
  font-size: 12px;
  color: #707a8f;
  margin-bottom: 4px;
  font-weight: 500;
}

._bubbleContent_tazty_297 {
  font-size: 14px;
  line-height: 1.5;
  color: #2f333c;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

._bubbleFile_tazty_306 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e8e8e9;
  background: #fff;
}

._bubbleFileName_tazty_317 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._replyForm_tazty_327 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e9;
}

._replyInputWrap_tazty_336 {
  flex: 1;
  min-width: 0;
}
._replyInputWrap_tazty_336 .input {
  width: 100%;
}

._sendButton_tazty_344 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #00A9CE;
  cursor: pointer;
  flex-shrink: 0;
}
._sendButton_tazty_344:hover:not(:disabled) {
  background: #c41e26;
}
._sendButton_tazty_344:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._lockedNote_tazty_365 {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #707a8f;
  font-size: 13px;
  text-align: center;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._toastWrapper_1fu09_35 {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

._infoCardsGrid_1fu09_43 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

._viewButton_1fu09_50 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e8e8e9;
  background: #fff;
  cursor: pointer;
}

@media (max-width: 768px) {
  ._infoCardsGrid_1fu09_43 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._sidebar_1ccbt_35 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._header_1ccbt_45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-neutral-light, #f1f1f1);
}

._title_1ccbt_54 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-dark, #212b36);
}

._newButton_1ccbt_60 {
  white-space: nowrap;
}

._searchWrap_1ccbt_64 {
  padding: 8px 24px;
}

._list_1ccbt_68 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

._item_1ccbt_78 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 250ms ease, border-color 250ms ease;
}
._item_1ccbt_78:hover {
  background: var(--color-neutral, #f9fafb);
}
._item_1ccbt_78:hover ._itemActions_1ccbt_90 {
  opacity: 1;
}

._itemActive_1ccbt_94 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e6f7fb);
}

._itemMain_1ccbt_99 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

._itemTitle_1ccbt_111 {
  overflow: hidden;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._itemTime_1ccbt_121 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  opacity: 0.6;
}

._itemActions_1ccbt_90 {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 250ms ease;
}

._iconButton_1ccbt_134 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #212b36);
  cursor: pointer;
  opacity: 0.8;
}
._iconButton_1ccbt_134:hover {
  background: var(--color-neutral-light, #f1f1f1);
  opacity: 1;
}

._renameWrap_1ccbt_152 {
  flex: 1;
  min-width: 0;
}

._emptyList_1ccbt_157 {
  padding: 24px 16px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  text-align: center;
  opacity: 0.6;
}

._skeleton_1ccbt_165 {
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-neutral-light, #f1f1f1) 25%, var(--color-neutral, #f9fafb) 37%, var(--color-neutral-light, #f1f1f1) 63%);
  background-size: 400% 100%;
  animation: _shimmer_1ccbt_1 1.4s ease infinite;
}

@keyframes _shimmer_1ccbt_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._block_12vzc_35 {
  margin: 0 0 10px;
}
._block_12vzc_35:last-child {
  margin-bottom: 0;
}

._toolbar_12vzc_42 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

._toggleGroup_12vzc_51 {
  display: inline-flex;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 6px;
  overflow: hidden;
}

._toggle_12vzc_51 {
  padding: 4px 16px;
  border: none;
  background: var(--color-neutral-lighter, #fff);
  color: var(--color-neutral-dark, #212b36);
  font-size: 12px;
  cursor: pointer;
  transition: background 250ms ease;
}
._toggle_12vzc_51:not(:last-child) {
  border-right: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}
._toggle_12vzc_51:hover:not(._active_12vzc_70):not(:disabled) {
  background: var(--color-neutral-light, #f1f1f1);
}
._toggle_12vzc_51:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._active_12vzc_70 {
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #fff);
}

._exportGroup_12vzc_83 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._content_12vzc_89 {
  background: var(--color-neutral-lighter, #fff);
}

._tableWrap_12vzc_93 {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
}
._tableWrap_12vzc_93 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._tableWrap_12vzc_93 th,
._tableWrap_12vzc_93 td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  text-align: left;
  white-space: nowrap;
}
._tableWrap_12vzc_93 th {
  background: var(--color-neutral-light, #f1f1f1);
  font-weight: 600;
}
._tableWrap_12vzc_93 tr:last-child td {
  border-bottom: none;
}

._chartWrap_12vzc_118 {
  padding: 16px 8px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
}

._noData_12vzc_124 {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  text-align: center;
}

._fallback_12vzc_134 {
  overflow-x: auto;
  margin: 0 0 10px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral-light, #f1f1f1);
  font-size: 12px;
  white-space: pre-wrap;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._markdown_1unnb_35 {
  font-size: 14px;
  line-height: 1.75;
  color: inherit;
  word-break: break-word;
}
._markdown_1unnb_35 p,
._markdown_1unnb_35 ul,
._markdown_1unnb_35 ol,
._markdown_1unnb_35 blockquote,
._markdown_1unnb_35 h1,
._markdown_1unnb_35 h2,
._markdown_1unnb_35 h3,
._markdown_1unnb_35 h4,
._markdown_1unnb_35 h5,
._markdown_1unnb_35 h6 {
  margin: 0 0 10px;
}
._markdown_1unnb_35 p:last-child,
._markdown_1unnb_35 ul:last-child,
._markdown_1unnb_35 ol:last-child,
._markdown_1unnb_35 blockquote:last-child,
._markdown_1unnb_35 h1:last-child,
._markdown_1unnb_35 h2:last-child,
._markdown_1unnb_35 h3:last-child,
._markdown_1unnb_35 h4:last-child,
._markdown_1unnb_35 h5:last-child,
._markdown_1unnb_35 h6:last-child {
  margin-bottom: 0;
}
._markdown_1unnb_35 h1,
._markdown_1unnb_35 h2,
._markdown_1unnb_35 h3,
._markdown_1unnb_35 h4 {
  font-weight: 700;
  line-height: 1.3;
}
._markdown_1unnb_35 h1 {
  font-size: 20px;
}
._markdown_1unnb_35 h2 {
  font-size: 18px;
}
._markdown_1unnb_35 h3,
._markdown_1unnb_35 h4 {
  font-size: 16px;
}
._markdown_1unnb_35 ul,
._markdown_1unnb_35 ol {
  padding-left: 24px;
}
._markdown_1unnb_35 li {
  margin-bottom: 4px;
}
._markdown_1unnb_35 blockquote {
  padding: 10px 16px;
  border-left: 3px solid var(--color-primary, #00a9ce);
  border-radius: 12px;
  background: var(--color-primary-lighter, #e6f7fb);
}
._markdown_1unnb_35 code {
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
._markdown_1unnb_35 pre {
  overflow-x: auto;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral-light, #f1f1f1);
}
._markdown_1unnb_35 pre code {
  padding: 0;
  background: transparent;
  color: var(--color-neutral-dark, #212b36);
}
._markdown_1unnb_35 a {
  color: var(--color-primary-dark, #007a95);
  text-decoration: underline;
}

._codeWrap_1unnb_120 {
  position: relative;
  margin: 0 0 10px;
}
._codeWrap_1unnb_120:last-child {
  margin-bottom: 0;
}
._codeWrap_1unnb_120:hover ._codeCopy_1unnb_127 {
  opacity: 1;
}

._codeCopy_1unnb_127 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 6px;
  background: var(--color-neutral-lighter, #fff);
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 250ms ease, background 250ms ease;
}
._codeCopy_1unnb_127:hover {
  background: var(--color-neutral-light, #f1f1f1);
}

._tableWrap_1unnb_152 {
  overflow-x: auto;
  margin: 0 0 10px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
}
._tableWrap_1unnb_152:last-child {
  margin-bottom: 0;
}
._tableWrap_1unnb_152 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._tableWrap_1unnb_152 th,
._tableWrap_1unnb_152 td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  text-align: left;
  white-space: nowrap;
}
._tableWrap_1unnb_152 th {
  background: var(--color-neutral-light, #f1f1f1);
  font-weight: 600;
}
._tableWrap_1unnb_152 tr:last-child td {
  border-bottom: none;
}

._cursor_1unnb_181 {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--color-primary, #00a9ce);
  border-radius: 1px;
  animation: _blink_1unnb_1 1s step-start infinite;
}

@keyframes _blink_1unnb_1 {
  50% {
    opacity: 0;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_89cu1_35 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

._chip_89cu1_42 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

._running_89cu1_53 {
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a95);
}

._done_89cu1_58 {
  background: var(--color-success-lighter, #d3fcd2);
  color: var(--color-success-dark, #118d57);
}

._label_89cu1_63 {
  white-space: nowrap;
}

._meta_89cu1_67 {
  opacity: 0.8;
}

._dot_89cu1_71 {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}

._spinner_89cu1_78 {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: _spin_89cu1_78 0.7s linear infinite;
}

@keyframes _spin_89cu1_78 {
  to {
    transform: rotate(360deg);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._row_ds247_35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(86%, 860px);
}

._rowUser_ds247_42 {
  align-self: flex-end;
}

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

._bubble_ds247_50 {
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._bubbleUser_ds247_57 {
  border-color: transparent;
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #fff);
}

._bubbleAssistant_ds247_63 {
  background: var(--color-neutral-lighter, #ffffff);
}

._bubbleError_ds247_67 {
  border-color: var(--color-error, #fb3748);
}

._userText_ds247_71 {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

._thinking_ds247_78 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  opacity: 0.8;
}

._spinner_ds247_87 {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: _spin_ds247_87 0.7s linear infinite;
}

._stopped_ds247_96 {
  margin-top: 8px;
  color: var(--color-warning-dark, #b76e00);
  font-size: 12px;
  font-style: italic;
}

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

._time_ds247_111 {
  font-size: 10px;
  color: var(--color-neutral-dark, #212b36);
  opacity: 0.6;
}

._bubbleUser_ds247_57 ._time_ds247_111 {
  color: var(--color-neutral-lighter, #fff);
  opacity: 0.8;
}

._actions_ds247_122 {
  display: flex;
  gap: 8px;
}

._action_ds247_122 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 250ms ease, background 250ms ease;
}
._action_ds247_122:hover {
  opacity: 1;
  background: var(--color-neutral-light, #f1f1f1);
}

@keyframes _spin_ds247_87 {
  to {
    transform: rotate(360deg);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_1x9co_35 {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

._container_1x9co_42 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(180deg, var(--color-neutral, #f9fafb) 0%, var(--color-neutral-lighter, #ffffff) 100%);
}

._scrollButton_1x9co_53 {
  position: absolute;
  right: 24px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-primary-dark, #007a95);
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.12);
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
._scrollButton_1x9co_53:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 169, 206, 0.18);
}

._skeleton_1x9co_75 {
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(90deg, var(--color-neutral-light, #f1f1f1) 25%, var(--color-neutral, #f9fafb) 37%, var(--color-neutral-light, #f1f1f1) 63%);
  background-size: 400% 100%;
  animation: _shimmer_1x9co_1 1.4s ease infinite;
}

._skeletonLeft_1x9co_83 {
  align-self: flex-start;
  width: 60%;
}

._skeletonRight_1x9co_88 {
  align-self: flex-end;
  width: 45%;
}

@keyframes _shimmer_1x9co_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._composer_y7eo0_35 {
  border-top: 1px solid var(--color-neutral-light, #f1f1f1);
  padding: 16px 24px 24px;
}

._rateLimit_y7eo0_40 {
  margin-bottom: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-warning-lighter, #fff5cc);
  color: var(--color-warning-dark, #b76e00);
  font-size: 12px;
}

._locked_y7eo0_49 {
  padding: 16px;
  border: 1px dashed var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}

._footer_y7eo0_59 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

._hint_y7eo0_67 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  opacity: 0.6;
}

._actionButton_y7eo0_73 {
  min-width: 132px;
}

@media (max-width: 720px) {
  ._composer_y7eo0_35 {
    padding: 16px;
  }
  ._footer_y7eo0_59 {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  ._actionButton_y7eo0_73 {
    width: 100%;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._empty_m3jl3_35 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
  text-align: center;
}

._icon_m3jl3_46 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border-radius: 24px;
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary, #00a9ce);
}

._iconDenied_m3jl3_58 {
  background: var(--color-error-lighter, #ffe9d5);
  color: var(--color-error, #fb3748);
}

._title_m3jl3_63 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

._description_m3jl3_70 {
  max-width: 460px;
  margin: 10px 0 0;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.8;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_1phj6_35 {
  width: 100%;
  max-width: 640px;
  margin-top: 24px;
}

._title_1phj6_41 {
  margin-bottom: 10px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

._grid_1phj6_51 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

._card_1phj6_57 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
  text-align: left;
  cursor: pointer;
  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
._card_1phj6_57:hover {
  border-color: var(--color-primary, #00a9ce);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 169, 206, 0.08);
}

._icon_1phj6_75 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary, #00a9ce);
}

._text_1phj6_87 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 640px) {
  ._grid_1phj6_51 {
    grid-template-columns: 1fr 1fr;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._page_cizig_35 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
}

._offline_cizig_43 {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-warning-lighter, #fff5cc);
  color: var(--color-warning-dark, #b76e00);
  font-size: 12px;
  text-align: center;
}

._shell_cizig_52 {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}

._chatPanel_cizig_60 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._emptyWrap_cizig_70 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

@media (max-width: 1180px) {
  ._shell_cizig_52 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  ._shell_cizig_52 {
    grid-template-rows: auto 1fr;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._empty_1ghyo_35 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
  text-align: center;
}

._compact_1ghyo_46 {
  min-height: 0;
  padding: 24px 16px;
}

._icon_1ghyo_51 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border-radius: 24px;
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary, #00a9ce);
}

._compact_1ghyo_46 ._icon_1ghyo_51 {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 12px;
}

._title_1ghyo_70 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

._compact_1ghyo_46 ._title_1ghyo_70 {
  font-size: 18px;
}

._description_1ghyo_81 {
  max-width: 460px;
  margin: 10px 0 0;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.8;
}

._cta_1ghyo_90 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._shimmer_75dcr_35 {
  background: linear-gradient(90deg, var(--color-neutral-light, #f1f1f1) 25%, var(--color-neutral, #f9fafb) 37%, var(--color-neutral-light, #f1f1f1) 63%);
  background-size: 400% 100%;
  animation: _studioShimmer_75dcr_1 calc(350ms * 4) ease infinite;
}

/* --- list (conversation sidebar) --- */
._list_75dcr_42 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._listItem_75dcr_48 {
  height: 46px;
  border-radius: 12px;
}

/* --- messages (chat transcript) --- */
._messages_75dcr_54 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 24px;
}

._bubble_75dcr_63 {
  height: 72px;
  border-radius: 24px;
}

._bubbleLeft_75dcr_68 {
  align-self: flex-start;
  width: 60%;
}

._bubbleRight_75dcr_73 {
  align-self: flex-end;
  width: 45%;
}

/* --- grid (media cards) --- */
._grid_75dcr_79 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

._card_75dcr_85 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
}

._cardMedia_75dcr_93 {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
}

._cardLine_75dcr_99 {
  height: 12px;
  border-radius: 6px;
}

._cardLineShort_75dcr_104 {
  width: 60%;
}

@keyframes _studioShimmer_75dcr_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._sidebar_1ydho_35 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._header_1ydho_45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--color-neutral-light, #f1f1f1);
}

._collapseButton_1ydho_54 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #637381);
  cursor: pointer;
  transition: background 250ms ease;
}
._collapseButton_1ydho_54:hover {
  background: var(--color-neutral-light, #f1f1f1);
  color: var(--color-primary-dark, #007a95);
}

/* Collapsed rail: expand + new-chat icon buttons only. */
._rail_1ydho_74 {
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
}

._railButton_1ydho_80 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-neutral-dark, #212b36);
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}
._railButton_1ydho_80:hover {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a95);
}

._title_1ydho_99 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-dark, #212b36);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._newButton_1ydho_110 {
  white-space: nowrap;
}

._searchWrap_1ydho_114 {
  padding: 8px 24px;
}

._list_1ydho_118 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

._group_1ydho_128 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._groupLabel_1ydho_134 {
  padding: 4px 8px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.6;
}

._item_1ydho_144 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 250ms ease, border-color 250ms ease;
}
._item_1ydho_144:hover {
  background: var(--color-neutral, #f9fafb);
}
._item_1ydho_144:hover ._itemActions_1ydho_157 {
  opacity: 1;
}

._itemActive_1ydho_161 {
  border-color: var(--color-primary-light, #66d1e3);
  background: var(--color-primary-lighter, #e6f7fb);
}
._itemActive_1ydho_161::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 9999px;
  background: var(--color-primary, #00a9ce);
}
._itemActive_1ydho_161:hover {
  background: var(--color-primary-lighter, #e6f7fb);
}

._itemMain_1ydho_179 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

._itemTitle_1ydho_191 {
  overflow: hidden;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._itemTime_1ydho_201 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  opacity: 0.6;
}

._itemActions_1ydho_157 {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 250ms ease;
}

._iconButton_1ydho_214 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #212b36);
  cursor: pointer;
  opacity: 0.8;
}
._iconButton_1ydho_214:hover {
  background: var(--color-neutral-light, #f1f1f1);
  opacity: 1;
}

/* Empty + loading states now use the shared `StudioEmptyState` / `StudioSkeleton`. *//**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_rzc0u_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._themeRow_rzc0u_41 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._themeLabel_rzc0u_47 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #637381);
}

._swatch_rzc0u_53 {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}

._styleTag_rzc0u_60 {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-neutral-light, #f4f6f8);
  color: var(--color-text-secondary, #637381);
  font-size: 10px;
  text-transform: uppercase;
}

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

._slide_rzc0u_69 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
}

._slideHead_rzc0u_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._layoutTag_rzc0u_91 {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

._slideNo_rzc0u_101 {
  font-size: 10px;
  color: var(--color-text-secondary, #637381);
}

._slideTitle_rzc0u_106 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
}

._lead_rzc0u_112 {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary, #637381);
}

._columns_rzc0u_119 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._column_rzc0u_119 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-light, #f4f6f8);
}

._columnHeading_rzc0u_135 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
}

._bullets_rzc0u_141 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
}

._bullet_rzc0u_141 {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-primary, #14181f);
}

._takeaway_rzc0u_155 {
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  font-weight: 500;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._card_jd4kv_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral, #f9fafb);
}

._header_jd4kv_46 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._icon_jd4kv_52 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
}

._headText_jd4kv_64 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._typeLabel_jd4kv_71 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary, #637381);
}

._title_jd4kv_78 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
  word-break: break-word;
}

._meta_jd4kv_85 {
  font-size: 12px;
  color: var(--color-text-secondary, #637381);
}

._body_jd4kv_90 {
  max-height: 420px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
}

._headings_jd4kv_99 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 16px;
}

._heading_jd4kv_99 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-primary, #14181f);
}

._themeRow_jd4kv_117 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._swatch_jd4kv_124 {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  flex-shrink: 0;
}

._themeStyle_jd4kv_133 {
  font-size: 10px;
  color: var(--color-text-secondary, #637381);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

._layoutTag_jd4kv_140 {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  flex-shrink: 0;
}

._audioPlayer_jd4kv_152 {
  width: 100%;
}

._videoPlayer_jd4kv_156 {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  background: var(--color-neutral-darker, #14181f);
}

._imagePreview_jd4kv_163 {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
}

._audioLoadBtn_jd4kv_172 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary, #00a9ce);
  border-radius: 8px;
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
._audioLoadBtn_jd4kv_172:disabled {
  cursor: default;
  opacity: 0.8;
}

._actions_jd4kv_190 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._canvasHost_1drnn_35 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-neutral-darker, #212b36);
}

._stageHeader_1drnn_44 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

._sceneOf_1drnn_55 {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

._nav_1drnn_61 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._navBtn_1drnn_67 {
  min-width: 64px;
}

._viewport_1drnn_71 {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

._stageWrap_1drnn_82 {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

._viewportDropActive_1drnn_88 {
  outline: 2px dashed var(--color-primary, #00a9ce);
  outline-offset: -6px;
  background: rgba(0, 169, 206, 0.12);
}

._stage_1drnn_44 {
  position: relative;
  flex-shrink: 0;
  transform-origin: top left;
  background: #000000;
  overflow: hidden;
}

._layer_1drnn_102 {
  box-sizing: border-box;
  cursor: move;
  user-select: none;
}

._layerSelected_1drnn_108 {
  outline: 2px solid var(--color-primary, #00a9ce);
  outline-offset: 0;
}

._layerMedia_1drnn_113 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._layerError_1drnn_120 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-neutral-lighter, #ffffff);
  background: var(--color-error-dark, #fb3748);
}

._layerText_1drnn_134 {
  width: 100%;
  height: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

._layerTextEdit_1drnn_142 {
  width: 100%;
  height: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  outline: none;
  cursor: text;
  user-select: text;
}

._layerMcq_1drnn_153 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
}

._layerMcqPrompt_1drnn_161 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-lighter, #ffffff);
}

._layerMcqOptions_1drnn_169 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._layerMcqOption_1drnn_169 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  font-size: 30px;
  line-height: 1.3;
  color: var(--color-neutral-lighter, #ffffff);
}

._layerMcqOptionId_1drnn_187 {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-primary, #00a9ce);
}

._uploading_1drnn_193 {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-neutral-lighter, #ffffff);
  font-size: 14px;
  font-weight: 500;
}

._emptyStage_1drnn_206 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* WYSIWYG parity overlay: backend-rendered PNG placed over the live layers. */
._parityOverlay_1drnn_219 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  opacity: 0.5;
  pointer-events: none;
  object-fit: fill;
}

._hiddenAudio_1drnn_229 {
  display: none;
}

/* --- Gesture overlay (inside the scaled stage; sizes are pre-divided by scale
   in the TSX so they render at a constant on-screen size) --- */
._selectionBox_1drnn_235 {
  position: absolute;
  z-index: 60;
  border: 1.5px solid var(--color-primary, #00a9ce);
  pointer-events: none;
  transform-origin: center center;
}

._handle_1drnn_243 {
  position: absolute;
  z-index: 61;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-primary, #00a9ce);
  border-radius: 50%;
  background: var(--color-neutral-lighter, #ffffff);
  pointer-events: auto;
}

._rotateHandle_1drnn_255 {
  position: absolute;
  z-index: 61;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-primary, #00a9ce);
  border-radius: 50%;
  background: var(--color-neutral-lighter, #ffffff);
  pointer-events: auto;
  cursor: grab;
}

._rotateStem_1drnn_268 {
  position: absolute;
  left: calc(50% - 1px);
  z-index: 60;
  width: 2px;
  background: var(--color-primary, #00a9ce);
  pointer-events: none;
}

._snapLineV_1drnn_277 {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 55;
  background: var(--color-primary, #00a9ce);
  opacity: 0.9;
  pointer-events: none;
}

._snapLineH_1drnn_287 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 55;
  background: var(--color-primary, #00a9ce);
  opacity: 0.9;
  pointer-events: none;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._viewport_db6bn_35 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #000000;
}

._stageWrap_db6bn_45 {
  position: relative;
  flex-shrink: 0;
}

._stage_db6bn_45 {
  position: relative;
  transform-origin: top left;
  background: #000000;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._overlay_1ypae_35 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 24, 31, 0.55);
}

._dialog_1ypae_46 {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: min(90vh, 820px);
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
  box-shadow: 0 16px 48px rgba(20, 24, 31, 0.2);
}

._header_1ypae_57 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}

._headerText_1ypae_66 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_1ypae_73 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
}

._screenCount_1ypae_80 {
  font-size: 12px;
  color: var(--color-text-secondary, #637381);
}

._closeBtn_1ypae_85 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #637381);
  cursor: pointer;
}
._closeBtn_1ypae_85:hover {
  background: var(--color-neutral, #f9fafb);
}

._body_1ypae_102 {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  flex: 1;
}

._tree_1ypae_109 {
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral, #f9fafb);
}

._treeTitle_1ypae_116 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary, #637381);
}

._treeList_1ypae_125 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._treeItem_1ypae_134 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary, #14181f);
  font-size: 12px;
  line-height: 1.4;
}
._treeItem_1ypae_134:hover:not(:disabled) {
  background: var(--color-neutral-lighter, #ffffff);
}
._treeItem_1ypae_134:disabled {
  cursor: default;
  opacity: 0.55;
}

._treeItemActive_1ypae_157 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e0f6fb);
  font-weight: 500;
}

._treeItemDone_1ypae_163 {
  color: var(--color-success-dark, #1b7a3d);
}

._treeIndex_1ypae_167 {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, #637381);
}

._main_1ypae_173 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

._instruction_1ypae_180 {
  padding: 10px 24px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-primary-lighter, #e0f6fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  line-height: 1.5;
}

._sceneBody_1ypae_189 {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._sceneTitle_1ypae_198 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
}

._videoPlayer_1ypae_205 {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  background: var(--color-neutral-darker, #14181f);
}

._imagePreview_1ypae_212 {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--color-neutral, #f9fafb);
}

._mediaPlaceholder_1ypae_221,
._mediaLoading_1ypae_222 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  padding: 24px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral, #f9fafb);
  color: var(--color-text-secondary, #637381);
  font-size: 12px;
}

._onScreenText_1ypae_237,
._narrationPanel_1ypae_238 {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral, #f9fafb);
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-primary, #14181f);
}

._narrationLabel_1ypae_250 {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary, #637381);
}

._prompt_1ypae_259 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary, #14181f);
}

._options_1ypae_266 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._option_1ypae_266 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-primary, #14181f);
}
._option_1ypae_266:hover:not(:disabled) {
  border-color: var(--color-primary, #00a9ce);
}
._option_1ypae_266:disabled {
  cursor: default;
}

._optionSelected_1ypae_294 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e0f6fb);
}

._optionCorrect_1ypae_299 {
  border-color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.08);
}

._optionWrong_1ypae_304 {
  border-color: var(--color-error, #ef4444);
  background: rgba(239, 68, 68, 0.06);
}

._feedback_1ypae_309 {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
}

._feedbackOk_1ypae_316 {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success-dark, #1b7a3d);
}

._feedbackBad_1ypae_321 {
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-error-dark, #b91c1c);
}

._footer_1ypae_326 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}

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

._completeBanner_1ypae_342 {
  padding: 16px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success-dark, #1b7a3d);
  font-size: 12px;
  font-weight: 500;
}

._loading_1ypae_351,
._error_1ypae_352 {
  padding: 32px;
  text-align: center;
  color: var(--color-text-secondary, #637381);
  font-size: 12px;
}

@media (max-width: 768px) {
  ._body_1ypae_102 {
    grid-template-columns: 1fr;
  }
  ._tree_1ypae_109 {
    max-height: 140px;
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._row_v9tdd_35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(86%, 860px);
}

._rowUser_v9tdd_42 {
  align-self: flex-end;
}

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

._bubble_v9tdd_50 {
  padding: 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._bubbleUser_v9tdd_57 {
  border-color: transparent;
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #fff);
}

._bubbleAssistant_v9tdd_63 {
  background: var(--color-neutral-lighter, #ffffff);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.06);
}

._artifacts_v9tdd_68 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

._bubbleError_v9tdd_75 {
  border-color: var(--color-error, #fb3748);
}

._userText_v9tdd_79 {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

._thinking_v9tdd_86 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  opacity: 0.8;
}

._spinner_v9tdd_95 {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: _spin_v9tdd_95 0.7s linear infinite;
}

._stopped_v9tdd_104 {
  margin-top: 8px;
  color: var(--color-warning-dark, #b76e00);
  font-size: 12px;
  font-style: italic;
}

._errorText_v9tdd_111 {
  color: var(--color-error, #fb3748);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

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

._time_v9tdd_126 {
  font-size: 10px;
  color: var(--color-neutral-dark, #212b36);
  opacity: 0.6;
}

._bubbleUser_v9tdd_57 ._time_v9tdd_126 {
  color: var(--color-neutral-lighter, #fff);
  opacity: 0.8;
}

._actions_v9tdd_137 {
  display: flex;
  gap: 8px;
}

._copyButton_v9tdd_142 {
  min-height: 0;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--color-neutral-dark, #212b36);
  opacity: 0.8;
}
._copyButton_v9tdd_142:hover {
  opacity: 1;
}

@keyframes _spin_v9tdd_95 {
  to {
    transform: rotate(360deg);
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._wrap_t0vvu_35 {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

._container_t0vvu_42 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(180deg, var(--color-neutral, #f9fafb) 0%, var(--color-neutral-lighter, #ffffff) 100%);
}

._scrollButton_t0vvu_53 {
  position: absolute;
  right: 24px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-primary-dark, #007a95);
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.12);
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
._scrollButton_t0vvu_53:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 169, 206, 0.18);
}

@media (max-width: 768px) {
  ._container_t0vvu_42 {
    gap: 10px;
    padding: 16px;
  }
  ._scrollButton_t0vvu_53 {
    right: 16px;
  }
}
/* Loading placeholders now live in the shared `StudioSkeleton` (variant="messages"). *//**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._chips_pxxkw_35 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._chip_pxxkw_35 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-neutral-dark, #212b36);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}
._chip_pxxkw_35:hover {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a95);
}

._chipIcon_pxxkw_63 {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary, #00a9ce);
}

._chipText_pxxkw_69 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._composer_sdkb8_35 {
  border-top: 1px solid var(--color-neutral-light, #f1f1f1);
  padding: 16px 24px 24px;
}

._suggestions_sdkb8_40 {
  margin-bottom: 16px;
}

._rateLimit_sdkb8_44 {
  margin-bottom: 10px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-warning-lighter, #fff5cc);
  color: var(--color-warning-dark, #b76e00);
  font-size: 12px;
}

._locked_sdkb8_53 {
  padding: 16px;
  border: 1px dashed var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  color: var(--color-neutral-dark, #212b36);
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}

._footer_sdkb8_63 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

._hint_sdkb8_71 {
  color: var(--color-neutral-dark, #212b36);
  font-size: 10px;
  opacity: 0.6;
}

._actionButton_sdkb8_77 {
  min-width: 132px;
}

@media (max-width: 768px) {
  ._composer_sdkb8_35 {
    padding: 16px;
  }
  ._footer_sdkb8_63 {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  ._actionButton_sdkb8_77 {
    width: 100%;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._mediaBin_qydm1_35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
  border-right: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}

._title_qydm1_45 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-dark, #212b36);
}

._paletteItem_qydm1_55 {
  width: 100%;
  cursor: grab;
  touch-action: none;
}
._paletteItem_qydm1_55:active {
  cursor: grabbing;
}

._paletteBtn_qydm1_64 {
  width: 100%;
  justify-content: flex-start;
}

._dragging_qydm1_69 {
  opacity: 0.55;
}

._hint_qydm1_73 {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-neutral-dark, #637381);
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._timeline_1sk7s_35 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  min-height: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral-light, #f4f6f8);
}

._header_1sk7s_48 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

@media (max-width: 768px) {
  ._zoomControls_1sk7s_56 {
    margin-left: 0;
  }
}
._title_1sk7s_60 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-dark, #212b36);
}

._count_1sk7s_70 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-neutral-lighter, #ffffff);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-dark, #637381);
}

._zoomControls_1sk7s_56 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

._zoomLabel_1sk7s_91 {
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._zoomValue_1sk7s_96 {
  min-width: 42px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: var(--color-neutral-dark, #212b36);
  font-variant-numeric: tabular-nums;
}

._empty_1sk7s_105 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px;
  border: 1px dashed var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._scroller_1sk7s_117 {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

._lanes_1sk7s_123 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._rulerRow_1sk7s_130 {
  display: flex;
  height: 26px;
}

._rulerSpacer_1sk7s_135 {
  position: sticky;
  left: 0;
  z-index: 3;
  flex-shrink: 0;
  width: 132px;
  background: var(--color-neutral-light, #f4f6f8);
}

._ruler_1sk7s_130 {
  position: relative;
  flex-shrink: 0;
  height: 26px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  cursor: pointer;
}

._tick_1sk7s_152 {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.3333333333));
}

._tickLabel_1sk7s_159 {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  color: var(--color-neutral-dark, #637381);
  white-space: nowrap;
  user-select: none;
}

._track_1sk7s_169 {
  display: flex;
  align-items: stretch;
}

._trackHeader_1sk7s_174 {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  width: 132px;
  padding: 8px 10px;
  border-right: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral-lighter, #ffffff);
}

._trackLabel_1sk7s_189 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-dark, #212b36);
}

._lane_1sk7s_123 {
  position: relative;
  flex-shrink: 0;
  background: repeating-linear-gradient(to right, transparent 0, transparent 39px, var(--color-neutral-darker, rgba(145, 158, 171, 0.1333333333)) 39px, var(--color-neutral-darker, rgba(145, 158, 171, 0.1333333333)) 40px);
}

._sceneStrip_1sk7s_201 {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 76px;
  padding: 8px 0;
}

._sceneClip_1sk7s_209 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 60px;
  padding: 8px 10px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.3333333333));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
._sceneClip_1sk7s_209:hover {
  border-color: var(--color-primary, #00a9ce);
}

._sceneClipTop_1sk7s_228 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dragHandle_1sk7s_234 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #637381);
  cursor: grab;
}
._dragHandle_1sk7s_234:active {
  cursor: grabbing;
}
._dragHandle_1sk7s_234:hover {
  background: var(--color-neutral-light, #f4f6f8);
}

._clipLabel_1sk7s_255 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-dark, #212b36);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._clipDelete_1sk7s_266 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-dark, #637381);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
._clipDelete_1sk7s_266:hover {
  background: rgba(255, 86, 48, 0.1);
  color: var(--color-error, #ff5630);
}

._typeBadge_1sk7s_287 {
  display: inline-flex;
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

._typeBadgeContent_1sk7s_297 {
  background: rgba(0, 169, 206, 0.12);
  color: var(--color-primary, #00a9ce);
}

._typeBadgeInteraction_1sk7s_302 {
  background: rgba(118, 53, 220, 0.1);
  color: var(--color-secondary, #7635dc);
}

._clip_1sk7s_255 {
  position: absolute;
  top: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

._clipMovable_1sk7s_322 {
  cursor: grab;
}
._clipMovable_1sk7s_322:active {
  cursor: grabbing;
}

._clipAudio_1sk7s_329 {
  background: rgba(0, 169, 206, 0.16);
  border-color: rgba(0, 169, 206, 0.5);
  color: var(--color-primary, #00a9ce);
}

._clipText_1sk7s_335 {
  background: rgba(118, 53, 220, 0.14);
  border-color: rgba(118, 53, 220, 0.45);
  color: var(--color-secondary, #7635dc);
}

._clipSelected_1sk7s_341 {
  border-color: var(--color-primary, #00a9ce);
  box-shadow: 0 0 0 1px var(--color-primary, #00a9ce);
}

._clipDragging_1sk7s_346 {
  opacity: 0.7;
  z-index: 2;
}

._trimHandle_1sk7s_351 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.12);
}

._trimHandleLeft_1sk7s_360 {
  left: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

._trimHandleRight_1sk7s_366 {
  right: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

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

._playhead_1sk7s_376 {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 0;
  border-left: 2px solid var(--color-error, #ff5630);
  pointer-events: none;
}

._playheadHandle_1sk7s_386 {
  position: absolute;
  top: 0;
  left: -6px;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--color-error, #ff5630);
  cursor: ew-resize;
  pointer-events: auto;
}

._dropZone_1sk7s_400 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 96px;
  height: 60px;
  margin-left: 4px;
  padding: 8px;
  border: 1px dashed var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: transparent;
  font-size: 10px;
  color: var(--color-neutral-dark, #637381);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

._dropZoneActive_1sk7s_419 {
  border-color: var(--color-primary, #00a9ce);
  background: rgba(0, 169, 206, 0.08);
  color: var(--color-primary, #00a9ce);
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._mediaField_3um9l_35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._mediaFieldCompact_3um9l_41 .file-drop-zone {
  min-height: 88px;
  padding: 10px 16px;
}
._mediaFieldCompact_3um9l_41 .upload-icon {
  display: none;
}

._mediaLabel_3um9l_49 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-dark, #212b36);
}

._mediaHint_3um9l_55 {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-neutral-dark, #637381);
}

._mediaChip_3um9l_62 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--color-primary, #2065d1);
  border-radius: 8px;
  background: rgba(32, 101, 209, 0.06);
}

._mediaChipName_3um9l_73 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-dark, #212b36);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._mediaChipClear_3um9l_84 {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  font-size: 12px;
  color: var(--color-error, #b71d18);
  cursor: pointer;
}
._mediaChipClear_3um9l_84:hover {
  background: var(--color-neutral-light, #f4f6f8);
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._inspector_1ge7a_35 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  background: var(--color-neutral-lighter, #ffffff);
}

._title_1ge7a_46 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-dark, #212b36);
}

/* Titled, collapsible group (default open). */
._section_1ge7a_57 {
  border-top: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}
._section_1ge7a_57:first-of-type {
  border-top: none;
}

._sectionHeader_1ge7a_64 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

._sectionTitle_1ge7a_77 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-dark, #637381);
}

._sectionChevron_1ge7a_85 {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._form_1ge7a_91 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 2px 16px;
}

._subtitlesToggle_1ge7a_98 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-neutral-dark, #212b36);
  cursor: pointer;
  user-select: none;
}
._subtitlesToggle_1ge7a_98 input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary, #00a9ce);
}

._empty_1ge7a_114 {
  margin: 0;
  padding: 16px 0;
  font-size: 14px;
  color: var(--color-neutral-dark, #637381);
}

._groupLabel_1ge7a_121 {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-dark, #637381);
}

._grid2_1ge7a_130 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._zButtons_1ge7a_136 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._colorRow_1ge7a_142 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--color-neutral-dark, #212b36);
}

._colorInput_1ge7a_151 {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 4px;
  background: none;
  cursor: pointer;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._toolbar_15350_35 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}

._left_15350_45 {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
}

._title_15350_53 {
  overflow: hidden;
  max-width: 340px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-dark, #212b36);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._status_15350_64 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._statusSaved_15350_73 {
  color: var(--color-success-dark, #118d57);
}

._statusFileName_15350_77 {
  overflow: hidden;
  max-width: 180px;
  color: var(--color-neutral-dark, #637381);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._statusUnsaved_15350_85 {
  color: var(--color-neutral-dark, #919eab);
}

._dot_15350_89 {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-warning, #ffab00);
}

._actions_15350_96 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._durationWarning_15350_103 {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-error-dark, #fb3748);
}

@media (max-width: 720px) {
  ._toolbar_15350_35 {
    align-items: stretch;
  }
  ._actions_15350_96 {
    justify-content: flex-start;
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._body_1y3jm_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: min(440px, 100%);
}

/* Indeterminate progress bar (animated sliding sweep). */
._progressTrack_1y3jm_43 {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-neutral-light, #f1f1f1);
}

._progressBar_1y3jm_52 {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  border-radius: 9999px;
  background: var(--color-primary, #00a9ce);
  animation: _indeterminate_1y3jm_1 1.4s ease-in-out infinite;
}

@keyframes _indeterminate_1y3jm_1 {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
._steps_1y3jm_71 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._step_1y3jm_71 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-dark, #637381);
  transition: color 250ms ease;
}

._stepMarker_1y3jm_88 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-neutral-lighter, #ffffff);
}

._stepLabel_1y3jm_102 {
  font-size: 14px;
}

._stepActive_1y3jm_106 {
  color: var(--color-neutral-dark, #212b36);
  font-weight: 500;
}
._stepActive_1y3jm_106 ._stepMarker_1y3jm_88 {
  border-color: var(--color-primary, #00a9ce);
  color: var(--color-primary, #00a9ce);
}

._stepDone_1y3jm_115 {
  color: var(--color-neutral-dark, #212b36);
}
._stepDone_1y3jm_115 ._stepMarker_1y3jm_88 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #ffffff);
}

._video_1y3jm_124 {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  background: #000000;
  object-fit: contain;
}

._meta_1y3jm_132 {
  margin: 0;
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._doneText_1y3jm_138 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-success-dark, #118d57);
}

._hint_1y3jm_145 {
  margin: 0;
  font-size: 12px;
  color: var(--color-neutral-dark, #637381);
}

._errorText_1y3jm_151 {
  margin: 0;
  font-size: 14px;
  color: var(--color-error-dark, #fb3748);
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._panel_1ljtg_36 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

/* No package loaded → centered guidance (open from Media / generate in chat). */
._emptyPanel_1ljtg_48 {
  align-items: center;
  justify-content: center;
  padding: 32px;
}

/* NLE layout: workspace row + full-width timeline */
._nleBody_1ljtg_55 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

._mainWorkspace_1ljtg_63 {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(300px, 1.05fr);
  flex: 1;
  min-height: 340px;
  overflow: hidden;
}

._mainWorkspaceInspectorClosed_1ljtg_71 {
  grid-template-columns: 200px minmax(0, 1fr) auto;
}

._inspectorRegion_1ljtg_75 {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
}
._inspectorRegion_1ljtg_75 > :not(button) {
  flex: 1 1 auto;
  min-width: 0;
}

._inspectorRegionClosed_1ljtg_87 {
  background: var(--color-neutral-light, #f4f6f8);
}

._inspectorToggle_1ljtg_91 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  border: none;
  background: var(--color-neutral-light, #f4f6f8);
  color: var(--color-neutral-dark, #637381);
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}
._inspectorToggle_1ljtg_91:hover {
  background: var(--color-neutral, #f9fafb);
  color: var(--color-primary-dark, #007a95);
}

@media (max-width: 1024px) {
  ._mainWorkspace_1ljtg_63,
  ._mainWorkspaceInspectorClosed_1ljtg_71 {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  ._inspectorRegion_1ljtg_75 {
    border-left: none;
    border-top: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  }
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._panel_13lny_35 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
}

/* --- Toolbar --- */
._toolbar_13lny_44 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

._filterChip_13lny_58 {
  padding: 8px 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-text-secondary, #637381);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 250ms ease;
}
._filterChip_13lny_58:hover {
  border-color: var(--color-primary, #00a9ce);
  color: var(--color-primary-dark, #007a94);
}

._filterChipActive_13lny_74 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a94);
}

._toolbarRight_13lny_80 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._searchBox_13lny_87 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 40px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-text-secondary, #637381);
}
._searchBox_13lny_87:focus-within {
  border-color: var(--color-primary, #00a9ce);
}

._searchInput_13lny_102 {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-text-primary, #14181f);
  min-width: 200px;
}
._searchInput_13lny_102::placeholder {
  color: var(--color-text-secondary, #919eab);
}

/* --- Active tag filter --- */
._activeTagRow_13lny_115 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._activeTagLabel_13lny_122 {
  font-size: 12px;
  color: var(--color-text-secondary, #637381);
}

._activeTagChip_13lny_127 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--color-primary-light, #66d1e3);
  border-radius: 9999px;
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease;
}
._activeTagChip_13lny_127:hover {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #ffffff);
}

._activeTagText_13lny_147 {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._clearTag_13lny_154 {
  border: none;
  background: transparent;
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Content / grid --- */
._content_13lny_165 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  gap: 24px;
}

._centered_13lny_174 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

._grid_13lny_182 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

._loadMoreRow_13lny_188 {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}

/* --- Card --- */
._card_13lny_195 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 12px;
  background: var(--color-neutral-lighter, #ffffff);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
._card_13lny_195:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary-light, #66d1e3);
  box-shadow: 0 10px 24px rgba(20, 24, 31, 0.12);
}
._card_13lny_195:hover ._thumbImage_13lny_209 {
  transform: scale(1.05);
}

._media_13lny_213 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  background: var(--color-neutral, #f9fafb);
  overflow: hidden;
}

._thumbButton_13lny_223 {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

._thumbImage_13lny_209 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

._videoPlayer_13lny_241 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

._mediaPlaceholder_13lny_248 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-text-secondary, #637381);
  font-size: 12px;
  text-align: center;
}

._packagePlaceholder_13lny_259 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #ffffff);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

._versionBadge_13lny_274 {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(20, 24, 31, 0.72);
  color: var(--color-neutral-lighter, #fff);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

._mediaLoadBtn_13lny_288 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary, #00a9ce);
  border-radius: 8px;
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a94);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
._mediaLoadBtn_13lny_288:disabled {
  cursor: default;
  opacity: 0.8;
}

._durationBadge_13lny_306 {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-neutral-lighter, #fff);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

._sourceBadge_13lny_321 {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(20, 24, 31, 0.18);
}

._sourceAi_13lny_334 {
  background: var(--color-primary, #00a9ce);
  color: var(--color-neutral-lighter, #ffffff);
}

._sourceUpload_13lny_339 {
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-text-secondary, #637381);
}

._cardBody_13lny_344 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

._cardTitle_13lny_352 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #14181f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._clipHint_13lny_362 {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-info-lighter, #cafdf5);
  color: var(--color-info-dark, #006c9c);
  font-size: 10px;
  font-weight: 500;
}

/* --- Tags --- */
._tags_13lny_372 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

._tagChip_13lny_378 {
  padding: 2px 8px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 9999px;
  background: var(--color-neutral, #f9fafb);
  color: var(--color-text-secondary, #637381);
  font-size: 10px;
  cursor: pointer;
  transition: all 250ms ease;
}
._tagChip_13lny_378:hover {
  border-color: var(--color-primary, #00a9ce);
  color: var(--color-primary-dark, #007a94);
}

._tagEditor_13lny_393 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._tagInput_13lny_399,
._textInput_13lny_400 {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  font-size: 12px;
  color: var(--color-text-primary, #14181f);
  outline: none;
}
._tagInput_13lny_399:focus,
._textInput_13lny_400:focus {
  border-color: var(--color-primary, #00a9ce);
}
._tagInput_13lny_399::placeholder,
._textInput_13lny_400::placeholder {
  color: var(--color-text-secondary, #919eab);
}

._tagEditorActions_13lny_419 {
  display: flex;
  gap: 8px;
}

._cardActions_13lny_424 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}

/* --- Upload modal --- */
._uploadForm_13lny_433 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._field_13lny_439 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._fieldLabel_13lny_445 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary, #14181f);
}

._fieldError_13lny_451 {
  margin: 0;
  font-size: 10px;
  color: var(--color-error, #fb3748);
}

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

._kindOption_13lny_457 {
  flex: 1;
  min-width: 100px;
  padding: 8px 16px;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 8px;
  background: var(--color-neutral-lighter, #ffffff);
  color: var(--color-text-secondary, #637381);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 250ms ease;
}
._kindOption_13lny_457:disabled {
  cursor: default;
  opacity: 0.8;
}

._kindOptionActive_13lny_481 {
  border-color: var(--color-primary, #00a9ce);
  background: var(--color-primary-lighter, #e6f7fb);
  color: var(--color-primary-dark, #007a94);
}

/* --- Lightbox --- */
._lightbox_13lny_488 {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  outline: none;
}

._lightboxFigure_13lny_503 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
}

._lightboxImage_13lny_514 {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

._lightboxLoading_13lny_522 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 180px;
  color: var(--color-neutral-lighter, #ffffff);
  font-size: 14px;
  opacity: 0.8;
}

._lightboxCaption_13lny_533 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-lighter, #ffffff);
}

._lightboxTitle_13lny_540 {
  font-size: 14px;
  font-weight: 500;
}

._lightboxCounter_13lny_545 {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

._lightboxClose_13lny_551 {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-neutral-lighter, #fff);
  cursor: pointer;
  transition: background 250ms ease;
}
._lightboxClose_13lny_551:hover {
  background: rgba(255, 255, 255, 0.32);
}

._lightboxNav_13lny_571 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-neutral-lighter, #fff);
  cursor: pointer;
  transition: background 250ms ease, transform 250ms ease;
}
._lightboxNav_13lny_571:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}

._lightboxNavPrev_13lny_590 {
  position: absolute;
  left: 24px;
}

._lightboxNavNext_13lny_595 {
  position: absolute;
  right: 24px;
}

@media (max-width: 768px) {
  ._grid_13lny_182 {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  ._toolbar_13lny_44 {
    flex-direction: column;
    align-items: stretch;
  }
  ._toolbarRight_13lny_80 {
    justify-content: space-between;
  }
  ._searchBox_13lny_87 {
    flex: 1;
  }
  ._searchInput_13lny_102 {
    min-width: 0;
    width: 100%;
  }
  ._lightbox_13lny_488 {
    padding: 16px;
  }
  ._lightboxNav_13lny_571 {
    width: 40px;
    height: 40px;
  }
  ._lightboxNavPrev_13lny_590 {
    left: 8px;
  }
  ._lightboxNavNext_13lny_595 {
    right: 8px;
  }
}
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._page_w4utw_36 {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 16px;
}

._modeTabs_w4utw_44 {
  flex-shrink: 0;
}

._shell_w4utw_48 {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* Collapsed conversation rail — chat panel takes the freed width. */
._shellCollapsed_w4utw_57 {
  grid-template-columns: auto minmax(0, 1fr);
}

._chatPanel_w4utw_61 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-neutral-darker, rgba(145, 158, 171, 0.2));
  border-radius: 24px;
  background: var(--color-neutral-lighter, #ffffff);
}

._emptyWrap_w4utw_71 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

/* ≤1024px the sidebar defaults to the collapsed rail (see page state), so the
   two-column `auto minmax(0,1fr)` grid keeps the chat panel full-width. */
@media (max-width: 768px) {
  ._page_w4utw_36 {
    gap: 8px;
  }
}._section_1sm9z_1 {
  position: relative;
  background: radial-gradient(120% 60% at 0% 0%, rgba(239, 68, 68, 0.07), transparent 55%), radial-gradient(120% 60% at 100% 100%, rgba(245, 158, 11, 0.07), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-height: 435px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._section_1sm9z_1::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #ec4899);
  opacity: 0.9;
  z-index: 1;
}
._section_1sm9z_1::-webkit-scrollbar {
  display: none;
}

._sectionHeader_1sm9z_31 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_1sm9z_37 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
  margin: 0;
}

._sectionLink_1sm9z_46 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e9;
  background: rgba(255, 255, 255, 0.85);
  color: #707a8f;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
._sectionLink_1sm9z_46:hover {
  background: #14181f;
  color: #fff;
  border-color: #14181f;
  transform: translateX(2px);
}

._list_1sm9z_68 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._item_1sm9z_77 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(241, 242, 244, 0.9);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
._item_1sm9z_77:hover {
  border-color: #e8e8e9;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

._itemTopRow_1sm9z_94 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._itemTitle_1sm9z_100 {
  font-size: 14px;
  font-weight: 600;
  color: #2f333c;
  flex: 1;
  min-width: 0;
}

._countdownChip_1sm9z_108 {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fce7e8;
  color: #c53036;
  font-size: 12px;
  font-weight: 500;
}

._detailBtn_1sm9z_118 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: #707a8f;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
._detailBtn_1sm9z_118:hover {
  color: #00A9CE;
  background: rgba(0, 169, 206, 0.08);
}

._progressTrack_1sm9z_136 {
  width: 100%;
  height: 8px;
  background: #f1f2f4;
  border-radius: 100px;
  overflow: hidden;
}

._progressFill_1sm9z_144 {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
}
._progressFill_1sm9z_144._progressFill_grey_1sm9z_149 {
  background: linear-gradient(90deg, #e8e8e9, #d1d5db);
}
._progressFill_1sm9z_144._progressFill_orange_1sm9z_152 {
  background: linear-gradient(90deg, #fe9431, #fbbf24);
}
._progressFill_1sm9z_144._progressFill_blue_1sm9z_155 {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

._itemBottomRow_1sm9z_159 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._timeMeta_1sm9z_165 {
  font-size: 12px;
  color: #707a8f;
}

._scoreMeta_1sm9z_170 {
  font-size: 12px;
  font-weight: 600;
}
._scoreMeta_1sm9z_170._scoreMeta_grey_1sm9z_174 {
  color: #707a8f;
}
._scoreMeta_1sm9z_170._scoreMeta_orange_1sm9z_177 {
  color: #fe9431;
}
._scoreMeta_1sm9z_170._scoreMeta_blue_1sm9z_180 {
  color: #3b82f6;
}._section_1uje1_1 {
  position: relative;
  background: radial-gradient(120% 60% at 100% 0%, rgba(254, 148, 49, 0.08), transparent 55%), radial-gradient(120% 60% at 0% 100%, rgba(59, 130, 246, 0.06), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-height: 435px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._section_1uje1_1::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fe9431, #ef4444, #8b5cf6);
  opacity: 0.9;
  z-index: 1;
}
._section_1uje1_1::-webkit-scrollbar {
  display: none;
}

._sectionHeader_1uje1_31 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_1uje1_37 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
  margin: 0;
}

._sectionLink_1uje1_46 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e9;
  background: rgba(255, 255, 255, 0.85);
  color: #707a8f;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
._sectionLink_1uje1_46:hover {
  background: #14181f;
  color: #fff;
  border-color: #14181f;
  transform: translateX(2px);
}

._list_1uje1_68 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._item_1uje1_77 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(241, 242, 244, 0.9);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
._item_1uje1_77:hover {
  border-color: #e8e8e9;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

._itemTopRow_1uje1_94 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

._iconWrap_1uje1_100 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #E6F7FB;
  display: flex;
  align-items: center;
  justify-content: center;
}

._itemMain_1uje1_111 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._itemTitle_1uje1_119 {
  font-size: 14px;
  font-weight: 700;
  color: #2f333c;
}

._itemInstructor_1uje1_125 {
  font-size: 12px;
  color: #707a8f;
}

._itemMeta_1uje1_130 {
  font-size: 12px;
  color: #707a8f;
}

._detailBtn_1uje1_135 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: #707a8f;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
._detailBtn_1uje1_135:hover {
  color: #00A9CE;
  background: rgba(0, 169, 206, 0.08);
}

._progressRow_1uje1_153 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._progressTrack_1uje1_159 {
  flex: 1;
  height: 8px;
  background: #f1f2f4;
  border-radius: 100px;
  overflow: hidden;
}

._progressFill_1uje1_167 {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
}
._progressFill_1uje1_167._progressFill_orange_1uje1_172 {
  background: linear-gradient(90deg, #fe9431, #fbbf24);
}
._progressFill_1uje1_167._progressFill_blue_1uje1_175 {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

._percentLabel_1uje1_179 {
  font-size: 12px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}
._percentLabel_1uje1_179._percentLabel_orange_1uje1_185 {
  color: #fe9431;
}
._percentLabel_1uje1_179._percentLabel_blue_1uje1_188 {
  color: #3b82f6;
}._section_156gs_1 {
  position: relative;
  background: radial-gradient(120% 60% at 0% 0%, rgba(6, 182, 212, 0.07), transparent 55%), radial-gradient(120% 60% at 100% 100%, rgba(34, 197, 94, 0.06), transparent 55%), #ffffff;
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
._section_156gs_1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #22c55e);
  opacity: 0.9;
}

._sectionHeader_156gs_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_156gs_29 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #14181f;
  letter-spacing: -0.1px;
  margin: 0;
}

._sectionLink_156gs_38 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e9;
  background: rgba(255, 255, 255, 0.85);
  color: #707a8f;
  cursor: pointer;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
._sectionLink_156gs_38:hover {
  background: #14181f;
  color: #fff;
  border-color: #14181f;
  transform: translateX(2px);
}

._colName_156gs_60 {
  min-width: 180px;
}._pageContainer_1d23v_1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._infoCardGrid_1d23v_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

._middleRow_1d23v_13 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 1024px) {
  ._middleRow_1d23v_13 {
    grid-template-columns: 1fr;
  }
}

._tablesRow_1d23v_24 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 680px;
}
@media (max-width: 1024px) {
  ._tablesRow_1d23v_24 {
    grid-template-columns: 1fr;
  }
}

._statCardSkeleton_1d23v_36 {
  background: #f1f2f4;
  border-radius: 12px;
  min-height: 120px;
  animation: _pulse_1d23v_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_1d23v_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}._grid_hktqq_1 {
  display: grid;
  gap: 14px;
}

._grid_hktqq_1[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

._grid_hktqq_1[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._grid_hktqq_1[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

._grid_hktqq_1[data-columns="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  ._grid_hktqq_1[data-columns="5"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  ._grid_hktqq_1[data-columns="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  ._grid_hktqq_1[data-columns="5"],
  ._grid_hktqq_1[data-columns="4"],
  ._grid_hktqq_1[data-columns="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  ._grid_hktqq_1 {
    grid-template-columns: 1fr !important;
  }
}._section_1cgit_1 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

._head_1cgit_11 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid #f1f5f9;
}

._headLeft_1cgit_20 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._icon_1cgit_27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E6F7FB;
  color: #00A9CE;
  flex-shrink: 0;
}

._titleBlock_1cgit_39 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_1cgit_39 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
  letter-spacing: -0.01em;
}

._description_1cgit_55 {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 18px;
}

._actions_1cgit_62 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._body_1cgit_69 {
  padding: 0;
}

._bodyPadded_1cgit_73 {
  padding: 16px 18px 18px 18px;
}._controls_1msoz_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-bottom: 16px;
}

._pickerWrap_1msoz_9 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

._pickerPanel_1msoz_16 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  padding: 8px 0;
}

._pickerList_1msoz_31 {
  list-style: none;
  margin: 0;
  padding: 0;
}

._pickerItem_1msoz_37 {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}
._pickerItem_1msoz_37:hover {
  background: #f8fafc;
}

._pickerEmpty_1msoz_49 {
  padding: 16px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

._toggleRow_1msoz_56 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  user-select: none;
}

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

._metricLabel_1msoz_73 {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

._metricChips_1msoz_79 {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

._metricChip_1msoz_79 {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
._metricChip_1msoz_79:hover {
  background: #e2e8f0;
}

._metricChipActive_1msoz_100 {
  background: #4f46e5;
  color: #fff;
}
._metricChipActive_1msoz_100:hover {
  background: #4338ca;
}

._selectedChips_1msoz_108 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

._selectedChip_1msoz_108 {
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

._empty_1msoz_124 {
  text-align: center;
  padding: 40px 16px;
  color: #64748b;
  font-size: 14px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}

._tableWrap_1msoz_134 {
  overflow-x: auto;
  margin-top: 16px;
}

._table_1msoz_134 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
._table_1msoz_134 th,
._table_1msoz_134 td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
._table_1msoz_134 th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._table_1msoz_134 tbody tr:hover {
  background: #f8fafc;
}

._childrenBlock_1msoz_162 {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

._childrenTitle_1msoz_168 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._page_18efm_35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 32px 24px;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
._hero_18efm_45 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #E6F7FB 0%, #ffffff 55%, #E6F7FB 100%);
  border: 1px solid #fee2e2;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
._hero_18efm_45::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 169, 206, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

._heroLeft_18efm_69 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
  position: relative;
  z-index: 1;
}

._heroTitle_18efm_78 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 28px;
  letter-spacing: -0.02em;
}

._heroSubtitle_18efm_87 {
  margin: 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 20px;
}

._heroStats_18efm_94 {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

._heroStat_18efm_94 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid #fecaca;
  border-radius: 12px;
  min-width: 110px;
}

._heroStatLabel_18efm_114 {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.02em;
}

._heroStatValue_18efm_121 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

@media (max-width: 840px) {
  ._hero_18efm_45 {
    flex-direction: column;
  }
  ._heroStats_18efm_94 {
    width: 100%;
  }
  ._heroStat_18efm_94 {
    flex: 1;
    min-width: 0;
  }
}
/* ------------------------------------------------------------------ */
/* Filter Bar                                                          */
/* ------------------------------------------------------------------ */
._filterBar_18efm_143 {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

._filterFields_18efm_155 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

._filterField_18efm_155 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
  flex: 1 1 140px;
}
._filterField_18efm_155 label {
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._filterFieldWide_18efm_178 {
  min-width: 200px;
  flex: 2 1 200px;
}

._filterActions_18efm_183 {
  display: inline-flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                */
/* ------------------------------------------------------------------ */
._tabs_18efm_193 {
  display: inline-flex;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  gap: 4px;
  align-self: flex-start;
}

._tab_18efm_193 {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
._tab_18efm_193:hover {
  color: #0f172a;
}

._tabActive_18efm_217 {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Chart Grid                                                          */
/* ------------------------------------------------------------------ */
._chartGrid_18efm_227 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

@media (max-width: 1100px) {
  ._chartGrid_18efm_227 {
    grid-template-columns: 1fr;
  }
}
._chartGridWide_18efm_238 {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Leaderboard                                                         */
/* ------------------------------------------------------------------ */
._leaderboard_18efm_245 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._leaderItem_18efm_253 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}
._leaderItem_18efm_253:hover {
  background: #f8fafc;
}
._leaderItem_18efm_253:last-child {
  border-bottom: none;
}

._leaderRank_18efm_269 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

._rank_success_18efm_283 ._leaderRank_18efm_269 {
  background: #dcfce7;
  color: #15803d;
}

._rank_warning_18efm_288 ._leaderRank_18efm_269 {
  background: #fef3c7;
  color: #b45309;
}

._rank_danger_18efm_293 ._leaderRank_18efm_269 {
  background: #fee2e2;
  color: #b91c1c;
}

._leaderBody_18efm_298 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._leaderName_18efm_306 {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._leaderMeta_18efm_316 {
  font-size: 11.5px;
  color: #64748b;
  line-height: 16px;
}

._leaderRight_18efm_322 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._leaderValue_18efm_329 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Category / Related reports grid                                      */
/* ------------------------------------------------------------------ */
._categoryGrid_18efm_339 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

._categoryBlock_18efm_345 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

._categoryHead_18efm_355 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

._categoryTitle_18efm_363 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

._categoryDesc_18efm_370 {
  font-size: 11.5px;
  color: #64748b;
}

._reportLinks_18efm_375 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._reportLink_18efm_375 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
._reportLink_18efm_375:hover {
  border-color: #fecaca;
  background: #E6F7FB;
  transform: translateY(-1px);
}

._reportLinkTitle_18efm_400 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  grid-column: 1/2;
  grid-row: 1/2;
}

._reportLinkDesc_18efm_408 {
  font-size: 11.5px;
  color: #64748b;
  line-height: 16px;
  grid-column: 1/2;
  grid-row: 2/3;
}

._reportLink_18efm_375 svg {
  grid-column: 2/3;
  grid-row: 1/3;
  align-self: center;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Education table                                                     */
/* ------------------------------------------------------------------ */
._tableWrap_18efm_426 {
  overflow-x: auto;
}

._eduNameCell_18efm_430 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._eduTitle_18efm_437 {
  font-weight: 600;
  color: #0f172a;
  font-size: 13.5px;
}

._eduCat_18efm_443 {
  font-size: 11.5px;
  color: #64748b;
}

._barCell_18efm_448 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

._barTrack_18efm_455 {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  min-width: 90px;
}

._barFill_18efm_464 {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #22c55e);
  border-radius: 999px;
  transition: width 0.25s ease;
}

._barValue_18efm_471 {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  min-width: 36px;
  text-align: right;
}

._emptyInset_18efm_479 {
  padding: 32px 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}._card_1ovbz_1 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
  min-height: 96px;
}
._card_1ovbz_1:hover {
  border-color: #4f46e5;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}
._card_1ovbz_1:hover ._chevron_1ovbz_21 {
  transform: translateX(4px);
  color: #4f46e5;
}
._card_1ovbz_1:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

._iconWrap_1ovbz_30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}

._body_1ovbz_42 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

._titleRow_1ovbz_50 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._title_1ovbz_50 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 20px;
}

._description_1ovbz_65 {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 18px;
}

._badgeSoon_1ovbz_72 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._chevron_1ovbz_21 {
  color: #94a3b8;
  transition: all 0.15s ease;
  flex-shrink: 0;
}._section_1frna_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._header_1frna_7 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._orderBadge_1frna_13 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

._headerBody_1frna_28 {
  flex: 1;
  min-width: 0;
}

._title_1frna_33 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  line-height: 22px;
  letter-spacing: -0.01em;
}

._subtitle_1frna_42 {
  margin: 2px 0 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 18px;
}

._countBadge_1frna_49 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

._grid_1frna_62 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}._hero_9rv5y_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  flex-wrap: wrap;
}

._heroText_9rv5y_10 {
  flex: 1;
  min-width: 320px;
}

._heroTitle_9rv5y_15 {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 28px;
}

._heroSubtitle_9rv5y_24 {
  margin: 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 20px;
}
._heroSubtitle_9rv5y_24 strong {
  color: #0f172a;
  font-weight: 600;
}

._search_9rv5y_35 {
  width: 320px;
  max-width: 100%;
}

._content_9rv5y_40 {
  padding: 8px 24px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

._emptyState_9rv5y_47 {
  padding: 48px 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}._topBar_c591o_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px 0 24px;
  flex-wrap: wrap;
}

._exportSlot_c591o_10 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._titleRow_c591o_16 {
  padding: 8px 24px 0 24px;
}

._titleBlock_c591o_20 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._title_c591o_16 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 28px;
  letter-spacing: -0.02em;
}

._description_c591o_35 {
  margin: 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 20px;
  max-width: 720px;
}

._filterSlot_c591o_43 {
  padding: 12px 24px 0 24px;
}

._content_c591o_47 {
  padding: 16px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}._wrap_am118_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}._kpiGrid_1e5qu_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._statusBadge_1e5qu_7 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._statusBadge_1e5qu_7._issued_1e5qu_17 {
  background: #dcfce7;
  color: #166534;
}

._statusBadge_1e5qu_7._pending_1e5qu_22 {
  background: #fef3c7;
  color: #92400e;
}

._agedBadge_1e5qu_27 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 600;
  font-size: 12px;
}

._statusFilterGroup_1e5qu_38 {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  align-self: flex-end;
}

._statusFilterButton_1e5qu_47 {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
._statusFilterButton_1e5qu_47:hover {
  color: #0f172a;
}

._statusFilterActive_1e5qu_62 {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}._container_19r0x_1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
}

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

._summaryCard_19r0x_14 {
  position: relative;
  padding: 14px 16px;
  border: 1px solid #e8e8e9;
  border-left: 4px solid #707a8f;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._summarySuccess_19r0x_26 {
  border-left-color: #22c55e;
}

._summaryWarning_19r0x_30 {
  border-left-color: #f59e0b;
}

._summaryAccent_19r0x_34 {
  border-left-color: #3b82f6;
}

._summaryLabel_19r0x_38 {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._summaryValue_19r0x_47 {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #14181f;
}

._filters_19r0x_54 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 16px;
  background: #fafbfc;
  border: 1px solid #e8e8e9;
  border-radius: 10px;
}

._filterItem_19r0x_65 {
  min-width: 180px;
  flex: 0 1 220px;
}

._filterItem_19r0x_65._search_19r0x_70 {
  flex: 1 1 260px;
}

._tableWrap_19r0x_74 {
  background: #fff;
  border: 1px solid #e8e8e9;
  border-radius: 12px;
  overflow: hidden;
}

._table_19r0x_74 {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
}
._table_19r0x_74 thead th {
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #fafbfc;
  border-bottom: 1px solid #e8e8e9;
}
._table_19r0x_74 tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f2f4;
  font-size: 14px;
  color: #14181f;
  vertical-align: middle;
}

._nameCol_19r0x_105 {
  width: 40%;
  min-width: 260px;
}

._row1_19r0x_110,
._row2_19r0x_111,
._row3_19r0x_112 {
  cursor: pointer;
  transition: background 0.15s ease;
}

._row1_19r0x_110:hover {
  background: rgba(59, 130, 246, 0.04);
}

._row2_19r0x_111:hover {
  background: rgba(59, 130, 246, 0.03);
}

._row3_19r0x_112:hover {
  background: rgba(59, 130, 246, 0.03);
}

._rowOpen_19r0x_129 {
  background: rgba(59, 130, 246, 0.06) !important;
}

._indent1_19r0x_133 {
  padding-left: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

._indent2_19r0x_141 {
  padding-left: 40px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

._indent3_19r0x_149 {
  padding-left: 64px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2f333c;
}

._indent4_19r0x_157 {
  padding-left: 88px !important;
  font-weight: 500;
}

._chev_19r0x_162 {
  color: #707a8f;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

._chevOpen_19r0x_169 {
  transform: rotate(0deg);
  color: #14181f;
}

._primaryName_19r0x_174 {
  font-weight: 600;
  color: #14181f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 380px;
}

._codeTag_19r0x_183 {
  padding: 2px 6px;
  background: #f1f2f4;
  border-radius: 4px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #707a8f;
}

._pillCount_19r0x_192 {
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
}

._pillIssued_19r0x_202 {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

._pillPending_19r0x_211 {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  font-size: 12px;
  font-weight: 600;
}

._num_19r0x_220 {
  font-variant-numeric: tabular-nums;
  color: #14181f;
  font-weight: 500;
}

._subTableWrap_19r0x_226 {
  padding: 0 !important;
  background: #fcfdff;
}

._subTable_19r0x_226 {
  width: 100%;
  border-collapse: collapse;
}
._subTable_19r0x_226 thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #707a8f;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: transparent;
}
._subTable_19r0x_226 tbody td {
  padding: 10px 12px;
  font-size: 13px;
  color: #14181f;
  border-bottom: 1px solid #f1f2f4;
}
._subTable_19r0x_226 tbody tr:last-child td {
  border-bottom: none;
}

._inlineLoader_19r0x_254 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  font-size: 13px;
}

._empty_19r0x_261 {
  padding: 24px;
  text-align: center;
  color: #707a8f;
  font-size: 13px;
}._kpiGrid_1grd9_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartRow_1grd9_7 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  ._chartRow_1grd9_7 {
    grid-template-columns: 1fr;
  }
}

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

._subInfo_1grd9_23 {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

._statusBadge_1grd9_29,
._docBadge_1grd9_30 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._statusBadge_1grd9_29._active_1grd9_40 {
  background: #dbeafe;
  color: #1e40af;
}

._statusBadge_1grd9_29._completed_1grd9_45 {
  background: #dcfce7;
  color: #166534;
}

._docBadge_1grd9_30._approved_1grd9_50 {
  background: #dcfce7;
  color: #166534;
}

._docBadge_1grd9_30._pending_1grd9_55 {
  background: #fef3c7;
  color: #92400e;
}

._docBadge_1grd9_30._rejected_1grd9_60 {
  background: #fee2e2;
  color: #b91c1c;
}._kpiGrid_1kg39_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._titleCell_1kg39_7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._approvedBadge_1kg39_13 {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: #dcfce7;
  color: #166534;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._varianceBad_1kg39_26,
._varianceGood_1kg39_27,
._varianceNeutral_1kg39_28 {
  font-weight: 600;
  font-size: 13px;
}

._varianceBad_1kg39_26 {
  color: #b91c1c;
}

._varianceGood_1kg39_27 {
  color: #15803d;
}

._varianceNeutral_1kg39_28 {
  color: #475569;
}

._approvedToggle_1kg39_45 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
._approvedToggle_1kg39_45 input {
  accent-color: #4f46e5;
}/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
._detailPage_19dwe_35 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._backButton_19dwe_41 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e8e9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #707a8f;
  transition: all 0.2s ease;
  align-self: flex-start;
}
._backButton_19dwe_41:hover {
  background-color: #f6f7f8;
  border-color: #d0d0d1;
  color: #14181f;
}

._summaryCards_19dwe_62 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

._offeringFilter_19dwe_68 {
  max-width: 320px;
}

._loadingPlaceholder_19dwe_72 {
  grid-column: 1/-1;
  padding: 24px;
  text-align: center;
  color: #707a8f;
}._kpiGrid_1uhep_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

._userCell_1uhep_7 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._userCell_1uhep_7 ._userName_1uhep_12 {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
}
._userCell_1uhep_7 ._userEmail_1uhep_17 {
  font-size: 11.5px;
  color: #64748b;
}

._muted_1uhep_22 {
  color: #94a3b8;
  font-style: italic;
}

._numCell_1uhep_27 {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
}._kpiGrid_j4i64_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

._chartsRow_j4i64_8 {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.4fr);
  gap: 14px;
  margin: 16px 0;
}
@media (max-width: 980px) {
  ._chartsRow_j4i64_8 {
    grid-template-columns: 1fr;
  }
}

._titleCell_j4i64_20 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #0f172a;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._muted_j4i64_32 {
  color: #64748b;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

._badgeFolder_j4i64_38,
._badgeFile_j4i64_39 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

._badgeFolder_j4i64_38 {
  background: #fef3c7;
  color: #92400e;
}

._badgeFile_j4i64_39 {
  background: #dbeafe;
  color: #1e40af;
}

._shareBadge_j4i64_60 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}._kpiGrid_1fj6l_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_1fj6l_7 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) {
  ._chartGrid_1fj6l_7 {
    grid-template-columns: 1fr;
  }
}

._channelBadge_1fj6l_18 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._channelEmail_1fj6l_29 {
  background: #e0e7ff;
  color: #3730a3;
}

._channelSms_1fj6l_34 {
  background: #fef3c7;
  color: #92400e;
}

._channelAnnouncement_1fj6l_39 {
  background: #dcfce7;
  color: #166534;
}

._subjectCell_1fj6l_44 {
  font-weight: 500;
  color: #0f172a;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

._rateGood_1fj6l_54,
._rateWarn_1fj6l_55,
._rateBad_1fj6l_56 {
  font-weight: 600;
  font-size: 13px;
}

._rateGood_1fj6l_54 {
  color: #15803d;
}

._rateWarn_1fj6l_55 {
  color: #b45309;
}

._rateBad_1fj6l_56 {
  color: #b91c1c;
}

._muted_1fj6l_73 {
  color: #94a3b8;
  font-size: 12.5px;
}._kpiGrid_1d0rm_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_1d0rm_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

._requestNoCell_1d0rm_14 {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

._subjectCell_1d0rm_21 {
  display: inline-block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 500;
  color: #0f172a;
}

._statusBadge_1d0rm_32 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._slaGood_1d0rm_43,
._slaBad_1d0rm_44,
._slaNeutral_1d0rm_45 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

._slaGood_1d0rm_43 {
  background: #dcfce7;
  color: #15803d;
}

._slaBad_1d0rm_44 {
  background: #fee2e2;
  color: #b91c1c;
}

._slaNeutral_1d0rm_45 {
  background: #f1f5f9;
  color: #64748b;
}._kpiGrid_ig9jy_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_ig9jy_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

._chartGridFull_ig9jy_14 {
  margin-top: 14px;
}

._titleCell_ig9jy_18 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

._subText_ig9jy_25 {
  color: #64748b;
  font-size: 11.5px;
  margin-left: 4px;
}

._numCell_ig9jy_31 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #0f172a;
}

._malePct_ig9jy_37 {
  font-weight: 600;
  font-size: 13px;
  color: #2563eb;
}

._femalePct_ig9jy_43 {
  font-weight: 600;
  font-size: 13px;
  color: #db2777;
}

._kpiFootnote_ig9jy_49 {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}._kpiGrid_1mod9_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_1mod9_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}

._titleCell_1mod9_15 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #0f172a;
}

._subText_1mod9_23 {
  color: #64748b;
  font-size: 12px;
}

._numCell_1mod9_28 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #0f172a;
}

._ratioGood_1mod9_34 {
  font-weight: 600;
  font-size: 13px;
  color: #10b981;
}

._ratioMid_1mod9_40 {
  font-weight: 600;
  font-size: 13px;
  color: #f59e0b;
}

._ratioBad_1mod9_46 {
  font-weight: 600;
  font-size: 13px;
  color: #ef4444;
}._exportGroup_12b2f_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

._kpiGrid_12b2f_8 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

._chartGrid_12b2f_15 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

._infoBox_12b2f_22 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.45;
}

._titleCell_12b2f_36 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

._numGood_12b2f_43,
._numBad_12b2f_44,
._numNeutral_12b2f_45 {
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

._numGood_12b2f_43 {
  color: #15803d;
}

._numBad_12b2f_44 {
  color: #b91c1c;
}

._numNeutral_12b2f_45 {
  color: #b45309;
}._kpiGrid_1cotp_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_1cotp_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

._chartGridFull_1cotp_13 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

._questionCell_1cotp_19 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 420px;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.35;
}

._examCell_1cotp_30 {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

._numCell_1cotp_36 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._badge_1cotp_41 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

._filters_1cotp_51 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}._kpiGrid_x5q6f_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_x5q6f_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

._titleCell_x5q6f_14 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  color: #0f172a;
}

._numCell_x5q6f_23 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #0f172a;
}

._numCellMuted_x5q6f_29 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

._numCellWarning_x5q6f_36 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #b45309;
  font-weight: 600;
}

._numCellDanger_x5q6f_43 {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #b91c1c;
  font-weight: 600;
}

._badge_x5q6f_50 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

._badgeActive_x5q6f_62 {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

._badgeWarning_x5q6f_68 {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

._badgeDanger_x5q6f_74 {
  background: #E6F7FB;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

._badgeMuted_x5q6f_80 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

._badgePermanent_x5q6f_86 {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}._kpiGrid_lpl5t_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_lpl5t_7 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

._chartFull_lpl5t_14 {
  grid-column: 1/-1;
}

._scoreCell_lpl5t_18 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
}
._scoreCell_lpl5t_18._high_lpl5t_29 {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
._scoreCell_lpl5t_18._low_lpl5t_33 {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

._npsCell_lpl5t_38 {
  font-variant-numeric: tabular-nums;
}
._npsCell_lpl5t_38._positive_lpl5t_41 {
  color: #047857;
}
._npsCell_lpl5t_38._negative_lpl5t_44 {
  color: #b91c1c;
}._kpiGrid_1ymk9_1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  ._kpiGrid_1ymk9_1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  ._kpiGrid_1ymk9_1 {
    grid-template-columns: 1fr;
  }
}

._chartGrid_1ymk9_18 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
._chartGrid_1ymk9_18 > :first-child {
  grid-column: span 2;
}
@media (max-width: 1100px) {
  ._chartGrid_1ymk9_18 {
    grid-template-columns: 1fr;
  }
  ._chartGrid_1ymk9_18 > :first-child {
    grid-column: span 1;
  }
}

._titleCell_1ymk9_36 {
  display: inline-block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 500;
  color: #0f172a;
}

._muted_1ymk9_47 {
  color: #94a3b8;
  font-size: 12px;
}

._kpiGood_1ymk9_52 {
  color: #10b981;
  font-weight: 600;
}

._kpiMid_1ymk9_57 {
  color: #f59e0b;
  font-weight: 600;
}

._kpiBad_1ymk9_62 {
  color: #ef4444;
  font-weight: 600;
}._kpiGrid_18twr_1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

._chartGrid_18twr_7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  ._chartGrid_18twr_7 {
    grid-template-columns: 1fr;
  }
}

._demographicGrid_18twr_19 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

._heatmapWrap_18twr_26 {
  margin-top: 14px;
}

._gaugeWrap_18twr_30 {
  margin-top: 14px;
}

._npsBadge_18twr_34 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

._npsGood_18twr_44 {
  color: #15803d;
  background: #dcfce7;
}

._npsWarn_18twr_49 {
  color: #b45309;
  background: #fef3c7;
}

._npsBad_18twr_34 {
  color: #b91c1c;
  background: #fee2e2;
}

._questionCell_18twr_59 {
  display: inline-block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

._muted_18twr_68 {
  color: #94a3b8;
}._wideTable_1evw2_1 {
  overflow-x: auto;
  padding-bottom: 4px;
}

._wideTable_1evw2_1 .table-container {
  min-width: 1500px;
}

._wideTable_1evw2_1 .table-wrapper,
._wideTable_1evw2_1 .table-wrapper:has(.flex-table-body--content) {
  overflow-x: auto;
}._page_1jx4j_1 {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._toolbar_1jx4j_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

._tabs_1jx4j_16 {
  display: inline-flex;
  gap: 8px;
  background: #f5f6f8;
  padding: 4px;
  border-radius: 10px;
}

._tab_1jx4j_16 {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #505766;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
._tab_1jx4j_16._active_1jx4j_37 {
  background: #fff;
  color: #00A9CE;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._tabBadge_1jx4j_43 {
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  border-radius: 9px;
  background: #00A9CE;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

._listCard_1jx4j_55 {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  overflow: hidden;
}

._row_1jx4j_62 {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f2f3f6;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
._row_1jx4j_62:last-child {
  border-bottom: none;
}
._row_1jx4j_62:hover {
  background: #f7f8fa;
}
._row_1jx4j_62._unread_1jx4j_76 {
  background: #fbf4f4;
}

._rowBody_1jx4j_80 {
  flex: 1;
  min-width: 0;
}

._rowTitle_1jx4j_85 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2430;
}

._rowMessage_1jx4j_92 {
  margin: 0;
  font-size: 13px;
  color: #505766;
  line-height: 1.45;
}

._rowMeta_1jx4j_99 {
  margin-top: 6px;
  font-size: 12px;
  color: #8b92a3;
}

._rowDot_1jx4j_105 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00A9CE;
  margin-top: 6px;
  flex-shrink: 0;
}

._rowDotPlaceholder_1jx4j_114 {
  width: 10px;
  flex-shrink: 0;
}

._empty_1jx4j_119 {
  padding: 48px 16px;
  text-align: center;
  color: #8b92a3;
}

._pagination_1jx4j_125 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

._pageBtn_1jx4j_133 {
  border: 1px solid #e6e8ec;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
._pageBtn_1jx4j_133:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._pageBtn_1jx4j_133:hover:not(:disabled) {
  background: #f5f6f8;
}._page_jwykj_1 {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._card_jwykj_8 {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 8px 0;
}

._row_jwykj_15 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f2f3f6;
}
._row_jwykj_15:last-child {
  border-bottom: none;
}

._rowInfo_jwykj_26 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._rowTitle_jwykj_32 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2430;
}

._rowDescription_jwykj_38 {
  font-size: 12px;
  color: #8b92a3;
}

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

._loading_jwykj_48 {
  padding: 32px;
  text-align: center;
  color: #8b92a3;
}.react-datetimerange-picker {
  display: inline-flex;
  position: relative;
}

.react-datetimerange-picker,
.react-datetimerange-picker *,
.react-datetimerange-picker *:before,
.react-datetimerange-picker *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.react-datetimerange-picker--disabled {
  background-color: #f0f0f0;
  color: #6d6d6d;
}

.react-datetimerange-picker__wrapper {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  border: thin solid gray;
}

.react-datetimerange-picker__inputGroup {
  min-width: calc(4px + (4px * 3) + 0.54em * 6 + 0.217em * 2);
  height: 100%;
  flex-grow: 1;
  padding: 0 2px;
}

.react-datetimerange-picker__inputGroup__divider {
  padding: 1px 0;
}

.react-datetimerange-picker__inputGroup__divider,
.react-datetimerange-picker__inputGroup__leadingZero {
  display: inline-block;
  font: inherit;
}

.react-datetimerange-picker__inputGroup__input {
  min-width: 0.54em;
  height: calc(100% - 2px);
  position: relative;
  padding: 1px;
  border: 0;
  background: none;
  color: currentColor;
  font: inherit;
  box-sizing: content-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.react-datetimerange-picker__inputGroup__input::-webkit-outer-spin-button,
.react-datetimerange-picker__inputGroup__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.react-datetimerange-picker__inputGroup__input:invalid {
  background: rgba(255, 0, 0, 0.1);
}

.react-datetimerange-picker__inputGroup__input--hasLeadingZero {
  margin-left: -0.54em;
  padding-left: calc(1px + 0.54em);
}

.react-datetimerange-picker__inputGroup__amPm {
  font: inherit;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}

.react-datetimerange-picker__button {
  border: 0;
  background: transparent;
  padding: 4px 6px;
}

.react-datetimerange-picker__button:enabled {
  cursor: pointer;
}

.react-datetimerange-picker__button:enabled:hover .react-datetimerange-picker__button__icon,
.react-datetimerange-picker__button:enabled:focus .react-datetimerange-picker__button__icon {
  stroke: #0078d7;
}

.react-datetimerange-picker__button:disabled .react-datetimerange-picker__button__icon {
  stroke: #6d6d6d;
}

.react-datetimerange-picker__button svg {
  display: inherit;
}

.react-datetimerange-picker__calendar,
.react-datetimerange-picker__clock {
  z-index: 1;
}

.react-datetimerange-picker__calendar--closed,
.react-datetimerange-picker__clock--closed {
  display: none;
}

.react-datetimerange-picker__calendar {
  width: 350px;
  max-width: 100vw;
}

.react-datetimerange-picker__calendar .react-calendar {
  border-width: thin;
}

.react-datetimerange-picker__clock {
  width: 200px;
  height: 200px;
  max-width: 100vw;
  padding: 25px;
  background-color: white;
  border: thin solid #a0a096;
}
.react-calendar {
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: 'Arial', 'Helvetica', sans-serif;
  line-height: 1.125em;
}

.react-calendar--doubleView {
  width: 700px;
}

.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -0.5em;
}

.react-calendar--doubleView .react-calendar__viewContainer > * {
  width: 50%;
  margin: 0.5em;
}

.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.react-calendar button {
  margin: 0;
  border: 0;
  outline: none;
}

.react-calendar button:enabled:hover {
  cursor: pointer;
}

.react-calendar__navigation {
  display: flex;
  height: 44px;
  margin-bottom: 1em;
}

.react-calendar__navigation button {
  min-width: 44px;
  background: none;
}

.react-calendar__navigation button:disabled {
  background-color: #f0f0f0;
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__month-view__weekdays {
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  font-size: 0.75em;
  font-weight: bold;
}

.react-calendar__month-view__weekdays__weekday {
  padding: 0.5em;
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.75em;
  font-weight: bold;
}

.react-calendar__month-view__days__day--weekend {
  color: #d10000;
}

.react-calendar__month-view__days__day--neighboringMonth,
.react-calendar__decade-view__years__year--neighboringDecade,
.react-calendar__century-view__decades__decade--neighboringCentury {
  color: #757575;
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
  padding: 2em 0.5em;
}

.react-calendar__tile {
  max-width: 100%;
  padding: 10px 6.6667px;
  background: none;
  text-align: center;
  font: inherit;
  font-size: 0.833em;
}

.react-calendar__tile:disabled {
  background-color: #f0f0f0;
  color: #ababab;
}

.react-calendar__month-view__days__day--neighboringMonth:disabled,
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
  color: #cdcdcd;
}

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  background-color: #e6e6e6;
}

.react-calendar__tile--now {
  background: #ffff76;
}

.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
  background: #ffffa9;
}

.react-calendar__tile--hasActive {
  background: #76baff;
}

.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
  background: #a9d4ff;
}

.react-calendar__tile--active {
  background: #006edc;
  color: white;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
  background: #1087ff;
}

.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6;
}
.react-clock {
  display: block;
  position: relative;
}

.react-clock,
.react-clock *,
.react-clock *:before,
.react-clock *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.react-clock__face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid black;
  border-radius: 50%;
}

.react-clock__hand {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
}

.react-clock__hand__body {
  position: absolute;
  background-color: black;
  transform: translateX(-50%);
}

.react-clock__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
}

.react-clock__mark__body {
  position: absolute;
  background-color: black;
  transform: translateX(-50%);
}

.react-clock__mark__number {
  position: absolute;
  left: -40px;
  width: 80px;
  text-align: center;
}

.react-clock__second-hand__body {
  background-color: red;
}
.react-datetime-picker {
  display: inline-flex;
  position: relative;
}

.react-datetime-picker,
.react-datetime-picker *,
.react-datetime-picker *:before,
.react-datetime-picker *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.react-datetime-picker--disabled {
  background-color: #f0f0f0;
  color: #6d6d6d;
}

.react-datetime-picker__wrapper {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  border: thin solid gray;
}

.react-datetime-picker__inputGroup {
  min-width: calc(4px + (4px * 3) + 0.54em * 6 + 0.217em * 2);
  flex-grow: 1;
  padding: 0 2px;
}

.react-datetime-picker__inputGroup__divider {
  padding: 1px 0;
  white-space: pre;
}

.react-datetime-picker__inputGroup__divider,
.react-datetime-picker__inputGroup__leadingZero {
  display: inline-block;
  font: inherit;
}

.react-datetime-picker__inputGroup__input {
  min-width: 0.54em;
  height: calc(100% - 2px);
  position: relative;
  padding: 1px;
  border: 0;
  background: none;
  color: currentColor;
  font: inherit;
  box-sizing: content-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button,
.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.react-datetime-picker__inputGroup__input:invalid {
  background: rgba(255, 0, 0, 0.1);
}

.react-datetime-picker__inputGroup__input--hasLeadingZero {
  margin-left: -0.54em;
  padding-left: calc(1px + 0.54em);
}

.react-datetime-picker__inputGroup__amPm {
  font: inherit;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}

.react-datetime-picker__button {
  border: 0;
  background: transparent;
  padding: 4px 6px;
}

.react-datetime-picker__button:enabled {
  cursor: pointer;
}

.react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,
.react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon {
  stroke: #0078d7;
}

.react-datetime-picker__button:disabled .react-datetime-picker__button__icon {
  stroke: #6d6d6d;
}

.react-datetime-picker__button svg {
  display: inherit;
}

.react-datetime-picker__calendar,
.react-datetime-picker__clock {
  z-index: 1;
}

.react-datetime-picker__calendar--closed,
.react-datetime-picker__clock--closed {
  display: none;
}

.react-datetime-picker__calendar {
  width: 350px;
  max-width: 100vw;
}

.react-datetime-picker__calendar .react-calendar {
  border-width: thin;
}

.react-datetime-picker__clock {
  width: 200px;
  height: 200px;
  max-width: 100vw;
  padding: 25px;
  background-color: white;
  border: thin solid #a0a096;
}
:root {
  font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

html,
body {
  height: 100%;
  font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

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

h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
}/**
* Global text style utility classes.
* Use className="text-m" or getTextStyleClassName('textM') in TS/JS.
*/
/**
 * Text style tokens and mixin.
 * Use @include text-style('textM') in SCSS or getTextStyleClassName('textM') in TS/JS.
 */
/**
  * @tokens SCSS: Font Sizes
  * @presenter FontSize
*/
/**
  * @tokens SCSS: Font Weights
  * @presenter FontWeight
*/
/**
 * @tokens SCSS: Spacings
 * @presenter Spacing
 */
/**
 * @tokens SCSS: Line Heights
 * @presenter LineHeight
*/
/**
 * @tokens SCSS: Z-Index
 */
/**
 * @tokens SCSS: Opacitys
 * @presenter Opacity
*/
/**
 * @tokens SCSS: Border Radius
 * @presenter Radius
 */
/**
 * @tokens SCSS: Durations
 */
/**
 * @tokens SCSS: Breakpoints
 * Single source of truth for responsive layout thresholds.
 */
.text-xs {
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0;
}

.text-sm {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
}

.text-s-medium {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.005em;
}

.text-m {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.005em;
}

.text-l {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.text-xl {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}

.heading-xs {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
}

.heading-s {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
}

.heading-m {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
}

.heading-l {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}

.heading-xl {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}