/*
 * ==========================================================================
 * Layout Reminder
 * ==========================================================================
 * Please avoid using card-style layouts as much as possible.
 * White space / negative space layout is preferred and more appropriate
 * for the overall design style, reading experience and visual hierarchy.
 * Use sufficient spacing, margins and breathing room instead of container cards.
 * As a data display container, it is reasonable to adopt cards here to highlight key information.What needs to be avoided is card-style layout, not cards themselves.
 * The two style classes ksab-title and ksab-subtitle should be used for page section divisions rather than main headings. We recommend defining custom styles independently for page main titles.
 * Please use YouShe Title Black font only for headings or where absolutely necessary. Using this font throughout the entire page will reduce readability.
 * ==========================================================================
 */
 
 
 /*
 * ==========================================================================
 * Update Log
 * ==========================================================================
 * This is the third iteration of the KSAB component library. In this version, we mainly removed the input component that suffered from poor performance and low reusability. We plan to add a better input box in the next version to replace it.
 * The externally dependent font https://corextm.com/ysbth.ttf is the YouShe Title Black font deployed via EdgeOnePages. It is free for commercial use. Meanwhile, since this link is deployed on EdgeOnePages, it delivers excellent stability and is completely reliable for use.
 * Ultimately, our component library is still pretty lackluster. It hasn't officially launched yet, but what can I say? I love frontend development.Since the developer is relatively inexperienced and quite young in age—even still a minor—there are inevitably some issues in the code. Suggestions and feedback are highly welcome.Additionally, my English is not very good, so I’d appreciate it if you could check for any grammatical mistakes in the code comments.
 * Import the component library by introducing https://corextm.com/style/ksab/v2.css.
 * ==========================================================================
 */
 
 /*
 * ==========================================================================
 * Spiritual Culture
 * ==========================================================================
 * The core philosophy of the KSAB Component Library derives from the spiritual connotation of KSAB upheld by the CoreX Team (also known as CoreX Studio). Broken down, KSAB stands for Kind, Simple and Beautiful.
 * ==========================================================================
 */
 

:root {
  --ksab-primary: #0084FF;
  --ksab-danger: #f53f3f;
  --ksab-text: #333;
  --ksab-label: #666;
  --ksab-border: #ccc;
  --ksab-bg: #fff;
  --ksab-table-hover: #f8f8f8;
  --ksab-disabled-bg: rgba(0, 132, 255, 0.1);
  --ksab-disabled-border: rgba(0, 132, 255, 0.3);
  --ksab-disabled-color: rgba(0, 132, 255, 0.3);
  --ksab-font-size: 14px;
  --ksab-font-size-sm: 12px;
  --ksab-font-weight: 500;
  --ksab-radius: 20px;
  --ksab-transition: all 0.3s ease;
  --ksab-transition-label: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ksab-letter-spacing: 0.5px;
}

@font-face {
  font-family: 'Ysbth';
  src: url('https://corextm.com/fonts/ysbth.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.ksab-button {
  color: var(--ksab-primary);
  font-size: var(--ksab-font-size);
  font-weight: var(--ksab-font-weight);
  padding: 8px 20px;
  border: 1px solid var(--ksab-primary);
  border-radius: var(--ksab-radius);
  transition: var(--ksab-transition);
  background: transparent;
  cursor: pointer;
  outline: none;
  letter-spacing: var(--ksab-letter-spacing);
}

.ksab-button:hover {
  background-color: var(--ksab-primary);
  color: var(--ksab-bg);
}

.ksab-button:disabled {
  background: var(--ksab-disabled-bg);
  border-color: var(--ksab-disabled-border);
  color: var(--ksab-disabled-color);
  cursor: not-allowed;
}

.ksab-button-fill {
  background-color: var(--ksab-primary);
  color: var(--ksab-bg);
}

.ksab-button-fill:hover {
  background-color: #0066cc;
  border-color: #0066cc;
}

.ksab-title {
  color: var(--ksab-primary);
  font-family: 'Ysbth', sans-serif;
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 5px;
}

.ksab-subtitle {
  color: var(--ksab-primary);
  font-family: 'Ysbth', sans-serif;
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 30px;
  opacity: 0.8;
}

.ksab-title-center {
  text-align: center;
}

.ksab-subtitle-center {
  text-align: center;
}

.ksab-table-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: var(--ksab-radius);
  border: 1px solid var(--ksab-border);
  background: var(--ksab-bg);
}

.ksab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ksab-font-size);
  font-weight: var(--ksab-font-weight);
  letter-spacing: var(--ksab-letter-spacing);
  color: var(--ksab-text);
}

.ksab-table thead th {
  padding: 12px 16px;
  text-align: left;
  background: var(--ksab-bg);
  color: var(--ksab-text);
  border-bottom: 1px solid var(--ksab-border);
  border-right: 1px solid var(--ksab-border);
  font-weight: var(--ksab-font-weight);
}

.ksab-table thead th:last-child {
  border-right: none;
}

.ksab-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ksab-border);
  border-right: 1px solid var(--ksab-border);
  transition: var(--ksab-transition);
}

.ksab-table tbody td:last-child {
  border-right: none;
}

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

.ksab-table tbody tr:hover {
  background: var(--ksab-table-hover);
}

.ksab-table--compact th,
.ksab-table--compact td {
  padding: 8px 12px;
}

.ksab-table--center th,
.ksab-table--center td {
  text-align: center;
}

.ksab-radio-group,
.ksab-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--ksab-font-size);
  color: var(--ksab-text);
  margin: 8px 0;
}

.ksab-radio,
.ksab-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ksab-border);
  border-radius: 50%;
  outline: none;
  transition: var(--ksab-transition);
  position: relative;
  cursor: pointer;
}

.ksab-checkbox {
  border-radius: 4px;
}

.ksab-radio:checked,
.ksab-checkbox:checked {
  background-color: var(--ksab-primary);
  border-color: var(--ksab-primary);
}

.ksab-radio:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ksab-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ksab-radio:disabled,
.ksab-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ksab-radio-label,
.ksab-checkbox-label {
  user-select: none;
}

.ksab-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ksab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 -10px;
}

.ksab-col {
  flex: 1;
  padding: 0 10px;
  min-width: 280px;
}

.ksab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.ksab-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--ksab-disabled-bg);
  background: var(--ksab-disabled-bg);
}

.ksab-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ksab-avatar--sm {
  width: 60px;
  height: 60px;
  border-width: 2px;
}

.ksab-avatar--lg {
  width: 160px;
  height: 160px;
}

.ksab-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  font-size: var(--ksab-font-size-sm);
  font-weight: var(--ksab-font-weight);
  color: var(--ksab-primary);
  background: var(--ksab-disabled-bg);
  border-radius: 12px;
  white-space: nowrap;
}

.ksab-tag--fill {
  background: var(--ksab-primary);
  color: #fff;
}

.ksab-tag--danger {
  color: var(--ksab-danger);
  background: rgba(245, 63, 63, 0.1);
}