/* ═══════════════════════════════════════════════════════════
   Aether UI — Global Stylesheet
   59 components, CSS custom properties driven
   ═══════════════════════════════════════════════════════════ */

/* ── Animation keyframes ── */
@keyframes aether-spin {
  to { transform: rotate(360deg) }
}
@keyframes aether-fade-in {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes aether-fade-out {
  from { opacity: 1; transform: translateY(0) }
  to   { opacity: 0; transform: translateY(-4px) }
}
@keyframes aether-msg-in {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes aether-msg-out {
  from { opacity: 1; transform: translateY(0) }
  to   { opacity: 0; transform: translateY(-8px) }
}
@keyframes aether-notify-in {
  from { opacity: 0; transform: translateX(20px) }
  to   { opacity: 1; transform: translateX(0) }
}
@keyframes aether-notify-out {
  from { opacity: 1; transform: translateX(0) }
  to   { opacity: 0; transform: translateX(20px) }
}
@keyframes aether-skeleton {
  0% { opacity: 1 }
  50% { opacity: 0.4 }
  100% { opacity: 1 }
}

/* ═══════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════ */
.a-button {
  margin: 0; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; flex-wrap: nowrap; text-align: center;
  height: var(--a-height, 34px); min-width: var(--a-height, 34px);
  width: var(--a-width, initial); font-size: var(--a-font-size, 14px);
  font-weight: var(--a-font-weight, 400); font-family: inherit;
  padding: var(--a-padding, 0 14px); border-radius: var(--a-border-radius, 3px);
  background: var(--a-color, #0000); color: var(--a-text-color, #333);
  border: var(--a-border, 1px solid #e0e0e6);
  cursor: pointer; user-select: none; outline: none; position: relative;
  z-index: auto; white-space: nowrap; text-decoration: none; box-sizing: border-box;
  line-height: 1;
  overflow: hidden;
  transition:
    color .3s var(--a-bezier, cubic-bezier(.4,0,.2,1)),
    background-color .3s var(--a-bezier, cubic-bezier(.4,0,.2,1)),
    opacity .3s var(--a-bezier, cubic-bezier(.4,0,.2,1)),
    border-color .3s var(--a-bezier, cubic-bezier(.4,0,.2,1));
}
.a-button:hover {
  background: var(--a-color-hover); color: var(--a-text-color-hover);
  border: var(--a-border-hover);
}
.a-button:active {
  background: var(--a-color-pressed); color: var(--a-text-color-pressed);
  border: var(--a-border-pressed, var(--a-border));
}
.a-button--disabled, .a-button[disabled] {
  opacity: var(--a-opacity-disabled, 0.5); cursor: not-allowed; pointer-events: none;
}
.a-button--block { display: flex; width: 100% }
.a-button--circle { border-radius: 50%; padding: 0 }
.a-button--round { border-radius: var(--a-height, 34px) }
.a-button--text, .a-button--text:hover, .a-button--text:active { border: none; background: transparent }
.a-button--dashed { border-style: dashed }
.a-button--secondary, .a-button--secondary:hover,
.a-button--tertiary, .a-button--tertiary:hover,
.a-button--quaternary, .a-button--quaternary:hover { border: none }
.a-button--ghost { background: transparent }
.a-button--loading { cursor: wait }

/* Button ripple */
.a-button__ripple {
  position: absolute; border-radius: 50%;
  background: var(--a-ripple-color, currentColor); opacity: 0.15;
  width: 20px; height: 20px; transform: translate(-50%, -50%) scale(0);
  animation: aether-ripple .6s var(--a-bezier-ease-out, cubic-bezier(0,0,.2,1)) forwards; pointer-events: none;
}
@keyframes aether-ripple {
  to { transform: translate(-50%, -50%) scale(25); opacity: 0 }
}

/* Custom color button */
.a-button--custom-color.a-button--default-type:not(.a-button--ghost):not(.a-button--dashed) {
  color: #fff;
}

/* Button group */
.a-button-group { display: inline-flex }
.a-button-group .a-button { border-radius: 0 }
.a-button-group .a-button:first-child { border-radius: var(--a-border-radius, 3px) 0 0 var(--a-border-radius, 3px) }
.a-button-group .a-button:last-child { border-radius: 0 var(--a-border-radius, 3px) var(--a-border-radius, 3px) 0 }
.a-button-group .a-button + .a-button { margin-left: -1px }
.a-button-group--vertical { flex-direction: column }
.a-button-group--vertical .a-button + .a-button { margin-left: 0; margin-top: -1px }
.a-button-group--vertical .a-button:first-child { border-radius: var(--a-border-radius, 3px) var(--a-border-radius, 3px) 0 0 }
.a-button-group--vertical .a-button:last-child { border-radius: 0 0 var(--a-border-radius, 3px) var(--a-border-radius, 3px) }

/* ═══════════════════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════════════════ */
.a-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1 }
.a-icon-wrapper { flex-shrink: 0 }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
.a-text { line-height: 1.6; word-break: break-word }
.a-text--strong { font-weight: 600 }
.a-text--italic { font-style: italic }
.a-text--underline { text-decoration: underline }
.a-text--delete { text-decoration: line-through }
.a-text--code { font-family: monospace; background: rgba(127,127,127,.1); padding: 1px 4px; border-radius: 2px; font-size: .9em }
.a-text--primary { color: var(--a-primary-color, #2080f0) }
.a-text--success { color: var(--a-success-color, #18a058) }
.a-text--warning { color: var(--a-warning-color, #f0a020) }
.a-text--error { color: var(--a-error-color, #d03050) }
.a-text--info { color: var(--a-info-color, #2080f0) }

.a-h { margin: 0; font-weight: 600; line-height: 1.4 }
.a-h1 { font-size: 28px }
.a-h2 { font-size: 24px }
.a-h3 { font-size: 20px }
.a-h4 { font-size: 18px }
.a-h5 { font-size: 16px }
.a-h6 { font-size: 14px }
.a-h--align-left { text-align: left }
.a-h--align-center { text-align: center }
.a-h--align-right { text-align: right }

.a-p { margin: 0 0 8px; line-height: 1.7 }
.a-blockquote { margin: 8px 0; padding: 8px 16px; border-left: 3px solid var(--a-border-color, #e0e0e6); color: var(--a-text-color-3, #999) }

/* ═══════════════════════════════════════════════════════════
   SPACE / DIVIDER / FLEX / GRID
   ═══════════════════════════════════════════════════════════ */
.a-space { display: flex }
.a-divider { border-top: 1px solid var(--a-border-color, #e0e0e6); margin: 16px 0; display: flex; align-items: center }
.a-divider--vertical { display: inline-flex; border-top: none; border-left: 1px solid var(--a-border-color, #e0e0e6); margin: 0 8px; height: 1em; vertical-align: middle }
.a-divider--dashed { border-style: dashed }
.a-divider__line { flex: 1; border-top: 1px solid var(--a-border-color, #e0e0e6) }
.a-divider--dashed .a-divider__line { border-style: dashed }
.a-divider__title { padding: 0 12px; font-size: 13px; color: var(--a-text-color-3, #999); white-space: nowrap }

.a-flex { display: flex }
.a-row { display: flex; flex-wrap: wrap }
.a-col { box-sizing: border-box }

/* ═══════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════ */
.a-badge-wrapper { position: relative; display: inline-flex }
.a-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: #d03050; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; white-space: nowrap; z-index: 1 }
.a-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; right: -4px; top: -4px }
.a-badge--processing::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit; border: 1.5px solid currentColor; animation: aether-spin 1.2s linear infinite; opacity: 0.6 }

/* ═══════════════════════════════════════════════════════════
   TAG
   ═══════════════════════════════════════════════════════════ */
.a-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 3px;
  font-size: 12px; line-height: 20px; background: rgba(127,127,127,.08); color: var(--a-text-color-2, #555);
  white-space: nowrap; transition: all .2s ease }
.a-tag--primary { background: rgba(32,128,240,.1); color: var(--a-primary-color, #2080f0) }
.a-tag--success { background: rgba(24,160,88,.1); color: var(--a-success-color, #18a058) }
.a-tag--warning { background: rgba(240,160,32,.1); color: var(--a-warning-color, #f0a020) }
.a-tag--error { background: rgba(208,48,80,.1); color: var(--a-error-color, #d03050) }
.a-tag--info { background: rgba(32,128,240,.1); color: var(--a-info-color, #2080f0) }
.a-tag--round { border-radius: 12px }
.a-tag--checkable { cursor: pointer }
.a-tag--checked { background: var(--a-primary-color, #2080f0); color: #fff }
.a-tag--disabled { opacity: .5; cursor: not-allowed }
.a-tag__close { margin-left: 4px; cursor: pointer; opacity: .5; font-size: 14px; line-height: 1 }
.a-tag__close:hover { opacity: .8 }
.a-tag--small { font-size: 11px; padding: 0 6px; line-height: 18px }
.a-tag--large { font-size: 14px; padding: 3px 12px; line-height: 22px }

/* ═══════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════ */
.a-card { background: var(--a-base-color, #fff); border-radius: 8px; overflow: hidden;
  transition: box-shadow .3s ease }
.a-card--bordered { border: 1px solid var(--a-border-color, #e0e0e6) }
.a-card--hoverable:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); cursor: pointer }
.a-card__cover img { width: 100%; display: block }
.a-card__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0 }
.a-card__title { font-weight: 600; font-size: 16px }
.a-card__action { display: flex; gap: 8px }
.a-card__body { padding: 12px 16px }
.a-card__footer { padding: 0 16px 12px; font-size: 13px; color: var(--a-text-color-3, #999) }
.a-card--small .a-card__body { padding: 8px 12px }
.a-card--large .a-card__body { padding: 16px 24px }

/* ═══════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════ */
.a-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--a-primary-color, #2080f0);
  color: #fff; font-weight: 500; overflow: hidden; flex-shrink: 0; line-height: 1 }
.a-avatar img { width: 100%; height: 100%; object-fit: cover }
.a-avatar--round { border-radius: 6px }
.a-avatar-group { display: inline-flex }
.a-avatar-group .a-avatar { margin-left: -8px; border: 2px solid var(--a-base-color, #fff) }
.a-avatar-group .a-avatar:first-child { margin-left: 0 }

/* ═══════════════════════════════════════════════════════════
   EMPTY
   ═══════════════════════════════════════════════════════════ */
.a-empty { display: flex; flex-direction: column; align-items: center; padding: 32px 16px }
.a-empty__illustration { margin-bottom: 12px; color: var(--a-text-color-3, #999) }
.a-empty__description { font-size: 14px; color: var(--a-text-color-3, #999) }
.a-empty__extra { margin-top: 12px }
.a-empty--small { padding: 16px 8px }
.a-empty--small .a-empty__description { font-size: 12px }
.a-empty--large { padding: 48px 24px }
.a-empty--large .a-empty__description { font-size: 16px }

/* ═══════════════════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════════════════ */
.a-skeleton-group { display: flex; flex-direction: column; gap: 8px }
.a-skeleton { background: rgba(127,127,127,.12); border-radius: 4px; height: 16px; min-width: 40px }
.a-skeleton--animated { animation: aether-skeleton 1.6s ease-in-out infinite }
.a-skeleton--round { border-radius: 8px }
.a-skeleton--circle { border-radius: 50% }
.a-skeleton--small { height: 12px }
.a-skeleton--large { height: 20px }

/* ═══════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════ */
.a-timeline { padding: 8px 0 }
.a-timeline-item { display: flex; position: relative; padding-bottom: 20px }
.a-timeline-item:last-child { padding-bottom: 0 }
.a-timeline-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a-border-color, #e0e0e6);
  flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1;
  border: 2px solid transparent; transition: all .2s }
.a-timeline-item--primary .a-timeline-item__dot { background: var(--a-primary-color, #2080f0) }
.a-timeline-item--success .a-timeline-item__dot { background: var(--a-success-color, #18a058) }
.a-timeline-item--warning .a-timeline-item__dot { background: var(--a-warning-color, #f0a020) }
.a-timeline-item--error .a-timeline-item__dot { background: var(--a-error-color, #d03050) }
.a-timeline-item--info .a-timeline-item__dot { background: var(--a-info-color, #2080f0) }
.a-timeline-item__line { position: absolute; left: 4px; top: 18px; bottom: 0; width: 2px;
  background: var(--a-border-color, #e0e0e6) }
.a-timeline-item:last-child .a-timeline-item__line { display: none }
.a-timeline-item--line-dashed .a-timeline-item__line { background: repeating-linear-gradient(to bottom, var(--a-border-color, #e0e0e6) 0, var(--a-border-color, #e0e0e6) 4px, transparent 4px, transparent 8px) }
.a-timeline-item__content { margin-left: 16px; flex: 1 }
.a-timeline-item__time { font-size: 12px; color: var(--a-text-color-3, #999); margin-bottom: 2px }
.a-timeline-item__title { font-weight: 500; font-size: 14px }
.a-timeline-item__body { font-size: 13px; color: var(--a-text-color-2, #555); margin-top: 4px }

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.a-pagination { display: inline-flex; align-items: center; gap: 4px }
.a-pagination__btn { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 3px; background: var(--a-base-color, #fff); color: var(--a-text-color-2, #555);
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s; outline: none }
.a-pagination__btn:hover { color: var(--a-primary-color, #2080f0); border-color: var(--a-primary-color, #2080f0) }
.a-pagination__btn--active { background: var(--a-primary-color, #2080f0); color: #fff; border-color: var(--a-primary-color, #2080f0) }
.a-pagination__btn:disabled { opacity: .4; cursor: not-allowed }
.a-pagination__size-picker { margin-left: 12px; font-size: 13px; color: var(--a-text-color-2, #555) }
.a-pagination__size-picker select { margin: 0 4px; padding: 2px 4px; border: 1px solid var(--a-border-color, #e0e0e6); border-radius: 3px; font-size: 13px; outline: none }

/* ═══════════════════════════════════════════════════════════
   TREE
   ═══════════════════════════════════════════════════════════ */
.a-tree { font-size: 14px }
.a-tree-node { line-height: 2 }
.a-tree-node__content { display: flex; align-items: center; cursor: pointer; border-radius: 3px; padding: 0 4px;
  transition: background .15s }
.a-tree-node__content:hover { background: rgba(127,127,127,.06) }
.a-tree-node__arrow { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 2px; font-size: 11px; color: var(--a-text-color-3, #999);
  transition: transform .2s; flex-shrink: 0 }
.a-tree-node__arrow--expanded { transform: rotate(90deg) }
.a-tree-node__checkbox { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 6px; border: 1.5px solid var(--a-border-color, #e0e0e6);
  border-radius: 2px; font-size: 11px; color: #fff; flex-shrink: 0; transition: all .15s }
.a-tree-node__checkbox--checked { background: var(--a-primary-color, #2080f0); border-color: var(--a-primary-color, #2080f0) }
.a-tree-node__checkbox--disabled { opacity: .4; cursor: not-allowed }
.a-tree-node__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.a-tree-node__label--selected { color: var(--a-primary-color, #2080f0); font-weight: 500 }
.a-tree-node__label--disabled { opacity: .4; cursor: not-allowed }
.a-tree-node--disabled .a-tree-node__content { cursor: not-allowed }
.a-tree-node__children { margin-left: 0 }

/* ═══════════════════════════════════════════════════════════
   MENU
   ═══════════════════════════════════════════════════════════ */
.a-menu { background: var(--a-base-color, #fff); border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 6px; padding: 4px 0; overflow: hidden }
.a-menu-item { display: flex; align-items: center; padding: 6px 12px; font-size: 14px;
  cursor: pointer; transition: all .15s; user-select: none; color: var(--a-text-color-2, #555) }
.a-menu-item:hover { background: rgba(127,127,127,.06) }
.a-menu-item--selected { color: var(--a-primary-color, #2080f0); background: rgba(32,128,240,.06) }
.a-menu-item--disabled { opacity: .4; cursor: not-allowed }
.a-menu-item__label { flex: 1 }
.a-menu-item__arrow { margin-left: 8px; font-size: 11px; color: var(--a-text-color-3, #999) }
.a-menu-item__children { border-top: 1px solid var(--a-border-color, #e0e0e6); margin: 4px 0 }
.a-menu--inverted { background: #1a1a2e; border-color: rgba(255,255,255,.1) }
.a-menu--inverted .a-menu-item { color: rgba(255,255,255,.75) }
.a-menu--inverted .a-menu-item--selected { color: var(--a-primary-color, #63a2fc) }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.a-tabs { display: flex; flex-direction: column }
.a-tab-pane { padding: 0 }
.a-tab-pane--active { display: block }
/* Tab header is rendered by user via slots; this styles the tab header area */
.a-tabs__header { display: flex; border-bottom: 2px solid var(--a-border-color, #e0e0e6); gap: 0 }
.a-tabs__tab { padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  font-size: 14px; color: var(--a-text-color-3, #999); transition: all .2s; white-space: nowrap }
.a-tabs__tab:hover { color: var(--a-primary-color, #2080f0) }
.a-tabs__tab--active { color: var(--a-primary-color, #2080f0); border-bottom-color: var(--a-primary-color, #2080f0); font-weight: 500 }
.a-tabs__tab--disabled { opacity: .4; cursor: not-allowed }
.a-tabs--card .a-tabs__header { border-bottom: none; gap: 4px }
.a-tabs--card .a-tabs__tab { border: 1px solid var(--a-border-color, #e0e0e6); border-radius: 4px 4px 0 0; margin-bottom: 0; background: rgba(127,127,127,.04) }
.a-tabs--card .a-tabs__tab--active { background: var(--a-base-color, #fff); border-bottom-color: var(--a-base-color, #fff) }

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════ */
.a-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; font-size: 14px }
.a-breadcrumb-item { display: inline-flex; align-items: center; color: var(--a-text-color-2, #555) }
.a-breadcrumb-item--last { color: var(--a-text-color-1, #222); font-weight: 500 }
.a-breadcrumb-item__separator { margin: 0 6px; color: var(--a-text-color-3, #999); user-select: none }

/* ═══════════════════════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════════════════════ */
.a-steps { display: flex; gap: 12px }
.a-steps--vertical { flex-direction: column }
.a-step { display: flex; align-items: flex-start; gap: 8px; flex: 1 }
.a-step__indicator { flex-shrink: 0; margin-top: 2px }
.a-step__dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(127,127,127,.12);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  color: var(--a-text-color-3, #999); font-weight: 500; transition: all .3s }
.a-step--finish .a-step__dot { background: var(--a-primary-color, #2080f0); color: #fff }
.a-step--process .a-step__dot { background: var(--a-primary-color, #2080f0); color: #fff }
.a-step--finish .a-step__title { color: var(--a-text-color-1, #222) }
.a-step--process .a-step__title { color: var(--a-primary-color, #2080f0); font-weight: 600 }
.a-step__title { font-size: 14px; font-weight: 500; color: var(--a-text-color-3, #999) }
.a-step__desc { font-size: 12px; color: var(--a-text-color-3, #999); margin-top: 2px }

/* ═══════════════════════════════════════════════════════════
   ANCHOR
   ═══════════════════════════════════════════════════════════ */
.a-anchor { padding: 4px 0 }
.a-anchor-link { display: block; padding: 3px 8px; font-size: 13px; color: var(--a-text-color-2, #555);
  text-decoration: none; border-left: 2px solid transparent; transition: all .2s }
.a-anchor-link:hover { color: var(--a-primary-color, #2080f0) }
.a-anchor-link--active { color: var(--a-primary-color, #2080f0); border-left-color: var(--a-primary-color, #2080f0); font-weight: 500 }

/* ═══════════════════════════════════════════════════════════
   BACK TOP / AFFIX / PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.a-back-top { width: 40px; height: 40px; border-radius: 50%; background: var(--a-base-color, #fff);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.12);
  cursor: pointer; font-size: 18px; color: var(--a-primary-color, #2080f0); transition: all .2s;
  z-index: 50 }
.a-back-top:hover { box-shadow: 0 4px 16px rgba(0,0,0,.16) }

.a-page-header { padding: 16px 0 }
.a-page-header__main { display: flex; align-items: center; gap: 12px }
.a-page-header__back { cursor: pointer; color: var(--a-primary-color, #2080f0); font-size: 14px; user-select: none }
.a-page-header__title { font-size: 18px; font-weight: 600 }
.a-page-header__subtitle { font-size: 13px; color: var(--a-text-color-3, #999) }
.a-page-header__extra { margin-top: 8px }

/* ═══════════════════════════════════════════════════════════
   DIALOG / DRAWER
   ═══════════════════════════════════════════════════════════ */
.a-dialog-wrapper, .a-drawer-wrapper { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center }
.a-dialog-mask, .a-drawer-mask { position: absolute; inset: 0; background: rgba(0,0,0,.35) }
.a-dialog { position: relative; background: var(--a-base-color, #fff); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); max-width: 90vw; overflow: hidden; animation: aether-fade-in .2s ease }
.a-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0 }
.a-dialog__title { font-size: 16px; font-weight: 600 }
.a-dialog__close { cursor: pointer; font-size: 20px; color: var(--a-text-color-3, #999); line-height: 1; opacity: .5 }
.a-dialog__close:hover { opacity: .8 }
.a-dialog__body { padding: 16px 20px; font-size: 14px; line-height: 1.6 }
.a-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 16px }
.a-dialog__btn { padding: 6px 18px; border-radius: 4px; font-size: 14px; cursor: pointer; border: none; outline: none;
  transition: all .2s }
.a-dialog__btn--positive { background: var(--a-primary-color, #2080f0); color: #fff }
.a-dialog__btn--positive:hover { opacity: .85 }
.a-dialog__btn--negative { background: transparent; color: var(--a-text-color-2, #555); border: 1px solid var(--a-border-color, #e0e0e6) }

.a-drawer { position: fixed; background: var(--a-base-color, #fff); box-shadow: 0 4px 24px rgba(0,0,0,.1);
  animation: aether-fade-in .2s ease }
.a-drawer--right { right: 0; top: 0; bottom: 0 }
.a-drawer--left { left: 0; top: 0; bottom: 0 }
.a-drawer--top { top: 0; left: 0; right: 0 }
.a-drawer--bottom { bottom: 0; left: 0; right: 0 }
.a-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px }
.a-drawer__title { font-size: 16px; font-weight: 600 }
.a-drawer__close { cursor: pointer; font-size: 20px; opacity: .5 }
.a-drawer__close:hover { opacity: .8 }
.a-drawer__body { padding: 0 16px 16px }

/* ═══════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════ */
.a-progress { display: flex; align-items: center; gap: 8px }
.a-progress--line { width: 100% }
.a-progress__rail { flex: 1; height: 8px; background: rgba(127,127,127,.1); border-radius: 4px; overflow: hidden }
.a-progress__track { height: 100%; background: var(--a-primary-color, #2080f0); border-radius: 4px;
  transition: width .4s var(--a-bezier, cubic-bezier(.4,0,.2,1)); min-width: 0 }
.a-progress--success .a-progress__track { background: var(--a-success-color, #18a058) }
.a-progress--warning .a-progress__track { background: var(--a-warning-color, #f0a020) }
.a-progress--error .a-progress__track { background: var(--a-error-color, #d03050) }
.a-progress__indicator { font-size: 13px; color: var(--a-text-color-2, #555); min-width: 36px; text-align: right }
.a-progress--circle { flex-direction: column; gap: 8px }
.a-progress--circle .a-progress__indicator { text-align: center }

/* ═══════════════════════════════════════════════════════════
   SPIN
   ═══════════════════════════════════════════════════════════ */
.a-spin { position: relative }
.a-spin__overlay { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 10; background: rgba(255,255,255,.6) }
.a-spin__desc { margin-top: 8px; font-size: 13px; color: var(--a-primary-color, #2080f0) }
.a-spin__content--loading { opacity: .5; pointer-events: none; filter: blur(1px) }

/* ═══════════════════════════════════════════════════════════
   RESULT
   ═══════════════════════════════════════════════════════════ */
.a-result { display: flex; flex-direction: column; align-items: center; padding: 48px 16px; text-align: center }
.a-result__icon { font-size: 56px; line-height: 1; margin-bottom: 16px }
.a-result--success .a-result__icon { color: var(--a-success-color, #18a058) }
.a-result--error .a-result__icon { color: var(--a-error-color, #d03050) }
.a-result--warning .a-result__icon { color: var(--a-warning-color, #f0a020) }
.a-result--info .a-result__icon { color: var(--a-primary-color, #2080f0) }
.a-result__title { font-size: 22px; font-weight: 600; margin-bottom: 8px }
.a-result__desc { font-size: 14px; color: var(--a-text-color-3, #999); max-width: 480px }
.a-result__extra { margin-top: 20px }

/* ═══════════════════════════════════════════════════════════
   ALERT
   ═══════════════════════════════════════════════════════════ */
.a-alert { display: flex; align-items: flex-start; padding: 10px 16px; border-radius: 6px;
  background: rgba(127,127,127,.06); font-size: 14px; position: relative }
.a-alert--success { background: rgba(24,160,88,.08); color: var(--a-success-color, #18a058) }
.a-alert--warning { background: rgba(240,160,32,.08); color: var(--a-warning-color, #f0a020) }
.a-alert--error { background: rgba(208,48,80,.08); color: var(--a-error-color, #d03050) }
.a-alert--info, .a-alert--primary { background: rgba(32,128,240,.08); color: var(--a-primary-color, #2080f0) }
.a-alert--bordered { border: 1px solid currentColor; border-opacity: .2 }
.a-alert__icon { margin-right: 8px; font-size: 16px; flex-shrink: 0 }
.a-alert__body { flex: 1; min-width: 0 }
.a-alert__title { font-weight: 600; margin-bottom: 2px }
.a-alert__content { font-size: 13px; opacity: .85 }
.a-alert__close { position: absolute; top: 8px; right: 12px; cursor: pointer; opacity: .4; font-size: 16px }
.a-alert__close:hover { opacity: .7 }

/* ═══════════════════════════════════════════════════════════
   TOOLTIP / POPOVER / POPCONFIRM
   ═══════════════════════════════════════════════════════════ */
.a-tooltip, .a-popover, .a-popconfirm { position: relative; display: inline-flex }
.a-tooltip__popup, .a-popover__content, .a-popconfirm__content {
  position: absolute; z-index: 500; padding: 6px 12px; border-radius: 4px;
  background: var(--a-text-color-1, #222); color: #fff; font-size: 13px;
  white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,.15);
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); animation: aether-fade-in .15s ease }
.a-tooltip__popup::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--a-text-color-1, #222) }
.a-popover__content { background: var(--a-base-color, #fff); color: var(--a-text-color-2, #555);
  min-width: 120px; padding: 12px; white-space: normal }
.a-popover__title { font-weight: 600; margin-bottom: 4px; font-size: 14px }
.a-popconfirm__title { margin-bottom: 8px; font-size: 13px }
.a-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end }
.a-popconfirm__btn--positive, .a-popconfirm__btn--negative {
  padding: 3px 12px; border-radius: 3px; font-size: 12px; cursor: pointer; border: 1px solid var(--a-border-color, #e0e0e6); background: var(--a-base-color, #fff); transition: all .15s }
.a-popconfirm__btn--positive { background: var(--a-primary-color, #2080f0); color: #fff; border-color: var(--a-primary-color, #2080f0) }

/* ═══════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════ */
.a-dropdown { position: relative; display: inline-flex }
.a-dropdown__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 500;
  min-width: 120px; background: var(--a-base-color, #fff); border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 4px 0; animation: aether-fade-in .15s ease }
.a-dropdown-option { padding: 6px 14px; font-size: 14px; cursor: pointer; transition: background .15s;
  color: var(--a-text-color-2, #555) }
.a-dropdown-option:hover { background: rgba(127,127,127,.06) }
.a-dropdown-option--disabled { opacity: .4; cursor: not-allowed }

/* ═══════════════════════════════════════════════════════════
   COLLAPSE
   ═══════════════════════════════════════════════════════════ */
.a-collapse { border: 1px solid var(--a-border-color, #e0e0e6); border-radius: 6px; overflow: hidden }
.a-collapse-item { border-bottom: 1px solid var(--a-border-color, #e0e0e6) }
.a-collapse-item:last-child { border-bottom: none }
.a-collapse-item__header { display: flex; align-items: center; padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; transition: background .15s; user-select: none }
.a-collapse-item__header:hover { background: rgba(127,127,127,.04) }
.a-collapse-item__arrow { margin-right: 8px; font-size: 11px; color: var(--a-text-color-3, #999); transition: transform .2s }
.a-collapse-item--active .a-collapse-item__arrow { transform: rotate(90deg) }
.a-collapse-item__title { flex: 1 }
.a-collapse-item__body { padding: 8px 16px 16px; font-size: 14px; line-height: 1.6 }
.a-collapse-item--disabled { opacity: .4 }
.a-collapse-item--disabled .a-collapse-item__header { cursor: not-allowed }

/* ═══════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════ */
.a-carousel { position: relative; overflow: hidden }
.a-carousel__track { overflow: hidden }
.a-carousel__slide { flex-shrink: 0 }
.a-carousel__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px }
.a-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5);
  cursor: pointer; transition: all .2s }
.a-carousel__dot--active { background: #fff; width: 20px; border-radius: 4px }
.a-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 }
.a-carousel__arrow--prev, .a-carousel__arrow--next { pointer-events: auto;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.8); border: none;
  cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: all .2s }
.a-carousel__arrow--prev:hover, .a-carousel__arrow--next:hover { background: #fff }

/* ═══════════════════════════════════════════════════════════
   IMAGE
   ═══════════════════════════════════════════════════════════ */
.a-image { display: inline-block; position: relative }
.a-image__wrapper { position: relative; overflow: hidden; border-radius: 4px; cursor: zoom-in }
.a-image__wrapper img { width: 100%; height: 100%; object-fit: cover; display: block }
.a-image__placeholder { position: absolute; inset: 0; background: rgba(127,127,127,.08) }
.a-image__error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--a-text-color-3, #999); font-size: 24px }
.a-image-preview { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out }

/* ═══════════════════════════════════════════════════════════
   LIST
   ═══════════════════════════════════════════════════════════ */
.a-list { background: var(--a-base-color, #fff) }
.a-list--bordered { border: 1px solid var(--a-border-color, #e0e0e6); border-radius: 6px }
.a-list-item { padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--a-border-color, #e0e0e6) }
.a-list-item:last-child { border-bottom: none }
.a-list-item--hoverable:hover { background: rgba(127,127,127,.04); cursor: pointer }

/* ═══════════════════════════════════════════════════════════
   SPLIT / FLOAT-BUTTON / WATERMARK
   ═══════════════════════════════════════════════════════════ */
.a-split { display: flex; overflow: hidden }
.a-split__pane { overflow: auto }
.a-split__divider { flex-shrink: 0; z-index: 1 }

.a-float-button { transition: transform .2s, box-shadow .2s }
.a-float-button:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.2) }

/* ═══════════════════════════════════════════════════════════
   FORM / INPUT / SELECT / CHECKBOX / RADIO / SWITCH / SLIDER
   ═══════════════════════════════════════════════════════════ */
.a-form { display: flex; flex-direction: column; gap: 16px }
.a-form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-start }
.a-form-item { display: flex; align-items: flex-start }
.a-form-item__label { flex-shrink: 0; padding: 8px 12px 0 0; font-size: 14px;
  color: var(--a-text-color-2, #555); text-align: right; line-height: 2; min-width: 60px }
.a-form-item__required { color: var(--a-error-color, #d03050); margin-right: 4px }
.a-form-item__control { flex: 1; min-width: 0 }
.a-form-item__error { font-size: 12px; color: var(--a-error-color, #d03050); margin-top: 4px }

.a-input { display: inline-block; width: 100%; font-size: 14px }
.a-input__wrapper { display: flex; align-items: center; border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 4px; background: var(--a-base-color, #fff); transition: border-color .2s;
  padding: 0 8px; height: 34px; box-sizing: border-box }
.a-input--focused .a-input__wrapper { border-color: var(--a-primary-color, #2080f0) }
.a-input--disabled .a-input__wrapper { background: rgba(127,127,127,.04); cursor: not-allowed }
.a-input--round .a-input__wrapper { border-radius: 17px }
.a-input__el { flex: 1; border: none; outline: none; background: transparent; font-size: inherit;
  padding: 0; color: var(--a-text-color-1, #222); line-height: 1.5; font-family: inherit }
.a-input__el::placeholder { color: var(--a-text-color-3, #999) }
.a-input__el:disabled { cursor: not-allowed }
.a-input__clear { margin-left: 4px; cursor: pointer; opacity: .3; transition: opacity .2s; flex-shrink: 0 }
.a-input__clear:hover { opacity: .6 }
.a-input__count { text-align: right; font-size: 11px; color: var(--a-text-color-3, #999); margin-top: 2px }
.a-input--small .a-input__wrapper { height: 28px; font-size: 12px }
.a-input--large .a-input__wrapper { height: 40px; font-size: 16px }

/* Input Number */
.a-input-number { display: inline-flex; align-items: center; border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 4px; overflow: hidden; height: 34px; background: var(--a-base-color, #fff) }
.a-input-number--disabled { background: rgba(127,127,127,.04); cursor: not-allowed }
.a-input-number__btn { width: 30px; border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--a-text-color-2, #555); display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0 }
.a-input-number__btn:hover { background: rgba(127,127,127,.08) }
.a-input-number__btn:disabled { opacity: .3; cursor: not-allowed }
.a-input-number__el { flex: 1; width: 60px; border: none; border-left: 1px solid var(--a-border-color, #e0e0e6);
  border-right: 1px solid var(--a-border-color, #e0e0e6); outline: none; text-align: center;
  font-size: 14px; background: transparent; color: var(--a-text-color-1, #222); font-family: inherit;
  -moz-appearance: textfield }
.a-input-number__el::-webkit-inner-spin-button,
.a-input-number__el::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }

/* Select */
.a-select { position: relative; display: inline-block; font-size: 14px; width: 160px }
.a-select__trigger { display: flex; align-items: center; border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 4px; padding: 0 8px; height: 34px; background: var(--a-base-color, #fff);
  cursor: pointer; transition: border-color .2s; box-sizing: border-box }
.a-select--open .a-select__trigger { border-color: var(--a-primary-color, #2080f0) }
.a-select--disabled .a-select__trigger { background: rgba(127,127,127,.04); cursor: not-allowed }
.a-select__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text-color-2, #555) }
.a-select__arrow { margin-left: 4px; font-size: 11px; color: var(--a-text-color-3, #999); flex-shrink: 0 }
.a-select__dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 500;
  background: var(--a-base-color, #fff); border: 1px solid var(--a-border-color, #e0e0e6);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.08); overflow: hidden; animation: aether-fade-in .15s ease }
.a-select__filter { width: 100%; padding: 6px 10px; border: none; border-bottom: 1px solid var(--a-border-color, #e0e0e6);
  outline: none; font-size: 13px; box-sizing: border-box }
.a-select__option { padding: 7px 12px; cursor: pointer; font-size: 13px; transition: background .1s;
  color: var(--a-text-color-2, #555) }
.a-select__option:hover { background: rgba(127,127,127,.06) }
.a-select__option--selected { color: var(--a-primary-color, #2080f0); background: rgba(32,128,240,.06); font-weight: 500 }
.a-select__option--disabled { opacity: .4; cursor: not-allowed }
.a-select__empty { padding: 12px; text-align: center; color: var(--a-text-color-3, #999); font-size: 13px }

/* Checkbox / Radio */
.a-checkbox, .a-radio { display: inline-flex; align-items: center; cursor: pointer; font-size: 14px; user-select: none }
.a-checkbox--disabled, .a-radio--disabled { opacity: .5; cursor: not-allowed }
.a-checkbox__box { width: 16px; height: 16px; border: 1.5px solid var(--a-border-color, #e0e0e6);
  border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-right: 6px;
  transition: all .2s; flex-shrink: 0 }
.a-checkbox--checked .a-checkbox__box { background: var(--a-primary-color, #2080f0); border-color: var(--a-primary-color, #2080f0) }
.a-checkbox__check { color: #fff; font-size: 11px; line-height: 1 }
.a-checkbox__label, .a-radio__label { color: var(--a-text-color-2, #555) }
.a-checkbox-group, .a-radio-group { display: inline-flex; gap: 12px; flex-wrap: wrap }
.a-radio__dot { width: 16px; height: 16px; border: 1.5px solid var(--a-border-color, #e0e0e6);
  border-radius: 50%; margin-right: 6px; position: relative; flex-shrink: 0; transition: all .2s }
.a-radio--checked .a-radio__dot { border-color: var(--a-primary-color, #2080f0) }
.a-radio--checked .a-radio__dot::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--a-primary-color, #2080f0) }

/* Switch */
.a-switch { position: relative; width: 40px; height: 22px; border-radius: 11px;
  background: rgba(127,127,127,.25); cursor: pointer; transition: background .2s; outline: none }
.a-switch--active { background: var(--a-primary-color, #2080f0) }
.a-switch--disabled { opacity: .4; cursor: not-allowed }
.a-switch__dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s }
.a-switch--active .a-switch__dot { transform: translateX(18px) }

/* Slider */
.a-slider { position: relative; height: 28px; display: flex; align-items: center; width: 100% }
.a-slider__rail { flex: 1; height: 4px; background: rgba(127,127,127,.15); border-radius: 2px; position: relative }
.a-slider__track { position: absolute; height: 100%; background: var(--a-primary-color, #2080f0); border-radius: 2px }
.a-slider__thumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--a-primary-color, #2080f0); transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,.1); cursor: pointer; z-index: 1 }
.a-slider__tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--a-text-color-1, #222); color: #fff; padding: 2px 6px; border-radius: 3px;
  font-size: 12px; white-space: nowrap; margin-bottom: 8px }
.a-slider__input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; margin: 0 }
.a-slider--disabled { opacity: .4 }
.a-slider--disabled .a-slider__thumb, .a-slider--disabled .a-slider__input { cursor: not-allowed }

/* Base loading spinner */
.a-base-loading { display: inline-flex }
.a-base-clear { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: .3; transition: opacity .2s }
.a-base-clear:hover { opacity: .6 }

/* Scrollbar */
.a-scrollbar::-webkit-scrollbar { width: 6px }
.a-scrollbar::-webkit-scrollbar-thumb { background: rgba(127,127,127,.2); border-radius: 3px }
.a-scrollbar::-webkit-scrollbar-track { background: transparent }