/* AppKit UI Kit Components CSS */
/* Auto-generated from component definitions */

/* Component: button */

.ak-btn {
  --ak-blue: #1677ff;
  --ak-blue-hover: #4096ff;
  --ak-blue-active: #0958d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  font-size: 14px;
  height: 32px;
  padding: 4px 15px;
  border-radius: 6px;
  outline: none;
}

.ak-btn:focus-visible {
  outline: 2px solid var(--ak-blue);
  outline-offset: 1px;
}

/* Primary Button */
.ak-btn-primary {
  color: #fff;
  background-color: var(--ak-blue);
  border-color: var(--ak-blue);
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}
.ak-btn-primary:hover:not(:disabled) {
  color: #fff;
  background-color: var(--ak-blue-hover);
  border-color: var(--ak-blue-hover);
}
.ak-btn-primary:active:not(:disabled) {
  color: #fff;
  background-color: var(--ak-blue-active);
  border-color: var(--ak-blue-active);
}

/* Default Button */
.ak-btn-default {
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  border-color: #d9d9d9;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
.ak-btn-default:hover:not(:disabled) {
  color: var(--ak-blue);
  border-color: var(--ak-blue);
}
.ak-btn-default:active:not(:disabled) {
  color: var(--ak-blue-active);
  border-color: var(--ak-blue-active);
}

/* Dashed Button */
.ak-btn-dashed {
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  border-color: #d9d9d9;
  border-style: dashed;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
.ak-btn-dashed:hover:not(:disabled) {
  color: var(--ak-blue);
  border-color: var(--ak-blue);
}

/* Text Button */
.ak-btn-text {
  color: rgba(0, 0, 0, 0.88);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.ak-btn-text:hover:not(:disabled) {
  color: rgba(0, 0, 0, 0.88);
  background-color: rgba(0, 0, 0, 0.06);
}

/* Link Button */
.ak-btn-link {
  color: var(--ak-blue);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.ak-btn-link:hover:not(:disabled) {
  color: var(--ak-blue-hover);
}

/* Danger variants */
.ak-btn-dangerous.ak-btn-primary {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}
.ak-btn-dangerous.ak-btn-primary:hover:not(:disabled) {
  background-color: #ff7875;
  border-color: #ff7875;
}
.ak-btn-dangerous.ak-btn-default {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.ak-btn-dangerous.ak-btn-default:hover:not(:disabled) {
  color: #ff7875;
  border-color: #ff7875;
}
.ak-btn-dangerous.ak-btn-text,
.ak-btn-dangerous.ak-btn-link {
  color: #ff4d4f;
}
.ak-btn-dangerous.ak-btn-text:hover:not(:disabled),
.ak-btn-dangerous.ak-btn-link:hover:not(:disabled) {
  color: #ff7875;
}

/* Ghost variants */
.ak-btn-ghost {
  background-color: transparent;
}
.ak-btn-ghost.ak-btn-primary {
  color: var(--ak-blue);
  border-color: var(--ak-blue);
  background-color: transparent;
}

/* Sizes */
.ak-btn-lg {
  font-size: 16px;
  height: 40px;
  padding: 6.4px 15px;
  border-radius: 8px;
}
.ak-btn-sm {
  font-size: 14px;
  height: 24px;
  padding: 0px 7px;
  border-radius: 4px;
}

/* Shapes */
.ak-btn-circle {
  min-width: 32px;
  padding-inline: 0;
  border-radius: 50%;
}
.ak-btn-circle.ak-btn-lg {
  min-width: 40px;
}
.ak-btn-circle.ak-btn-sm {
  min-width: 24px;
}
.ak-btn-round {
  border-radius: 32px;
  padding-inline: 16px;
}

/* Block */
.ak-btn-block {
  width: 100%;
}

/* Disabled */
.ak-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Loading */
.ak-btn-loading {
  opacity: 0.65;
  pointer-events: none;
}
.ak-btn-loading-icon {
  display: inline-flex;
}
.ak-btn-loading-icon svg {
  animation: ak-spin 1s linear infinite;
}

@keyframes ak-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Icon spacing */
.ak-btn-icon {
  display: inline-flex;
  align-items: center;
}


/* Component: title */


/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Title specific styles */
h1.ak-typography,
.ak-typography-h1 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.2105263157894737;
}

h2.ak-typography,
.ak-typography-h2 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2666666666666666;
}

h3.ak-typography,
.ak-typography-h3 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3333333333333333;
}

h4.ak-typography,
.ak-typography-h4 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}

h5.ak-typography,
.ak-typography-h5 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

/* Remove margin from first title in container */
h1.ak-typography:first-child,
h2.ak-typography:first-child,
h3.ak-typography:first-child,
h4.ak-typography:first-child,
h5.ak-typography:first-child {
  margin-top: 0;
}


/* Component: text */

/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}



/* Component: link */


/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Link specific styles */
a.ak-typography,
.ak-typography-link {
  color: #1677ff;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.2s;
}

a.ak-typography:hover,
.ak-typography-link:hover {
  color: #4096ff;
}

a.ak-typography:active,
.ak-typography-link:active {
  color: #0958d9;
}

a.ak-typography:focus-visible,
.ak-typography-link:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 1px;
  border-radius: 2px;
}

a.ak-typography.ak-typography-disabled,
.ak-typography-link.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary link */
a.ak-typography.ak-typography-secondary,
.ak-typography-link.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

a.ak-typography.ak-typography-secondary:hover,
.ak-typography-link.ak-typography-secondary:hover {
  color: #1677ff;
}

/* Danger link */
a.ak-typography.ak-typography-danger,
.ak-typography-link.ak-typography-danger {
  color: #ff4d4f;
}

a.ak-typography.ak-typography-danger:hover,
.ak-typography-link.ak-typography-danger:hover {
  color: #ff7875;
}

a.ak-typography.ak-typography-danger:active,
.ak-typography-link.ak-typography-danger:active {
  color: #d9363e;
}


/* Component: paragraph */


/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Paragraph specific styles */
div.ak-typography,
.ak-typography-paragraph {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  margin-bottom: 1em;
}

div.ak-typography:last-child,
.ak-typography-paragraph:last-child {
  margin-bottom: 0;
}


/* Component: typography */


/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Title specific styles */
h1.ak-typography,
.ak-typography-h1 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.2105263157894737;
}

h2.ak-typography,
.ak-typography-h2 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2666666666666666;
}

h3.ak-typography,
.ak-typography-h3 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3333333333333333;
}

h4.ak-typography,
.ak-typography-h4 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}

h5.ak-typography,
.ak-typography-h5 {
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

/* Remove margin from first title in container */
h1.ak-typography:first-child,
h2.ak-typography:first-child,
h3.ak-typography:first-child,
h4.ak-typography:first-child,
h5.ak-typography:first-child {
  margin-top: 0;
}



/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}





/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Link specific styles */
a.ak-typography,
.ak-typography-link {
  color: #1677ff;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.2s;
}

a.ak-typography:hover,
.ak-typography-link:hover {
  color: #4096ff;
}

a.ak-typography:active,
.ak-typography-link:active {
  color: #0958d9;
}

a.ak-typography:focus-visible,
.ak-typography-link:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 1px;
  border-radius: 2px;
}

a.ak-typography.ak-typography-disabled,
.ak-typography-link.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary link */
a.ak-typography.ak-typography-secondary,
.ak-typography-link.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

a.ak-typography.ak-typography-secondary:hover,
.ak-typography-link.ak-typography-secondary:hover {
  color: #1677ff;
}

/* Danger link */
a.ak-typography.ak-typography-danger,
.ak-typography-link.ak-typography-danger {
  color: #ff4d4f;
}

a.ak-typography.ak-typography-danger:hover,
.ak-typography-link.ak-typography-danger:hover {
  color: #ff7875;
}

a.ak-typography.ak-typography-danger:active,
.ak-typography-link.ak-typography-danger:active {
  color: #d9363e;
}




/* Typography Base Styles */
.ak-typography {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
}

.ak-typography-secondary {
  color: rgba(0, 0, 0, 0.45);
}

.ak-typography-success {
  color: #52c41a;
}

.ak-typography-warning {
  color: #faad14;
}

.ak-typography-danger {
  color: #ff4d4f;
}

.ak-typography-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  user-select: none;
}

/* Text decorations */
.ak-typography mark,
.ak-typography-mark {
  padding: 0;
  background-color: #ffe58f;
}

.ak-typography code,
.ak-typography-code {
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
}

.ak-typography kbd,
.ak-typography-keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em;
  font-size: 90%;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  background: rgba(150, 150, 150, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-bottom-width: 2px;
  border-radius: 3px;
}

.ak-typography u,
.ak-typography-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.ak-typography del,
.ak-typography-delete {
  text-decoration: line-through;
}

.ak-typography strong,
.ak-typography-strong {
  font-weight: 600;
}

.ak-typography em,
.ak-typography-italic {
  font-style: italic;
}

/* Ellipsis */
.ak-typography-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-typography-ellipsis-multiple-line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--ak-line-clamp, 2);
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Copyable & Editable icons */
.ak-typography-copy,
.ak-typography-edit {
  margin-inline-start: 4px;
  color: #1677ff;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-typography-copy:hover,
.ak-typography-edit:hover {
  color: #4096ff;
}

.ak-typography-copy:active,
.ak-typography-edit:active {
  color: #0958d9;
}

.ak-typography-copy-success {
  color: #52c41a;
}


/* Paragraph specific styles */
div.ak-typography,
.ak-typography-paragraph {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  margin-bottom: 1em;
}

div.ak-typography:last-child,
.ak-typography-paragraph:last-child {
  margin-bottom: 0;
}


/* Component: float-button */

/* Float Button Base Styles */
.ak-float-btn {
  --ak-blue: #1677ff;
  --ak-blue-hover: #4096ff;
  --ak-blue-active: #0958d9;
  position: fixed;
  inset-inline-end: var(--ak-float-btn-right, 24px);
  bottom: var(--ak-float-btn-bottom, 24px);
  z-index: 99;
  cursor: pointer;
  box-sizing: border-box;
}

.ak-float-btn-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

/* Default type */
.ak-float-btn-default .ak-float-btn-body {
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ak-float-btn-default .ak-float-btn-body:hover {
  color: var(--ak-blue);
}

/* Primary type */
.ak-float-btn-primary .ak-float-btn-body {
  color: #fff;
  background-color: var(--ak-blue);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ak-float-btn-primary .ak-float-btn-body:hover {
  background-color: var(--ak-blue-hover);
}

.ak-float-btn-primary .ak-float-btn-body:active {
  background-color: var(--ak-blue-active);
}

/* Circle shape */
.ak-float-btn-circle {
  width: 40px;
  height: 40px;
}

.ak-float-btn-circle .ak-float-btn-body {
  border-radius: 50%;
}

/* Square shape */
.ak-float-btn-square {
  width: 40px;
  min-height: 40px;
  height: auto;
}

.ak-float-btn-square .ak-float-btn-body {
  border-radius: 8px;
}

/* Content */
.ak-float-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.ak-float-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.ak-float-btn-icon > svg {
  width: 1em;
  height: 1em;
}

.ak-float-btn-description {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.5;
}

/* With description */
.ak-float-btn-square:has(.ak-float-btn-description) {
  width: 60px;
  padding: 8px;
}

.ak-float-btn-square:has(.ak-float-btn-description) .ak-float-btn-content {
  gap: 4px;
}

/* Badge */
.ak-float-btn-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  background: #ff4d4f;
  border-radius: 9px;
  box-shadow: 0 0 0 1px #fff;
}

/* Focus state */
.ak-float-btn-body:focus-visible {
  outline: 2px solid var(--ak-blue);
  outline-offset: 2px;
}

/* Hover lift effect */
.ak-float-btn:hover {
  transform: translateY(-2px);
  transition: transform 0.2s;
}

/* Navigation via data-href */
.ak-float-btn-body[data-href] {
  cursor: pointer;
}


/* Component: float-button-group */

/* Float Button Group Styles */
.ak-float-btn-group {
  --ak-blue: #1677ff;
  --ak-blue-hover: #4096ff;
  position: fixed;
  inset-inline-end: var(--ak-float-btn-right, 24px);
  bottom: var(--ak-float-btn-bottom, 24px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ak-float-btn-group-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Nested float buttons in group */
.ak-float-btn-group .ak-float-btn {
  position: relative;
  inset-inline-end: 0;
  bottom: 0;
}

/* Trigger button */
.ak-float-btn-group-trigger {
  width: 40px;
  height: 40px;
}

.ak-float-btn-group-circle .ak-float-btn-group-trigger .ak-float-btn-body {
  border-radius: 50%;
}

.ak-float-btn-group-square .ak-float-btn-group-trigger .ak-float-btn-body {
  border-radius: 8px;
}

.ak-float-btn-group-trigger .ak-float-btn-body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.ak-float-btn-group-trigger .ak-float-btn-body:hover {
  color: var(--ak-blue);
}

/* Trigger icon rotation */
.ak-float-btn-icon-trigger {
  transition: transform 0.3s;
}

.ak-float-btn-icon-trigger.rotate-45 {
  transform: rotate(45deg);
}

/* Circle shape for group items */
.ak-float-btn-group-circle .ak-float-btn {
  width: 40px;
  height: 40px;
}

.ak-float-btn-group-circle .ak-float-btn .ak-float-btn-body {
  border-radius: 50%;
}

/* Square shape for group items */
.ak-float-btn-group-square .ak-float-btn {
  width: 40px;
  min-height: 40px;
}

.ak-float-btn-group-square .ak-float-btn .ak-float-btn-body {
  border-radius: 8px;
}

/* Animation for expand/collapse */
.ak-float-btn-group-wrap > * {
  animation: floatBtnFadeIn 0.2s ease-out;
}

@keyframes floatBtnFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Component: float-button-back-top */

/* BackTop specific styles */
.ak-float-btn-back-top {
  width: 40px;
  height: 40px;
}

.ak-float-btn-back-top .ak-float-btn-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.88);
  background-color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.ak-float-btn-back-top .ak-float-btn-body:hover {
  color: var(--ak-blue, #1677ff);
  transform: translateY(-2px);
}

.ak-float-btn-back-top .ak-float-btn-body:focus-visible {
  outline: 2px solid var(--ak-blue, #1677ff);
  outline-offset: 2px;
}

.ak-float-btn-back-top .ak-float-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* Alpine.js transition classes */
.transition {
  transition-property: all;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.translate-y-4 {
  transform: translateY(1rem);
}
.translate-y-0 {
  transform: translateY(0);
}


/* Component: appkit-logo */

/* AppSpaces Logo Sizes */
.ak-logo {
  flex-shrink: 0;
}

.ak-logo-xs {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm, 0.375rem);
}
.ak-logo-xs i { font-size: 0.75rem; }

.ak-logo-sm {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md, 0.5rem);
}
.ak-logo-sm i { font-size: 1rem; }

.ak-logo-md {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg, 0.75rem);
}
.ak-logo-md i { font-size: 1.5rem; }

.ak-logo-lg {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-xl, 1rem);
}
.ak-logo-lg i { font-size: 2rem; }

.ak-logo-xl {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-2xl, 1.25rem);
}
.ak-logo-xl i { font-size: 2.5rem; }


/* Component: appkit-brand */

/* AppSpaces Brand */
.ak-brand {
  user-select: none;
}

.ak-brand-text {
  white-space: nowrap;
}


/* Component: divider */

/* Divider Base Styles */
.ak-divider {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  border-block-start: 1px solid rgba(5, 5, 5, 0.06);
}

/* Horizontal Divider */
.ak-divider-horizontal {
  display: flex;
  align-items: center;
  clear: both;
  width: 100%;
  min-width: 100%;
  margin: 24px 0;
}

.ak-divider-horizontal.ak-divider-with-text {
  margin: 16px 0;
  border-block-start: 0;
  border-block-start-color: rgba(5, 5, 5, 0.06);
}

/* Divider with text */
.ak-divider-horizontal.ak-divider-with-text::before,
.ak-divider-horizontal.ak-divider-with-text::after {
  position: relative;
  width: 50%;
  border-block-start: 1px solid transparent;
  border-block-start-color: inherit;
  border-block-end: 0;
  transform: translateY(50%);
  content: '';
}

.ak-divider-horizontal.ak-divider-with-text-left::before {
  width: 5%;
}

.ak-divider-horizontal.ak-divider-with-text-left::after {
  width: 95%;
}

.ak-divider-horizontal.ak-divider-with-text-right::before {
  width: 95%;
}

.ak-divider-horizontal.ak-divider-with-text-right::after {
  width: 5%;
}

.ak-divider-inner-text {
  display: inline-block;
  padding: 0 1em;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
}

.ak-divider-plain .ak-divider-inner-text {
  font-weight: 400;
  font-size: 14px;
}

/* Vertical Divider */
.ak-divider-vertical {
  position: relative;
  top: -0.06em;
  display: inline-block;
  height: 0.9em;
  margin: 0 8px;
  vertical-align: middle;
  border-block-start: 0;
  border-inline-start: 1px solid rgba(5, 5, 5, 0.06);
}

/* Dashed */
.ak-divider-dashed {
  background: none;
  border-color: rgba(5, 5, 5, 0.06);
  border-style: dashed;
  border-width: 1px 0 0;
}

.ak-divider-horizontal.ak-divider-with-text.ak-divider-dashed::before,
.ak-divider-horizontal.ak-divider-with-text.ak-divider-dashed::after {
  border-style: dashed none none;
}

.ak-divider-vertical.ak-divider-dashed {
  border-inline-start-width: 1px;
  border-style: none none none dashed;
}


/* Component: flex */

/* Flex Base Styles */
.ak-flex {
  display: flex;
  box-sizing: border-box;
}

.ak-flex-vertical {
  flex-direction: column;
}

/* Wrap variants */
.ak-flex-wrap-wrap {
  flex-wrap: wrap;
}

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

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

/* Gap presets */
.ak-flex-gap-small {
  gap: 8px;
}

.ak-flex-gap-middle {
  gap: 16px;
}

.ak-flex-gap-large {
  gap: 24px;
}


/* Component: row */

/* Grid Row Styles */
.ak-row {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
}

.ak-row-nowrap {
  flex-wrap: nowrap;
}

/* Horizontal alignment */
.ak-row-start {
  justify-content: flex-start;
}

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

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

.ak-row-space-around {
  justify-content: space-around;
}

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

.ak-row-space-evenly {
  justify-content: space-evenly;
}

/* Vertical alignment */
.ak-row-top {
  align-items: flex-start;
}

.ak-row-middle {
  align-items: center;
}

.ak-row-bottom {
  align-items: flex-end;
}

.ak-row-stretch {
  align-items: stretch;
}


/* Component: col */

/* Grid Col Base Styles */
.ak-col {
  position: relative;
  max-width: 100%;
  min-height: 1px;
}

.ak-col-flex {
  flex: var(--ak-col-flex, 1);
}

/* Generate span classes (1-24) */
.ak-col-24 { display: block; flex: 0 0 100%; max-width: 100%; }
.ak-col-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
.ak-col-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
.ak-col-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
.ak-col-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
.ak-col-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
.ak-col-18 { display: block; flex: 0 0 75%; max-width: 75%; }
.ak-col-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
.ak-col-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
.ak-col-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
.ak-col-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
.ak-col-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
.ak-col-12 { display: block; flex: 0 0 50%; max-width: 50%; }
.ak-col-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
.ak-col-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
.ak-col-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
.ak-col-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
.ak-col-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
.ak-col-6 { display: block; flex: 0 0 25%; max-width: 25%; }
.ak-col-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
.ak-col-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
.ak-col-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
.ak-col-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
.ak-col-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
.ak-col-0 { display: none; }

/* Offset classes */
.ak-col-offset-24 { margin-inline-start: 100%; }
.ak-col-offset-23 { margin-inline-start: 95.83333333%; }
.ak-col-offset-22 { margin-inline-start: 91.66666667%; }
.ak-col-offset-21 { margin-inline-start: 87.5%; }
.ak-col-offset-20 { margin-inline-start: 83.33333333%; }
.ak-col-offset-19 { margin-inline-start: 79.16666667%; }
.ak-col-offset-18 { margin-inline-start: 75%; }
.ak-col-offset-17 { margin-inline-start: 70.83333333%; }
.ak-col-offset-16 { margin-inline-start: 66.66666667%; }
.ak-col-offset-15 { margin-inline-start: 62.5%; }
.ak-col-offset-14 { margin-inline-start: 58.33333333%; }
.ak-col-offset-13 { margin-inline-start: 54.16666667%; }
.ak-col-offset-12 { margin-inline-start: 50%; }
.ak-col-offset-11 { margin-inline-start: 45.83333333%; }
.ak-col-offset-10 { margin-inline-start: 41.66666667%; }
.ak-col-offset-9 { margin-inline-start: 37.5%; }
.ak-col-offset-8 { margin-inline-start: 33.33333333%; }
.ak-col-offset-7 { margin-inline-start: 29.16666667%; }
.ak-col-offset-6 { margin-inline-start: 25%; }
.ak-col-offset-5 { margin-inline-start: 20.83333333%; }
.ak-col-offset-4 { margin-inline-start: 16.66666667%; }
.ak-col-offset-3 { margin-inline-start: 12.5%; }
.ak-col-offset-2 { margin-inline-start: 8.33333333%; }
.ak-col-offset-1 { margin-inline-start: 4.16666667%; }
.ak-col-offset-0 { margin-inline-start: 0; }

/* Push classes (move right) */
.ak-col-push-24 { inset-inline-start: 100%; }
.ak-col-push-23 { inset-inline-start: 95.83333333%; }
.ak-col-push-22 { inset-inline-start: 91.66666667%; }
.ak-col-push-21 { inset-inline-start: 87.5%; }
.ak-col-push-20 { inset-inline-start: 83.33333333%; }
.ak-col-push-19 { inset-inline-start: 79.16666667%; }
.ak-col-push-18 { inset-inline-start: 75%; }
.ak-col-push-17 { inset-inline-start: 70.83333333%; }
.ak-col-push-16 { inset-inline-start: 66.66666667%; }
.ak-col-push-15 { inset-inline-start: 62.5%; }
.ak-col-push-14 { inset-inline-start: 58.33333333%; }
.ak-col-push-13 { inset-inline-start: 54.16666667%; }
.ak-col-push-12 { inset-inline-start: 50%; }
.ak-col-push-11 { inset-inline-start: 45.83333333%; }
.ak-col-push-10 { inset-inline-start: 41.66666667%; }
.ak-col-push-9 { inset-inline-start: 37.5%; }
.ak-col-push-8 { inset-inline-start: 33.33333333%; }
.ak-col-push-7 { inset-inline-start: 29.16666667%; }
.ak-col-push-6 { inset-inline-start: 25%; }
.ak-col-push-5 { inset-inline-start: 20.83333333%; }
.ak-col-push-4 { inset-inline-start: 16.66666667%; }
.ak-col-push-3 { inset-inline-start: 12.5%; }
.ak-col-push-2 { inset-inline-start: 8.33333333%; }
.ak-col-push-1 { inset-inline-start: 4.16666667%; }
.ak-col-push-0 { inset-inline-start: auto; }

/* Pull classes (move left) */
.ak-col-pull-24 { inset-inline-end: 100%; }
.ak-col-pull-23 { inset-inline-end: 95.83333333%; }
.ak-col-pull-22 { inset-inline-end: 91.66666667%; }
.ak-col-pull-21 { inset-inline-end: 87.5%; }
.ak-col-pull-20 { inset-inline-end: 83.33333333%; }
.ak-col-pull-19 { inset-inline-end: 79.16666667%; }
.ak-col-pull-18 { inset-inline-end: 75%; }
.ak-col-pull-17 { inset-inline-end: 70.83333333%; }
.ak-col-pull-16 { inset-inline-end: 66.66666667%; }
.ak-col-pull-15 { inset-inline-end: 62.5%; }
.ak-col-pull-14 { inset-inline-end: 58.33333333%; }
.ak-col-pull-13 { inset-inline-end: 54.16666667%; }
.ak-col-pull-12 { inset-inline-end: 50%; }
.ak-col-pull-11 { inset-inline-end: 45.83333333%; }
.ak-col-pull-10 { inset-inline-end: 41.66666667%; }
.ak-col-pull-9 { inset-inline-end: 37.5%; }
.ak-col-pull-8 { inset-inline-end: 33.33333333%; }
.ak-col-pull-7 { inset-inline-end: 29.16666667%; }
.ak-col-pull-6 { inset-inline-end: 25%; }
.ak-col-pull-5 { inset-inline-end: 20.83333333%; }
.ak-col-pull-4 { inset-inline-end: 16.66666667%; }
.ak-col-pull-3 { inset-inline-end: 12.5%; }
.ak-col-pull-2 { inset-inline-end: 8.33333333%; }
.ak-col-pull-1 { inset-inline-end: 4.16666667%; }
.ak-col-pull-0 { inset-inline-end: auto; }

/* Order classes */
.ak-col-order-24 { order: 24; }
.ak-col-order-23 { order: 23; }
.ak-col-order-22 { order: 22; }
.ak-col-order-21 { order: 21; }
.ak-col-order-20 { order: 20; }
.ak-col-order-19 { order: 19; }
.ak-col-order-18 { order: 18; }
.ak-col-order-17 { order: 17; }
.ak-col-order-16 { order: 16; }
.ak-col-order-15 { order: 15; }
.ak-col-order-14 { order: 14; }
.ak-col-order-13 { order: 13; }
.ak-col-order-12 { order: 12; }
.ak-col-order-11 { order: 11; }
.ak-col-order-10 { order: 10; }
.ak-col-order-9 { order: 9; }
.ak-col-order-8 { order: 8; }
.ak-col-order-7 { order: 7; }
.ak-col-order-6 { order: 6; }
.ak-col-order-5 { order: 5; }
.ak-col-order-4 { order: 4; }
.ak-col-order-3 { order: 3; }
.ak-col-order-2 { order: 2; }
.ak-col-order-1 { order: 1; }
.ak-col-order-0 { order: 0; }


/* Component: layout */

/* Layout Base Styles */
.ak-layout {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  background: #f5f5f5;
}

.ak-layout,
.ak-layout * {
  box-sizing: border-box;
}

.ak-layout.ak-layout-has-sider {
  flex-direction: row;
}

.ak-layout.ak-layout-has-sider > .ak-layout,
.ak-layout.ak-layout-has-sider > .ak-layout-content {
  width: 0;
}


/* Component: layout-header */

/* Layout Header Styles */
.ak-layout-header {
  flex: 0 0 auto;
  height: 64px;
  padding: 0 50px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 64px;
  background: #001529;
}

/* Light theme header */
.ak-layout-header-light {
  background: #fff;
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}


/* Component: layout-sider */

/* Layout Sider Styles */
.ak-layout-sider {
  position: relative;
  min-width: 0;
  background: #001529;
  transition: all 0.2s;
}

.ak-layout-sider-children {
  height: 100%;
  margin-top: -0.1px;
  padding-top: 0.1px;
}

.ak-layout-sider-children::after {
  display: block;
  clear: both;
  content: '';
}

/* Light theme */
.ak-layout-sider-light {
  background: #fff;
  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
}

/* Collapse trigger */
.ak-layout-sider-trigger {
  position: fixed;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: #fff;
  background: #002140;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-layout-sider-light .ak-layout-sider-trigger {
  color: rgba(0, 0, 0, 0.88);
  background: #fff;
  border-top: 1px solid rgba(5, 5, 5, 0.06);
  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
}

.ak-layout-sider-trigger:hover {
  background: #1668dc;
}

.ak-layout-sider-light .ak-layout-sider-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ak-layout-sider-trigger:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: -2px;
}

.ak-layout-sider-trigger-icon {
  display: flex;
  font-size: 12px;
  transition: transform 0.3s;
}

.ak-layout-sider-trigger-icon.rotate-180 {
  transform: rotate(180deg);
}

/* Collapsed state */
.ak-layout-sider-collapsed .ak-layout-sider-trigger {
  width: 80px;
}

/* Zero width trigger (for completely hidden sider) */
.ak-layout-sider-zero-width-trigger {
  position: absolute;
  top: 64px;
  inset-inline-end: -36px;
  z-index: 1;
  width: 36px;
  height: 42px;
  color: #fff;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  background: #001529;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.3s ease;
}


/* Component: layout-content */

/* Layout Content Styles */
.ak-layout-content {
  flex: auto;
  min-height: 0;
}


/* Component: layout-footer */

/* Layout Footer Styles */
.ak-layout-footer {
  flex: 0 0 auto;
  padding: 24px 50px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  background: #f5f5f5;
}


/* Component: space */

/* Space Base Styles */
.ak-space {
  display: inline-flex;
  gap: var(--ak-space-gap, 8px);
}

.ak-space-horizontal {
  flex-direction: row;
}

.ak-space-vertical {
  flex-direction: column;
}

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

/* Alignment */
.ak-space-align-start {
  align-items: flex-start;
}

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

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

.ak-space-align-baseline {
  align-items: baseline;
}

/* Size presets */
.ak-space-gap-small {
  --ak-space-gap: 8px;
}

.ak-space-gap-middle {
  --ak-space-gap: 16px;
}

.ak-space-gap-large {
  --ak-space-gap: 24px;
}


/* Component: space-compact */

/* Space Compact Styles */
.ak-space-compact {
  display: inline-flex;
}

.ak-space-compact-vertical {
  flex-direction: column;
}

.ak-space-compact-block {
  display: flex;
  width: 100%;
}

/* Remove border radius from middle items */
.ak-space-compact > *:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* First item: only left radius */
.ak-space-compact:not(.ak-space-compact-vertical) > *:first-child:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Last item: only right radius */
.ak-space-compact:not(.ak-space-compact-vertical) > *:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Vertical: first item - only top radius */
.ak-space-compact-vertical > *:first-child:not(:last-child) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Vertical: last item - only bottom radius */
.ak-space-compact-vertical > *:last-child:not(:first-child) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* Overlap borders */
.ak-space-compact:not(.ak-space-compact-vertical) > *:not(:first-child) {
  margin-inline-start: -1px;
}

.ak-space-compact-vertical > *:not(:first-child) {
  margin-block-start: -1px;
}

/* Hover state: bring to front */
.ak-space-compact > *:hover,
.ak-space-compact > *:focus,
.ak-space-compact > *:active {
  z-index: 2;
}

/* Support for buttons */
.ak-space-compact .ak-btn {
  position: relative;
}

/* Support for inputs */
.ak-space-compact .ak-input,
.ak-space-compact .ak-select-selector {
  position: relative;
}


/* Component: every-layout */

/* ==========================================================================
   Every Layout Primitives
   Intrinsic, responsive layout patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stack: Vertical flow with consistent spacing
   Usage: <div class="stack">
   Modifiers: --stack-space (default: 1.5rem)
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--stack-space, 1.5rem);
}

/* Stack spacing variants */
.stack-xs { --stack-space: 0.25rem; }
.stack-sm { --stack-space: 0.5rem; }
.stack-md { --stack-space: 1rem; }
.stack-lg { --stack-space: 1.5rem; }
.stack-xl { --stack-space: 2rem; }
.stack-2xl { --stack-space: 3rem; }
.stack-3xl { --stack-space: 4rem; }

/* Recursive stack (all descendants) */
.stack-recursive * + * {
  margin-block-start: var(--stack-space, 1.5rem);
}

/* Split stack - push last item to bottom */
.stack-split > :last-child {
  margin-block-start: auto;
}

/* --------------------------------------------------------------------------
   Box: Padding container with optional border
   Usage: <div class="box">
   Modifiers: --box-padding (default: 1rem), --box-border-width
   -------------------------------------------------------------------------- */
.box {
  padding: var(--box-padding, 1rem);
  border: var(--box-border-width, 0) solid var(--color-border, currentColor);
  background-color: var(--box-background, transparent);
  border-radius: var(--box-radius, var(--radius-md, 0.25rem));
}

.box * {
  color: inherit;
}

/* Box variants */
.box-xs { --box-padding: 0.5rem; }
.box-sm { --box-padding: 0.75rem; }
.box-md { --box-padding: 1rem; }
.box-lg { --box-padding: 1.5rem; }
.box-xl { --box-padding: 2rem; }
.box-2xl { --box-padding: 3rem; }

/* Box with visible border */
.box-bordered {
  --box-border-width: 1px;
}

/* Invert colors (for dark backgrounds) */
.box-invert {
  background-color: var(--color-surface, #1e293b);
  color: var(--color-on-surface, #f1f5f9);
}

/* --------------------------------------------------------------------------
   Center: Horizontally centered content with max-width
   Usage: <div class="center">
   Modifiers: --center-max (default: 60ch), --center-padding (default: 1rem)
   -------------------------------------------------------------------------- */
.center {
  box-sizing: content-box;
  max-inline-size: var(--center-max, 60ch);
  margin-inline: auto;
  padding-inline: var(--center-padding, 1rem);
}

/* Center variants */
.center-sm { --center-max: 40ch; }
.center-md { --center-max: 60ch; }
.center-lg { --center-max: 80ch; }
.center-xl { --center-max: 100ch; }
.center-content { --center-max: 65ch; } /* Optimal reading width */
.center-prose { --center-max: 70ch; }
.center-wide { --center-max: 90rem; }
.center-full { --center-max: 100%; }

/* Responsive form widths (pixel-based, not character-based) */
.center-form-sm { --center-max: 20rem; } /* 320px - compact forms */
.center-form { --center-max: 28rem; } /* 448px - standard auth forms */
.center-form-md { --center-max: 32rem; } /* 512px - medium forms */
.center-form-lg { --center-max: 40rem; } /* 640px - larger forms */
.center-form-xl { --center-max: 48rem; } /* 768px - wide forms */

/* Intrinsic centering (for flex children) */
.center-intrinsic {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Cluster: Inline wrapping elements with gaps
   Usage: <div class="cluster">
   Modifiers: --cluster-gap (default: 1rem), --cluster-justify, --cluster-align
   -------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 1rem);
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

/* Cluster spacing variants */
.cluster-xs { --cluster-gap: 0.25rem; }
.cluster-sm { --cluster-gap: 0.5rem; }
.cluster-md { --cluster-gap: 1rem; }
.cluster-lg { --cluster-gap: 1.5rem; }
.cluster-xl { --cluster-gap: 2rem; }

/* Cluster alignment variants */
.cluster-start { --cluster-justify: flex-start; }
.cluster-center { --cluster-justify: center; }
.cluster-end { --cluster-justify: flex-end; }
.cluster-between { --cluster-justify: space-between; }
.cluster-around { --cluster-justify: space-around; }
.cluster-evenly { --cluster-justify: space-evenly; }

/* --------------------------------------------------------------------------
   Sidebar: Two-column layout with flexible sidebar
   Usage: <div class="with-sidebar"><div>Sidebar</div><div>Content</div></div>
   Modifiers: --sidebar-width (default: 20rem), --sidebar-gap, --sidebar-threshold
   -------------------------------------------------------------------------- */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, 1rem);
}

.with-sidebar > :first-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-threshold, 50%);
}

/* Sidebar on right */
.with-sidebar-right > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-threshold, 50%);
}

.with-sidebar-right > :last-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

/* No wrapping sidebar */
.with-sidebar-nowrap {
  flex-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   Switcher: Horizontal-to-vertical responsive layout
   Usage: <div class="switcher">
   Modifiers: --switcher-threshold (default: 30rem), --switcher-gap, --switcher-limit
   -------------------------------------------------------------------------- */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, 1rem);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* Limit number of items before wrapping */
.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

/* Switcher variants */
.switcher-sm { --switcher-threshold: 20rem; }
.switcher-md { --switcher-threshold: 30rem; }
.switcher-lg { --switcher-threshold: 40rem; }
.switcher-xl { --switcher-threshold: 50rem; }

/* --------------------------------------------------------------------------
   Cover: Vertically centered principal element
   Usage: <div class="cover"><header></header><main></main><footer></footer></div>
   The middle element (or .cover-principal) is centered vertically
   Modifiers: --cover-min-height (default: 100vh), --cover-padding
   -------------------------------------------------------------------------- */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-height, 100vh);
  padding: var(--cover-padding, 1rem);
}

.cover > * {
  margin-block: 1rem;
}

.cover > :first-child:not(.cover-principal) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover-principal) {
  margin-block-end: 0;
}

.cover > .cover-principal,
.cover > :nth-child(2):not(:last-child) {
  margin-block: auto;
}

/* Cover height variants */
.cover-screen { --cover-min-height: 100vh; }
.cover-half { --cover-min-height: 50vh; }
.cover-auto { --cover-min-height: auto; }

/* --------------------------------------------------------------------------
   Grid: Auto-fit responsive grid
   Usage: <div class="grid">
   Modifiers: --grid-min (default: 15rem), --grid-gap
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 15rem), 100%), 1fr)
  );
}

/* Grid variants */
.grid-xs { --grid-min: 8rem; }
.grid-sm { --grid-min: 12rem; }
.grid-md { --grid-min: 15rem; }
.grid-lg { --grid-min: 20rem; }
.grid-xl { --grid-min: 25rem; }

/* Fixed column grids */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Frame: Aspect ratio container
   Usage: <div class="frame"><img/></div>
   Modifiers: --frame-n (numerator), --frame-d (denominator)
   -------------------------------------------------------------------------- */
.frame {
  aspect-ratio: var(--frame-n, 16) / var(--frame-d, 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Frame aspect ratio variants */
.frame-square { --frame-n: 1; --frame-d: 1; }
.frame-portrait { --frame-n: 3; --frame-d: 4; }
.frame-landscape { --frame-n: 4; --frame-d: 3; }
.frame-video { --frame-n: 16; --frame-d: 9; }
.frame-cinema { --frame-n: 21; --frame-d: 9; }
.frame-golden { --frame-n: 1618; --frame-d: 1000; }

/* --------------------------------------------------------------------------
   Reel: Horizontal scrolling container
   Usage: <div class="reel">
   Modifiers: --reel-item-width (default: auto), --reel-gap, --reel-height
   -------------------------------------------------------------------------- */
.reel {
  display: flex;
  gap: var(--reel-gap, 1rem);
  block-size: var(--reel-height, auto);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.reel > * {
  flex: 0 0 var(--reel-item-width, auto);
}

.reel > img {
  block-size: 100%;
  flex-basis: auto;
  inline-size: auto;
}

/* Hide scrollbar but keep functionality */
.reel-no-bar {
  scrollbar-width: none;
}

.reel-no-bar::-webkit-scrollbar {
  display: none;
}

/* Snap scrolling */
.reel-snap {
  scroll-snap-type: x mandatory;
}

.reel-snap > * {
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Imposter: Positioned overlay element
   Usage: <div class="imposter">
   Modifiers: --imposter-margin, --imposter-inset
   -------------------------------------------------------------------------- */
.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter-contain {
  --imposter-margin: 0;
  overflow: auto;
  max-inline-size: calc(100% - (var(--imposter-margin) * 2));
  max-block-size: calc(100% - (var(--imposter-margin) * 2));
}

/* Fixed position variant (for modals) */
.imposter-fixed {
  position: fixed;
}

/* Full-bleed imposter */
.imposter-full {
  inset: var(--imposter-inset, 0);
  transform: none;
}

/* --------------------------------------------------------------------------
   Icon: Inline icon sizing
   Usage: <span class="icon"><svg/></span>
   Modifiers: --icon-size (default: 0.75em)
   -------------------------------------------------------------------------- */
.icon {
  width: var(--icon-size, 0.75em);
  height: var(--icon-size, 0.75em);
  display: inline-block;
  vertical-align: middle;
}

.icon svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Region: Section with consistent vertical padding
   Usage: <section class="region">
   Modifiers: --region-space (default: var(--s3))
   -------------------------------------------------------------------------- */
.region {
  padding-block: var(--region-space, 3rem);
}

.region-sm { --region-space: 1.5rem; }
.region-md { --region-space: 3rem; }
.region-lg { --region-space: 4.5rem; }
.region-xl { --region-space: 6rem; }

/* --------------------------------------------------------------------------
   Flow: Prose-like content with proper spacing
   For text-heavy content areas
   -------------------------------------------------------------------------- */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.flow-sm { --flow-space: 0.5em; }
.flow-md { --flow-space: 1em; }
.flow-lg { --flow-space: 1.5em; }

/* Exception-based flow (headings get more space) */
.flow > h2 + *,
.flow > h3 + *,
.flow > h4 + * {
  --flow-space: 0.5em;
}

.flow > * + h2,
.flow > * + h3,
.flow > * + h4 {
  --flow-space: 2em;
}

/* ==========================================================================
   Utility Modifiers
   ========================================================================== */

/* Gap utilities for any layout primitive */
.gap-0 { gap: 0; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }
.gap-2xl { gap: 3rem; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-xs { padding: 0.25rem; }
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }
.p-xl { padding: 2rem; }
.p-2xl { padding: 3rem; }

/* Inline and block padding */
.pi-md { padding-inline: 1rem; }
.pb-md { padding-block: 1rem; }
.pi-lg { padding-inline: 1.5rem; }
.pb-lg { padding-block: 1.5rem; }


/* Component: breadcrumb */

/* Breadcrumb Base Styles */
.ak-breadcrumb {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
}

.ak-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Component: breadcrumb-item */

/* Breadcrumb Item Styles */
.ak-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.ak-breadcrumb-item:last-child .ak-breadcrumb-separator {
  display: none;
}

.ak-breadcrumb-link {
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.2s;
}

a.ak-breadcrumb-link {
  color: rgba(0, 0, 0, 0.45);
  text-decoration: none;
}

a.ak-breadcrumb-link:hover {
  color: #1677ff;
}

.ak-breadcrumb-item:last-child .ak-breadcrumb-link {
  color: rgba(0, 0, 0, 0.88);
}

.ak-breadcrumb-separator {
  margin-inline: 8px;
  color: rgba(0, 0, 0, 0.45);
}


/* Component: dropdown */

/* Dropdown Base Styles */
.ak-dropdown-trigger {
  position: relative;
  display: inline-block;
}

.ak-dropdown-trigger-wrapper {
  cursor: pointer;
}

.ak-dropdown {
  position: absolute;
  z-index: 1050;
  min-width: 120px;
  margin: 0;
  padding: 4px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

/* Placement */
.ak-dropdown-placement-bottomLeft,
.ak-dropdown-placement-bottomCenter,
.ak-dropdown-placement-bottomRight {
  top: 100%;
  margin-top: 4px;
}

.ak-dropdown-placement-topLeft,
.ak-dropdown-placement-topCenter,
.ak-dropdown-placement-topRight {
  bottom: 100%;
  margin-bottom: 4px;
}

.ak-dropdown-placement-bottomLeft,
.ak-dropdown-placement-topLeft {
  left: 0;
}

.ak-dropdown-placement-bottomCenter,
.ak-dropdown-placement-topCenter {
  left: 50%;
  transform: translateX(-50%);
}

.ak-dropdown-placement-bottomRight,
.ak-dropdown-placement-topRight {
  right: 0;
}

/* Arrow */
.ak-dropdown-arrow .ak-dropdown-arrow-content {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
}

.ak-dropdown-placement-bottomLeft .ak-dropdown-arrow-content,
.ak-dropdown-placement-bottomCenter .ak-dropdown-arrow-content,
.ak-dropdown-placement-bottomRight .ak-dropdown-arrow-content {
  top: -4px;
}

.ak-dropdown-placement-topLeft .ak-dropdown-arrow-content,
.ak-dropdown-placement-topCenter .ak-dropdown-arrow-content,
.ak-dropdown-placement-topRight .ak-dropdown-arrow-content {
  bottom: -4px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
}

/* Alpine transition classes */
.transition { transition-property: all; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.duration-100 { transition-duration: 100ms; }
.duration-75 { transition-duration: 75ms; }
.transform { transform: translateX(0); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }


/* Component: dropdown-menu */

/* Dropdown Menu Styles */
.ak-dropdown-menu {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 8px;
  outline: none;
}


/* Component: dropdown-menu-item */

/* Dropdown Menu Item Styles */
.ak-dropdown-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5714285714285714;
  cursor: pointer;
  transition: background 0.2s;
}

.ak-dropdown-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.ak-dropdown-menu-item-content,
.ak-dropdown-menu-item-link {
  display: flex;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.ak-dropdown-menu-item-icon {
  margin-inline-end: 8px;
  font-size: 14px;
}

/* Disabled */
.ak-dropdown-menu-item-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.ak-dropdown-menu-item-disabled:hover {
  background-color: transparent;
}

/* Danger */
.ak-dropdown-menu-item-danger {
  color: #ff4d4f;
}

.ak-dropdown-menu-item-danger:hover {
  color: #ff4d4f;
  background-color: #fff2f0;
}

/* Active */
.ak-dropdown-menu-item-active {
  background-color: #e6f4ff;
}


/* Component: dropdown-menu-divider */

/* Dropdown Menu Divider */
.ak-dropdown-menu-item-divider {
  height: 1px;
  margin: 4px 0;
  overflow: hidden;
  line-height: 0;
  background-color: rgba(5, 5, 5, 0.06);
}


/* Component: language-switcher */

/* Language Switcher */
.ak-lang-switcher {
  position: relative;
  display: inline-flex;
}

/* Trigger button */
.ak-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-text, inherit);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-lang-trigger:hover {
  border-color: var(--color-primary, #1677ff);
  color: var(--color-primary, #1677ff);
}

.ak-lang-trigger:focus {
  outline: none;
  border-color: var(--color-primary, #1677ff);
  box-shadow: 0 0 0 2px var(--color-primary-glow, rgba(22, 119, 255, 0.2));
}

/* Flag in trigger */
.ak-lang-flag .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Label */
.ak-lang-label {
  font-weight: 500;
  min-width: 1.5rem;
}

/* Chevron */
.ak-lang-chevron {
  display: flex;
  align-items: center;
  transition: transform 0.2s;
  opacity: 0.6;
}

.ak-lang-chevron-open {
  transform: rotate(180deg);
}

/* Size variants */
.ak-lang-switcher-small .ak-lang-trigger {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.ak-lang-switcher-small .ak-lang-flag .fi {
  width: 16px;
  height: 12px;
}

.ak-lang-switcher-large .ak-lang-trigger {
  padding: 0.625rem 1rem;
  font-size: 1rem;
}

.ak-lang-switcher-large .ak-lang-flag .fi {
  width: 24px;
  height: 18px;
}

/* Dropdown */
.ak-lang-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d9d9d9);
  border-radius: var(--radius-md, 0.375rem);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
  z-index: 1050;
  overflow: hidden;
}

/* Dropdown animation */
.ak-lang-dropdown-enter {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ak-lang-dropdown-enter-start {
  opacity: 0;
  transform: translateY(-8px);
}
.ak-lang-dropdown-enter-end {
  opacity: 1;
  transform: translateY(0);
}
.ak-lang-dropdown-leave {
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.ak-lang-dropdown-leave-start {
  opacity: 1;
  transform: translateY(0);
}
.ak-lang-dropdown-leave-end {
  opacity: 0;
  transform: translateY(-8px);
}

/* Option */
.ak-lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--color-text, inherit);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.ak-lang-option:hover {
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
}

.ak-lang-option-selected {
  background: var(--color-primary-bg, rgba(22, 119, 255, 0.08));
}

.ak-lang-option-selected:hover {
  background: var(--color-primary-bg-hover, rgba(22, 119, 255, 0.12));
}

/* Option flag */
.ak-lang-option-flag .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Option text */
.ak-lang-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ak-lang-option-native {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-lang-option-name {
  font-size: 0.75rem;
  color: var(--color-text-muted, rgba(0, 0, 0, 0.45));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak-lang-option-selected .ak-lang-option-native {
  color: var(--color-primary, #1677ff);
}

/* Check icon */
.ak-lang-option-check {
  color: var(--color-primary, #1677ff);
  flex-shrink: 0;
}

/* Compact variant - flag only */
.ak-lang-switcher-compact .ak-lang-trigger {
  padding: 0.375rem;
  border: none;
  background: transparent;
}

.ak-lang-switcher-compact .ak-lang-trigger:hover {
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
}

/* Dark mode */
[data-theme="dark"] .ak-lang-trigger,
.dark .ak-lang-trigger {
  border-color: var(--color-border, #3f3f3f);
  color: var(--color-text, #e4e4e7);
}

[data-theme="dark"] .ak-lang-trigger:hover,
.dark .ak-lang-trigger:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-primary, #a855f7);
}

[data-theme="dark"] .ak-lang-dropdown,
.dark .ak-lang-dropdown {
  background: var(--color-surface, #1f1f1f);
  border-color: var(--color-border, #3f3f3f);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ak-lang-option:hover,
.dark .ak-lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ak-lang-option-selected,
.dark .ak-lang-option-selected {
  background: rgba(168, 85, 247, 0.15);
}

[data-theme="dark"] .ak-lang-option-selected:hover,
.dark .ak-lang-option-selected:hover {
  background: rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .ak-lang-option-name,
.dark .ak-lang-option-name {
  color: var(--color-text-muted, #a1a1aa);
}

[data-theme="dark"] .ak-lang-option-selected .ak-lang-option-native,
.dark .ak-lang-option-selected .ak-lang-option-native {
  color: var(--color-primary, #a855f7);
}

[data-theme="dark"] .ak-lang-option-check,
.dark .ak-lang-option-check {
  color: var(--color-primary, #a855f7);
}

[data-theme="dark"] .ak-lang-flag .fi,
[data-theme="dark"] .ak-lang-option-flag .fi,
.dark .ak-lang-flag .fi,
.dark .ak-lang-option-flag .fi {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}


/* Component: menu */

/* Menu Base Styles */
.ak-menu {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 0;
  list-style: none;
  outline: none;
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* Light Theme */
.ak-menu-light {
  color: rgba(0, 0, 0, 0.88);
  background: #fff;
}

/* Dark Theme */
.ak-menu-dark {
  color: rgba(255, 255, 255, 0.65);
  background: #001529;
}

/* Vertical Mode */
.ak-menu-vertical {
  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
}

.ak-menu-vertical .ak-menu-item,
.ak-menu-vertical .ak-menu-submenu-title {
  height: 40px;
  margin-inline: 4px;
  margin-block: 4px;
  padding: 0 16px;
  line-height: 40px;
  border-radius: 8px;
}

/* Horizontal Mode */
.ak-menu-horizontal {
  display: flex;
  line-height: 46px;
  border: 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
  box-shadow: none;
}

.ak-menu-horizontal > .ak-menu-item,
.ak-menu-horizontal > .ak-menu-submenu {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: -1px;
  margin-bottom: 0;
  padding: 0 20px;
}

.ak-menu-horizontal > .ak-menu-item::after,
.ak-menu-horizontal > .ak-menu-submenu::after {
  position: absolute;
  inset-inline: 20px;
  bottom: 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  content: '';
}

.ak-menu-horizontal > .ak-menu-item-selected::after,
.ak-menu-horizontal > .ak-menu-submenu-selected::after {
  border-bottom-color: #1677ff;
}

/* Inline Mode */
.ak-menu-inline {
  width: 100%;
}

.ak-menu-inline .ak-menu-item,
.ak-menu-inline .ak-menu-submenu-title {
  width: calc(100% - 8px);
  margin-inline: 4px;
}

/* Inline Collapsed */
.ak-menu-inline-collapsed {
  width: 80px;
}

.ak-menu-inline-collapsed > .ak-menu-item,
.ak-menu-inline-collapsed > .ak-menu-submenu > .ak-menu-submenu-title {
  padding: 0 calc(50% - 16px / 2);
  text-overflow: clip;
}

.ak-menu-inline-collapsed .ak-menu-item-icon {
  font-size: 16px;
  line-height: 40px;
}

.ak-menu-inline-collapsed .ak-menu-title-content {
  display: none;
}

/* Dark theme overrides */
.ak-menu-dark.ak-menu-horizontal {
  border-bottom: 0;
}

.ak-menu-dark .ak-menu-item-selected {
  background-color: #1677ff;
}


/* Component: menu-item */

/* Menu Item Styles */
.ak-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ak-menu-item:hover {
  color: #1677ff;
}

.ak-menu-light .ak-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.ak-menu-dark .ak-menu-item:hover {
  background-color: transparent;
  color: #fff;
}

.ak-menu-item-link,
.ak-menu-item-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ak-menu-item-icon {
  min-width: 14px;
  margin-inline-end: 10px;
  font-size: 14px;
}

.ak-menu-title-content {
  flex: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected */
.ak-menu-light .ak-menu-item-selected {
  color: #1677ff;
  background-color: #e6f4ff;
}

.ak-menu-dark .ak-menu-item-selected {
  color: #fff;
  background-color: #1677ff;
}

/* Disabled */
.ak-menu-item-disabled {
  color: rgba(0, 0, 0, 0.25) !important;
  cursor: not-allowed;
}

.ak-menu-item-disabled:hover {
  color: rgba(0, 0, 0, 0.25) !important;
  background: none !important;
}

.ak-menu-dark .ak-menu-item-disabled {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Danger */
.ak-menu-item-danger {
  color: #ff4d4f;
}

.ak-menu-item-danger:hover {
  color: #ff4d4f;
}

.ak-menu-light .ak-menu-item-danger:hover {
  background-color: #fff2f0;
}


/* Component: menu-submenu */

/* Menu Submenu Styles */
.ak-menu-submenu {
  position: relative;
}

.ak-menu-submenu-title {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  margin-inline: 4px;
  margin-block: 4px;
  padding: 0 16px;
  padding-inline-end: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: 8px;
  transition: border-color 0.3s, background 0.3s, padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ak-menu-light .ak-menu-submenu-title:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: #1677ff;
}

.ak-menu-dark .ak-menu-submenu-title:hover {
  color: #fff;
}

/* Arrow */
.ak-menu-submenu-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  width: 10px;
  color: rgba(0, 0, 0, 0.88);
  transform: translateY(-50%);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ak-menu-dark .ak-menu-submenu-arrow {
  color: rgba(255, 255, 255, 0.65);
}

.ak-menu-submenu-arrow-open {
  transform: translateY(-50%) rotate(180deg);
}

/* Submenu */
.ak-menu-sub {
  background: transparent;
  border-inline-end: 0 !important;
}

.ak-menu-sub .ak-menu-item {
  padding-inline-start: 48px;
}

.ak-menu-sub .ak-menu-sub .ak-menu-item {
  padding-inline-start: 72px;
}

/* Disabled */
.ak-menu-submenu-disabled .ak-menu-submenu-title {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.ak-menu-dark .ak-menu-submenu-disabled .ak-menu-submenu-title {
  color: rgba(255, 255, 255, 0.35);
}

/* Selected submenu */
.ak-menu-submenu-selected > .ak-menu-submenu-title {
  color: #1677ff;
}

.ak-menu-dark .ak-menu-submenu-selected > .ak-menu-submenu-title {
  color: #fff;
}


/* Component: menu-item-group */

/* Menu Item Group Styles */
.ak-menu-item-group {
  padding: 0;
}

.ak-menu-item-group-title {
  height: 1.5714285714285714em;
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
  transition: all 0.3s;
}

.ak-menu-dark .ak-menu-item-group-title {
  color: rgba(255, 255, 255, 0.45);
}

.ak-menu-item-group-list {
  margin: 0;
  padding: 0;
}

.ak-menu-item-group-list .ak-menu-item {
  padding-inline-start: 28px;
}


/* Component: menu-divider */

/* Menu Divider */
.ak-menu-item-divider {
  height: 1px;
  margin: 4px 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background-color: rgba(5, 5, 5, 0.06);
}

.ak-menu-dark .ak-menu-item-divider {
  background-color: rgba(255, 255, 255, 0.15);
}


/* Component: navbar */

/* Navbar Base Styles */
.ak-navbar {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  background: #fff;
  width: 100%;
}

.ak-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  max-width: 100%;
  margin: 0 auto;
}

/* Sticky */
.ak-navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Bordered */
.ak-navbar-bordered {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}

/* Brand/Logo */
.ak-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ak-navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.ak-navbar-logo img {
  height: 32px;
  width: auto;
}

.ak-navbar-logo svg {
  height: 32px;
  width: auto;
}

.ak-navbar-brand-text {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  white-space: nowrap;
}

/* Menu */
.ak-navbar-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin: 0 24px;
}

.ak-navbar-menu a,
.ak-navbar-menu button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.ak-navbar-menu a:hover,
.ak-navbar-menu button:hover {
  color: #1677ff;
  background: rgba(0, 0, 0, 0.04);
}

.ak-navbar-menu a.active,
.ak-navbar-menu button.active {
  color: #1677ff;
  background: rgba(22, 119, 255, 0.1);
}

/* Actions */
.ak-navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile toggle */
.ak-navbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.65);
  font-size: 20px;
  transition: all 0.2s;
}

.ak-navbar-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.88);
}

.ak-navbar-toggle svg {
  width: 20px;
  height: 20px;
}

/* Mobile menu */
.ak-navbar-mobile {
  display: none;
  padding: 16px 24px;
  border-top: 1px solid rgba(5, 5, 5, 0.06);
  background: #fff;
}

.ak-navbar-menu-mobile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.ak-navbar-menu-mobile a,
.ak-navbar-menu-mobile button {
  width: 100%;
  justify-content: flex-start;
}

.ak-navbar-actions-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(5, 5, 5, 0.06);
}

/* Responsive */
@media (max-width: 768px) {
  .ak-navbar-container {
    padding: 0 16px;
  }

  .ak-navbar-menu-desktop {
    display: none;
  }

  .ak-navbar-actions-desktop {
    display: none;
  }

  .ak-navbar-toggle {
    display: flex;
  }

  .ak-navbar-mobile {
    display: block;
  }
}

/* Dark theme */
.ak-navbar-dark {
  background: #001529;
  color: rgba(255, 255, 255, 0.85);
}

.ak-navbar-dark.ak-navbar-bordered {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.ak-navbar-dark .ak-navbar-brand-text {
  color: #fff;
}

.ak-navbar-dark .ak-navbar-menu a,
.ak-navbar-dark .ak-navbar-menu button {
  color: rgba(255, 255, 255, 0.65);
}

.ak-navbar-dark .ak-navbar-menu a:hover,
.ak-navbar-dark .ak-navbar-menu button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ak-navbar-dark .ak-navbar-menu a.active,
.ak-navbar-dark .ak-navbar-menu button.active {
  color: #fff;
  background: #1677ff;
}

.ak-navbar-dark .ak-navbar-toggle {
  color: rgba(255, 255, 255, 0.65);
}

.ak-navbar-dark .ak-navbar-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ak-navbar-dark .ak-navbar-mobile {
  background: #001529;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ak-navbar-dark .ak-navbar-actions-mobile {
  border-top-color: rgba(255, 255, 255, 0.1);
}


/* Component: navbar-item */

.ak-navbar-item i {
  margin-right: 6px;
  font-size: 16px;
}


/* Component: pagination */

/* Pagination Base Styles */
.ak-pagination {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
}

.ak-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-pagination::after {
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ' ';
}

/* Prev/Next buttons */
.ak-pagination-prev,
.ak-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: rgba(0, 0, 0, 0.88);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
}

.ak-pagination-item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 12px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-pagination-item-link:hover {
  border-color: #1677ff;
  color: #1677ff;
}

.ak-pagination-disabled .ak-pagination-item-link {
  color: rgba(0, 0, 0, 0.25);
  border-color: #d9d9d9;
  cursor: not-allowed;
}

.ak-pagination-disabled .ak-pagination-item-link:hover {
  color: rgba(0, 0, 0, 0.25);
  border-color: #d9d9d9;
}

/* Total text */
.ak-pagination-total-text {
  display: inline-block;
  height: 32px;
  margin-inline-end: 8px;
  line-height: 32px;
  vertical-align: middle;
}

/* Small/Mini size */
.ak-pagination-mini .ak-pagination-prev,
.ak-pagination-mini .ak-pagination-next {
  min-width: 24px;
  height: 24px;
  line-height: 24px;
}

.ak-pagination-mini .ak-pagination-item-link {
  font-size: 10px;
}

.ak-pagination-mini .ak-pagination-total-text {
  height: 24px;
  line-height: 24px;
}

/* Disabled pagination */
.ak-pagination-disabled,
.ak-pagination-disabled .ak-pagination-item-link {
  cursor: not-allowed;
}


/* Component: pagination-item */

/* Pagination Item Styles */
.ak-pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin-inline-end: 8px;
  font-family: inherit;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  list-style: none;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.ak-pagination-item .ak-pagination-item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 6px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  text-decoration: none;
  background: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-pagination-item .ak-pagination-item-link:hover {
  border-color: #1677ff;
  color: #1677ff;
}

/* Active */
.ak-pagination-item-active .ak-pagination-item-link {
  color: #fff;
  background-color: #1677ff;
  border-color: #1677ff;
}

.ak-pagination-item-active .ak-pagination-item-link:hover {
  color: #fff;
  border-color: #4096ff;
  background-color: #4096ff;
}

/* Mini size */
.ak-pagination-mini .ak-pagination-item {
  min-width: 24px;
  height: 24px;
  margin-inline-end: 4px;
  line-height: 24px;
}

.ak-pagination-mini .ak-pagination-item .ak-pagination-item-link {
  font-size: 12px;
}


/* Component: pagination-ellipsis */

/* Pagination Ellipsis Styles */
.ak-pagination-jump-prev,
.ak-pagination-jump-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin-inline-end: 8px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.ak-pagination-item-ellipsis {
  position: relative;
}

.ak-pagination-item-ellipsis-text {
  color: rgba(0, 0, 0, 0.25);
  letter-spacing: 2px;
}

.ak-pagination-item-ellipsis-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #1677ff;
  transition: opacity 0.2s;
}

.ak-pagination-jump-prev:hover .ak-pagination-item-ellipsis-text,
.ak-pagination-jump-next:hover .ak-pagination-item-ellipsis-text {
  opacity: 0;
}

.ak-pagination-jump-prev:hover .ak-pagination-item-ellipsis-icon,
.ak-pagination-jump-next:hover .ak-pagination-item-ellipsis-icon {
  opacity: 1;
}


/* Component: steps */

/* Steps Base Styles */
.ak-steps {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: flex;
  width: 100%;
  font-size: 0;
  text-align: initial;
}

/* Horizontal */
.ak-steps-horizontal {
  flex-direction: row;
}

.ak-steps-horizontal:not(.ak-steps-label-vertical) .ak-steps-item {
  flex: 1;
  overflow: hidden;
}

/* Vertical */
.ak-steps-vertical {
  flex-direction: column;
}

.ak-steps-vertical > .ak-steps-item {
  flex: 1 0 auto;
}

.ak-steps-vertical > .ak-steps-item .ak-steps-item-tail {
  position: absolute;
  top: 0;
  inset-inline-start: 16px;
  width: 1px;
  height: 100%;
  padding: 38px 0 6px;
}

.ak-steps-vertical > .ak-steps-item .ak-steps-item-tail::after {
  width: 1px;
  height: 100%;
}

/* Small size */
.ak-steps-small .ak-steps-item-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  font-size: 12px;
  line-height: 24px;
}

.ak-steps-small .ak-steps-item-title {
  padding-inline-end: 12px;
  font-size: 14px;
  line-height: 24px;
}

.ak-steps-small .ak-steps-item-description {
  font-size: 12px;
}

/* Label vertical */
.ak-steps-label-vertical .ak-steps-item {
  overflow: visible;
}

.ak-steps-label-vertical .ak-steps-item-content {
  display: block;
  width: auto;
  margin-top: 8px;
  text-align: center;
}

/* Dot style */
.ak-steps-dot .ak-steps-item-icon {
  width: 8px;
  height: 8px;
  margin-inline: 67px;
  padding: 0;
  line-height: 8px;
  background: transparent;
  border: 0;
}

.ak-steps-dot .ak-steps-item-icon .ak-steps-icon-dot {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  transition: all 0.3s;
}

.ak-steps-dot .ak-steps-item-process .ak-steps-icon-dot {
  top: -1px;
  width: 10px;
  height: 10px;
  background: #1677ff;
}

.ak-steps-dot .ak-steps-item-tail {
  top: 2px;
  width: 100%;
  margin: 0 0 0 70px;
  padding: 0;
}

.ak-steps-dot .ak-steps-item-tail::after {
  width: calc(100% - 20px);
  height: 3px;
  margin-inline-start: 12px;
}


/* Component: step */

/* Steps Item Styles */
.ak-steps-item {
  position: relative;
  display: inline-block;
  flex: 1;
  overflow: hidden;
  vertical-align: top;
}

.ak-steps-item:last-child {
  flex: none;
}

.ak-steps-item:last-child > .ak-steps-item-container > .ak-steps-item-tail {
  display: none;
}

.ak-steps-item-container {
  display: flex;
  align-items: flex-start;
}

/* Tail (connector line) */
.ak-steps-item-tail {
  position: absolute;
  top: 12px;
  inset-inline-start: 0;
  width: 100%;
  padding: 0 10px;
}

.ak-steps-item-tail::after {
  display: inline-block;
  width: 100%;
  height: 1px;
  background: rgba(5, 5, 5, 0.06);
  border-radius: 1px;
  transition: background 0.3s;
  content: '';
}

/* Icon */
.ak-steps-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 8px 0 0;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 32px;
  transition: background-color 0.3s, border-color 0.3s;
}

.ak-steps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1677ff;
}

/* Content */
.ak-steps-item-content {
  display: inline-block;
  vertical-align: top;
}

.ak-steps-item-title {
  position: relative;
  display: inline-block;
  padding-inline-end: 16px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
  line-height: 32px;
}

.ak-steps-item-subtitle {
  display: inline;
  margin-inline-start: 8px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
  font-size: 14px;
}

.ak-steps-item-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

/* Wait status */
.ak-steps-item-wait .ak-steps-item-icon {
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.25);
}

.ak-steps-item-wait .ak-steps-icon {
  color: rgba(0, 0, 0, 0.25);
}

.ak-steps-item-wait .ak-steps-item-title {
  color: rgba(0, 0, 0, 0.45);
}

/* Process status */
.ak-steps-item-process .ak-steps-item-icon {
  background-color: #1677ff;
  border-color: #1677ff;
}

.ak-steps-item-process .ak-steps-icon {
  color: #fff;
}

.ak-steps-item-process .ak-steps-item-title {
  font-weight: 600;
}

/* Finish status */
.ak-steps-item-finish .ak-steps-item-icon {
  background-color: #fff;
  border-color: #1677ff;
}

.ak-steps-item-finish .ak-steps-icon {
  color: #1677ff;
}

.ak-steps-item-finish .ak-steps-item-tail::after {
  background-color: #1677ff;
}

/* Error status */
.ak-steps-item-error .ak-steps-item-icon {
  background-color: #fff;
  border-color: #ff4d4f;
}

.ak-steps-item-error .ak-steps-icon {
  color: #ff4d4f;
}

.ak-steps-item-error .ak-steps-item-title,
.ak-steps-item-error .ak-steps-item-description {
  color: #ff4d4f;
}


/* Component: tabs */

/* Tabs Base Styles */
.ak-tabs {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: flex;
  overflow: hidden;
}

/* Top position (default) */
.ak-tabs-top {
  flex-direction: column;
}

.ak-tabs-top > .ak-tabs-nav {
  margin-bottom: 16px;
}

.ak-tabs-top > .ak-tabs-nav::before {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
  content: '';
}

/* Bottom position */
.ak-tabs-bottom {
  flex-direction: column-reverse;
}

.ak-tabs-bottom > .ak-tabs-nav {
  margin-top: 16px;
}

.ak-tabs-bottom > .ak-tabs-nav::before {
  top: 0;
}

/* Left position */
.ak-tabs-left {
  flex-direction: row;
}

.ak-tabs-left > .ak-tabs-nav {
  flex-direction: column;
  min-width: 50px;
  margin-right: 16px;
}

.ak-tabs-left > .ak-tabs-nav .ak-tabs-nav-list {
  flex-direction: column;
}

/* Right position */
.ak-tabs-right {
  flex-direction: row-reverse;
}

.ak-tabs-right > .ak-tabs-nav {
  flex-direction: column;
  min-width: 50px;
  margin-left: 16px;
}

.ak-tabs-right > .ak-tabs-nav .ak-tabs-nav-list {
  flex-direction: column;
}

/* Nav */
.ak-tabs-nav {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
}

.ak-tabs-nav-wrap {
  position: relative;
  display: flex;
  flex: auto;
  align-self: stretch;
  overflow: hidden;
  white-space: nowrap;
  transform: translate(0);
}

.ak-tabs-nav-list {
  position: relative;
  display: flex;
  transition: transform 0.3s;
}

/* Centered tabs */
.ak-tabs-centered > .ak-tabs-nav .ak-tabs-nav-wrap {
  justify-content: center;
}

/* Content */
.ak-tabs-content-holder {
  flex: auto;
  min-width: 0;
  min-height: 0;
}

.ak-tabs-content {
  position: relative;
  width: 100%;
}

/* Card type */
.ak-tabs-card > .ak-tabs-nav .ak-tabs-nav-list {
  border: 1px solid rgba(5, 5, 5, 0.06);
  border-radius: 8px 8px 0 0;
  background: rgba(0, 0, 0, 0.02);
}

.ak-tabs-card.ak-tabs-top > .ak-tabs-nav::before {
  display: none;
}

/* Add button */
.ak-tabs-nav-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin-left: 2px;
  padding: 0 8px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  background: transparent;
  border: 1px solid rgba(5, 5, 5, 0.06);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-tabs-nav-add:hover {
  color: #1677ff;
}

/* Size variants */
.ak-tabs-small > .ak-tabs-nav .ak-tabs-tab {
  padding: 8px 0;
  font-size: 14px;
}

.ak-tabs-large > .ak-tabs-nav .ak-tabs-tab {
  padding: 16px 0;
  font-size: 16px;
}


/* Component: tab */

/* Tab Item Styles */
.ak-tabs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}

.ak-tabs-tab + .ak-tabs-tab {
  margin-left: 32px;
}

.ak-tabs-tab-btn {
  display: flex;
  align-items: center;
  outline: none;
  transition: all 0.3s;
}

.ak-tabs-tab:hover {
  color: #4096ff;
}

.ak-tabs-tab-icon {
  margin-inline-end: 8px;
}

/* Active tab */
.ak-tabs-tab-active .ak-tabs-tab-btn {
  color: #1677ff;
  font-weight: 500;
}

/* Active indicator (line type) */
.ak-tabs-top .ak-tabs-tab-active::after,
.ak-tabs-bottom .ak-tabs-tab-active::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #1677ff;
  content: '';
}

.ak-tabs-bottom .ak-tabs-tab-active::after {
  top: 0;
  bottom: auto;
}

.ak-tabs-left .ak-tabs-tab-active::after,
.ak-tabs-right .ak-tabs-tab-active::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1677ff;
  content: '';
}

.ak-tabs-left .ak-tabs-tab-active::after {
  right: 0;
}

.ak-tabs-right .ak-tabs-tab-active::after {
  left: 0;
}

/* Disabled */
.ak-tabs-tab-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.ak-tabs-tab-disabled:hover {
  color: rgba(0, 0, 0, 0.25);
}

/* Card type tabs */
.ak-tabs-card .ak-tabs-tab {
  margin: 0;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s;
}

.ak-tabs-card .ak-tabs-tab + .ak-tabs-tab {
  margin-left: 2px;
}

.ak-tabs-card .ak-tabs-tab-active {
  background: #fff;
}

.ak-tabs-card .ak-tabs-tab-active::after {
  display: none;
}

/* Close button */
.ak-tabs-tab-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-tabs-tab-remove:hover {
  color: rgba(0, 0, 0, 0.88);
}

.ak-tabs-tab-disabled .ak-tabs-tab-remove {
  display: none;
}


/* Component: tab-pane */

/* Tab Pane Styles */
.ak-tabs-tabpane {
  flex: none;
  width: 100%;
  outline: none;
}

.ak-tabs-tabpane-hidden {
  display: none;
}


/* Component: checkbox */

/* Checkbox Base Styles */
.ak-checkbox-wrapper {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  cursor: pointer;
}

.ak-checkbox-wrapper + .ak-checkbox-wrapper {
  margin-inline-start: 8px;
}

.ak-checkbox-wrapper-disabled {
  cursor: not-allowed;
}

.ak-checkbox {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1;
  list-style: none;
  position: relative;
  top: 0.2em;
  cursor: pointer;
}

.ak-checkbox-input {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

.ak-checkbox-inner {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  border-collapse: separate;
  transition: all 0.3s;
}

.ak-checkbox-inner::after {
  position: absolute;
  top: 50%;
  inset-inline-start: 21.5%;
  display: table;
  width: 5.71428571px;
  height: 9.14285714px;
  border: 2px solid #fff;
  border-top: 0;
  border-inline-start: 0;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  content: '';
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

/* Checked state */
.ak-checkbox-checked .ak-checkbox-inner {
  background-color: #1677ff;
  border-color: #1677ff;
}

.ak-checkbox-checked .ak-checkbox-inner::after {
  position: absolute;
  display: table;
  border: 2px solid #fff;
  border-top: 0;
  border-inline-start: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
  content: '';
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

/* Indeterminate state */
.ak-checkbox-indeterminate .ak-checkbox-inner {
  background-color: #fff;
  border-color: #1677ff;
}

.ak-checkbox-indeterminate .ak-checkbox-inner::after {
  top: 50%;
  inset-inline-start: 50%;
  width: 8px;
  height: 8px;
  background-color: #1677ff;
  border: 0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  content: '';
}

/* Disabled state */
.ak-checkbox-disabled {
  cursor: not-allowed;
}

.ak-checkbox-disabled .ak-checkbox-inner {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
}

.ak-checkbox-disabled.ak-checkbox-checked .ak-checkbox-inner::after {
  border-color: rgba(0, 0, 0, 0.25);
}

.ak-checkbox-disabled + span {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* Hover state */
.ak-checkbox-wrapper:not(.ak-checkbox-wrapper-disabled):hover .ak-checkbox-inner {
  border-color: #1677ff;
}

/* Label */
.ak-checkbox-label {
  padding-inline-start: 8px;
  padding-inline-end: 8px;
}


/* Component: checkbox-group */

/* Checkbox Group Styles */
.ak-checkbox-group {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.ak-checkbox-group-disabled .ak-checkbox-wrapper {
  cursor: not-allowed;
}

.ak-checkbox-group-disabled .ak-checkbox {
  cursor: not-allowed;
}

.ak-checkbox-group-disabled .ak-checkbox-inner {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
}

/* Vertical layout */
.ak-checkbox-group-vertical {
  flex-direction: column;
}

.ak-checkbox-group-vertical .ak-checkbox-wrapper + .ak-checkbox-wrapper {
  margin-inline-start: 0;
}


/* Component: code-editor */
/* ==========================================================================
   Code Editor Component
   ========================================================================== */

.ak-code-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Consolas', monospace;
}

.ak-code-editor-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-background, #1a1a1a);
}

.ak-code-editor-container {
  display: flex;
  position: relative;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  background-color: var(--color-surface, #1e1e1e);
  overflow: hidden;
  min-height: 200px;
}

.ak-code-editor-gutter {
  flex-shrink: 0;
  width: 3rem;
  padding: 0.75rem 0.5rem;
  background-color: var(--color-muted, #252526);
  border-right: 1px solid var(--color-border, #3c3c3c);
  text-align: right;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-on-muted, #858585);
  user-select: none;
  overflow: hidden;
}

.ak-code-editor-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.ak-code-editor-highlight,
.ak-code-editor-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

.ak-code-editor-highlight {
  pointer-events: none;
  color: var(--color-on-surface, #d4d4d4);
  background: transparent;
}

.ak-code-editor-highlight code {
  font-family: inherit;
  background: transparent;
}

.ak-code-editor-input {
  color: transparent;
  caret-color: var(--color-primary, #a855f7);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

.ak-code-editor-input::selection {
  background-color: rgba(168, 85, 247, 0.3);
}

.ak-code-editor-input:focus {
  outline: none;
}

.ak-code-editor-container:focus-within {
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

.ak-code-editor-extra {
  font-size: 0.75rem;
  color: var(--color-on-muted, #6b7280);
}

/* Size variants */
.ak-code-editor-small .ak-code-editor-container {
  min-height: 100px;
}

.ak-code-editor-small .ak-code-editor-highlight,
.ak-code-editor-small .ak-code-editor-input {
  font-size: 0.75rem;
  padding: 0.5rem;
}

.ak-code-editor-large .ak-code-editor-container {
  min-height: 400px;
}

.ak-code-editor-large .ak-code-editor-highlight,
.ak-code-editor-large .ak-code-editor-input {
  font-size: 1rem;
  padding: 1rem;
}

/* Disabled/readonly states */
.ak-code-editor-disabled .ak-code-editor-container {
  opacity: 0.5;
  cursor: not-allowed;
}

.ak-code-editor-disabled .ak-code-editor-input {
  cursor: not-allowed;
}

.ak-code-editor-readonly .ak-code-editor-input {
  cursor: default;
}

/* Syntax highlighting tokens (basic) */
.ak-token-keyword { color: #c586c0; }
.ak-token-string { color: #ce9178; }
.ak-token-number { color: #b5cea8; }
.ak-token-comment { color: #6a9955; font-style: italic; }
.ak-token-function { color: #dcdcaa; }
.ak-token-operator { color: #d4d4d4; }
.ak-token-punctuation { color: #d4d4d4; }
.ak-token-property { color: #9cdcfe; }
.ak-token-boolean { color: #569cd6; }
.ak-token-null { color: #569cd6; }

/* Dark mode (already dark by default, this ensures consistency) */
[data-theme="dark"] .ak-code-editor-container {
  background-color: var(--color-surface, #1e1e1e);
  border-color: var(--color-border, #3c3c3c);
}

[data-theme="dark"] .ak-code-editor-gutter {
  background-color: var(--color-muted, #252526);
  border-color: var(--color-border, #3c3c3c);
}


/* Component: cron-input */

/* Cron Input Styles */
.ak-cron-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ak-cron-input-mode-toggle {
  display: flex;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 2px;
  width: fit-content;
}

.ak-cron-input-mode-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-cron-input-mode-btn.active {
  color: #1677ff;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ak-cron-input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ak-cron-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ak-cron-input-icon {
  position: absolute;
  left: 10px;
  color: rgba(0, 0, 0, 0.35);
  font-size: 14px;
  pointer-events: none;
}

.ak-cron-input-text {
  width: 100%;
  padding: 7px 11px 7px 34px;
  font-size: 14px;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
}

.ak-cron-input-text:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

.ak-cron-input-expression {
  font-family: 'SF Mono', Consolas, monospace;
  letter-spacing: 0.5px;
}

.ak-cron-input-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.ak-cron-input-hint code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: #f5f5f5;
  border-radius: 4px;
}

.ak-cron-input-hint-label {
  font-weight: 500;
}

.ak-cron-input-error {
  font-size: 12px;
  color: #ff4d4f;
  padding: 0 2px;
}

/* Presets dropdown */
.ak-cron-presets-dropdown {
  position: relative;
}

.ak-cron-presets-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #1677ff;
  cursor: pointer;
  list-style: none;
}

.ak-cron-presets-trigger::-webkit-details-marker {
  display: none;
}

.ak-cron-presets-trigger:hover {
  color: #4096ff;
}

.ak-cron-presets-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 280px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.ak-cron-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.ak-cron-preset-item:hover {
  background: #f5f5f5;
}

.ak-cron-preset-item.active {
  background: rgba(22, 119, 255, 0.08);
  color: #1677ff;
}

.ak-cron-preset-text {
  flex: 1;
}

.ak-cron-preset-cron {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  background: #f5f5f5;
  border-radius: 4px;
}

.ak-cron-preset-item.active .ak-cron-preset-cron {
  color: rgba(22, 119, 255, 0.7);
  background: rgba(22, 119, 255, 0.12);
}

/* Size variants */
.ak-cron-input-sm .ak-cron-input-text {
  padding: 3px 7px 3px 28px;
  font-size: 12px;
}

.ak-cron-input-sm .ak-cron-input-icon {
  left: 8px;
  font-size: 12px;
}

.ak-cron-input-lg .ak-cron-input-text {
  padding: 9px 15px 9px 40px;
  font-size: 16px;
}

.ak-cron-input-lg .ak-cron-input-icon {
  left: 12px;
  font-size: 16px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ak-cron-input-mode-toggle {
    background: rgba(255, 255, 255, 0.08);
  }

  .ak-cron-input-mode-btn {
    color: rgba(255, 255, 255, 0.65);
  }

  .ak-cron-input-mode-btn.active {
    background: rgba(255, 255, 255, 0.12);
  }

  .ak-cron-input-text {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-cron-input-icon {
    color: rgba(255, 255, 255, 0.35);
  }

  .ak-cron-input-hint {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-cron-input-hint code {
    background: rgba(255, 255, 255, 0.08);
  }

  .ak-cron-presets-panel {
    background: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.15);
  }

  .ak-cron-preset-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .ak-cron-preset-cron {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
  }
}


/* Component: form */

/* Form Base Styles */
.ak-form {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
}

/* Horizontal layout (default) */
.ak-form-horizontal .ak-form-item {
  display: flex;
  flex-wrap: wrap;
}

.ak-form-horizontal .ak-form-item-label {
  flex: 0 0 auto;
  width: 33.33333333%;
  text-align: end;
  padding-inline-end: 8px;
}

.ak-form-horizontal .ak-form-item-control {
  flex: 1 1 0;
  min-width: 0;
}

/* Vertical layout */
.ak-form-vertical .ak-form-item-label {
  padding: 0 0 8px;
  text-align: start;
}

.ak-form-vertical .ak-form-item-label > label {
  height: auto;
}

/* Inline layout */
.ak-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ak-form-inline .ak-form-item {
  margin-bottom: 0;
}

.ak-form-inline .ak-form-item-label {
  padding-inline-end: 8px;
}

/* Size variants */
.ak-form-small .ak-form-item-label > label {
  height: 24px;
}

.ak-form-large .ak-form-item-label > label {
  height: 40px;
}


/* Component: form-item */

/* Form Item Styles */
.ak-form-item {
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  vertical-align: top;
}

.ak-form-item-hidden {
  display: none;
}

/* Label */
.ak-form-item-label {
  display: inline-block;
  flex-grow: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: end;
  vertical-align: middle;
}

.ak-form-item-label > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 32px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
}

.ak-form-item-label > label::after {
  content: ':';
  position: relative;
  margin-block: 0;
  margin-inline-start: 2px;
  margin-inline-end: 8px;
}

/* Required mark */
.ak-form-item-required > label::before {
  display: inline-block;
  margin-inline-end: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}

/* Tooltip */
.ak-form-item-tooltip {
  color: rgba(0, 0, 0, 0.45);
  cursor: help;
  writing-mode: horizontal-tb;
  margin-inline-start: 4px;
}

/* Control */
.ak-form-item-control {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ak-form-item-control-input {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
}

.ak-form-item-control-input-content {
  flex: auto;
  max-width: 100%;
}

/* Extra hint */
.ak-form-item-extra {
  clear: both;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Validation feedback */
.ak-form-item-explain {
  display: flex;
  flex-direction: column;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ak-form-item-explain-error {
  color: #ff4d4f;
}

.ak-form-item-explain-warning {
  color: #faad14;
}

.ak-form-item-explain-success {
  color: #52c41a;
}

/* Error state */
.ak-form-item-has-error .ak-input,
.ak-form-item-has-error .ak-input:hover,
.ak-form-item-has-error .ak-select-selector {
  border-color: #ff4d4f;
}

.ak-form-item-has-error .ak-input:focus,
.ak-form-item-has-error .ak-input-focused {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
}

/* Warning state */
.ak-form-item-has-warning .ak-input,
.ak-form-item-has-warning .ak-input:hover,
.ak-form-item-has-warning .ak-select-selector {
  border-color: #faad14;
}

/* Success state */
.ak-form-item-has-success .ak-input,
.ak-form-item-has-success .ak-input:hover,
.ak-form-item-has-success .ak-select-selector {
  border-color: #52c41a;
}


/* Component: input */

/* Input Base Styles */
.ak-input {
  box-sizing: border-box;
  margin: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  background-color: #ffffff;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}

.ak-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
  user-select: none;
}

.ak-input:hover:not(:focus) {
  border-color: #bfbfbf;
}

.ak-input:focus,
.ak-input-focused {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  outline: 0;
}

/* Disabled */
.ak-input-disabled,
.ak-input[disabled] {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.ak-input-disabled:hover,
.ak-input[disabled]:hover {
  border-color: #d9d9d9;
}

/* Borderless */
.ak-input-borderless,
.ak-input-borderless:hover,
.ak-input-borderless:focus,
.ak-input-borderless-focused {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* Size variants */
.ak-input-sm {
  padding: 0px 7px;
  font-size: 14px;
  border-radius: 4px;
}

.ak-input-lg {
  padding: 7px 11px;
  font-size: 16px;
  border-radius: 8px;
}

/* Status variants */
.ak-input-status-error:not(.ak-input-disabled),
.ak-input-status-error:not(.ak-input-borderless) {
  border-color: #ff4d4f;
}

.ak-input-status-error:not(.ak-input-disabled):hover,
.ak-input-status-error:not(.ak-input-borderless):hover {
  border-color: #ff7875;
}

.ak-input-status-error:focus,
.ak-input-status-error-focused {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
}

.ak-input-status-warning:not(.ak-input-disabled),
.ak-input-status-warning:not(.ak-input-borderless) {
  border-color: #faad14;
}

.ak-input-status-warning:not(.ak-input-disabled):hover {
  border-color: #ffc53d;
}

.ak-input-status-warning:focus,
.ak-input-status-warning-focused {
  border-color: #faad14;
  box-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
}

/* Affix wrapper (for prefix/suffix) */
.ak-input-affix-wrapper {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}

.ak-input-affix-wrapper:hover:not(:focus-within) {
  border-color: #bfbfbf;
}

.ak-input-affix-wrapper-focused,
.ak-input-affix-wrapper:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  outline: 0;
}

.ak-input-affix-wrapper .ak-input {
  padding: 0;
  font-size: inherit;
  border: none;
  border-radius: 0;
  outline: none;
}

.ak-input-affix-wrapper .ak-input:focus {
  box-shadow: none;
}

.ak-input-affix-wrapper-disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  cursor: not-allowed;
}

/* Prefix/Suffix */
.ak-input-prefix,
.ak-input-suffix {
  display: flex;
  flex: none;
  align-items: center;
  color: rgba(0, 0, 0, 0.45);
}

.ak-input-prefix {
  margin-inline-end: 4px;
}

.ak-input-suffix {
  margin-inline-start: 4px;
}

/* Size variants for affix wrapper */
.ak-input-affix-wrapper-sm {
  padding: 0px 7px;
  font-size: 14px;
  border-radius: 4px;
}

.ak-input-affix-wrapper-lg {
  padding: 7px 11px;
  font-size: 16px;
  border-radius: 8px;
}


/* Component: input-password */

/* Password Input Styles */
.ak-input-password {
  position: relative;
  display: flex;
  align-items: center;
}

.ak-input-password > .ak-input {
  padding-inline-end: 2.5rem;
  flex: 1;
}

.ak-input-password-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: color 0.3s;
  font-size: 1rem;
}

.ak-input-password-icon:hover {
  color: rgba(0, 0, 0, 0.88);
}

.ak-input-password-icon:focus {
  outline: 2px solid var(--color-primary, #1677ff);
  outline-offset: 2px;
  border-radius: 2px;
  color: var(--color-primary, #1677ff);
}

.ak-input-password-icon svg,
.ak-input-password-icon i {
  display: block;
  width: 1em;
  height: 1em;
}

/* Dark mode support */
[data-theme="dark"] .ak-input-password-icon {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .ak-input-password-icon:hover {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] .ak-input-password-icon:focus {
  color: var(--color-primary, #a855f7);
}


/* Component: input-search */

/* Search Input Styles */
.ak-input-search {
  width: 100%;
}

.ak-input-search .ak-input-wrapper {
  display: flex;
}

.ak-input-search .ak-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.ak-input-search .ak-input-group-addon {
  position: relative;
  padding: 0;
  border: 0;
}

.ak-input-search .ak-input-group-addon .ak-input-search-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.ak-input-search-button {
  height: 32px;
  padding: 0 8px;
}

.ak-input-search-button:not(.ak-btn-primary) {
  color: rgba(0, 0, 0, 0.45);
}

.ak-input-search-button:not(.ak-btn-primary):hover {
  color: #1677ff;
}

/* Size variants */
.ak-input-search-small .ak-input {
  padding: 0px 7px;
}

.ak-input-search-small .ak-input-search-button {
  height: 24px;
}

.ak-input-search-large .ak-input {
  padding: 7px 11px;
  font-size: 16px;
}

.ak-input-search-large .ak-input-search-button {
  height: 40px;
  padding: 0 12px;
}

/* Input group wrapper */
.ak-input-group-wrapper {
  display: inline-block;
  width: 100%;
  text-align: start;
  vertical-align: top;
}

.ak-input-wrapper {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ak-input-group {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ak-input-group-addon {
  position: relative;
  padding: 0 11px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.3s;
  display: table-cell;
  width: 1px;
  white-space: nowrap;
  vertical-align: middle;
}


/* Component: textarea */

/* Textarea Styles */
textarea.ak-input {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  line-height: 1.5714285714285714;
  vertical-align: bottom;
  transition: all 0.3s, height 0s;
  resize: vertical;
}

/* Show count wrapper */
.ak-input-textarea {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
}

.ak-input-textarea-show-count::after {
  position: absolute;
  bottom: 4px;
  inset-inline-end: 11px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  white-space: nowrap;
  content: attr(data-count);
  pointer-events: none;
}

.ak-input-textarea-show-count > .ak-input {
  padding-bottom: 22px;
}

/* Status variants */
.ak-input-textarea.ak-input-status-error .ak-input {
  border-color: #ff4d4f;
}

.ak-input-textarea.ak-input-status-error .ak-input:hover {
  border-color: #ff7875;
}

.ak-input-textarea.ak-input-status-error .ak-input:focus {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
}

.ak-input-textarea.ak-input-status-warning .ak-input {
  border-color: #faad14;
}

.ak-input-textarea.ak-input-status-warning .ak-input:hover {
  border-color: #ffc53d;
}

.ak-input-textarea.ak-input-status-warning .ak-input:focus {
  border-color: #faad14;
  box-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
}


/* Component: input-number */

/* Input Number Base Styles */
.ak-input-number {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: inline-block;
  width: 90px;
  min-width: 0;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}

.ak-input-number:hover,
.ak-input-number-focused {
  border-color: #4096ff;
}

.ak-input-number-focused {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

/* Handler wrap */
.ak-input-number-handler-wrap {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 22px;
  height: 100%;
  background: #ffffff;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: opacity 0.24s linear 0.1s;
}

.ak-input-number:hover .ak-input-number-handler-wrap,
.ak-input-number-focused .ak-input-number-handler-wrap {
  opacity: 1;
}

/* Handler buttons */
.ak-input-number-handler {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 50%;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.45);
  font-weight: bold;
  line-height: 0;
  text-align: center;
  border-inline-start: 1px solid #d9d9d9;
  cursor: pointer;
  transition: all 0.1s linear;
}

.ak-input-number-handler:hover {
  height: 60%;
}

.ak-input-number-handler:active {
  background: rgba(0, 0, 0, 0.02);
}

.ak-input-number-handler-up {
  border-start-end-radius: 6px;
}

.ak-input-number-handler-down {
  border-block-start: 1px solid #d9d9d9;
  border-end-end-radius: 6px;
}

.ak-input-number-handler-up-inner,
.ak-input-number-handler-down-inner {
  position: relative;
  display: inline-block;
  font-size: 7px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 12px;
  transition: all 0.1s linear;
  user-select: none;
}

.ak-input-number-handler:hover .ak-input-number-handler-up-inner,
.ak-input-number-handler:hover .ak-input-number-handler-down-inner {
  color: #1677ff;
}

/* Disabled handler */
.ak-input-number-handler-up-disabled,
.ak-input-number-handler-down-disabled {
  cursor: not-allowed;
}

.ak-input-number-handler-up-disabled .ak-input-number-handler-up-inner,
.ak-input-number-handler-down-disabled .ak-input-number-handler-down-inner {
  color: rgba(0, 0, 0, 0.25);
}

.ak-input-number-handler-up-disabled:hover .ak-input-number-handler-up-inner,
.ak-input-number-handler-down-disabled:hover .ak-input-number-handler-down-inner {
  color: rgba(0, 0, 0, 0.25);
}

/* Input */
.ak-input-number-input-wrap {
  height: 100%;
}

.ak-input-number-input {
  width: 100%;
  height: 30px;
  padding: 0 11px;
  text-align: start;
  background-color: transparent;
  border: 0;
  border-radius: 6px;
  outline: 0;
  transition: all 0.2s linear;
  appearance: textfield;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.ak-input-number-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

/* Hide number input spinners */
.ak-input-number-input::-webkit-inner-spin-button,
.ak-input-number-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

/* Disabled */
.ak-input-number-disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  cursor: not-allowed;
}

.ak-input-number-disabled:hover {
  border-color: #d9d9d9;
}

.ak-input-number-disabled .ak-input-number-input {
  cursor: not-allowed;
}

.ak-input-number-disabled .ak-input-number-handler-wrap {
  display: none;
}

/* Size variants */
.ak-input-number-sm {
  width: 75px;
}

.ak-input-number-sm .ak-input-number-input {
  height: 22px;
  padding: 0 7px;
}

.ak-input-number-sm .ak-input-number-handler-wrap {
  width: 20px;
}

.ak-input-number-lg {
  width: 110px;
}

.ak-input-number-lg .ak-input-number-input {
  height: 38px;
  padding: 0 11px;
  font-size: 16px;
}

.ak-input-number-lg .ak-input-number-handler-wrap {
  width: 24px;
}

/* Status variants */
.ak-input-number-status-error {
  border-color: #ff4d4f;
}

.ak-input-number-status-error:hover {
  border-color: #ff7875;
}

.ak-input-number-status-error.ak-input-number-focused {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
}

.ak-input-number-status-warning {
  border-color: #faad14;
}

.ak-input-number-status-warning:hover {
  border-color: #ffc53d;
}

.ak-input-number-status-warning.ak-input-number-focused {
  border-color: #faad14;
  box-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);
}


/* Component: json-schema-form */
/* ==========================================================================
   JSON Schema Form Component
   ========================================================================== */

.ak-json-schema-form {
  display: flex;
  flex-direction: column;
}

.ak-json-schema-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ak-json-schema-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ak-json-schema-form-field > .ak-form-item-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-background, #1a1a1a);
}

.ak-json-schema-form-field .ak-form-item-required {
  color: var(--color-error, #ef4444);
}

.ak-json-schema-form-field .ak-form-item-extra {
  font-size: 0.75rem;
  color: var(--color-on-muted, #6b7280);
}

/* Select styling */
.ak-json-schema-form .ak-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-md, 0.375rem);
  background-color: var(--color-surface, #ffffff);
  color: var(--color-on-surface, #1a1a1a);
  cursor: pointer;
}

.ak-json-schema-form .ak-select:focus {
  outline: none;
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* Switch styling */
.ak-json-schema-form .ak-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.ak-json-schema-form .ak-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ak-json-schema-form .ak-switch-slider {
  position: absolute;
  inset: 0;
  background-color: var(--color-muted, #d1d5db);
  border-radius: 24px;
  transition: background-color 0.2s;
}

.ak-json-schema-form .ak-switch-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.ak-json-schema-form .ak-switch input:checked + .ak-switch-slider {
  background-color: var(--color-primary, #a855f7);
}

.ak-json-schema-form .ak-switch input:checked + .ak-switch-slider::before {
  transform: translateX(20px);
}

/* Array field */
.ak-json-schema-form-array {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ak-json-schema-form-array-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ak-json-schema-form-array-index {
  width: 1.5rem;
  font-size: 0.75rem;
  color: var(--color-on-muted, #6b7280);
  text-align: center;
}

.ak-json-schema-form-array-item .ak-input {
  flex: 1;
}

.ak-json-schema-form-array-item .ak-btn-danger {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  color: var(--color-error, #ef4444);
  border-color: var(--color-error, #ef4444);
}

.ak-json-schema-form-array-item .ak-btn-danger:hover {
  background-color: var(--color-error, #ef4444);
  color: white;
}

/* Nested object */
.ak-json-schema-form-nested {
  border-left: 2px solid var(--color-border, #d1d5db);
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.ak-json-schema-form-collapse {
  background: none;
  border: none;
  color: var(--color-on-muted, #6b7280);
  cursor: pointer;
  padding: 0.25rem;
  margin-left: -1.5rem;
}

/* Dark mode */
[data-theme="dark"] .ak-json-schema-form .ak-select {
  background-color: var(--color-surface, #1e1e1e);
  border-color: var(--color-border, #3c3c3c);
  color: var(--color-on-surface, #d4d4d4);
}

[data-theme="dark"] .ak-json-schema-form-field > .ak-form-item-label {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}


/* Component: phone-input */

/* Phone Input Base Styles */
.ak-phone-input {
  display: inline-flex;
  position: relative;
  width: 100%;
  font-size: 14px;
  line-height: 1.5714285714285714;
}

/* Country selector */
.ak-phone-input-country {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-right: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ak-phone-input-country:hover {
  background: #f0f0f0;
}

.ak-phone-input-flag {
  display: flex;
  align-items: center;
  font-size: 1.2em;
}

.ak-phone-input-dial {
  color: rgba(0, 0, 0, 0.65);
  font-weight: 500;
  min-width: 36px;
}

.ak-phone-input-arrow {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.25);
  font-size: 10px;
}

.ak-phone-input-arrow svg {
  transition: transform 0.2s;
}

.ak-phone-input-arrow svg.rotate-180 {
  transform: rotate(180deg);
}

/* Phone number input */
.ak-phone-input-number {
  flex: 1;
  min-width: 0;
  padding: 4px 11px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 0 6px 6px 0;
  outline: none;
  transition: all 0.2s;
}

.ak-phone-input-number:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

.ak-phone-input-number::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

/* Dropdown */
.ak-phone-input-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 280px;
  margin-top: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ak-phone-input-search {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.ak-phone-input-search input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
}

.ak-phone-input-search input:focus {
  background: #fff;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

.ak-phone-input-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.ak-phone-input-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.ak-phone-input-option:hover {
  background: #f5f5f5;
}

.ak-phone-input-option-selected {
  background: rgba(22, 119, 255, 0.06);
  color: #1677ff;
}

.ak-phone-input-option .fi {
  font-size: 1.4em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.ak-phone-input-option-name {
  flex: 1;
  color: rgba(0, 0, 0, 0.88);
}

.ak-phone-input-option-selected .ak-phone-input-option-name {
  color: #1677ff;
  font-weight: 500;
}

.ak-phone-input-option-dial {
  color: rgba(0, 0, 0, 0.45);
  font-size: 13px;
}

/* Size variants */
.ak-phone-input-sm .ak-phone-input-country {
  padding: 0 8px;
}

.ak-phone-input-sm .ak-phone-input-number {
  padding: 0 7px;
  font-size: 12px;
}

.ak-phone-input-sm .ak-phone-input-dial {
  font-size: 12px;
}

.ak-phone-input-lg .ak-phone-input-country {
  padding: 0 16px;
}

.ak-phone-input-lg .ak-phone-input-number {
  padding: 8px 11px;
  font-size: 16px;
}

.ak-phone-input-lg .ak-phone-input-dial {
  font-size: 16px;
}

/* Status variants */
.ak-phone-input-status-error .ak-phone-input-country,
.ak-phone-input-status-error .ak-phone-input-number {
  border-color: #ff4d4f;
}

.ak-phone-input-status-error .ak-phone-input-number:focus {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}

.ak-phone-input-status-warning .ak-phone-input-country,
.ak-phone-input-status-warning .ak-phone-input-number {
  border-color: #faad14;
}

.ak-phone-input-status-warning .ak-phone-input-number:focus {
  border-color: #faad14;
  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.1);
}

/* Disabled */
.ak-phone-input-disabled .ak-phone-input-country {
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.25);
}

.ak-phone-input-disabled .ak-phone-input-number {
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.25);
}


/* Component: country-select */

/* Country Select specific styles */
.ak-country-select .ak-select-selection-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-country-select .ak-select-selection-item .fi {
  font-size: 1.2em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.ak-country-select .ak-select-item-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.ak-country-select .ak-select-item-option .fi {
  font-size: 1.4em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.ak-country-select .ak-select-dropdown-search {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.ak-country-select .ak-select-dropdown-search input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
}

.ak-country-select .ak-select-dropdown-search input:focus {
  background: #fff;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

.ak-country-select .ak-select-dropdown-content {
  max-height: 280px;
  overflow-y: auto;
}


/* Component: pin-input */

/* Pin Input Base Styles */
.ak-pin-input {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-block;
}

.ak-pin-input-group {
  display: flex;
  gap: 8px;
}

/* Individual cell */
.ak-pin-input-cell {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  caret-color: #1677ff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ak-pin-input-cell::placeholder {
  color: rgba(0, 0, 0, 0.15);
  font-weight: normal;
}

.ak-pin-input-cell:hover {
  border-color: #4096ff;
}

.ak-pin-input-cell:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ak-pin-input-cell-filled {
  border-color: #1677ff;
  background: linear-gradient(180deg, rgba(22, 119, 255, 0.06) 0%, rgba(22, 119, 255, 0.02) 100%);
  box-shadow: inset 0 1px 2px rgba(22, 119, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Size variants */
.ak-pin-input-sm .ak-pin-input-cell {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 6px;
}

.ak-pin-input-sm .ak-pin-input-group {
  gap: 6px;
}

.ak-pin-input-lg .ak-pin-input-cell {
  width: 48px;
  height: 48px;
  font-size: 24px;
  border-radius: 10px;
}

.ak-pin-input-lg .ak-pin-input-group {
  gap: 10px;
}

/* Status variants */
.ak-pin-input-status-error .ak-pin-input-cell {
  border-color: #ff4d4f;
}

.ak-pin-input-status-error .ak-pin-input-cell:focus {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}

.ak-pin-input-status-error .ak-pin-input-cell-filled {
  background: rgba(255, 77, 79, 0.04);
}

.ak-pin-input-status-warning .ak-pin-input-cell {
  border-color: #faad14;
}

.ak-pin-input-status-warning .ak-pin-input-cell:focus {
  border-color: #faad14;
  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.1);
}

.ak-pin-input-status-warning .ak-pin-input-cell-filled {
  background: rgba(250, 173, 20, 0.04);
}

.ak-pin-input-status-success .ak-pin-input-cell {
  border-color: #52c41a;
}

.ak-pin-input-status-success .ak-pin-input-cell:focus {
  border-color: #52c41a;
  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.1);
}

.ak-pin-input-status-success .ak-pin-input-cell-filled {
  background: rgba(82, 196, 26, 0.04);
}

/* Disabled */
.ak-pin-input-disabled .ak-pin-input-cell {
  color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.04);
  cursor: not-allowed;
}

.ak-pin-input-disabled .ak-pin-input-cell:hover {
  border-color: #d9d9d9;
}


/* Component: radio */

/* Radio Base Styles */
.ak-radio-wrapper {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  cursor: pointer;
}

.ak-radio-wrapper + .ak-radio-wrapper {
  margin-inline-start: 8px;
}

.ak-radio-wrapper-disabled {
  cursor: not-allowed;
}

.ak-radio {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1;
  list-style: none;
  position: relative;
  top: 0.2em;
  display: inline-block;
  cursor: pointer;
}

.ak-radio-input {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

.ak-radio-inner {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #d9d9d9;
  border-radius: 50%;
  transition: all 0.2s;
}

.ak-radio-inner::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 16px;
  height: 16px;
  margin-block-start: -8px;
  margin-inline-start: -8px;
  background-color: #1677ff;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  content: '';
}

/* Checked state */
.ak-radio-checked .ak-radio-inner {
  border-color: #1677ff;
}

.ak-radio-checked .ak-radio-inner::after {
  transform: scale(0.375);
  opacity: 1;
}

/* Hover state */
.ak-radio-wrapper:not(.ak-radio-wrapper-disabled):hover .ak-radio-inner {
  border-color: #1677ff;
}

/* Disabled state */
.ak-radio-disabled {
  cursor: not-allowed;
}

.ak-radio-disabled .ak-radio-inner {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
}

.ak-radio-disabled.ak-radio-checked .ak-radio-inner::after {
  background-color: rgba(0, 0, 0, 0.25);
}

.ak-radio-disabled + span {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* Label */
.ak-radio-label {
  padding-inline-start: 8px;
  padding-inline-end: 8px;
}


/* Component: radio-group */

/* Radio Group Styles */
.ak-radio-group {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
}

.ak-radio-group-disabled .ak-radio-wrapper {
  cursor: not-allowed;
}

/* Vertical layout */
.ak-radio-group-vertical {
  flex-direction: column;
}

.ak-radio-group-vertical .ak-radio-wrapper + .ak-radio-wrapper {
  margin-inline-start: 0;
}

/* Button style: solid */
.ak-radio-group-solid .ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled) {
  color: #fff;
  background: #1677ff;
  border-color: #1677ff;
}

.ak-radio-group-solid .ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled):hover {
  color: #fff;
  background: #4096ff;
  border-color: #4096ff;
}

/* Button style: outline */
.ak-radio-group-outline .ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled) {
  color: #1677ff;
  background: #fff;
  border-color: #1677ff;
}

.ak-radio-group-outline .ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled):hover {
  color: #4096ff;
  border-color: #4096ff;
}


/* Component: radio-button */

/* Radio Button Styles */
.ak-radio-button-wrapper {
  position: relative;
  display: inline-block;
  height: 32px;
  margin: 0;
  padding: 0 15px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 30px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-inline-start-width: 0;
  border-inline-start-style: solid;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ak-radio-button-wrapper:first-child {
  border-inline-start: 1px solid #d9d9d9;
  border-start-start-radius: 6px;
  border-end-start-radius: 6px;
}

.ak-radio-button-wrapper:last-child {
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
}

.ak-radio-button-wrapper:not(:first-child)::before {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  display: block;
  box-sizing: content-box;
  width: 1px;
  height: 100%;
  padding: 1px 0;
  background-color: #d9d9d9;
  transition: background-color 0.2s;
  content: '';
}

.ak-radio-button-wrapper:hover {
  color: #1677ff;
}

.ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled) {
  z-index: 1;
  color: #1677ff;
  background: #ffffff;
  border-color: #1677ff;
}

.ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled)::before {
  background-color: #1677ff;
}

.ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled):first-child {
  border-color: #1677ff;
}

.ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled):hover {
  color: #4096ff;
  border-color: #4096ff;
}

.ak-radio-button-wrapper-checked:not(.ak-radio-button-wrapper-disabled):hover::before {
  background-color: #4096ff;
}

/* Hidden input */
.ak-radio-button {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.ak-radio-button-input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

/* Disabled */
.ak-radio-button-wrapper-disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
  cursor: not-allowed;
}

.ak-radio-button-wrapper-disabled:first-child,
.ak-radio-button-wrapper-disabled:hover {
  color: rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #d9d9d9;
}

.ak-radio-button-wrapper-disabled.ak-radio-button-wrapper-checked {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Size variants */
.ak-radio-group-small .ak-radio-button-wrapper {
  height: 24px;
  padding: 0 7px;
  line-height: 22px;
}

.ak-radio-group-large .ak-radio-button-wrapper {
  height: 40px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 38px;
}


/* Component: select */

/* Select Base Styles */
.ak-select {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: inline-block;
  cursor: pointer;
  min-width: 120px;
  width: 100%;
}

.ak-select:not(.ak-select-customize-input) .ak-select-selector {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ak-select-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 32px;
  padding: 0 11px;
}

.ak-select:not(.ak-select-disabled):hover .ak-select-selector {
  border-color: #4096ff;
}

.ak-select-open .ak-select-selector,
.ak-select-focused .ak-select-selector {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

/* Selection item */
.ak-select-selection-item {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-select-selection-placeholder {
  flex: 1;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Search input */
.ak-select-selection-search {
  position: relative;
  max-width: 100%;
}

.ak-select-selection-search-input {
  width: 100%;
  min-width: 4px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
}

.ak-select-show-search .ak-select-selection-search {
  flex: 1;
}

.ak-select-show-search .ak-select-selection-item {
  position: absolute;
}

/* Arrow */
.ak-select-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: 11px;
  display: flex;
  align-items: center;
  height: 12px;
  margin-top: -6px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transition: transform 0.3s;
}

.ak-select-arrow svg {
  transition: transform 0.3s;
}

.ak-select-arrow svg.rotate-180 {
  transform: rotate(180deg);
}

/* Clear button */
.ak-select-clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 11px;
  z-index: 1;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  background: #ffffff;
  cursor: pointer;
  opacity: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.ak-select:hover .ak-select-clear {
  opacity: 1;
}

.ak-select-clear:hover {
  color: rgba(0, 0, 0, 0.45);
}

/* Dropdown */
.ak-select-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 1050;
  box-sizing: border-box;
  padding: 4px 0;
  margin-top: 4px;
  overflow: hidden;
  font-size: 14px;
  font-variant: initial;
  background-color: #ffffff;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  min-width: 100%;
}

.ak-select-dropdown-content {
  max-height: 256px;
  overflow-y: auto;
}

/* Empty state */
.ak-select-item-empty {
  position: relative;
  display: block;
  min-height: 32px;
  padding: 5px 12px;
  color: rgba(0, 0, 0, 0.25);
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

/* Disabled */
.ak-select-disabled {
  cursor: not-allowed;
}

.ak-select-disabled .ak-select-selector {
  color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.04);
  cursor: not-allowed;
}

.ak-select-disabled .ak-select-selector:hover {
  border-color: #d9d9d9;
}

/* Size variants */
.ak-select-sm .ak-select-selector {
  height: 24px;
  padding: 0 7px;
}

.ak-select-lg .ak-select-selector {
  height: 40px;
  padding: 0 11px;
  font-size: 16px;
}

/* Status variants */
.ak-select-status-error .ak-select-selector {
  border-color: #ff4d4f;
}

.ak-select-status-error:not(.ak-select-disabled):hover .ak-select-selector {
  border-color: #ff7875;
}

.ak-select-status-warning .ak-select-selector {
  border-color: #faad14;
}

.ak-select-status-warning:not(.ak-select-disabled):hover .ak-select-selector {
  border-color: #ffc53d;
}

/* Prefix icon */
.ak-select-prefix {
  display: flex;
  align-items: center;
  margin-inline-end: 8px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.ak-select-has-icon .ak-select-selector {
  padding-inline-start: 11px;
}

/* Dropdown search */
.ak-select-dropdown-search {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.ak-select-dropdown-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
}

.ak-select-dropdown-search-input:focus {
  background: #ffffff;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

.ak-select-dropdown-search-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

/* Dropdown footer with add button */
.ak-select-dropdown-footer {
  padding: 8px 12px;
  border-top: 1px solid #f0f0f0;
}

.ak-select-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: #1677ff;
  background: transparent;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-select-add-btn:hover {
  color: #4096ff;
  border-color: #4096ff;
  background: rgba(22, 119, 255, 0.04);
}

.ak-select-add-btn svg {
  font-size: 12px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ak-select {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select:not(.ak-select-customize-input) .ak-select-selector {
    background-color: #1f1f1f;
    border-color: #424242;
  }

  .ak-select:not(.ak-select-disabled):hover .ak-select-selector {
    border-color: #4096ff;
  }

  .ak-select-open .ak-select-selector,
  .ak-select-focused .ak-select-selector {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.2);
  }

  .ak-select-selection-placeholder {
    color: rgba(255, 255, 255, 0.25);
  }

  .ak-select-selection-search-input {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-arrow {
    color: rgba(255, 255, 255, 0.25);
  }

  .ak-select-clear {
    color: rgba(255, 255, 255, 0.25);
    background: #1f1f1f;
  }

  .ak-select-clear:hover {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-disabled .ak-select-selector {
    color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    border-color: #424242;
  }

  .ak-select-status-error .ak-select-selector {
    border-color: #a61d24;
  }

  .ak-select-status-error:not(.ak-select-disabled):hover .ak-select-selector {
    border-color: #cf1322;
  }

  .ak-select-status-warning .ak-select-selector {
    border-color: #d89614;
  }

  /* Dropdown in dark mode */
  .ak-select-dropdown {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  }

  .ak-select-dropdown-content {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
  }

  .ak-select-item {
    color: rgba(255, 255, 255, 0.88) !important;
    background: #1f1f1f !important;
  }

  .ak-select-item-option-content {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-item-option:hover,
  .ak-select-item-option-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-item-option-selected {
    background: rgba(22, 119, 255, 0.2) !important;
    color: #1677ff !important;
  }

  .ak-select-item-option-selected:hover,
  .ak-select-item-option-selected.ak-select-item-option-active {
    background: rgba(22, 119, 255, 0.25) !important;
    color: #1677ff !important;
  }

  .ak-select-item-empty {
    color: rgba(255, 255, 255, 0.45);
  }

  /* Dropdown search input in dark mode */
  .ak-select-dropdown-search-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: #424242;
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-dropdown-search-input:focus {
    background: #1f1f1f;
    border-color: #1677ff;
  }

  .ak-select-dropdown-search-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
  }

  .ak-select-dropdown-footer {
    border-top-color: #424242;
  }

  .ak-select-add-btn {
    color: #1677ff;
    border-color: #424242;
  }

  .ak-select-add-btn:hover {
    border-color: #4096ff;
    background: rgba(22, 119, 255, 0.1);
  }
}

/* Class-based dark mode (for Tailwind dark mode) */
.dark .ak-select {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select:not(.ak-select-customize-input) .ak-select-selector {
  background-color: #1f1f1f;
  border-color: #424242;
}

.dark .ak-select:not(.ak-select-disabled):hover .ak-select-selector {
  border-color: #4096ff;
}

.dark .ak-select-open .ak-select-selector,
.dark .ak-select-focused .ak-select-selector {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.2);
}

.dark .ak-select-selection-placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.dark .ak-select-selection-search-input {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-selection-item {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-arrow {
  color: rgba(255, 255, 255, 0.25);
}

.dark .ak-select-clear {
  color: rgba(255, 255, 255, 0.25);
  background: #1f1f1f;
}

.dark .ak-select-clear:hover {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-dropdown {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

.dark .ak-select-dropdown-content {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
}

.dark .ak-select-item {
  color: rgba(255, 255, 255, 0.88) !important;
  background: #1f1f1f !important;
}

.dark .ak-select-item-option-content {
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-item-option:hover,
.dark .ak-select-item-option-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-item-option-selected {
  background: rgba(22, 119, 255, 0.2) !important;
  color: #1677ff !important;
}

.dark .ak-select-item-option-selected:hover,
.dark .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.25) !important;
  color: #1677ff !important;
}

.dark .ak-select-item-empty {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-dropdown-search-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: #424242;
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-dropdown-search-input:focus {
  background: #1f1f1f;
  border-color: #1677ff;
}

.dark .ak-select-dropdown-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.dark .ak-select-dropdown-footer {
  border-top-color: #424242;
}

.dark .ak-select-add-btn {
  color: #1677ff;
  border-color: #424242;
}

.dark .ak-select-add-btn:hover {
  border-color: #4096ff;
  background: rgba(22, 119, 255, 0.1);
}


/* Component: select-option */

/* Select Option Styles */
.ak-select-item {
  position: relative;
  display: block;
  min-height: 32px;
  padding: 5px 12px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ak-select-item-option {
  display: flex;
  align-items: center;
}

.ak-select-item-option-content {
  flex: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-select-item:hover:not(.ak-select-item-option-disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Selected state */
.ak-select-item-option-selected:not(.ak-select-item-option-disabled) {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  background-color: #e6f4ff;
}

.ak-select-item-option-selected:not(.ak-select-item-option-disabled):hover {
  background-color: #bae0ff;
}

/* Checkmark */
.ak-select-item-option-state {
  flex: none;
  display: flex;
  align-items: center;
  margin-inline-start: 8px;
  color: #1677ff;
}

/* Disabled state */
.ak-select-item-option-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* Option group */
.ak-select-item-group {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  cursor: default;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ak-select-item {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-item:hover:not(.ak-select-item-option-disabled) {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .ak-select-item-option-selected:not(.ak-select-item-option-disabled) {
    color: rgba(255, 255, 255, 0.88);
    background-color: rgba(22, 119, 255, 0.2);
  }

  .ak-select-item-option-selected:not(.ak-select-item-option-disabled):hover {
    background-color: rgba(22, 119, 255, 0.25);
  }

  .ak-select-item-option-disabled {
    color: rgba(255, 255, 255, 0.25);
  }

  .ak-select-item-group {
    color: rgba(255, 255, 255, 0.45);
  }
}

/* Class-based dark mode (for Tailwind dark mode) */
.dark .ak-select-item {
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-item:hover:not(.ak-select-item-option-disabled) {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ak-select-item-option-selected:not(.ak-select-item-option-disabled) {
  color: rgba(255, 255, 255, 0.88) !important;
  background-color: rgba(22, 119, 255, 0.2) !important;
}

.dark .ak-select-item-option-selected:not(.ak-select-item-option-disabled):hover {
  background-color: rgba(22, 119, 255, 0.25) !important;
}

.dark .ak-select-item-option-disabled {
  color: rgba(255, 255, 255, 0.25) !important;
}

.dark .ak-select-item-group {
  color: rgba(255, 255, 255, 0.45) !important;
}


/* Component: select-categorized */

/* Categorized Select Additional Styles */
.ak-select-categorized .ak-select-dropdown {
  min-width: 280px;
  max-width: 400px;
}

.ak-select-option-group {
  padding: 4px 0;
}

.ak-select-option-group:not(:first-child) {
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 8px;
}

.ak-select-option-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ak-select-category-icon {
  font-size: 12px;
  opacity: 0.8;
}

.ak-select-option-group-count {
  font-weight: 400;
  opacity: 0.7;
}

.ak-select-item-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.ak-select-item-option:hover,
.ak-select-item-option-highlighted {
  background: #f5f5f5;
}

.ak-select-item-option-selected {
  color: #1677ff;
  font-weight: 500;
  background: rgba(22, 119, 255, 0.06);
}

.ak-select-item-option-selected:hover,
.ak-select-item-option-selected.ak-select-item-option-highlighted {
  background: rgba(22, 119, 255, 0.1);
}

.ak-select-option-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.ak-select-item-option-selected .ak-select-option-icon {
  color: #1677ff;
}

.ak-select-item-option-content {
  flex: 1;
  min-width: 0;
}

.ak-select-item-option-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.ak-select-item-option-description {
  display: block;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-select-item-option-state {
  flex-shrink: 0;
  color: #1677ff;
  font-size: 14px;
}

.ak-select-selection-item-category {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .ak-select-categorized .ak-select-dropdown {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
  }

  .ak-select-option-group:not(:first-child) {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .ak-select-option-group-label {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-categorized .ak-select-item-option {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-categorized .ak-select-item-option:hover,
  .ak-select-categorized .ak-select-item-option-highlighted,
  .ak-select-categorized .ak-select-item-option-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-categorized .ak-select-item-option-selected {
    background: rgba(22, 119, 255, 0.2) !important;
    color: #1677ff !important;
  }

  .ak-select-categorized .ak-select-item-option-selected:hover,
  .ak-select-categorized .ak-select-item-option-selected.ak-select-item-option-active {
    background: rgba(22, 119, 255, 0.25) !important;
    color: #1677ff !important;
  }

  .ak-select-option-icon {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-item-option-description {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-selection-item-category {
    color: rgba(255, 255, 255, 0.45);
  }
}

/* Class-based dark mode (for Tailwind dark mode) */
.dark .ak-select-categorized .ak-select-dropdown {
  background: #1f1f1f !important;
  background-color: #1f1f1f !important;
}

.dark .ak-select-option-group:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.dark .ak-select-option-group-label {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-categorized .ak-select-item-option {
  color: rgba(255, 255, 255, 0.88) !important;
  background: #1f1f1f !important;
}

.dark .ak-select-categorized .ak-select-item-option:hover,
.dark .ak-select-categorized .ak-select-item-option-highlighted,
.dark .ak-select-categorized .ak-select-item-option-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-categorized .ak-select-item-option-selected {
  background: rgba(22, 119, 255, 0.2) !important;
  color: #1677ff !important;
}

.dark .ak-select-categorized .ak-select-item-option-selected:hover,
.dark .ak-select-categorized .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.25) !important;
  color: #1677ff !important;
}

.dark .ak-select-option-icon {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-item-option-description {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-selection-item-category {
  color: rgba(255, 255, 255, 0.45);
}


/* Component: select-multi */

/* Multi-Select Additional Styles */
.ak-select-multiple .ak-select-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  min-height: 32px;
  padding: 1px 24px 1px 4px;
}

.ak-select-selection-overflow {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  align-items: center;
}

.ak-select-selection-item {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 8px);
  height: 24px;
  padding: 0 4px 0 8px;
  line-height: 22px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  cursor: default;
  transition: all 0.2s;
  user-select: none;
  flex-shrink: 0;
}

.ak-select-selection-item-content {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-inline-end: 4px;
  font-size: 13px;
  min-width: 20px;
  max-width: 150px;
}

.ak-select-selection-item-remove {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.45);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-select-selection-item-remove:hover {
  color: rgba(0, 0, 0, 0.75);
}

.ak-select-multiple .ak-select-selection-search {
  flex: 1;
  min-width: 4px;
  margin: 0;
}

.ak-select-multiple .ak-select-selection-search-input {
  width: 100%;
  min-width: 4px;
}

.ak-select-multiple .ak-select-selection-placeholder {
  position: absolute;
  inset-inline-start: 12px;
}

/* Option items */
.ak-select-multiple .ak-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ak-select-multiple .ak-select-item-option-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-select-multiple .ak-select-item-option-state {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #1677ff;
}

/* Active/highlighted option */
.ak-select-multiple .ak-select-item-option:hover,
.ak-select-multiple .ak-select-item-option-active:not(.ak-select-item-option-disabled) {
  background-color: #f5f5f5;
}

.ak-select-multiple .ak-select-item-option-selected {
  color: #1677ff;
  font-weight: 500;
  background: rgba(22, 119, 255, 0.08);
}

.ak-select-multiple .ak-select-item-option-selected:hover,
.ak-select-multiple .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.12);
}

/* Empty state */
.ak-select-multiple .ak-select-item-empty {
  padding: 16px 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

/* Size variants for multiple */
.ak-select-multiple.ak-select-sm .ak-select-selector {
  min-height: 24px;
}

.ak-select-multiple.ak-select-sm .ak-select-selection-item {
  height: 18px;
  line-height: 16px;
  font-size: 12px;
}

.ak-select-multiple.ak-select-lg .ak-select-selector {
  min-height: 40px;
}

.ak-select-multiple.ak-select-lg .ak-select-selection-item {
  height: 28px;
  line-height: 26px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ak-select-multiple .ak-select-dropdown {
    background: #1f1f1f !important;
    border-color: #424242;
  }

  .ak-select-multiple .ak-select-dropdown-content {
    background: #1f1f1f !important;
  }

  .ak-select-multiple .ak-select-selection-item {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-multiple .ak-select-selection-item-remove {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-multiple .ak-select-selection-item-remove:hover {
    color: rgba(255, 255, 255, 0.75);
  }

  .ak-select-multiple .ak-select-item {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-multiple .ak-select-item-option:hover,
  .ak-select-multiple .ak-select-item-option-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .ak-select-multiple .ak-select-item-option-selected {
    background: rgba(22, 119, 255, 0.2) !important;
    color: #1677ff !important;
  }

  .ak-select-multiple .ak-select-item-option-selected:hover,
  .ak-select-multiple .ak-select-item-option-selected.ak-select-item-option-active {
    background: rgba(22, 119, 255, 0.25) !important;
    color: #1677ff !important;
  }

  .ak-select-multiple .ak-select-item-option-content {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-multiple .ak-select-item-option-selected .ak-select-item-option-content {
    color: #1677ff;
  }

  .ak-select-multiple .ak-select-item-empty {
    color: rgba(255, 255, 255, 0.45);
  }
}

/* Class-based dark mode (for Tailwind dark mode) */
.dark .ak-select-multiple .ak-select-dropdown {
  background: #1f1f1f !important;
  border-color: #424242;
}

.dark .ak-select-multiple .ak-select-dropdown-content {
  background: #1f1f1f !important;
}

.dark .ak-select-multiple .ak-select-selection-item {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-multiple .ak-select-selection-item-remove {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-multiple .ak-select-selection-item-remove:hover {
  color: rgba(255, 255, 255, 0.75);
}

.dark .ak-select-multiple .ak-select-item {
  color: rgba(255, 255, 255, 0.88) !important;
  background: #1f1f1f !important;
}

.dark .ak-select-multiple .ak-select-item-option:hover,
.dark .ak-select-multiple .ak-select-item-option-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-multiple .ak-select-item-option-selected {
  background: rgba(22, 119, 255, 0.2) !important;
  color: #1677ff !important;
}

.dark .ak-select-multiple .ak-select-item-option-selected:hover,
.dark .ak-select-multiple .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.25) !important;
  color: #1677ff !important;
}

.dark .ak-select-multiple .ak-select-item-option-content {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-multiple .ak-select-item-option-selected .ak-select-item-option-content {
  color: #1677ff;
}

.dark .ak-select-multiple .ak-select-item-empty {
  color: rgba(255, 255, 255, 0.45);
}


/* Component: select-searchable */

/* Searchable Select Styles */
.ak-select-searchable .ak-select-dropdown {
  min-width: 220px;
  max-height: 300px;
}

.ak-select-searchable .ak-select-dropdown-content {
  max-height: 256px;
  overflow-y: auto;
}

/* Option item base styles */
.ak-select-searchable .ak-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ak-select-searchable .ak-select-item-option:hover,
.ak-select-searchable .ak-select-item-option-active {
  background: #f5f5f5;
}

.ak-select-searchable .ak-select-item-option-selected {
  color: #1677ff;
  font-weight: 500;
  background: rgba(22, 119, 255, 0.08);
}

.ak-select-searchable .ak-select-item-option-selected:hover,
.ak-select-searchable .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.12);
}

/* Icon styles */
.ak-select-searchable .ak-select-item-icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 14px;
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
}

.ak-select-searchable .ak-select-item-option-selected .ak-select-item-icon {
  color: #1677ff;
}

/* Content layout */
.ak-select-searchable .ak-select-item-option-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ak-select-searchable .ak-select-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
}

.ak-select-searchable .ak-select-item-description {
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Checkmark */
.ak-select-searchable .ak-select-item-option-state {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #1677ff;
}

/* Empty state */
.ak-select-searchable .ak-select-item-empty {
  padding: 16px 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ak-select-searchable .ak-select-dropdown {
    background: #1f1f1f;
    border-color: #424242;
  }

  .ak-select-searchable .ak-select-item {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-searchable .ak-select-item-option:hover,
  .ak-select-searchable .ak-select-item-option-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-searchable .ak-select-item-option-selected {
    background: rgba(22, 119, 255, 0.2);
    color: #1677ff;
  }

  .ak-select-searchable .ak-select-item-option-selected:hover,
  .ak-select-searchable .ak-select-item-option-selected.ak-select-item-option-active {
    background: rgba(22, 119, 255, 0.25) !important;
    color: #1677ff;
  }

  .ak-select-searchable .ak-select-item-icon {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-searchable .ak-select-item-description {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-searchable .ak-select-item-empty {
    color: rgba(255, 255, 255, 0.45);
  }

  .ak-select-searchable .ak-select-item-label {
    color: rgba(255, 255, 255, 0.88);
  }

  .ak-select-searchable .ak-select-item-option-selected .ak-select-item-label {
    color: #1677ff;
  }
}

/* Class-based dark mode (for Tailwind dark mode) */
.dark .ak-select-searchable .ak-select-dropdown {
  background: #1f1f1f !important;
  border-color: #424242;
}

.dark .ak-select-searchable .ak-select-item {
  color: rgba(255, 255, 255, 0.88) !important;
  background: #1f1f1f !important;
}

.dark .ak-select-searchable .ak-select-item-option:hover,
.dark .ak-select-searchable .ak-select-item-option-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.dark .ak-select-searchable .ak-select-item-option-selected {
  background: rgba(22, 119, 255, 0.2) !important;
  color: #1677ff !important;
}

.dark .ak-select-searchable .ak-select-item-option-selected:hover,
.dark .ak-select-searchable .ak-select-item-option-selected.ak-select-item-option-active {
  background: rgba(22, 119, 255, 0.25) !important;
  color: #1677ff !important;
}

.dark .ak-select-searchable .ak-select-item-icon {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-searchable .ak-select-item-description {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-searchable .ak-select-item-empty {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-select-searchable .ak-select-item-label {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-select-searchable .ak-select-item-option-selected .ak-select-item-label {
  color: #1677ff;
}


/* Component: select-country */

/* Country Select Styles */
.ak-select-dropdown-country .country-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
}

.ak-select-dropdown-country .country-label {
  flex: 1;
}

.ak-select-dropdown-country .country-code {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

.ak-select-dropdown-country .ak-select-option-group-label {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.45);
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.ak-select-dropdown-country .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ak-select-country-trigger .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}


/* Component: slider */

/* Slider Styles */
.ak-slider {
  position: relative;
  height: 12px;
  margin: 10px 6px;
  padding: 4px 0;
  cursor: pointer;
  touch-action: none;
}

.ak-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  transition: background 0.2s;
}

.ak-slider:hover .ak-slider-rail {
  background: rgba(0, 0, 0, 0.06);
}

.ak-slider-track {
  position: absolute;
  height: 100%;
  background: #1677ff;
  border-radius: 2px;
  transition: background 0.2s;
}

.ak-slider:hover .ak-slider-track {
  background: #4096ff;
}

.ak-slider-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: #fff;
  border: 2px solid #1677ff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: grab;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  transform: translateX(-50%);
}

.ak-slider-handle:hover,
.ak-slider-handle:focus {
  border-color: #4096ff;
  box-shadow: 0 0 0 5px rgba(22, 119, 255, 0.12);
  outline: none;
}

.ak-slider-handle:active {
  cursor: grabbing;
  border-color: #0958d9;
  box-shadow: 0 0 0 5px rgba(22, 119, 255, 0.2);
}

/* Tooltip */
.ak-slider-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  white-space: nowrap;
}

.ak-slider-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
}

/* Vertical */
.ak-slider-vertical {
  width: 12px;
  height: 100%;
  min-height: 100px;
  margin: 6px 10px;
  padding: 0 4px;
}

.ak-slider-vertical .ak-slider-rail {
  width: 4px;
  height: 100%;
}

.ak-slider-vertical .ak-slider-track {
  width: 100%;
  height: auto;
  bottom: 0;
}

.ak-slider-vertical .ak-slider-handle {
  margin-top: 0;
  margin-left: -5px;
  transform: translateY(50%);
}

/* Disabled */
.ak-slider-disabled {
  cursor: not-allowed;
}

.ak-slider-disabled .ak-slider-rail {
  background: rgba(0, 0, 0, 0.04);
}

.ak-slider-disabled .ak-slider-track {
  background: rgba(0, 0, 0, 0.25);
}

.ak-slider-disabled .ak-slider-handle {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
  cursor: not-allowed;
}

/* Marks */
.ak-slider-marks {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  font-size: 12px;
}

/* Dark Mode */
.dark .ak-slider-rail,
[data-theme="dark"] .ak-slider-rail {
  background: rgba(255, 255, 255, 0.08);
}

.dark .ak-slider:hover .ak-slider-rail,
[data-theme="dark"] .ak-slider:hover .ak-slider-rail {
  background: rgba(255, 255, 255, 0.12);
}

.dark .ak-slider-handle,
[data-theme="dark"] .ak-slider-handle {
  background: #1f1f1f;
}

.dark .ak-slider-disabled .ak-slider-track,
[data-theme="dark"] .ak-slider-disabled .ak-slider-track {
  background: rgba(255, 255, 255, 0.25);
}

.dark .ak-slider-disabled .ak-slider-handle,
[data-theme="dark"] .ak-slider-disabled .ak-slider-handle {
  border-color: rgba(255, 255, 255, 0.25);
}


/* Component: switch */

/* Switch Base Styles */
.ak-switch {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 22px;
  list-style: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  height: 22px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.ak-switch:hover:not(.ak-switch-disabled) {
  background: rgba(0, 0, 0, 0.45);
}

/* Handle */
.ak-switch-handle {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  transition: all 0.2s ease-in-out;
}

.ak-switch-handle::before {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  background-color: #fff;
  border-radius: 9px;
  box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
  transition: all 0.2s ease-in-out;
  content: '';
}

/* Inner text */
.ak-switch-inner {
  display: flex;
  height: 100%;
  padding-inline-start: 24px;
  padding-inline-end: 9px;
  transition: all 0.2s;
}

.ak-switch-inner-checked,
.ak-switch-inner-unchecked {
  display: block;
  color: #fff;
  font-size: 12px;
  transition: margin-inline-start 0.2s, margin-inline-end 0.2s;
  pointer-events: none;
}

.ak-switch-inner-checked {
  margin-inline-start: calc(-100% + 22px - 48px);
  margin-inline-end: calc(100% - 22px + 48px);
}

.ak-switch-inner-unchecked {
  margin-top: -22px;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* Checked state */
.ak-switch-checked {
  background: #1677ff;
}

.ak-switch-checked:hover:not(.ak-switch-disabled) {
  background: #4096ff;
}

.ak-switch-checked .ak-switch-handle {
  inset-inline-start: calc(100% - 18px - 2px);
}

.ak-switch-checked .ak-switch-inner {
  padding-inline-start: 9px;
  padding-inline-end: 24px;
}

.ak-switch-checked .ak-switch-inner-checked {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.ak-switch-checked .ak-switch-inner-unchecked {
  margin-inline-start: calc(100% - 22px + 48px);
  margin-inline-end: calc(-100% + 22px - 48px);
}

/* Small size */
.ak-switch-small {
  min-width: 28px;
  height: 16px;
  line-height: 16px;
}

.ak-switch-small .ak-switch-handle {
  width: 12px;
  height: 12px;
}

.ak-switch-small .ak-switch-inner {
  padding-inline-start: 18px;
  padding-inline-end: 6px;
  font-size: 12px;
}

.ak-switch-small .ak-switch-inner-checked,
.ak-switch-small .ak-switch-inner-unchecked {
  font-size: 12px;
}

.ak-switch-small.ak-switch-checked .ak-switch-handle {
  inset-inline-start: calc(100% - 12px - 2px);
}

.ak-switch-small.ak-switch-checked .ak-switch-inner {
  padding-inline-start: 6px;
  padding-inline-end: 18px;
}

/* Disabled */
.ak-switch-disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Loading */
.ak-switch-loading {
  cursor: default;
  opacity: 0.65;
}

.ak-switch-loading-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  color: rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%);
}

.ak-switch-checked .ak-switch-loading-icon {
  color: #1677ff;
}

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

.anticon-spin {
  animation: antRotate 1s infinite linear;
}


/* Component: upload */

/* Upload Base Styles */
.ak-upload-wrapper {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
}

/* Drag area */
.ak-upload-drag {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.ak-upload-drag:hover {
  border-color: #1677ff;
}

.ak-upload-drag-hover {
  border-color: #1677ff;
  background: rgba(22, 119, 255, 0.04);
}

.ak-upload-drag .ak-upload {
  padding: 24px;
  display: block;
}

.ak-upload-drag-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ak-upload-drag-icon {
  margin-bottom: 16px;
  color: #1677ff;
  font-size: 48px;
}

.ak-upload-drag-icon svg {
  color: #1677ff;
}

.ak-upload-drag-icon i {
  font-size: 48px;
}

.ak-upload-text {
  margin: 0 0 4px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
}

.ak-upload-hint {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin: 0;
}

/* Hidden input */
.ak-upload-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Disabled */
.ak-upload-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ak-upload-disabled .ak-upload-input {
  cursor: not-allowed;
}

/* File list */
.ak-upload-list {
  margin-top: 16px;
}

.ak-upload-list-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.ak-upload-list-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ak-upload-list-item-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.ak-upload-list-item-icon {
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
}

.ak-upload-list-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.88);
}

.ak-upload-list-item-size {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.ak-upload-list-item-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.ak-upload-list-item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-upload-list-item-action:hover {
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

/* Status variants */
.ak-upload-list-item-done {
  border-color: #52c41a;
  background: rgba(82, 196, 26, 0.04);
}

.ak-upload-list-item-done .ak-upload-list-item-icon {
  color: #52c41a;
}

.ak-upload-list-item-uploading {
  border-color: #1677ff;
}

.ak-upload-list-item-error {
  border-color: #ff4d4f;
  background: rgba(255, 77, 79, 0.04);
}

.ak-upload-list-item-error .ak-upload-list-item-name {
  color: #ff4d4f;
}

.ak-upload-list-item-error-text {
  display: block;
  width: 100%;
  margin-top: 4px;
  color: #ff4d4f;
  font-size: 12px;
}

/* Progress bar */
.ak-upload-list-item-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 12px 4px;
}

.ak-upload-list-item-progress .ak-progress-line {
  height: 2px;
}

.ak-upload-list-item-progress .ak-progress-bg {
  height: 2px;
  background: #1677ff;
  border-radius: 1px;
  transition: width 0.3s;
}


/* Component: upload-button */

/* Upload button variant */
.ak-upload-wrapper-button .ak-upload-select {
  display: inline-block;
  cursor: pointer;
}

.ak-upload-wrapper-button .ak-upload-input {
  display: none;
}

.ak-upload-wrapper-button .ak-btn i {
  margin-right: 8px;
}

.ak-upload-wrapper-button .ak-btn svg {
  margin-right: 8px;
  vertical-align: -0.125em;
}


/* Component: avatar */

/* Avatar Base Styles */
.ak-avatar {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

.ak-avatar-image {
  background: transparent;
}

.ak-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shape variants */
.ak-avatar-square {
  border-radius: 6px;
}

/* Size variants */
.ak-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.ak-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* Text styling */
.ak-avatar > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon styling */
.ak-avatar svg {
  display: block;
  font-size: 18px;
}

.ak-avatar-sm svg {
  font-size: 14px;
}

.ak-avatar-lg svg {
  font-size: 24px;
}


/* Component: avatar-group */

/* Avatar Group Styles */
.ak-avatar-group {
  display: inline-flex;
  align-items: center;
}

.ak-avatar-group .ak-avatar {
  border: 2px solid #fff;
}

.ak-avatar-group .ak-avatar:not(:first-child) {
  margin-inline-start: -8px;
}

.ak-avatar-group-sm .ak-avatar:not(:first-child) {
  margin-inline-start: -6px;
}

.ak-avatar-group-lg .ak-avatar:not(:first-child) {
  margin-inline-start: -10px;
}

/* Overflow popover */
.ak-avatar-group-popover {
  cursor: pointer;
  color: #f56a00;
  font-size: 12px;
  font-weight: 600;
}


/* Component: badge */

/* Badge Base Styles */
.ak-badge {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: inline-block;
  width: fit-content;
}

.ak-badge-content {
  display: inline-block;
}

/* Count badge */
.ak-badge-count {
  z-index: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  background: #ff4d4f;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}

.ak-badge-count-hidden {
  display: none;
}

/* Small size */
.ak-badge-count-sm {
  min-width: 14px;
  height: 14px;
  padding: 0;
  font-size: 10px;
  line-height: 14px;
  border-radius: 7px;
}

/* Dot badge */
.ak-badge-dot {
  z-index: auto;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: #ff4d4f;
  border-radius: 100%;
  box-shadow: 0 0 0 1px #fff;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}

/* Status badge (inline) */
.ak-badge-status {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
  vertical-align: baseline;
}

.ak-badge-status .ak-badge-dot {
  position: relative;
  top: auto;
  inset-inline-end: auto;
  transform: none;
  margin-inline-end: 8px;
}

.ak-badge-status-text {
  margin-inline-start: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
}

/* Status colors */
.ak-badge-status-success .ak-badge-dot,
.ak-badge-status-success.ak-badge-dot {
  background: #52c41a;
}

.ak-badge-status-processing .ak-badge-dot,
.ak-badge-status-processing.ak-badge-dot {
  background: #1677ff;
  position: relative;
}

.ak-badge-status-processing .ak-badge-dot::after {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #1677ff;
  border-radius: 50%;
  animation: antStatusProcessing 1.2s infinite ease-in-out;
  content: '';
}

@keyframes antStatusProcessing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.ak-badge-status-default .ak-badge-dot,
.ak-badge-status-default.ak-badge-dot {
  background: #d9d9d9;
}

.ak-badge-status-error .ak-badge-dot,
.ak-badge-status-error.ak-badge-dot {
  background: #ff4d4f;
}

.ak-badge-status-warning .ak-badge-dot,
.ak-badge-status-warning.ak-badge-dot {
  background: #faad14;
}


/* Component: card */

/* Card Base Styles */
.ak-card {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  background: #fff;
  border-radius: 8px;
}

.ak-card-bordered {
  border: 1px solid #f0f0f0;
}

.ak-card-hoverable {
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ak-card-hoverable:hover {
  border-color: transparent;
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
              0 3px 6px 0 rgba(0, 0, 0, 0.12),
              0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

/* Card Cover */
.ak-card-cover {
  margin-top: -1px;
  margin-inline: -1px;
  overflow: hidden;
}

.ak-card-cover > * {
  display: block;
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.ak-card-cover img {
  border-radius: 8px 8px 0 0;
  object-fit: cover;
  width: 100%;
}

/* Cover Height Variants */
.ak-card-cover-half {
  height: 200px;
}

.ak-card-cover-half img {
  height: 100%;
}

.ak-card-cover-third {
  height: 120px;
}

.ak-card-cover-third img {
  height: 100%;
}

/* Background Image Card */
.ak-card-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  overflow: hidden;
}

.ak-card-bg-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

.ak-card-head-transparent {
  background: transparent;
  border-bottom: none;
  color: #fff;
}

.ak-card-head-transparent .ak-card-head-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.ak-card-bg-image .ak-card-body {
  flex: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.ak-card-actions-transparent {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.ak-card-actions-transparent > li {
  color: rgba(255,255,255,0.85);
}

/* Card Head */
.ak-card-head {
  min-height: 56px;
  margin-bottom: -1px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 8px 8px 0 0;
}

.ak-card-head-wrapper {
  display: flex;
  align-items: center;
}

.ak-card-head-title {
  display: inline-block;
  flex: 1;
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ak-card-extra {
  margin-inline-start: auto;
  padding: 16px 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: normal;
  font-size: 14px;
}

/* Card Body */
.ak-card-body {
  padding: 24px;
}

/* Small variant */
.ak-card-small > .ak-card-head {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.ak-card-small > .ak-card-head-title {
  padding: 8px 0;
}

.ak-card-small > .ak-card-body {
  padding: 12px;
}

/* Card Actions */
.ak-card-actions {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 8px 8px;
}

.ak-card-actions > li {
  flex: 1;
  margin: 12px 0;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
}

.ak-card-actions > li:not(:last-child) {
  border-inline-end: 1px solid #f0f0f0;
}

.ak-card-actions > li > span {
  display: inline-block;
  min-width: 32px;
  font-size: 14px;
  line-height: 1.5714285714285714;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-card-actions > li > span:hover {
  color: #1677ff;
}

/* Loading State */
.ak-card-loading .ak-card-body {
  user-select: none;
}

.ak-card-loading-content {
  overflow: hidden;
}

.ak-card-loading-block {
  height: 14px;
  margin: 4px 0;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  border-radius: 4px;
  animation: ak-card-loading 1.4s ease infinite;
}

@keyframes ak-card-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Dark Mode Support */
.dark .ak-card,
[data-theme="dark"] .ak-card {
  color: rgba(255, 255, 255, 0.85);
  background: #1f1f1f;
}

.dark .ak-card-bordered,
[data-theme="dark"] .ak-card-bordered {
  border-color: #303030;
}

.dark .ak-card-hoverable:hover,
[data-theme="dark"] .ak-card-hoverable:hover {
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64),
              0 3px 6px 0 rgba(0, 0, 0, 0.48),
              0 5px 12px 4px rgba(0, 0, 0, 0.36);
}

.dark .ak-card-head,
[data-theme="dark"] .ak-card-head {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: #303030;
}

.dark .ak-card-extra,
[data-theme="dark"] .ak-card-extra {
  color: rgba(255, 255, 255, 0.85);
}

.dark .ak-card-actions,
[data-theme="dark"] .ak-card-actions {
  background: #1f1f1f;
  border-top-color: #303030;
}

.dark .ak-card-actions > li,
[data-theme="dark"] .ak-card-actions > li {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-card-actions > li:not(:last-child),
[data-theme="dark"] .ak-card-actions > li:not(:last-child) {
  border-inline-end-color: #303030;
}

.dark .ak-card-actions > li > span:hover,
[data-theme="dark"] .ak-card-actions > li > span:hover {
  color: #177ddc;
}

.dark .ak-card-loading-block,
[data-theme="dark"] .ak-card-loading-block {
  background: linear-gradient(90deg, #262626 25%, #303030 37%, #262626 63%);
  background-size: 400% 100%;
}


/* Component: carousel */

/* Carousel Base Styles */
.ak-carousel {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
}

.ak-carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.ak-carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.ak-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 200px;
}

.ak-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade transition */
.ak-carousel-fade .ak-carousel-track {
  transform: none !important;
}

.ak-carousel-fade .ak-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.ak-carousel-fade .ak-carousel-slide.active {
  position: relative;
  opacity: 1;
}

/* Navigation arrows */
.ak-carousel-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
  z-index: 1;
}

.ak-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
  opacity: 0;
}

.ak-carousel:hover .ak-carousel-arrow {
  opacity: 1;
}

.ak-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.ak-carousel-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.ak-carousel-arrow svg {
  width: 14px;
  height: 14px;
}

/* Dot indicators */
.ak-carousel-dots {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  z-index: 1;
}

.ak-carousel-dots.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ak-carousel-dots.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.ak-carousel-dots.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.ak-carousel-dots.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.ak-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.ak-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.ak-carousel-dot-active {
  width: 24px;
  border-radius: 4px;
  background: #fff;
}

/* Vertical carousel */
.ak-carousel-vertical .ak-carousel-track {
  flex-direction: column;
}

.ak-carousel-vertical .ak-carousel-track {
  transform: translateY(calc(-100% * var(--current, 0)));
}

.ak-carousel-vertical .ak-carousel-arrows {
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 8px 0;
  height: 100%;
}

.ak-carousel-vertical .ak-carousel-arrow-prev svg {
  transform: rotate(90deg);
}

.ak-carousel-vertical .ak-carousel-arrow-next svg {
  transform: rotate(90deg);
}

/* Dragging cursor */
.ak-carousel-container[style*="cursor"] {
  cursor: grabbing;
}


/* Component: change-list */

/* Change List */
.ak-change-list {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  background: var(--color-surface, #fff);
}

.ak-change-list-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-on-surface, #1e293b);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface-alt, #f8fafc);
}

.ak-change-list-items {
  padding: 0;
}

/* Change List Item */
.ak-change-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: 0.8125rem;
}

.ak-change-item:last-child {
  border-bottom: none;
}

/* Change badges */
.ak-change-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.ak-change-badge-added {
  background: #dcfce7;
  color: #166534;
}

.ak-change-badge-removed {
  background: #fee2e2;
  color: #991b1b;
}

.ak-change-badge-modified {
  background: #dbeafe;
  color: #1e40af;
}

/* Change content */
.ak-change-name {
  font-weight: 500;
  color: var(--color-on-surface, #1e293b);
}

.ak-change-description {
  color: var(--color-muted, #64748b);
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Dark mode */
[data-theme="dark"] .ak-change-list {
  background: var(--color-surface-dark, #1e293b);
  border-color: var(--color-border-dark, #334155);
}

[data-theme="dark"] .ak-change-list-title {
  background: var(--color-surface-alt-dark, #0f172a);
  border-color: var(--color-border-dark, #334155);
  color: var(--color-on-surface-dark, #f1f5f9);
}

[data-theme="dark"] .ak-change-item {
  border-color: var(--color-border-dark, #334155);
}

[data-theme="dark"] .ak-change-badge-added {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme="dark"] .ak-change-badge-removed {
  background: #7f1d1d;
  color: #fca5a5;
}

[data-theme="dark"] .ak-change-badge-modified {
  background: #1e3a5f;
  color: #93c5fd;
}


/* Component: collapse */

/* Collapse Styles */
.ak-collapse {
  background: #fff;
  border-radius: 8px;
}

.ak-collapse-bordered {
  border: 1px solid #d9d9d9;
}

.ak-collapse-ghost {
  background: transparent;
  border: none;
}

.ak-collapse-ghost .ak-collapse-item {
  border: none;
}

/* Dark Mode */
.dark .ak-collapse,
[data-theme="dark"] .ak-collapse {
  background: #1f1f1f;
}

.dark .ak-collapse-bordered,
[data-theme="dark"] .ak-collapse-bordered {
  border-color: #303030;
}

.dark .ak-collapse-ghost,
[data-theme="dark"] .ak-collapse-ghost {
  background: transparent;
}


/* Component: collapse-panel */

/* Collapse Panel Styles */
.ak-collapse-item {
  border-bottom: 1px solid #d9d9d9;
}

.ak-collapse-item:last-child {
  border-bottom: none;
}

.ak-collapse-item-disabled {
  cursor: not-allowed;
}

.ak-collapse-item-disabled .ak-collapse-header {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.ak-collapse-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  transition: all 0.2s;
}

.ak-collapse-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ak-collapse-header-active {
  background: rgba(0, 0, 0, 0.02);
}

.ak-collapse-arrow {
  display: flex;
  align-items: center;
  margin-right: 12px;
  transition: transform 0.2s;
}

.ak-collapse-arrow svg {
  width: 12px;
  height: 12px;
}

.ak-collapse-arrow-active {
  transform: rotate(90deg);
}

.ak-collapse-header-text {
  flex: 1;
  font-weight: 500;
}

.ak-collapse-extra {
  margin-left: 16px;
}

.ak-collapse-content {
  overflow: hidden;
}

.ak-collapse-content-box {
  padding: 16px;
  color: rgba(0, 0, 0, 0.65);
}

/* Dark Mode */
.dark .ak-collapse-item,
[data-theme="dark"] .ak-collapse-item {
  border-bottom-color: #303030;
}

.dark .ak-collapse-header,
[data-theme="dark"] .ak-collapse-header {
  color: rgba(255, 255, 255, 0.85);
}

.dark .ak-collapse-header:hover,
.dark .ak-collapse-header-active,
[data-theme="dark"] .ak-collapse-header:hover,
[data-theme="dark"] .ak-collapse-header-active {
  background: rgba(255, 255, 255, 0.04);
}

.dark .ak-collapse-item-disabled .ak-collapse-header,
[data-theme="dark"] .ak-collapse-item-disabled .ak-collapse-header {
  color: rgba(255, 255, 255, 0.25);
}

.dark .ak-collapse-content-box,
[data-theme="dark"] .ak-collapse-content-box {
  color: rgba(255, 255, 255, 0.65);
}


/* Component: datatable */

/* DataTable Container */
.ak-datatable {
  width: 100%;
  background: var(--color-bg-elevated, #18181b);
  border: 1px solid var(--color-border, #27272a);
  border-radius: 12px;
  overflow: hidden;
}

/* Toolbar */
.ak-datatable-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--color-border, #27272a);
  background: var(--color-bg-subtle, #0f0f10);
}

.ak-datatable-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.ak-datatable-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  color: var(--color-text, #fafafa);
  background: var(--color-bg-elevated, #18181b);
  border: 1px solid var(--color-border, #27272a);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ak-datatable-search-input:focus {
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.ak-datatable-search-input::placeholder {
  color: var(--color-text-muted, #71717a);
}

.ak-datatable-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted, #71717a);
  pointer-events: none;
}

.ak-datatable-info {
  font-size: 13px;
  color: var(--color-text-muted, #71717a);
}

/* Table Container */
.ak-datatable-container {
  overflow-x: auto;
}

.ak-datatable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Header */
.ak-datatable-head {
  background: var(--color-bg-subtle, #0f0f10);
}

.ak-datatable-cell-header {
  padding: 12px 16px;
  font-weight: 600;
  text-align: left;
  color: var(--color-text, #fafafa);
  border-bottom: 1px solid var(--color-border, #27272a);
  white-space: nowrap;
}

.ak-datatable-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.ak-datatable-sortable:hover {
  background: var(--color-bg-elevated, #18181b);
}

.ak-datatable-sorted {
  color: var(--color-primary, #a855f7);
}

.ak-datatable-header-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ak-datatable-sort-icon {
  display: inline-flex;
  align-items: center;
}

.ak-datatable-sort-icon svg {
  width: 14px;
  height: 14px;
}

.ak-datatable-sort-neutral {
  color: var(--color-text-muted, #71717a);
}

.ak-datatable-sort-asc,
.ak-datatable-sort-desc {
  color: var(--color-primary, #a855f7);
}

/* Body */
.ak-datatable-body {
  background: var(--color-bg-elevated, #18181b);
}

.ak-datatable-row {
  transition: background 0.2s;
}

.ak-datatable-row:hover {
  background: var(--color-bg-subtle, #0f0f10);
}

.ak-datatable-row-selected {
  background: rgba(168, 85, 247, 0.1) !important;
}

.ak-datatable-row-clickable {
  cursor: pointer;
}

.ak-datatable-row-clickable:hover {
  background: rgba(168, 85, 247, 0.05);
}

.ak-datatable-cell {
  padding: 12px 16px;
  color: var(--color-text, #e4e4e7);
  border-bottom: 1px solid var(--color-border, #27272a);
}

.ak-datatable-row:last-child .ak-datatable-cell {
  border-bottom: none;
}

.ak-datatable-cell-checkbox {
  width: 40px;
  text-align: center;
}

.ak-datatable-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary, #a855f7);
}

.ak-datatable-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-muted, #71717a);
}

/* Footer / Pagination */
.ak-datatable-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, #27272a);
  background: var(--color-bg-subtle, #0f0f10);
}

.ak-datatable-page-info {
  font-size: 13px;
  color: var(--color-text-muted, #71717a);
}

.ak-datatable-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ak-datatable-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-bg-elevated, #18181b);
  border: 1px solid var(--color-border, #27272a);
  border-radius: 6px;
  color: var(--color-text, #e4e4e7);
  cursor: pointer;
  transition: all 0.2s;
}

.ak-datatable-page-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle, #27272a);
  border-color: var(--color-primary, #a855f7);
}

.ak-datatable-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ak-datatable-page-btn svg {
  width: 16px;
  height: 16px;
}

.ak-datatable-page-display {
  padding: 0 12px;
  font-size: 13px;
  color: var(--color-text-muted, #a1a1aa);
}

/* Responsive */
@media (max-width: 640px) {
  .ak-datatable-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ak-datatable-search {
    max-width: none;
  }

  .ak-datatable-footer {
    flex-direction: column;
    gap: 12px;
  }

  .ak-datatable-page-info {
    text-align: center;
  }
}

/* Size variants */
.ak-datatable-sm .ak-datatable-cell,
.ak-datatable-sm .ak-datatable-cell-header {
  padding: 8px 12px;
  font-size: 13px;
}

.ak-datatable-lg .ak-datatable-cell,
.ak-datatable-lg .ak-datatable-cell-header {
  padding: 16px 20px;
  font-size: 15px;
}

/* Striped variant */
.ak-datatable-striped .ak-datatable-row:nth-child(even) {
  background: var(--color-bg-subtle, #0f0f10);
}

.ak-datatable-striped .ak-datatable-row:nth-child(even):hover {
  background: rgba(168, 85, 247, 0.05);
}


/* Component: empty */

/* Empty Styles */
.ak-empty {
  margin: 0 8px;
  padding: 32px 0;
  text-align: center;
}

.ak-empty-image {
  height: 100px;
  margin-bottom: 8px;
}

.ak-empty-image img,
.ak-empty-image svg {
  height: 100%;
  margin: auto;
}

.ak-empty-image-default svg {
  max-width: 184px;
}

.ak-empty-img-ellipse {
  fill: #f5f5f5;
}

.ak-empty-img-path-1 {
  fill: #aeb8c2;
}

.ak-empty-img-path-2 {
  fill: url(#linearGradient-1);
}

.ak-empty-img-path-3 {
  fill: #f5f5f7;
}

.ak-empty-img-path-4 {
  fill: #dce0e6;
}

.ak-empty-img-path-5 {
  fill: #dce0e6;
}

.ak-empty-img-group {
  fill: #fff;
}

.ak-empty-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
}

.ak-empty-footer {
  margin-top: 16px;
}

/* Small variant */
.ak-empty-small {
  margin: 8px 0;
  padding: 0;
}

.ak-empty-small .ak-empty-image {
  height: 35px;
}

/* Dark Mode */
.dark .ak-empty-description,
[data-theme="dark"] .ak-empty-description {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-empty-img-ellipse,
[data-theme="dark"] .ak-empty-img-ellipse {
  fill: #262626;
}

.dark .ak-empty-img-path-1,
[data-theme="dark"] .ak-empty-img-path-1 {
  fill: #434343;
}

.dark .ak-empty-img-path-3,
[data-theme="dark"] .ak-empty-img-path-3 {
  fill: #262626;
}

.dark .ak-empty-img-path-4,
.dark .ak-empty-img-path-5,
[data-theme="dark"] .ak-empty-img-path-4,
[data-theme="dark"] .ak-empty-img-path-5 {
  fill: #434343;
}

.dark .ak-empty-img-group,
[data-theme="dark"] .ak-empty-img-group {
  fill: #262626;
}


/* Component: image */

/* Image Styles */
.ak-image {
  position: relative;
  display: inline-block;
}

.ak-image-img {
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.3s;
}

.ak-image-img.ak-image-loaded {
  opacity: 1;
}

.ak-image-previewable {
  cursor: pointer;
}

/* Mask */
.ak-image-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.ak-image:hover .ak-image-mask {
  opacity: 1;
}

.ak-image-mask-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.ak-image-mask-info svg {
  width: 24px;
  height: 24px;
}

/* Placeholder */
.ak-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.ak-image-placeholder svg {
  width: 48px;
  height: 48px;
  color: #d9d9d9;
  animation: ak-image-pulse 1.5s ease-in-out infinite;
}

@keyframes ak-image-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Error */
.ak-image-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.ak-image-error-content svg {
  width: 48px;
  height: 48px;
  color: #d9d9d9;
}

/* Preview Modal */
.ak-image-preview-root {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-image-preview-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.ak-image-preview-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
}

.ak-image-preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-image-preview-img {
  max-width: 100%;
  max-height: 90vh;
  user-select: none;
}

.ak-image-preview-operations {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 8px;
}

.ak-image-preview-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-image-preview-close:hover {
  color: #fff;
}

.ak-image-preview-close svg {
  width: 20px;
  height: 20px;
}

/* Dark Mode */
.dark .ak-image-placeholder,
[data-theme="dark"] .ak-image-placeholder {
  background: #262626;
}

.dark .ak-image-placeholder svg,
[data-theme="dark"] .ak-image-placeholder svg {
  color: #434343;
}

.dark .ak-image-error,
[data-theme="dark"] .ak-image-error {
  background: #1f1f1f;
}

.dark .ak-image-error-content svg,
[data-theme="dark"] .ak-image-error-content svg {
  color: #434343;
}


/* Component: list */

/* List Base Styles */
.ak-list {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
}

/* Bordered */
.ak-list-bordered {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.ak-list-bordered .ak-list-header,
.ak-list-bordered .ak-list-footer {
  padding-inline: 16px;
}

/* Split (dividers) */
.ak-list-split .ak-list-item {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}

.ak-list-split .ak-list-item:last-child {
  border-bottom: none;
}

/* Striped */
.ak-list-striped .ak-list-item:nth-child(odd) {
  background: rgba(0, 0, 0, 0.02);
}

/* Flush */
.ak-list-flush {
  border: none;
  border-radius: 0;
}

.ak-list-flush .ak-list-item:first-child {
  border-top: 1px solid rgba(5, 5, 5, 0.06);
}

/* Horizontal */
.ak-list-horizontal {
  display: flex;
  flex-wrap: wrap;
}

.ak-list-horizontal .ak-list-item {
  border-bottom: none;
  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
}

.ak-list-horizontal .ak-list-item:last-child {
  border-inline-end: none;
}

/* Header & Footer */
.ak-list-header,
.ak-list-footer {
  padding: 12px 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
}

.ak-list-bordered .ak-list-header {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}

.ak-list-bordered .ak-list-footer {
  border-top: 1px solid rgba(5, 5, 5, 0.06);
}

/* Size Variants */
.ak-list-sm .ak-list-item {
  padding: 8px 12px;
}

.ak-list-sm .ak-list-header,
.ak-list-sm .ak-list-footer {
  padding: 8px 0;
}

.ak-list-lg .ak-list-item {
  padding: 16px 24px;
}

.ak-list-lg .ak-list-header,
.ak-list-lg .ak-list-footer {
  padding: 16px 0;
}


/* Component: list-item */

/* List Item Styles */
.ak-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: rgba(0, 0, 0, 0.88);
  gap: 12px;
}

/* Clickable item */
.ak-list-item-clickable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.ak-list-item-clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Active item */
.ak-list-item-active {
  background: rgba(22, 119, 255, 0.08);
  color: #1677ff;
}

.ak-list-item-active .ak-list-item-meta-title {
  color: #1677ff;
}

/* Disabled item */
.ak-list-item-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}

.ak-list-item-disabled .ak-list-item-meta-title,
.ak-list-item-disabled .ak-list-item-meta-description {
  color: rgba(0, 0, 0, 0.25);
}

/* Icon */
.ak-list-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
}

/* Meta container */
.ak-list-item-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ak-list-item-meta-avatar {
  flex-shrink: 0;
  margin-inline-end: 12px;
}

.ak-list-item-meta-title {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5714285714285714;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ak-list-item-meta-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.ak-list-item-meta-title a:hover {
  color: #1677ff;
}

.ak-list-item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Extra content */
.ak-list-item-extra {
  flex-shrink: 0;
  margin-inline-start: 12px;
}

/* Actions */
.ak-list-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: 12px;
}

.ak-list-item-actions > * {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s;
}

.ak-list-item-actions > *:hover {
  color: #1677ff;
}

/* Link style for anchor items */
a.ak-list-item {
  text-decoration: none;
  color: inherit;
}

a.ak-list-item:hover {
  color: #1677ff;
}

a.ak-list-item:hover .ak-list-item-meta-title {
  color: #1677ff;
}


/* Component: popover */

/* Popover Wrapper */
.ak-popover-wrapper {
  position: relative;
  display: inline-block;
}

.ak-popover-trigger {
  cursor: pointer;
}

/* Popover */
.ak-popover {
  position: absolute;
  z-index: 1070;
  max-width: 300px;
}

.ak-popover-inner {
  background: #fff;
  background-clip: padding-box;
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.ak-popover-title {
  min-width: 177px;
  padding: 12px 12px 8px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}

.ak-popover-content {
  padding: 12px;
  color: rgba(0, 0, 0, 0.88);
}

/* Arrow */
.ak-popover-arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: transparent;
  pointer-events: none;
}

.ak-popover-arrow::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

/* Placements */
.ak-popover-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 12px;
}

.ak-popover-top .ak-popover-arrow {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.ak-popover-top .ak-popover-arrow::before {
  transform: rotate(45deg);
  border-radius: 0 0 2px 0;
}

.ak-popover-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
}

.ak-popover-bottom .ak-popover-arrow {
  top: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.ak-popover-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 12px;
}

.ak-popover-left .ak-popover-arrow {
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.ak-popover-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 12px;
}

.ak-popover-right .ak-popover-arrow {
  left: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Dark Mode */
.dark .ak-popover-inner,
[data-theme="dark"] .ak-popover-inner {
  background: #1f1f1f;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
              0 3px 6px -4px rgba(0, 0, 0, 0.48),
              0 9px 28px 8px rgba(0, 0, 0, 0.2);
}

.dark .ak-popover-title,
[data-theme="dark"] .ak-popover-title {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: #303030;
}

.dark .ak-popover-content,
[data-theme="dark"] .ak-popover-content {
  color: rgba(255, 255, 255, 0.85);
}

.dark .ak-popover-arrow::before,
[data-theme="dark"] .ak-popover-arrow::before {
  background: #1f1f1f;
}


/* Component: radial-progress */

/* Radial Progress Base Styles */
.ak-radial-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}

.ak-radial-progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.ak-radial-progress-track {
  stroke: rgba(0, 0, 0, 0.06);
  filter: drop-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
}

.ak-radial-progress-indicator {
  stroke: #1677ff;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 1px 3px rgba(22, 119, 255, 0.5));
}

.ak-radial-progress-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ak-radial-progress-value {
  font-size: 24px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1;
}

/* Size variants */
.ak-radial-progress-xs {
  width: 48px;
  height: 48px;
}

.ak-radial-progress-xs .ak-radial-progress-value {
  font-size: 12px;
}

.ak-radial-progress-sm {
  width: 80px;
  height: 80px;
}

.ak-radial-progress-sm .ak-radial-progress-value {
  font-size: 16px;
}

.ak-radial-progress-lg {
  width: 160px;
  height: 160px;
}

.ak-radial-progress-lg .ak-radial-progress-value {
  font-size: 32px;
}

.ak-radial-progress-xl {
  width: 200px;
  height: 200px;
}

.ak-radial-progress-xl .ak-radial-progress-value {
  font-size: 40px;
}

/* Color variants */
.ak-radial-progress-primary {
  stroke: #1677ff;
}

.ak-radial-progress-success {
  stroke: #52c41a;
}

.ak-radial-progress-warning {
  stroke: #faad14;
}

.ak-radial-progress-error {
  stroke: #ff4d4f;
}

.ak-radial-progress-info {
  stroke: #1677ff;
}

/* Gradient option */
.ak-radial-progress-gradient .ak-radial-progress-indicator {
  stroke: url(#radialProgressGradient);
}


/* Component: radial-countdown */

/* Countdown specific styles */
.ak-radial-countdown-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.ak-radial-progress[role="timer"] {
  cursor: pointer;
  user-select: none;
}

.ak-radial-progress[role="timer"]:hover .ak-radial-progress-track {
  stroke: rgba(0, 0, 0, 0.1);
}


/* Component: seed-list */

/* Seed List Base */
.ak-seed-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 0.8125rem;
}

/* Header */
.ak-seed-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #333);
  flex-shrink: 0;
}

.ak-seed-list-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.ak-seed-list-count {
  font-weight: normal;
  opacity: 0.7;
  margin-left: 0.25rem;
}

.ak-seed-list-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* View Toggle */
.ak-seed-list-toggle {
  display: flex;
  background: var(--color-muted, #1a1a1a);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 2px;
}

.ak-seed-list-toggle button {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-on-muted, #888);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}

.ak-seed-list-toggle button:hover {
  color: var(--color-on-background, #fff);
}

.ak-seed-list-toggle button.active {
  background: var(--color-surface, #111);
  color: var(--color-on-background, #fff);
}

/* Content */
.ak-seed-list-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Flat View Items */
.ak-seed-list-flat {
  padding: 0.25rem;
}

.ak-seed-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm, 0.25rem);
  transition: background 0.15s;
}

.ak-seed-list-item:hover {
  background: var(--color-muted, #1a1a1a);
}

.ak-seed-list-item.active {
  background: rgba(168, 85, 247, 0.2);
  color: var(--color-primary, #a855f7);
}

/* Type Badge */
.ak-seed-list-type {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm, 0.25rem);
  text-transform: uppercase;
  flex-shrink: 0;
}

.ak-seed-list-type.schema { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.ak-seed-list-type.transform { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.ak-seed-list-type.render { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.ak-seed-list-type.action { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.ak-seed-list-type.component { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.ak-seed-list-type.guard { background: rgba(251, 146, 60, 0.2); color: #fb923c; }

/* Name */
.ak-seed-list-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Correlation Links */
.ak-seed-list-links {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

.ak-seed-list-link {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  border-radius: 2px;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ak-seed-list-link:hover {
  opacity: 1;
}

.ak-seed-list-link.schema { background: rgba(59, 130, 246, 0.3); color: #60a5fa; }
.ak-seed-list-link.transform { background: rgba(34, 197, 94, 0.3); color: #4ade80; }
.ak-seed-list-link.render { background: rgba(234, 179, 8, 0.3); color: #facc15; }

/* Tree View */
.ak-seed-list-tree {
  padding: 0.25rem;
}

.ak-seed-list-category {
  margin-bottom: 0.25rem;
}

.ak-seed-list-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-on-muted, #888);
  border-radius: var(--radius-sm, 0.25rem);
  transition: all 0.15s;
}

.ak-seed-list-category-header:hover {
  background: var(--color-muted, #1a1a1a);
  color: var(--color-on-background, #fff);
}

.ak-seed-list-chevron {
  width: 1rem;
  text-align: center;
  font-size: 0.625rem;
  transition: transform 0.15s;
}

.ak-seed-list-chevron.expanded {
  transform: rotate(90deg);
}

.ak-seed-list-category-icon {
  width: 1rem;
  text-align: center;
  font-size: 0.75rem;
}

.ak-seed-list-category-count {
  margin-left: auto;
  font-weight: normal;
  opacity: 0.6;
}

.ak-seed-list-category-items {
  padding-left: 1.5rem;
}

.ak-seed-list-item-nested {
  padding-left: 0.5rem;
}

/* Empty State */
.ak-seed-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--color-on-muted, #666);
}

.ak-seed-list-empty i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.ak-seed-list-empty p {
  margin: 0;
  font-size: 0.8125rem;
}


/* Component: stat */

/* Statistic Base Styles */
.ak-statistic {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ak-statistic-centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ak-statistic-centered .ak-statistic-figure {
  margin-bottom: 8px;
}

/* Figure/Icon */
.ak-statistic-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.45);
  font-size: 24px;
}

.ak-statistic-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Figure variants */
.ak-statistic-figure-primary {
  background: rgba(22, 119, 255, 0.1);
  color: #1677ff;
}

.ak-statistic-figure-success {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.ak-statistic-figure-warning {
  background: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

.ak-statistic-figure-error {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.ak-statistic-figure-info {
  background: rgba(22, 119, 255, 0.1);
  color: #1677ff;
}

/* Content */
.ak-statistic-content {
  flex: 1;
  min-width: 0;
}

.ak-statistic-title {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5714285714285714;
}

/* Value */
.ak-statistic-value {
  color: rgba(0, 0, 0, 0.88);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ak-statistic-value-int {
  display: inline-block;
}

.ak-statistic-value-decimal {
  font-size: 0.85em;
}

.ak-statistic-prefix,
.ak-statistic-suffix {
  display: inline-block;
}

.ak-statistic-prefix {
  margin-inline-end: 4px;
}

.ak-statistic-suffix {
  margin-inline-start: 4px;
  font-size: 0.75em;
  color: rgba(0, 0, 0, 0.45);
  font-weight: normal;
}

/* Description with trend */
.ak-statistic-description {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ak-statistic-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}

.ak-statistic-trend svg {
  font-size: 12px;
}

.ak-statistic-trend-up {
  color: #52c41a;
}

.ak-statistic-trend-down {
  color: #ff4d4f;
}

.ak-statistic-desc-text {
  color: rgba(0, 0, 0, 0.45);
}

/* Actions */
.ak-statistic-actions {
  margin-top: 12px;
}

/* Size variants */
.ak-statistic-sm .ak-statistic-figure {
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 8px;
}

.ak-statistic-sm .ak-statistic-value {
  font-size: 20px;
}

.ak-statistic-sm .ak-statistic-title {
  font-size: 12px;
}

.ak-statistic-lg .ak-statistic-figure {
  width: 64px;
  height: 64px;
  font-size: 32px;
  border-radius: 16px;
}

.ak-statistic-lg .ak-statistic-value {
  font-size: 32px;
}

.ak-statistic-lg .ak-statistic-title {
  font-size: 16px;
}


/* Component: stats-group */

/* Stats Group Styles */
.ak-stats {
  display: flex;
  background: #ffffff;
  border-radius: 8px;
}

.ak-stats-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.ak-stats-vertical {
  flex-direction: column;
}

.ak-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: #f0f0f0;
}

.ak-stats-grid > .ak-statistic {
  background: #ffffff;
  padding: 16px;
}

/* Bordered variant */
.ak-stats-bordered {
  border: 1px solid #f0f0f0;
}

.ak-stats-bordered.ak-stats-horizontal > .ak-statistic {
  padding: 16px 24px;
  border-inline-end: 1px solid #f0f0f0;
}

.ak-stats-bordered.ak-stats-horizontal > .ak-statistic:last-child {
  border-inline-end: none;
}

.ak-stats-bordered.ak-stats-vertical > .ak-statistic {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.ak-stats-bordered.ak-stats-vertical > .ak-statistic:last-child {
  border-bottom: none;
}

/* Shadow variant */
.ak-stats-shadow {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

/* Spacing for non-bordered horizontal */
.ak-stats-horizontal:not(.ak-stats-bordered) > .ak-statistic {
  padding-inline-end: 32px;
}

.ak-stats-horizontal:not(.ak-stats-bordered) > .ak-statistic:last-child {
  padding-inline-end: 0;
}

/* Spacing for non-bordered vertical */
.ak-stats-vertical:not(.ak-stats-bordered) > .ak-statistic {
  padding-bottom: 16px;
}

.ak-stats-vertical:not(.ak-stats-bordered) > .ak-statistic:last-child {
  padding-bottom: 0;
}


/* Component: stat-animated */

/* Animated stat specific */
.ak-statistic-value-int {
  font-variant-numeric: tabular-nums;
}


/* Component: table */

/* Table Wrapper */
.ak-table-wrapper {
  clear: both;
  max-width: 100%;
}

/* Table */
.ak-table {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--color-text, rgba(0, 0, 0, 0.88));
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  background: var(--color-surface, #fff);
  border-radius: 8px;
  border: 1px solid var(--color-border, #e2e8f0);
  overflow: hidden;
}

.ak-table-container {
  border-radius: 8px;
}

.ak-table-content {
  overflow: auto hidden;
}

.ak-table table {
  width: 100%;
  text-align: start;
  border-collapse: separate;
  border-spacing: 0;
}

.ak-table caption {
  padding: 16px 16px;
  text-align: start;
  caption-side: top;
  color: var(--color-textMuted, rgba(0, 0, 0, 0.45));
}

/* Table Head */
.ak-table thead > tr > th {
  position: relative;
  color: var(--color-text, rgba(0, 0, 0, 0.88));
  font-weight: 600;
  text-align: start;
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 8%, var(--color-surface, #fff));
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  transition: background 0.2s ease;
}

.ak-table thead > tr:first-child > th:first-child {
  border-start-start-radius: 7px;
}

.ak-table thead > tr:first-child > th:last-child {
  border-start-end-radius: 7px;
}

/* Table Body */
.ak-table tbody > tr > td {
  position: relative;
  padding: 16px 16px;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  transition: background 0.2s, border-color 0.2s;
}

.ak-table tbody > tr:hover > td {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 5%, var(--color-surface, #fff));
}

.ak-table tbody > tr:last-child > td {
  border-bottom: none;
}

/* Header Cell */
.ak-table thead > tr > th {
  padding: 16px 16px;
}

/* Bordered Table */
.ak-table-bordered .ak-table-container {
  border-inline-start: 1px solid var(--color-border, #e2e8f0);
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.ak-table-bordered .ak-table thead > tr > th,
.ak-table-bordered .ak-table tbody > tr > td {
  border-inline-end: 1px solid var(--color-border, #e2e8f0);
}

.ak-table-bordered .ak-table tbody > tr > td {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

/* Small Size */
.ak-table-small .ak-table thead > tr > th {
  padding: 8px 8px;
}

.ak-table-small .ak-table tbody > tr > td {
  padding: 8px 8px;
}

/* Middle Size */
.ak-table-middle .ak-table thead > tr > th {
  padding: 12px 8px;
}

.ak-table-middle .ak-table tbody > tr > td {
  padding: 12px 8px;
}

/* Empty State */
.ak-table-empty .ak-table-tbody > tr > td {
  text-align: center;
  color: var(--color-textMuted, rgba(0, 0, 0, 0.25));
}

/* Striped */
.ak-table-striped .ak-table tbody > tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 3%, var(--color-surface, #fff));
}

.ak-table-striped .ak-table tbody > tr:nth-child(even):hover > td {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 8%, var(--color-surface, #fff));
}

/* Selected Row */
.ak-table tbody > tr.ak-table-row-selected > td {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 12%, var(--color-surface, #fff));
}

.ak-table tbody > tr.ak-table-row-selected:hover > td {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 18%, var(--color-surface, #fff));
}

/* Sortable Header */
.ak-table-column-sorter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-inline-start: 4px;
  color: var(--color-textMuted, #bfbfbf);
  font-size: 0;
  transition: color 0.2s;
}

.ak-table-column-sorter-up,
.ak-table-column-sorter-down {
  font-size: 11px;
}

.ak-table-column-sorter-up.active,
.ak-table-column-sorter-down.active {
  color: var(--color-primary, #3b82f6);
}

/* Clickable header */
.ak-table-column-has-sorters {
  cursor: pointer;
  user-select: none;
}

.ak-table-column-has-sorters:hover {
  background: color-mix(in srgb, var(--color-primary, #3b82f6) 12%, var(--color-surface, #fff));
}

/* Dark Mode */
.dark .ak-table,
[data-theme="dark"] .ak-table {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  color: var(--color-text, rgba(255, 255, 255, 0.88));
}

.dark .ak-table thead > tr > th,
[data-theme="dark"] .ak-table thead > tr > th {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 12%, var(--color-surface, #1e293b));
  border-bottom-color: var(--color-border, #334155);
  color: var(--color-text, rgba(255, 255, 255, 0.88));
}

.dark .ak-table tbody > tr > td,
[data-theme="dark"] .ak-table tbody > tr > td {
  border-bottom-color: var(--color-border, #334155);
}

.dark .ak-table tbody > tr:hover > td,
[data-theme="dark"] .ak-table tbody > tr:hover > td {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 8%, var(--color-surface, #1e293b));
}

.dark .ak-table tbody > tr.ak-table-row-selected > td,
[data-theme="dark"] .ak-table tbody > tr.ak-table-row-selected > td {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 15%, var(--color-surface, #1e293b));
}

.dark .ak-table tbody > tr.ak-table-row-selected:hover > td,
[data-theme="dark"] .ak-table tbody > tr.ak-table-row-selected:hover > td {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 22%, var(--color-surface, #1e293b));
}

.dark .ak-table-column-has-sorters:hover,
[data-theme="dark"] .ak-table-column-has-sorters:hover {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 15%, var(--color-surface, #1e293b));
}

.dark .ak-table-striped .ak-table tbody > tr:nth-child(even) > td,
[data-theme="dark"] .ak-table-striped .ak-table tbody > tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 5%, var(--color-surface, #1e293b));
}

.dark .ak-table-striped .ak-table tbody > tr:nth-child(even):hover > td,
[data-theme="dark"] .ak-table-striped .ak-table tbody > tr:nth-child(even):hover > td {
  background: color-mix(in srgb, var(--color-primary, #60a5fa) 10%, var(--color-surface, #1e293b));
}


/* Component: thead */

.ak-table-thead {
  /* Styles inherited from table */
}


/* Component: tbody */

.ak-table-tbody {
  /* Styles inherited from table */
}


/* Component: tr */

.ak-table-row {
  /* Styles inherited from table */
}


/* Component: th */

.ak-table-cell {
  /* Styles inherited from table */
}

.ak-table-cell-content {
  display: inline-flex;
  align-items: center;
}


/* Component: td */

.ak-table-cell {
  /* Styles inherited from table */
}


/* Component: tag */

/* Tag Base Styles */
.ak-tag {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 12px;
  line-height: 20px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  height: auto;
  margin-inline-end: 8px;
  margin-bottom: 8px;
  padding-inline: 7px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  opacity: 1;
  transition: all 0.2s;
}

.ak-tag:not(.ak-tag-bordered) {
  border-color: transparent;
}

/* Tag Icon */
.ak-tag-icon {
  margin-inline-end: 4px;
}

.ak-tag-icon svg {
  vertical-align: -0.125em;
}

/* Close Icon */
.ak-tag-close-icon {
  margin-inline-start: 4px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-tag-close-icon:hover {
  color: rgba(0, 0, 0, 0.88);
}

.ak-tag-close-icon svg {
  display: block;
}

/* Status Colors */
.ak-tag-success {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.ak-tag-processing {
  color: #1677ff;
  background: #e6f4ff;
  border-color: #91caff;
}

.ak-tag-error {
  color: #ff4d4f;
  background: #fff2f0;
  border-color: #ffccc7;
}

.ak-tag-warning {
  color: #faad14;
  background: #fffbe6;
  border-color: #ffe58f;
}

/* Preset Colors */
.ak-tag-blue {
  color: #1677ff;
  background: #e6f4ff;
  border-color: #91caff;
}

.ak-tag-cyan {
  color: #13c2c2;
  background: #e6fffb;
  border-color: #87e8de;
}

.ak-tag-gold {
  color: #faad14;
  background: #fffbe6;
  border-color: #ffe58f;
}

.ak-tag-green {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.ak-tag-lime {
  color: #a0d911;
  background: #fcffe6;
  border-color: #eaff8f;
}

.ak-tag-magenta {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
}

.ak-tag-orange {
  color: #fa8c16;
  background: #fff7e6;
  border-color: #ffd591;
}

.ak-tag-pink {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
}

.ak-tag-purple {
  color: #722ed1;
  background: #f9f0ff;
  border-color: #d3adf7;
}

.ak-tag-red {
  color: #f5222d;
  background: #fff1f0;
  border-color: #ffa39e;
}

.ak-tag-volcano {
  color: #fa541c;
  background: #fff2e8;
  border-color: #ffbb96;
}

.ak-tag-geekblue {
  color: #2f54eb;
  background: #f0f5ff;
  border-color: #adc6ff;
}

/* Hide animation */
.ak-tag[x-cloak] {
  display: none !important;
}


/* Component: timeline */

/* Timeline Styles */
.ak-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-timeline-item {
  position: relative;
  margin: 0;
  padding-bottom: 20px;
  font-size: 14px;
  list-style: none;
}

.ak-timeline-item-tail {
  position: absolute;
  top: 10px;
  left: 4px;
  height: calc(100% - 10px);
  border-left: 2px solid #f0f0f0;
}

.ak-timeline-item:last-child .ak-timeline-item-tail {
  display: none;
}

.ak-timeline-item-head {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 2px solid #1677ff;
  border-radius: 50%;
}

.ak-timeline-item-head-blue {
  border-color: #1677ff;
}

.ak-timeline-item-head-green {
  border-color: #52c41a;
}

.ak-timeline-item-head-red {
  border-color: #ff4d4f;
}

.ak-timeline-item-head-gray {
  border-color: #d9d9d9;
}

.ak-timeline-item-head-custom {
  width: auto;
  height: auto;
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
}

.ak-timeline-item-head-loading {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #1677ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ak-timeline-loading 1s linear infinite;
}

@keyframes ak-timeline-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ak-timeline-item-content {
  position: relative;
  top: -7px;
  margin: 0 0 0 26px;
  word-break: break-word;
  color: rgba(0, 0, 0, 0.88);
}

/* Right mode */
.ak-timeline-right .ak-timeline-item-tail,
.ak-timeline-right .ak-timeline-item-head {
  left: auto;
  right: 4px;
}

.ak-timeline-right .ak-timeline-item-content {
  margin: 0 26px 0 0;
  text-align: right;
}

/* Alternate mode */
.ak-timeline-alternate .ak-timeline-item-tail,
.ak-timeline-alternate .ak-timeline-item-head {
  left: 50%;
}

.ak-timeline-alternate .ak-timeline-item-content {
  width: calc(50% - 25px);
}

.ak-timeline-alternate .ak-timeline-item:nth-child(odd) .ak-timeline-item-content {
  text-align: right;
  margin-left: 0;
}

.ak-timeline-alternate .ak-timeline-item:nth-child(even) .ak-timeline-item-content {
  margin-left: calc(50% + 25px);
}

/* Dark Mode */
.dark .ak-timeline-item-tail,
[data-theme="dark"] .ak-timeline-item-tail {
  border-left-color: #303030;
}

.dark .ak-timeline-item-head,
[data-theme="dark"] .ak-timeline-item-head {
  background-color: #141414;
}

.dark .ak-timeline-item-head-gray,
[data-theme="dark"] .ak-timeline-item-head-gray {
  border-color: #434343;
}

.dark .ak-timeline-item-content,
[data-theme="dark"] .ak-timeline-item-content {
  color: rgba(255, 255, 255, 0.85);
}


/* Component: timeline-item */

.ak-timeline-item-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 4px;
}

.dark .ak-timeline-item-label,
[data-theme="dark"] .ak-timeline-item-label {
  color: rgba(255, 255, 255, 0.45);
}


/* Component: tooltip */

/* Tooltip Wrapper */
.ak-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.ak-tooltip-trigger {
  display: inline-block;
}

/* Tooltip */
.ak-tooltip {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: absolute;
  z-index: 1070;
  display: block;
  width: max-content;
  max-width: 250px;
  visibility: visible;
}

.ak-tooltip-content {
  position: relative;
}

.ak-tooltip-inner {
  min-width: 32px;
  min-height: 32px;
  padding: 6px 8px;
  color: #fff;
  text-align: start;
  text-decoration: none;
  word-wrap: break-word;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

/* Arrow */
.ak-tooltip-arrow {
  position: absolute;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  pointer-events: none;
}

.ak-tooltip-arrow::before {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 16px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.85);
  clip-path: polygon(1.6568542495px 100%, 50% 1.6568542495px, 14.3431457505px 100%, 1.6568542495px 100%);
  content: '';
}

/* Placement: Top */
.ak-tooltip-top {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding-bottom: 8px;
}

.ak-tooltip-top .ak-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

/* Placement: TopLeft */
.ak-tooltip-topLeft {
  left: 0;
  bottom: 100%;
  padding-bottom: 8px;
}

.ak-tooltip-topLeft .ak-tooltip-arrow {
  bottom: 4px;
  left: 16px;
  transform: rotate(180deg);
}

/* Placement: TopRight */
.ak-tooltip-topRight {
  right: 0;
  bottom: 100%;
  padding-bottom: 8px;
}

.ak-tooltip-topRight .ak-tooltip-arrow {
  bottom: 4px;
  right: 16px;
  transform: rotate(180deg);
}

/* Placement: Bottom */
.ak-tooltip-bottom {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 8px;
}

.ak-tooltip-bottom .ak-tooltip-arrow {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Placement: BottomLeft */
.ak-tooltip-bottomLeft {
  left: 0;
  top: 100%;
  padding-top: 8px;
}

.ak-tooltip-bottomLeft .ak-tooltip-arrow {
  top: 4px;
  left: 16px;
}

/* Placement: BottomRight */
.ak-tooltip-bottomRight {
  right: 0;
  top: 100%;
  padding-top: 8px;
}

.ak-tooltip-bottomRight .ak-tooltip-arrow {
  top: 4px;
  right: 16px;
}

/* Placement: Left */
.ak-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 8px;
}

.ak-tooltip-left .ak-tooltip-arrow {
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

/* Placement: LeftTop */
.ak-tooltip-leftTop {
  right: 100%;
  top: 0;
  padding-right: 8px;
}

.ak-tooltip-leftTop .ak-tooltip-arrow {
  right: 4px;
  top: 8px;
  transform: rotate(90deg);
}

/* Placement: LeftBottom */
.ak-tooltip-leftBottom {
  right: 100%;
  bottom: 0;
  padding-right: 8px;
}

.ak-tooltip-leftBottom .ak-tooltip-arrow {
  right: 4px;
  bottom: 8px;
  transform: rotate(90deg);
}

/* Placement: Right */
.ak-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 8px;
}

.ak-tooltip-right .ak-tooltip-arrow {
  left: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

/* Placement: RightTop */
.ak-tooltip-rightTop {
  left: 100%;
  top: 0;
  padding-left: 8px;
}

.ak-tooltip-rightTop .ak-tooltip-arrow {
  left: 4px;
  top: 8px;
  transform: rotate(-90deg);
}

/* Placement: RightBottom */
.ak-tooltip-rightBottom {
  left: 100%;
  bottom: 0;
  padding-left: 8px;
}

.ak-tooltip-rightBottom .ak-tooltip-arrow {
  left: 4px;
  bottom: 8px;
  transform: rotate(-90deg);
}

/* Transitions */
.ak-tooltip-enter {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

.ak-tooltip-enter-start {
  opacity: 0;
  transform: translateX(-50%) scale(0.95);
}

.ak-tooltip-enter-end {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.ak-tooltip-leave {
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
}

.ak-tooltip-leave-start {
  opacity: 1;
}

.ak-tooltip-leave-end {
  opacity: 0;
}

/* Hidden by default */
[x-cloak] {
  display: none !important;
}


/* Component: tree */

/* Tree Base Styles */
.ak-tree {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  background: transparent;
}

/* Tree List */
.ak-tree-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tree Node */
.ak-tree-treenode {
  display: flex;
  align-items: flex-start;
  padding: 0 0 4px 0;
  outline: none;
  list-style: none;
}

/* Indent */
.ak-tree-indent {
  align-self: stretch;
  white-space: nowrap;
  user-select: none;
}

.ak-tree-indent-unit {
  display: inline-block;
  width: 24px;
}

/* Show line variant */
.ak-tree-show-line .ak-tree-indent-unit {
  position: relative;
  height: 100%;
}

.ak-tree-show-line .ak-tree-indent-unit::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 12px;
  bottom: -4px;
  border-inline-end: 1px solid #d9d9d9;
}

.ak-tree-show-line .ak-tree-indent-unit-end::before {
  display: none;
}

/* Switcher (expand/collapse) */
.ak-tree-switcher {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 24px;
  margin: 0;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.ak-tree-switcher-noop {
  cursor: default;
}

.ak-tree-switcher-icon {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.3s;
}

.ak-tree-switcher_open .ak-tree-switcher-icon {
  transform: rotate(90deg);
}

.ak-tree-switcher svg {
  transition: transform 0.3s;
}

.ak-tree-switcher_open svg {
  transform: rotate(90deg);
}

/* Show line switcher */
.ak-tree-show-line .ak-tree-switcher {
  background: #fff;
}

.ak-tree-show-line .ak-tree-switcher-line-icon {
  transition: transform 0.3s;
}

/* Checkbox */
.ak-tree-checkbox {
  margin: 4px 8px 0 0;
}

/* Node content */
.ak-tree-node-content-wrapper {
  position: relative;
  z-index: auto;
  min-height: 24px;
  margin: 0;
  padding: 0 4px;
  color: inherit;
  line-height: 24px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
  flex: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ak-tree-node-content-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.ak-tree-node-content-wrapper.ak-tree-node-selected {
  background-color: #bae0ff;
}

/* Block node variant */
.ak-tree-block-node .ak-tree-node-content-wrapper {
  flex: 1;
}

/* Icon */
.ak-tree-iconEle {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  vertical-align: top;
}

/* Title */
.ak-tree-title {
  display: inline-block;
}

/* Node children */
.ak-tree-child-tree {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
}

.ak-tree-child-tree-open {
  display: block;
}

/* Disabled node */
.ak-tree-treenode-disabled .ak-tree-node-content-wrapper {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.ak-tree-treenode-disabled .ak-tree-node-content-wrapper:hover {
  background: transparent;
}

/* Draggable */
.ak-tree-draggable-icon {
  width: 24px;
  line-height: 24px;
  text-align: center;
  visibility: visible;
  opacity: 0.2;
  transition: opacity 0.3s;
}

.ak-tree-treenode:hover .ak-tree-draggable-icon {
  opacity: 0.45;
}

/* Dark Mode */
.dark .ak-tree {
  color: rgba(255, 255, 255, 0.88);
}

.dark .ak-tree-switcher {
  color: #a1a1aa;
}

.dark .ak-tree-node-content-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.dark .ak-tree-node-content-wrapper.ak-tree-node-selected {
  background-color: rgba(139, 92, 246, 0.2);
}

.dark .ak-tree-show-line .ak-tree-indent-unit::before {
  border-inline-end-color: #3f3f46;
}

.dark .ak-tree-show-line .ak-tree-switcher {
  background: #0a0a0a;
}

.dark .ak-tree-treenode-disabled .ak-tree-node-content-wrapper {
  color: rgba(255, 255, 255, 0.25);
}


/* Component: alert */

/* Alert Base Styles */
.ak-alert {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  word-wrap: break-word;
  border-radius: 8px;
}

/* Alert Types */
.ak-alert-success {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

.ak-alert-success .ak-alert-icon {
  color: #52c41a;
}

.ak-alert-info {
  background-color: #e6f4ff;
  border: 1px solid #91caff;
}

.ak-alert-info .ak-alert-icon {
  color: #1677ff;
}

.ak-alert-warning {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
}

.ak-alert-warning .ak-alert-icon {
  color: #faad14;
}

.ak-alert-error {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
}

.ak-alert-error .ak-alert-icon {
  color: #ff4d4f;
}

/* Alert Icon */
.ak-alert-icon {
  margin-inline-end: 8px;
  line-height: 0;
}

.ak-alert-icon svg {
  font-size: 16px;
}

/* Alert with description (larger icon) */
.ak-alert-with-description {
  align-items: flex-start;
  padding: 16px;
}

.ak-alert-with-description .ak-alert-icon {
  margin-inline-end: 16px;
  font-size: 24px;
  line-height: 0;
}

.ak-alert-with-description .ak-alert-icon svg {
  font-size: 24px;
}

/* Alert Content */
.ak-alert-content {
  flex: 1;
  min-width: 0;
}

.ak-alert-message {
  color: rgba(0, 0, 0, 0.88);
}

.ak-alert-with-description .ak-alert-message {
  display: block;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
}

.ak-alert-description {
  display: none;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5714285714285714;
}

.ak-alert-with-description .ak-alert-description {
  display: block;
}

/* Close Button */
.ak-alert-close-icon {
  margin-inline-start: 8px;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 12px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.2s;
}

.ak-alert-close-icon:hover {
  color: rgba(0, 0, 0, 0.88);
}

.ak-alert-close-icon .anticon-close {
  display: block;
  font-size: 12px;
}

/* Action Area */
.ak-alert-action {
  margin-inline-start: 8px;
}

/* Banner variant */
.ak-alert-banner {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

/* Hidden state */
[x-cloak] {
  display: none !important;
}


/* Component: approval-card */

/* Approval Card */
.ak-approval-card {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1rem;
  background: var(--color-surface, #fff);
  margin-bottom: 0.75rem;
}

.ak-approval-card-pending {
  border-left: 3px solid var(--color-warning, #f59e0b);
}

.ak-approval-card-approved {
  border-left: 3px solid var(--color-success, #22c55e);
  opacity: 0.85;
}

.ak-approval-card-rejected {
  border-left: 3px solid var(--color-error, #ef4444);
  opacity: 0.7;
}

.ak-approval-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ak-approval-card-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ak-approval-card-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--color-primary-light, #eff6ff);
  color: var(--color-primary, #3b82f6);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
}

.ak-approval-card-status {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ak-approval-card-status-pending { color: var(--color-warning, #f59e0b); }
.ak-approval-card-status-approved { color: var(--color-success, #22c55e); }
.ak-approval-card-status-rejected { color: var(--color-error, #ef4444); }

.ak-approval-card-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted, #94a3b8);
  padding: 0.25rem;
}

.ak-approval-card-toggle:hover {
  color: var(--color-on-surface, #1e293b);
}

.ak-approval-card-reasoning {
  font-size: 0.8125rem;
  color: var(--color-muted, #64748b);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.ak-approval-card-preview {
  margin-bottom: 0.75rem;
}

.ak-approval-card-data {
  background: var(--color-surface-alt, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}

.ak-approval-card-data code {
  font-family: monospace;
  white-space: pre;
}

.ak-approval-card-textarea {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  min-height: 2.5rem;
  resize: vertical;
}

.ak-approval-card-modify {
  margin-top: 0.5rem;
}

.ak-approval-card-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.ak-approval-card-reject {
  color: var(--color-error, #ef4444) !important;
  border-color: var(--color-error, #ef4444) !important;
}

.ak-approval-card-reject:hover {
  background: var(--color-error-light, #fef2f2) !important;
}

/* Dark mode */
[data-theme="dark"] .ak-approval-card {
  background: var(--color-surface-dark, #1e293b);
  border-color: var(--color-border-dark, #334155);
}

[data-theme="dark"] .ak-approval-card-data {
  background: var(--color-surface-alt-dark, #0f172a);
  border-color: var(--color-border-dark, #334155);
}


/* Component: chat-panel */
/* ==========================================================================
   Chat Panel Component
   ========================================================================== */

.ak-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
}

/* Header */
.ak-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-muted, #f9fafb);
}

.ak-chat-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-on-surface, #1a1a1a);
}

.ak-chat-panel-title i {
  color: var(--color-primary, #a855f7);
}

.ak-chat-panel-actions {
  display: flex;
  gap: 0.25rem;
}

.ak-chat-panel-actions .ak-btn-text {
  padding: 0.25rem 0.5rem;
  color: var(--color-on-muted, #6b7280);
}

.ak-chat-panel-actions .ak-btn-text:hover {
  color: var(--color-primary, #a855f7);
  background: transparent;
}

/* Messages container */
.ak-chat-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual message */
.ak-chat-message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
}

.ak-chat-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ak-chat-message-assistant {
  align-self: flex-start;
}

.ak-chat-message-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}

.ak-chat-message-user .ak-chat-message-avatar {
  background: var(--color-primary, #a855f7);
  color: white;
}

.ak-chat-message-assistant .ak-chat-message-avatar {
  background: var(--color-muted, #e5e7eb);
  color: var(--color-on-muted, #6b7280);
}

.ak-chat-message-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ak-chat-message-text {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg, 0.5rem);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ak-chat-message-user .ak-chat-message-text {
  background: var(--color-primary, #a855f7);
  color: white;
  border-bottom-right-radius: var(--radius-sm, 0.25rem);
}

.ak-chat-message-assistant .ak-chat-message-text {
  background: var(--color-muted, #f3f4f6);
  color: var(--color-on-surface, #1a1a1a);
  border-bottom-left-radius: var(--radius-sm, 0.25rem);
}

.ak-chat-message-text code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-family: monospace;
  font-size: 0.8125rem;
}

.ak-chat-message-text pre {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  border-radius: var(--radius-md, 0.375rem);
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ak-chat-message-text pre code {
  background: none;
  padding: 0;
}

.ak-chat-message-image {
  margin-top: 0.5rem;
}

.ak-chat-message-image img {
  max-width: 200px;
  border-radius: var(--radius-md, 0.375rem);
  border: 1px solid var(--color-border, #e5e7eb);
}

.ak-chat-message-time {
  font-size: 0.6875rem;
  color: var(--color-on-muted, #9ca3af);
  padding: 0 0.25rem;
}

/* Typing indicator */
.ak-chat-typing {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0;
}

.ak-chat-typing span {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-on-muted, #9ca3af);
  border-radius: 50%;
  animation: chatTyping 1.4s infinite ease-in-out both;
}

.ak-chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.ak-chat-typing span:nth-child(2) { animation-delay: -0.16s; }

@keyframes chatTyping {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Empty state */
.ak-chat-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--color-on-muted, #9ca3af);
  padding: 2rem;
}

.ak-chat-panel-empty i {
  font-size: 2.5rem;
  opacity: 0.5;
}

.ak-chat-panel-empty p {
  margin: 0;
  font-size: 0.875rem;
}

.ak-chat-panel-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ak-chat-panel-suggestions .ak-btn-outline {
  font-size: 0.75rem;
  border-color: var(--color-border, #e5e7eb);
  color: var(--color-on-muted, #6b7280);
}

.ak-chat-panel-suggestions .ak-btn-outline:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-primary, #a855f7);
}

/* Input area */
.ak-chat-panel-input {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-muted, #f9fafb);
}

.ak-chat-panel-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.ak-chat-panel-input textarea {
  flex: 1;
  resize: none;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-lg, 0.5rem);
}

.ak-chat-panel-input .ak-btn-primary {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  flex-shrink: 0;
}

.ak-chat-panel-input-hint {
  font-size: 0.6875rem;
  color: var(--color-on-muted, #9ca3af);
  margin-top: 0.375rem;
  text-align: center;
}

/* Dark mode */
[data-theme="dark"] .ak-chat-panel {
  background: var(--color-surface, #1e1e1e);
  border-color: var(--color-border, #3c3c3c);
}

[data-theme="dark"] .ak-chat-panel-header {
  background: var(--color-background, #121212);
  border-color: var(--color-border, #3c3c3c);
}

[data-theme="dark"] .ak-chat-message-assistant .ak-chat-message-text {
  background: var(--color-muted, #2d2d2d);
}

[data-theme="dark"] .ak-chat-panel-input {
  background: var(--color-background, #121212);
  border-color: var(--color-border, #3c3c3c);
}


/* Component: drawer */

/* Drawer Styles */
.ak-drawer-wrapper {
  position: relative;
}

.ak-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
}

.ak-drawer {
  position: fixed;
  z-index: 1001;
  background: #fff;
  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08),
              -9px 0 28px 0 rgba(0, 0, 0, 0.05),
              -12px 0 48px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

/* Placements */
.ak-drawer-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 378px;
}

.ak-drawer-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 378px;
}

.ak-drawer-top {
  top: 0;
  left: 0;
  right: 0;
  height: 378px;
}

.ak-drawer-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 378px;
}

/* Large size */
.ak-drawer-large.ak-drawer-right,
.ak-drawer-large.ak-drawer-left {
  width: 736px;
}

.ak-drawer-large.ak-drawer-top,
.ak-drawer-large.ak-drawer-bottom {
  height: 736px;
}

/* Header */
.ak-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.ak-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
}

.ak-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.ak-drawer-close:hover {
  color: rgba(0, 0, 0, 0.88);
  background: rgba(0, 0, 0, 0.06);
}

.ak-drawer-close svg {
  width: 16px;
  height: 16px;
}

/* Body */
.ak-drawer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Footer */
.ak-drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Dark Mode */
.dark .ak-drawer,
[data-theme="dark"] .ak-drawer {
  background: #1f1f1f;
  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.32),
              -9px 0 28px 0 rgba(0, 0, 0, 0.2),
              -12px 0 48px 16px rgba(0, 0, 0, 0.12);
}

.dark .ak-drawer-header,
[data-theme="dark"] .ak-drawer-header {
  border-bottom-color: #303030;
}

.dark .ak-drawer-title,
[data-theme="dark"] .ak-drawer-title {
  color: rgba(255, 255, 255, 0.85);
}

.dark .ak-drawer-close,
[data-theme="dark"] .ak-drawer-close {
  color: rgba(255, 255, 255, 0.45);
}

.dark .ak-drawer-close:hover,
[data-theme="dark"] .ak-drawer-close:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.dark .ak-drawer-footer,
[data-theme="dark"] .ak-drawer-footer {
  border-top-color: #303030;
}

.dark .ak-drawer-mask,
[data-theme="dark"] .ak-drawer-mask {
  background: rgba(0, 0, 0, 0.65);
}

/* Responsive */
@media (max-width: 768px) {
  .ak-drawer-right,
  .ak-drawer-left {
    width: 100%;
    max-width: 378px;
  }

  .ak-drawer-large.ak-drawer-right,
  .ak-drawer-large.ak-drawer-left {
    max-width: 100%;
  }
}


/* Component: modal */

/* Modal Root */
.ak-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
}

/* Modal Mask */
.ak-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

/* Modal Wrap */
.ak-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal */
.ak-modal {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: relative;
  top: 0;
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 16px auto;
  pointer-events: auto;
}

/* Modal Content */
.ak-modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  padding: 20px 24px;
}

/* Close Button */
.ak-modal-close {
  position: absolute;
  top: 17px;
  inset-inline-end: 17px;
  z-index: 1010;
  padding: 0;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-modal-close:hover {
  color: rgba(0, 0, 0, 0.88);
  background-color: rgba(0, 0, 0, 0.06);
}

.ak-modal-close-x {
  display: flex;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  text-rendering: optimizeLegibility;
}

/* Modal Header */
.ak-modal-header {
  color: rgba(0, 0, 0, 0.88);
  background: #fff;
  border-radius: 8px 8px 0 0;
  margin-bottom: 8px;
}

.ak-modal-title {
  margin: 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Modal Body */
.ak-modal-body {
  font-size: 14px;
  line-height: 1.5714285714285714;
  word-wrap: break-word;
}

/* Modal Footer */
.ak-modal-footer {
  text-align: end;
  background: transparent;
  margin-top: 12px;
}

.ak-modal-footer .ak-btn + .ak-btn {
  margin-inline-start: 8px;
}

/* Button styles for modal (basic) */
.ak-modal-footer .ak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 6px;
}

.ak-modal-footer .ak-btn-default {
  background-color: #fff;
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.88);
}

.ak-modal-footer .ak-btn-default:hover {
  color: #1677ff;
  border-color: #1677ff;
}

.ak-modal-footer .ak-btn-primary {
  color: #fff;
  background-color: #1677ff;
  border-color: #1677ff;
}

.ak-modal-footer .ak-btn-primary:hover {
  background-color: #4096ff;
  border-color: #4096ff;
}

/* Hidden state */
[x-cloak] {
  display: none !important;
}


/* Component: message-container */

/* Message Container */
.ak-message {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: fixed;
  top: 8px;
  width: 100%;
  pointer-events: none;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Message Notice */
.ak-message-notice {
  padding: 8px;
  text-align: center;
}

.ak-message-notice-content {
  display: inline-block;
  padding: 9px 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  pointer-events: all;
}

/* Message Content */
.ak-message-custom-content {
  display: flex;
  align-items: center;
}

.ak-message-custom-content .anticon {
  margin-inline-end: 8px;
  font-size: 16px;
  line-height: 0;
}

/* Message Types */
.ak-message-success .anticon {
  color: #52c41a;
}

.ak-message-error .anticon {
  color: #ff4d4f;
}

.ak-message-warning .anticon {
  color: #faad14;
}

.ak-message-info .anticon {
  color: #1677ff;
}

.ak-message-loading .anticon {
  color: #1677ff;
}

/* Animations */
.ak-message-notice-enter {
  transition: all 0.3s ease-out;
}

.ak-message-notice-enter-start {
  opacity: 0;
  transform: translateY(-100%);
}

.ak-message-notice-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.ak-message-notice-leave {
  transition: all 0.3s ease-in;
}

.ak-message-notice-leave-start {
  opacity: 1;
  max-height: 150px;
}

.ak-message-notice-leave-end {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* Component: message */

/* Spinning animation for loading */
@keyframes ak-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ak-spin {
  animation: ak-spin 1s linear infinite;
}


/* Component: progress */

/* Progress Line Base */
.ak-progress {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  display: inline-block;
}

.ak-progress-line {
  position: relative;
  width: 100%;
  font-size: 14px;
}

/* Progress Outer */
.ak-progress-outer {
  display: inline-block;
  width: 100%;
  margin-inline-end: 0;
  padding-inline-end: 0;
}

.ak-progress-show-info .ak-progress-outer {
  margin-inline-end: calc(-2em - 8px);
  padding-inline-end: calc(2em + 8px);
}

/* Progress Inner (track) */
.ak-progress-inner {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Progress Bar */
.ak-progress-bg {
  position: relative;
  background-color: #1677ff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%);
  border-radius: 100px;
  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
  box-shadow: 0 1px 2px rgba(22, 119, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Success segment */
.ak-progress-success-bg {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background-color: #52c41a;
  border-radius: 100px;
}

/* Progress Text */
.ak-progress-text {
  display: inline-block;
  width: 2em;
  margin-inline-start: 8px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle;
  word-break: normal;
}

/* Status Colors */
.ak-progress-status-success .ak-progress-bg {
  background-color: #52c41a;
  box-shadow: 0 1px 2px rgba(82, 196, 26, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ak-progress-status-success .ak-progress-text {
  color: #52c41a;
}

.ak-progress-status-exception .ak-progress-bg {
  background-color: #ff4d4f;
  box-shadow: 0 1px 2px rgba(255, 77, 79, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ak-progress-status-exception .ak-progress-text {
  color: #ff4d4f;
}

/* Active animation */
.ak-progress-status-active .ak-progress-bg::before {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 10px;
  opacity: 0;
  animation: ak-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  content: '';
}

@keyframes ak-progress-active {
  0% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.1;
  }
  20% {
    transform: translateX(-100%) scaleX(0);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 0;
  }
}

/* Small size */
.ak-progress-small .ak-progress-text {
  font-size: 12px;
}


/* Component: progress-circle */

/* Progress Circle */
.ak-progress-circle {
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.ak-progress-circle-svg {
  transform: rotate(-90deg);
}

.ak-progress-circle-trail {
  stroke: rgba(0, 0, 0, 0.06);
}

.ak-progress-circle-path {
  stroke: #1677ff;
  transition: stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(22, 119, 255, 0.4));
}

/* Circle Text */
.ak-progress-circle .ak-progress-text {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 1em;
  line-height: 1;
  white-space: normal;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* Status Colors */
.ak-progress-circle.ak-progress-status-success .ak-progress-circle-path {
  stroke: #52c41a;
}

.ak-progress-circle.ak-progress-status-success .ak-progress-text {
  color: #52c41a;
}

.ak-progress-circle.ak-progress-status-exception .ak-progress-circle-path {
  stroke: #ff4d4f;
}

.ak-progress-circle.ak-progress-status-exception .ak-progress-text {
  color: #ff4d4f;
}


/* Component: progress-animated */

/* Animated Progress - inherits base progress styles */
.ak-progress-animated .ak-progress-bg {
  transition: none;
}

.ak-progress-animated .ak-progress-text {
  font-variant-numeric: tabular-nums;
}


/* Component: progress-steps */

/* Progress Steps */
.ak-progress-steps {
  display: inline-flex;
  align-items: center;
}

.ak-progress-steps-outer {
  display: flex;
  gap: 2px;
}

.ak-progress-steps-item {
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  transition: all 0.3s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ak-progress-steps-item-active {
  background-color: #1677ff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  box-shadow: 0 1px 2px rgba(22, 119, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ak-progress-steps-item-current {
  animation: ak-progress-step-pulse 1s ease-in-out infinite;
}

@keyframes ak-progress-step-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Status colors for steps */
.ak-progress-steps.ak-progress-status-success .ak-progress-steps-item-active {
  background-color: #52c41a;
}

.ak-progress-steps.ak-progress-status-exception .ak-progress-steps-item-active {
  background-color: #ff4d4f;
}

.ak-progress-steps .ak-progress-text {
  margin-inline-start: 8px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}


/* Component: progress-circle-animated */

/* Animated circle progress - no CSS transition needed */
.ak-progress-circle-animated .ak-progress-circle-path {
  transition: none;
}

.ak-progress-circle .ak-progress-text {
  font-variant-numeric: tabular-nums;
}


/* Component: skeleton */

/* Skeleton Styles */
.ak-skeleton {
  display: flex;
  gap: 16px;
}

.ak-skeleton-header {
  flex-shrink: 0;
}

.ak-skeleton-avatar {
  display: block;
  background: rgba(0, 0, 0, 0.06);
}

.ak-skeleton-avatar-circle {
  border-radius: 50%;
}

.ak-skeleton-avatar-square {
  border-radius: 4px;
}

.ak-skeleton-avatar-small {
  width: 24px;
  height: 24px;
}

.ak-skeleton-avatar-default {
  width: 32px;
  height: 32px;
}

.ak-skeleton-avatar-large {
  width: 40px;
  height: 40px;
}

.ak-skeleton-content {
  flex: 1;
}

.ak-skeleton-title {
  height: 16px;
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.ak-skeleton-paragraph {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 24px;
}

.ak-skeleton-paragraph li {
  height: 16px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  margin-top: 16px;
}

.ak-skeleton-paragraph li:first-child {
  margin-top: 0;
}

.ak-skeleton-paragraph li:last-child {
  width: 61%;
}

/* Active Animation */
.ak-skeleton-active .ak-skeleton-avatar,
.ak-skeleton-active .ak-skeleton-title,
.ak-skeleton-active .ak-skeleton-paragraph li {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);
  background-size: 400% 100%;
  animation: ak-skeleton-loading 1.4s ease infinite;
}

@keyframes ak-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Dark Mode */
.dark .ak-skeleton-avatar,
.dark .ak-skeleton-title,
.dark .ak-skeleton-paragraph li,
[data-theme="dark"] .ak-skeleton-avatar,
[data-theme="dark"] .ak-skeleton-title,
[data-theme="dark"] .ak-skeleton-paragraph li {
  background: rgba(255, 255, 255, 0.08);
}

.dark .ak-skeleton-active .ak-skeleton-avatar,
.dark .ak-skeleton-active .ak-skeleton-title,
.dark .ak-skeleton-active .ak-skeleton-paragraph li,
[data-theme="dark"] .ak-skeleton-active .ak-skeleton-avatar,
[data-theme="dark"] .ak-skeleton-active .ak-skeleton-title,
[data-theme="dark"] .ak-skeleton-active .ak-skeleton-paragraph li {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.16) 37%, rgba(255, 255, 255, 0.08) 63%);
  background-size: 400% 100%;
}


/* Component: skeleton-button */

.ak-skeleton-button {
  display: inline-block;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.ak-skeleton-button-small { width: 64px; height: 24px; }
.ak-skeleton-button-default { width: 64px; height: 32px; }
.ak-skeleton-button-large { width: 80px; height: 40px; }

.ak-skeleton-button-round { border-radius: 32px; }
.ak-skeleton-button-circle { border-radius: 50%; width: 32px; }
.ak-skeleton-button-circle.ak-skeleton-button-small { width: 24px; height: 24px; }
.ak-skeleton-button-circle.ak-skeleton-button-large { width: 40px; height: 40px; }

.ak-skeleton-button-block { display: block; width: 100%; }

.ak-skeleton-button.ak-skeleton-active {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);
  background-size: 400% 100%;
  animation: ak-skeleton-loading 1.4s ease infinite;
}

.dark .ak-skeleton-button,
[data-theme="dark"] .ak-skeleton-button {
  background: rgba(255, 255, 255, 0.08);
}

.dark .ak-skeleton-button.ak-skeleton-active,
[data-theme="dark"] .ak-skeleton-button.ak-skeleton-active {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.16) 37%, rgba(255, 255, 255, 0.08) 63%);
  background-size: 400% 100%;
}


/* Component: skeleton-input */

.ak-skeleton-input {
  display: inline-block;
  vertical-align: middle;
  width: 160px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.ak-skeleton-input-small { height: 24px; }
.ak-skeleton-input-default { height: 32px; }
.ak-skeleton-input-large { height: 40px; }

.ak-skeleton-input.ak-skeleton-active {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);
  background-size: 400% 100%;
  animation: ak-skeleton-loading 1.4s ease infinite;
}

.dark .ak-skeleton-input,
[data-theme="dark"] .ak-skeleton-input {
  background: rgba(255, 255, 255, 0.08);
}

.dark .ak-skeleton-input.ak-skeleton-active,
[data-theme="dark"] .ak-skeleton-input.ak-skeleton-active {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.16) 37%, rgba(255, 255, 255, 0.08) 63%);
  background-size: 400% 100%;
}


/* Component: spin */

/* Spin Nested Loading */
.ak-spin-nested-loading {
  position: relative;
}

.ak-spin-nested-loading > div > .ak-spin {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 400px;
}

.ak-spin-nested-loading > div > .ak-spin .ak-spin-dot {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  margin: -10px;
}

.ak-spin-nested-loading > div > .ak-spin .ak-spin-text {
  position: absolute;
  top: 50%;
  width: 100%;
  padding-top: 6px;
  text-shadow: 0 1px 2px #fff;
  font-size: 14px;
}

.ak-spin-nested-loading > div > .ak-spin.ak-spin-show-text .ak-spin-dot {
  margin-top: -20px;
}

/* Spin Container */
.ak-spin-container {
  position: relative;
  transition: opacity 0.3s;
}

.ak-spin-container::after {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 10;
  display: none;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: all 0.3s;
  content: '';
  pointer-events: none;
}

.ak-spin-blur {
  clear: both;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.ak-spin-blur::after {
  opacity: 0.4;
  pointer-events: auto;
}

/* Spin Base */
.ak-spin {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #1677ff;
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  position: absolute;
  display: none;
  color: #1677ff;
  font-size: 0;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.ak-spin-spinning {
  position: static;
  display: inline-block;
  opacity: 1;
}

/* Spin Dot */
.ak-spin-dot {
  position: relative;
  display: inline-block;
  font-size: 20px;
  width: 1em;
  height: 1em;
}

.ak-spin-dot-item {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  background-color: #1677ff;
  border-radius: 100%;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  opacity: 0.3;
  animation: antSpinMove 1s infinite linear alternate;
}

.ak-spin-dot-item:nth-child(1) {
  top: 0;
  inset-inline-start: 0;
}

.ak-spin-dot-item:nth-child(2) {
  top: 0;
  inset-inline-end: 0;
  animation-delay: 0.4s;
}

.ak-spin-dot-item:nth-child(3) {
  inset-inline-end: 0;
  bottom: 0;
  animation-delay: 0.8s;
}

.ak-spin-dot-item:nth-child(4) {
  bottom: 0;
  inset-inline-start: 0;
  animation-delay: 1.2s;
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

.ak-spin-dot-spin {
  transform: rotate(0deg);
  animation: antRotate 1.2s infinite linear;
}

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

/* Spin Text */
.ak-spin-text {
  padding-top: 4px;
  color: #1677ff;
  text-shadow: 0 1px 2px #fff;
}

/* Size Variants */
.ak-spin-sm .ak-spin-dot {
  font-size: 14px;
}

.ak-spin-sm .ak-spin-dot-item {
  width: 6px;
  height: 6px;
}

.ak-spin-lg .ak-spin-dot {
  font-size: 32px;
}

.ak-spin-lg .ak-spin-dot-item {
  width: 14px;
  height: 14px;
}


/* Component: spinner */
/* CSS inherited from spin base */

/* Component: animation-utilities */

/* ============================================
   ANIMATION UTILITIES
   Apply these classes to any element for effects
   ============================================ */

/* ----- Animation Variables ----- */
:root {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-fill: both;
}

/* Base animated class - apply with specific animation */
.animated {
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-timing);
  animation-fill-mode: var(--animate-fill);
  animation-delay: var(--animate-delay);
}

/* Duration modifiers */
.animate-faster { --animate-duration: 0.2s; }
.animate-fast { --animate-duration: 0.3s; }
.animate-slow { --animate-duration: 0.8s; }
.animate-slower { --animate-duration: 1.2s; }

/* Delay modifiers */
.animate-delay-100 { --animate-delay: 0.1s; }
.animate-delay-200 { --animate-delay: 0.2s; }
.animate-delay-300 { --animate-delay: 0.3s; }
.animate-delay-500 { --animate-delay: 0.5s; }
.animate-delay-700 { --animate-delay: 0.7s; }
.animate-delay-1000 { --animate-delay: 1s; }

/* Iteration modifiers */
.animate-infinite { animation-iteration-count: infinite; }
.animate-repeat-2 { animation-iteration-count: 2; }
.animate-repeat-3 { animation-iteration-count: 3; }

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation-name: fadeIn; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-fade-in-left { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-fade-in-right { animation-name: fadeInRight; }

/* Slide In */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-in-up { animation-name: slideInUp; }

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-in-down { animation-name: slideInDown; }

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slide-in-left { animation-name: slideInLeft; }

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slide-in-right { animation-name: slideInRight; }

/* Zoom In */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-zoom-in { animation-name: zoomIn; }

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(40px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-zoom-in-up { animation-name: zoomInUp; }

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-scale-in { animation-name: scaleIn; }

/* Flip In */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0);
  }
}
.animate-flip-in-x { animation-name: flipInX; }

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}
.animate-flip-in-y { animation-name: flipInY; }

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.animate-bounce-in { animation-name: bounceIn; }

/* ============================================
   EXIT ANIMATIONS
   ============================================ */

/* Fade Out */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.animate-fade-out { animation-name: fadeOut; }

@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.animate-fade-out-up { animation-name: fadeOutUp; }

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}
.animate-fade-out-down { animation-name: fadeOutDown; }

/* Zoom Out */
@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}
.animate-zoom-out { animation-name: zoomOut; }

/* Slide Out */
@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.animate-slide-out-up { animation-name: slideOutUp; }

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
.animate-slide-out-down { animation-name: slideOutDown; }

/* ============================================
   ATTENTION SEEKERS
   ============================================ */

/* Bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
.animate-bounce { animation-name: bounce; }

/* Pulse */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.animate-pulse { animation-name: pulse; animation-duration: 1s; }

/* Pulse Subtle */
@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.animate-pulse-subtle { animation-name: pulseSubtle; animation-duration: 2s; }

/* Shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.animate-shake { animation-name: shake; animation-duration: 0.5s; }

/* Shake Horizontal (stronger) */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.animate-shake-x { animation-name: shakeX; animation-duration: 0.8s; }

/* Shake Vertical */
@keyframes shakeY {
  0%, 100% { transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-4px); }
  20%, 40%, 60%, 80% { transform: translateY(4px); }
}
.animate-shake-y { animation-name: shakeY; animation-duration: 0.5s; }

/* Wiggle */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}
.animate-wiggle { animation-name: wiggle; animation-duration: 0.4s; }

/* Jello */
@keyframes jello {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  30% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  40% { transform: skewX(6.25deg) skewY(6.25deg); }
  50% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  65% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  75% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
}
.animate-jello { animation-name: jello; animation-duration: 0.8s; }

/* Rubber Band */
@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}
.animate-rubber-band { animation-name: rubberBand; animation-duration: 0.8s; }

/* Tada */
@keyframes tada {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
.animate-tada { animation-name: tada; animation-duration: 0.8s; }

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
.animate-heartbeat { animation-name: heartbeat; animation-duration: 1.2s; }

/* Flash */
@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
.animate-flash { animation-name: flash; animation-duration: 0.8s; }

/* ============================================
   CONTINUOUS/LOOPING ANIMATIONS
   ============================================ */

/* Spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Spin Reverse */
.animate-spin-reverse {
  animation: spin 1s linear infinite reverse;
}

/* Ping (notification badge) */
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Sway */
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.animate-sway {
  animation: sway 2s ease-in-out infinite;
  transform-origin: top center;
}

/* Glow Pulse */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(22, 119, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(22, 119, 255, 0.8), 0 0 30px rgba(22, 119, 255, 0.4);
  }
}
.animate-glow {
  animation: glowPulse 2s ease-in-out infinite;
}

/* Shimmer (loading placeholder) */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Wave */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}
.animate-wave {
  animation: wave 2.5s ease-in-out infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

/* ============================================
   HOVER EFFECTS (use with .hover-*)
   ============================================ */

/* Hover Lift */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Hover Scale */
.hover-scale {
  transition: transform 0.2s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

/* Hover Grow */
.hover-grow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-grow:hover {
  transform: scale(1.1);
}

/* Hover Shrink */
.hover-shrink {
  transition: transform 0.2s ease;
}
.hover-shrink:hover {
  transform: scale(0.95);
}

/* Hover Rotate */
.hover-rotate {
  transition: transform 0.3s ease;
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Hover Rotate Full */
.hover-rotate-full {
  transition: transform 0.5s ease;
}
.hover-rotate-full:hover {
  transform: rotate(360deg);
}

/* Hover Tilt */
.hover-tilt {
  transition: transform 0.3s ease;
}
.hover-tilt:hover {
  transform: perspective(500px) rotateX(5deg) rotateY(-5deg);
}

/* Hover Glow */
.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 15px rgba(22, 119, 255, 0.5);
}

/* Hover Shadow */
.hover-shadow {
  transition: box-shadow 0.3s ease;
}
.hover-shadow:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Hover Brighten */
.hover-brighten {
  transition: filter 0.2s ease;
}
.hover-brighten:hover {
  filter: brightness(1.1);
}

/* Hover Underline Slide */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}
.hover-underline:hover::after {
  width: 100%;
}

/* ============================================
   SCROLL-TRIGGERED (use with Alpine.js x-intersect)
   ============================================ */

/* Initially hidden, animate when visible */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; }
.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animated,
  [class*="animate-"],
  [class*="hover-"] {
    animation: none !important;
    transition: none !important;
  }
}


/* Component: animated-counter */

.animated-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}


/* Component: typewriter */

.typewriter {
  display: inline-block;
}

.typewriter-cursor {
  animation: blink 1s step-end infinite;
  font-weight: 100;
  color: currentColor;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

[x-cloak] {
  display: none !important;
}


/* Component: text-reveal */

.text-reveal {
  display: inline-block;
  overflow: hidden;
}

.text-reveal-inner {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}

.text-reveal-visible .text-reveal-inner {
  transform: translateY(0);
  opacity: 1;
}

/* Direction variants */
.text-reveal-down .text-reveal-inner {
  transform: translateY(-100%);
}

.text-reveal-left .text-reveal-inner {
  transform: translateX(100%);
}

.text-reveal-right .text-reveal-inner {
  transform: translateX(-100%);
}


/* Component: drag-drop-canvas */
/* ==========================================================================
   Drag-Drop Canvas Component
   ========================================================================== */

.ak-ddc {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  height: 100%;
  min-height: 500px;
  background-color: var(--color-background, #0a0a0a);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
}

/* Palette */
.ak-ddc-palette {
  background-color: var(--color-surface, #111);
  border-right: 1px solid var(--color-border, #333);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ak-ddc-palette-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border, #333);
  color: var(--color-on-background, #fff);
}

.ak-ddc-palette-search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border, #333);
}

.ak-ddc-palette-categories {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.ak-ddc-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--color-on-muted, #888);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.ak-ddc-category-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  padding: 0.25rem 0;
}

.ak-ddc-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: var(--color-muted, #1a1a1a);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.6875rem;
  color: var(--color-on-muted, #888);
  cursor: grab;
  transition: all 0.15s;
}

.ak-ddc-palette-item:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-on-background, #fff);
}

.ak-ddc-palette-item i {
  font-size: 1rem;
}

/* Canvas */
.ak-ddc-canvas-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--color-muted, #1a1a1a);
}

.ak-ddc-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: var(--color-surface, #111);
  border-bottom: 1px solid var(--color-border, #333);
}

.ak-ddc-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--color-on-muted, #888);
  cursor: pointer;
  transition: all 0.15s;
}

.ak-ddc-toolbar-btn:hover:not(:disabled) {
  background-color: var(--color-muted, #1a1a1a);
  color: var(--color-on-background, #fff);
}

.ak-ddc-toolbar-btn.active {
  background-color: var(--color-primary, #a855f7);
  color: white;
}

.ak-ddc-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ak-ddc-toolbar-sep {
  width: 1px;
  height: 1.5rem;
  background-color: var(--color-border, #333);
  margin: 0 0.25rem;
}

.ak-ddc-canvas {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
}

.ak-ddc-canvas-desktop .ak-ddc-nodes { width: 100%; max-width: 1200px; }
.ak-ddc-canvas-tablet .ak-ddc-nodes { width: 768px; }
.ak-ddc-canvas-mobile .ak-ddc-nodes { width: 375px; }

.ak-ddc-nodes {
  background-color: var(--color-surface, #111);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
  min-height: 400px;
  padding: 0.5rem;
}

.ak-ddc-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 200px;
  border: 2px dashed var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-on-muted, #666);
  font-size: 0.875rem;
}

.ak-ddc-drop-zone i {
  font-size: 2rem;
  opacity: 0.5;
}

/* Nodes */
.ak-ddc-node {
  position: relative;
  margin: 0.25rem 0;
  padding: 0.5rem;
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-sm, 0.25rem);
  background-color: var(--color-muted, #1a1a1a);
  cursor: pointer;
  transition: all 0.15s;
}

.ak-ddc-node:hover {
  border-color: var(--color-primary, #a855f7);
}

.ak-ddc-node-selected {
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
}

.ak-ddc-node-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-on-muted, #888);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.ak-ddc-node-icon {
  font-size: 0.75rem;
  color: var(--color-primary, #a855f7);
}

.ak-ddc-node-content {
  font-size: 0.8125rem;
  color: var(--color-on-background, #fff);
}

.ak-ddc-node-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.25rem;
}

.ak-ddc-node-actions button {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-surface, #111);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--color-on-muted, #888);
  font-size: 0.625rem;
  cursor: pointer;
}

.ak-ddc-node-actions button:hover {
  color: var(--color-on-background, #fff);
}

.ak-ddc-node-children {
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border, #333);
}

/* Code View */
.ak-ddc-code-view {
  width: 100%;
  height: 100%;
}

.ak-ddc-code-textarea {
  width: 100%;
  height: 100%;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: var(--color-surface, #1e1e1e);
  color: var(--color-on-surface, #d4d4d4);
  border: none;
  resize: none;
}

/* Properties Panel */
.ak-ddc-properties {
  background-color: var(--color-surface, #111);
  border-left: 1px solid var(--color-border, #333);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ak-ddc-properties-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border, #333);
  color: var(--color-on-background, #fff);
}

.ak-ddc-properties-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.ak-ddc-properties-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-on-muted, #666);
  font-size: 0.875rem;
}

.ak-ddc-prop-group {
  margin-bottom: 0.75rem;
}

.ak-ddc-prop-group label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-on-muted, #888);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.ak-ddc-prop-group .ak-input {
  width: 100%;
}

.ak-ddc-add-prop {
  width: 100%;
  margin-top: 0.5rem;
}


/* Component: syntax-highlight */

/* ============================================
   SYNTAX HIGHLIGHTING THEME
   Dark theme optimized for AppKit templates
   ============================================ */

/* Code block base styling */
pre {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

pre code {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #e6edf3;
  background: transparent;
  padding: 0;
}

/* Inline code */
:not(pre) > code {
  background: rgba(110, 118, 129, 0.2);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  color: #e6edf3;
}

/* ----- AppKit Template Syntax ----- */

/* Brackets {{ }} */
.sh-bracket {
  color: #8b949e;
  font-weight: 500;
}

/* ui: prefix */
.sh-prefix {
  color: #ff7b72;
  font-weight: 600;
}

/* Component name */
.sh-component {
  color: #79c0ff;
  font-weight: 600;
}

/* Attributes */
.sh-attr {
  color: #d2a8ff;
}

/* String values */
.sh-string {
  color: #a5d6ff;
}

/* Quotes */
.sh-quote {
  color: #7ee787;
}

/* Punctuation (= / #) */
.sh-punct {
  color: #8b949e;
}

/* Variables {{variable}} */
.sh-variable {
  color: #ffa657;
}

/* Raw variables {{{raw}}} */
.sh-raw {
  color: #f0883e;
  font-style: italic;
}

/* Keywords (if, each, else, etc.) */
.sh-keyword {
  color: #ff7b72;
  font-weight: 600;
}

/* ----- HTML Syntax ----- */

/* HTML brackets < > */
.sh-html-bracket {
  color: #8b949e;
}

/* HTML tag names */
.sh-html-tag {
  color: #7ee787;
}

/* HTML attributes */
.sh-html-attr {
  color: #79c0ff;
}

/* HTML string values */
.sh-html-string {
  color: #a5d6ff;
}

/* Comments */
.sh-comment {
  color: #6e7681;
  font-style: italic;
}

/* ----- Additional Utility Classes ----- */

/* Line numbers (optional) */
pre.line-numbers {
  counter-reset: line;
}

pre.line-numbers code {
  display: block;
}

pre.line-numbers code::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2.5em;
  margin-right: 1em;
  text-align: right;
  color: #484f58;
  user-select: none;
}

/* Copy button styling */
.code-block-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #8b949e;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-block-wrapper:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: #30363d;
  color: #e6edf3;
}

/* ----- Language Labels ----- */

pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* Component: inline-code */

.inline-code {
  background: rgba(110, 118, 129, 0.2);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  color: #e6edf3;
}


/* Component: helpers */

/* ==========================================================================
   Helper Utilities
   General-purpose CSS utilities for common patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Reset & Typography
   -------------------------------------------------------------------------- */

/**
 * Base HTML and Body styles
 * Sets system fonts, smooth scrolling, and base typography
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: inherit;
  background-color: var(--color-background, #ffffff);
  color: var(--color-on-background, #1a1a1a);
}

/* --------------------------------------------------------------------------
   Dark Mode Base Styles
   -------------------------------------------------------------------------- */

/**
 * Dark theme color overrides
 * Applied when [data-theme="dark"] is set on html element
 */
[data-theme="dark"] {
  --color-primary: #a855f7;
  --color-primary-hover: #9333ea;
  --color-primary-active: #7c3aed;
  --color-on-primary: #ffffff;
  --color-secondary: #ec4899;
  --color-secondary-hover: #db2777;
  --color-on-secondary: #ffffff;
  --color-surface: #111111;
  --color-surface-hover: #1a1a1a;
  --color-on-surface: #f1f5f9;
  --color-background: #0a0a0a;
  --color-on-background: rgba(255, 255, 255, 0.88);
  --color-muted: #1e293b;
  --color-on-muted: rgba(255, 255, 255, 0.6);
  --color-text: #f1f5f9;
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-border: #333333;
  --color-border-hover: #444444;
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: var(--color-background, #0a0a0a);
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

/* --------------------------------------------------------------------------
   Accessibility Utilities
   -------------------------------------------------------------------------- */

/**
 * Skip Link - WCAG 2.4.1
 * Visually hidden until focused, allows keyboard users to skip navigation
 */
.ak-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary, #a855f7);
  color: var(--color-on-primary, #ffffff);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md, 0.375rem);
  transition: top 0.2s ease-in-out;
}

.ak-skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--color-primary, #a855f7);
  outline-offset: 2px;
}

/**
 * Screen Reader Only - WCAG
 * Visually hidden but accessible to screen readers
 */
.ak-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ak-sr-only-focusable:focus,
.ak-sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Text Utilities
   -------------------------------------------------------------------------- */

/**
 * Muted Text - Secondary/subdued text color
 */
.ak-text-muted {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.6));
}

/**
 * Text Size Variants
 */
.ak-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.ak-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ak-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.ak-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.ak-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.ak-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/**
 * Title Utilities - Large headings
 */
.ak-title-sm {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  color: var(--color-on-background, #ffffff);
}

.ak-title-md {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  color: var(--color-on-background, #ffffff);
}

.ak-title-lg {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
  color: var(--color-on-background, #ffffff);
}

.ak-title-xl {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.025em;
  color: var(--color-on-background, #ffffff);
}

.ak-title-2xl {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-on-background, #ffffff);
}

/* --------------------------------------------------------------------------
   Setup Page Utilities
   -------------------------------------------------------------------------- */

/**
 * Setup Logo - Animated logo for setup/splash pages
 */
.ak-setup-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(
    135deg,
    var(--color-primary, #a855f7) 0%,
    var(--color-secondary, #ec4899) 100%
  );
  border-radius: 1rem;
  font-size: 2.5rem;
  color: var(--color-on-primary, #ffffff);
  box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.4);
  animation: ak-logo-pulse 3s ease-in-out infinite;
}

@keyframes ak-logo-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 15px 30px -5px rgba(168, 85, 247, 0.5);
  }
}

/* --------------------------------------------------------------------------
   Alert Theme Overrides (Dark Mode)
   -------------------------------------------------------------------------- */

[data-theme="dark"] .ak-alert {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

[data-theme="dark"] .ak-alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .ak-alert-success .ak-alert-icon {
  color: #22c55e;
}

[data-theme="dark"] .ak-alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .ak-alert-info .ak-alert-icon {
  color: #3b82f6;
}

[data-theme="dark"] .ak-alert-warning {
  background-color: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
}

[data-theme="dark"] .ak-alert-warning .ak-alert-icon {
  color: #eab308;
}

[data-theme="dark"] .ak-alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .ak-alert-error .ak-alert-icon {
  color: #ef4444;
}

[data-theme="dark"] .ak-alert-message {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

[data-theme="dark"] .ak-alert-description {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.6));
}

[data-theme="dark"] .ak-alert-close-icon {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.45));
}

[data-theme="dark"] .ak-alert-close-icon:hover {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

/* --------------------------------------------------------------------------
   Input Dark Mode Overrides
   -------------------------------------------------------------------------- */

[data-theme="dark"] .ak-input {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
  background-color: var(--color-surface, #1a1a1a);
  border-color: var(--color-border, #333333);
}

[data-theme="dark"] .ak-input::placeholder {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.4));
}

[data-theme="dark"] .ak-input:hover:not(:focus) {
  border-color: var(--color-border-hover, #444444);
}

[data-theme="dark"] .ak-input:focus {
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .ak-input-disabled,
[data-theme="dark"] .ak-input[disabled] {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.25));
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border, #333333);
}

[data-theme="dark"] .ak-input-affix-wrapper {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
  background-color: var(--color-surface, #1a1a1a);
  border-color: var(--color-border, #333333);
}

[data-theme="dark"] .ak-input-affix-wrapper:hover:not(:focus-within) {
  border-color: var(--color-border-hover, #444444);
}

[data-theme="dark"] .ak-input-affix-wrapper-focused,
[data-theme="dark"] .ak-input-affix-wrapper:focus-within {
  border-color: var(--color-primary, #a855f7);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

[data-theme="dark"] .ak-input-prefix,
[data-theme="dark"] .ak-input-suffix {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.45));
}

/* --------------------------------------------------------------------------
   Form Item Dark Mode Overrides
   -------------------------------------------------------------------------- */

[data-theme="dark"] .ak-form-item {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

[data-theme="dark"] .ak-form-item-label > label,
[data-theme="dark"] label.ak-form-item-label {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
}

[data-theme="dark"] .ak-form-item-extra {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.45));
}

[data-theme="dark"] .ak-form-item-explain-error {
  color: #ef4444;
}

[data-theme="dark"] .ak-form-item-explain-warning {
  color: #eab308;
}

[data-theme="dark"] .ak-form-item-explain-success {
  color: #22c55e;
}

/* --------------------------------------------------------------------------
   Button Dark Mode Overrides
   -------------------------------------------------------------------------- */

[data-theme="dark"] .ak-btn-primary {
  background-color: var(--color-primary, #a855f7);
  border-color: var(--color-primary, #a855f7);
  color: var(--color-on-primary, #ffffff);
}

[data-theme="dark"] .ak-btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover, #9333ea);
  border-color: var(--color-primary-hover, #9333ea);
}

[data-theme="dark"] .ak-btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-active, #7c3aed);
  border-color: var(--color-primary-active, #7c3aed);
}

[data-theme="dark"] .ak-btn-default {
  color: var(--color-on-background, rgba(255, 255, 255, 0.88));
  background-color: transparent;
  border-color: var(--color-border, #333333);
}

[data-theme="dark"] .ak-btn-default:hover:not(:disabled) {
  color: var(--color-primary, #a855f7);
  border-color: var(--color-primary, #a855f7);
}

[data-theme="dark"] .ak-btn:disabled {
  color: var(--color-on-muted, rgba(255, 255, 255, 0.25));
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border, #333333);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Box Dark Mode Overrides (Every Layout)
   -------------------------------------------------------------------------- */

[data-theme="dark"] .box-bordered {
  border-color: var(--color-border, #333333);
  background-color: var(--color-surface, #111111);
}


/* Component: sparkline */

/* Sparkline Base */
.appkit-sparkline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.appkit-sparkline canvas {
  display: block;
}

/* Variant colors */
.appkit-sparkline-success { --sparkline-color: var(--color-success, #22c55e); }
.appkit-sparkline-warning { --sparkline-color: var(--color-warning, #f59e0b); }
.appkit-sparkline-error { --sparkline-color: var(--color-error, #ef4444); }
.appkit-sparkline-info { --sparkline-color: var(--color-info, #3b82f6); }


/* Component: progress-ring */

/* Progress Ring */
.appkit-progress-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
}

.appkit-progress-ring canvas {
  display: block;
}

.appkit-progress-ring-value {
  position: absolute;
  font-size: 8px;
  font-weight: 600;
  color: inherit;
}

/* Variants */
.appkit-progress-ring-success { --ring-color: var(--color-success, #22c55e); }
.appkit-progress-ring-warning { --ring-color: var(--color-warning, #f59e0b); }
.appkit-progress-ring-error { --ring-color: var(--color-error, #ef4444); }
.appkit-progress-ring-info { --ring-color: var(--color-info, #3b82f6); }


/* Component: map-container */

/* Map Container */
.appkit-map {
  position: relative;
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--color-surface, #f5f5f5);
}

.appkit-map-canvas {
  width: 100%;
  height: 100%;
}

/* Size variants */
.appkit-map-sm { height: 200px; }
.appkit-map-md { height: 400px; }
.appkit-map-lg { height: 600px; }
.appkit-map-xl { height: 800px; }
.appkit-map-full { height: 100vh; }


/* Component: map-popup */

/* Map Popup */
.appkit-map-popup {
  position: absolute;
  z-index: 100;
}


/* Component: map-drawing-tool */

/* Drawing Tool */
.appkit-draw-toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: white;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

.appkit-draw-toolbar button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.15s;
}

.appkit-draw-toolbar button:hover {
  background: #f1f5f9;
}

.appkit-draw-toolbar button.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}


/* Component: map-measure-tool */

/* Measure Tool */
.appkit-measure-toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
  background: white;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

.appkit-measure-toolbar button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.appkit-measure-toolbar button.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.appkit-measure-result {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 4px;
}


/* Component: map-route-animation */

/* Route Animation Controls */
.appkit-route-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

.appkit-route-controls button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.appkit-route-controls button:hover {
  background: #f1f5f9;
}

.appkit-route-controls input[type="range"] {
  width: 100px;
}

.appkit-route-controls span {
  font-size: 12px;
  color: #64748b;
  min-width: 36px;
}