/* ============================================================
   X1 DESIGN SYSTEM · components.css
   组件库：Button / Input / Card / Table / Tab / Modal / Toast
           Loading / Spinner / Badge / Kline / Wallet / Nav
   ============================================================ */

/* ============ Button ============ */
.x1-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--x1-radius-md);
  font-size: var(--x1-font-size-md); font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent; transition: all var(--x1-speed) var(--x1-ease);
  white-space: nowrap; user-select: none; position: relative; overflow: hidden;
}
.x1-btn:active { transform: translateY(1px); }
.x1-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.x1-btn .spinner { position: static; }

/* Primary */
.x1-btn--primary { background: linear-gradient(135deg, var(--x1-primary), var(--x1-primary-strong)); color: #fff; box-shadow: var(--x1-glow-primary); }
.x1-btn--primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 28px var(--x1-primary-glow); }

/* Secondary (outline) */
.x1-btn--secondary { background: transparent; color: var(--x1-text-1); border-color: var(--x1-border); }
.x1-btn--secondary:hover:not(:disabled) { border-color: var(--x1-primary); color: var(--x1-primary); background: var(--x1-primary-soft); }

/* Ghost */
.x1-btn--ghost { background: transparent; color: var(--x1-text-2); }
.x1-btn--ghost:hover:not(:disabled) { color: var(--x1-text-1); background: var(--x1-bg-4); }

/* Danger */
.x1-btn--danger { background: transparent; color: var(--x1-down); border-color: rgba(234,57,67,0.4); }
.x1-btn--danger:hover:not(:disabled) { background: rgba(234,57,67,0.12); border-color: var(--x1-down); }

/* Success */
.x1-btn--success { background: transparent; color: var(--x1-up); border-color: rgba(22,199,132,0.4); }
.x1-btn--success:hover:not(:disabled) { background: rgba(22,199,132,0.12); border-color: var(--x1-up); }

/* Sizes */
.x1-btn--sm { height: 32px; padding: 0 14px; font-size: 12px; border-radius: var(--x1-radius-sm); }
.x1-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: var(--x1-radius-md); }
.x1-btn--block { width: 100%; }

/* ============ Input ============ */
.x1-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.x1-label { font-size: var(--x1-font-size-sm); color: var(--x1-text-2); font-weight: 500; }
.x1-input {
  height: 42px; padding: 0 14px; border-radius: var(--x1-radius-md);
  background: var(--x1-bg-2); border: 1px solid var(--x1-border);
  font-size: var(--x1-font-size-md); color: var(--x1-text-1);
  transition: border-color var(--x1-speed) var(--x1-ease), box-shadow var(--x1-speed) var(--x1-ease);
}
.x1-input:hover { border-color: var(--x1-border-strong); }
.x1-input:focus { border-color: var(--x1-primary); box-shadow: 0 0 0 3px var(--x1-primary-soft); }
.x1-input--error { border-color: var(--x1-down); }
.x1-input--success { border-color: var(--x1-up); }
.x1-error-text { font-size: var(--x1-font-size-xs); color: var(--x1-down); margin-top: 4px; }

/* Select */
.x1-select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--x1-text-2) 50%),linear-gradient(135deg,var(--x1-text-2) 50%,transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

/* ============ Card ============ */
.x1-card {
  background: var(--x1-surface);
  border: 1px solid var(--x1-border-soft);
  border-radius: var(--x1-radius-lg);
  padding: var(--x1-space-5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--x1-speed) var(--x1-ease), box-shadow var(--x1-speed) var(--x1-ease);
}
.x1-card--hover:hover { border-color: var(--x1-border-strong); box-shadow: var(--x1-shadow-2); }
.x1-card--glow { box-shadow: var(--x1-glow-primary); }
.x1-card-title { font-size: var(--x1-font-size-base); font-weight: 600; color: var(--x1-text-1); margin-bottom: var(--x1-space-4); display: flex; align-items: center; justify-content: space-between; }

/* ============ Badge / Tag ============ */
.x1-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--x1-radius-full); font-size: var(--x1-font-size-xs); font-weight: 500; line-height: 1.5; }
.x1-badge--up { color: var(--x1-up); background: rgba(22,199,132,0.12); }
.x1-badge--down { color: var(--x1-down); background: rgba(234,57,67,0.12); }
.x1-badge--primary { color: var(--x1-primary); background: var(--x1-primary-soft); }
.x1-badge--warning { color: var(--x1-warning); background: rgba(240,185,11,0.12); }
.x1-badge--neutral { color: var(--x1-text-2); background: var(--x1-bg-4); }

/* ============ Table ============ */
.x1-table-wrap { overflow-x: auto; border-radius: var(--x1-radius-md); border: 1px solid var(--x1-border-soft); }
.x1-table { width: 100%; min-width: 640px; }
.x1-table thead th {
  padding: 12px 16px; font-size: var(--x1-font-size-xs); font-weight: 600;
  color: var(--x1-text-2); text-align: left; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--x1-bg-2); border-bottom: 1px solid var(--x1-border-soft); white-space: nowrap;
}
.x1-table tbody td { padding: 12px 16px; font-size: var(--x1-font-size-md); color: var(--x1-text-1); border-bottom: 1px solid var(--x1-border-soft); white-space: nowrap; }
.x1-table tbody tr { transition: background var(--x1-speed-fast) var(--x1-ease); cursor: pointer; }
.x1-table tbody tr:hover { background: var(--x1-bg-4); }
.x1-table tbody tr:last-child td { border-bottom: none; }
.x1-table tbody tr.x1-row-clickable { cursor: pointer; }
.x1-table .num { font-variant-numeric: tabular-nums; }

/* ============ Tabs ============ */
.x1-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--x1-border-soft); overflow-x: auto; scrollbar-width: none; }
.x1-tabs::-webkit-scrollbar { display: none; }
.x1-tab {
  padding: 10px 16px; font-size: var(--x1-font-size-md); color: var(--x1-text-2);
  font-weight: 500; position: relative; white-space: nowrap; transition: color var(--x1-speed) var(--x1-ease);
}
.x1-tab:hover { color: var(--x1-text-1); }
.x1-tab--active { color: var(--x1-primary); }
.x1-tab--active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--x1-primary); border-radius: 2px; box-shadow: var(--x1-glow-primary); }

/* Segmented (pill) tab */
.x1-segmented { display: inline-flex; background: var(--x1-bg-2); border: 1px solid var(--x1-border-soft); border-radius: var(--x1-radius-full); padding: 3px; gap: 2px; }
.x1-segmented .x1-seg {
  padding: 6px 16px; border-radius: var(--x1-radius-full); font-size: var(--x1-font-size-md);
  color: var(--x1-text-2); font-weight: 500; transition: all var(--x1-speed) var(--x1-ease);
}
.x1-segmented .x1-seg:hover { color: var(--x1-text-1); }
.x1-segmented .x1-seg--active { background: var(--x1-primary); color: #fff; box-shadow: var(--x1-glow-primary); }

/* ============ Modal ============ */
.x1-modal-mask {
  position: fixed; inset: 0; background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: var(--x1-z-modal); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--x1-speed) var(--x1-ease), visibility var(--x1-speed) var(--x1-ease);
}
.x1-modal-mask--open { opacity: 1; visibility: visible; }
.x1-modal {
  background: var(--x1-bg-3); border: 1px solid var(--x1-border);
  border-radius: var(--x1-radius-lg); width: 92%; max-width: 440px; max-height: 86vh; overflow-y: auto;
  box-shadow: var(--x1-shadow-3); transform: translateY(12px) scale(0.98);
  transition: transform var(--x1-speed-slow) var(--x1-ease-out);
}
.x1-modal-mask--open .x1-modal { transform: translateY(0) scale(1); }
.x1-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--x1-border-soft); display: flex; align-items: center; justify-content: space-between; }
.x1-modal-title { font-size: var(--x1-font-size-lg); font-weight: 600; }
.x1-modal-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--x1-text-2); transition: all var(--x1-speed) var(--x1-ease); }
.x1-modal-close:hover { background: var(--x1-bg-4); color: var(--x1-text-1); }
.x1-modal-body { padding: 20px; }
.x1-modal-footer { padding: 16px 20px; border-top: 1px solid var(--x1-border-soft); display: flex; justify-content: flex-end; gap: 10px; }

/* ============ Toast ============ */
.x1-toast-wrap { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: var(--x1-z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.x1-toast {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--x1-bg-3); border: 1px solid var(--x1-border); border-radius: var(--x1-radius-md);
  font-size: var(--x1-font-size-md); color: var(--x1-text-1); box-shadow: var(--x1-shadow-2);
  animation: x1-toast-in var(--x1-speed-slow) var(--x1-ease-out);
  max-width: 90vw;
}
.x1-toast--success { border-color: rgba(22,199,132,0.5); }
.x1-toast--success .x1-toast-ic { color: var(--x1-up); }
.x1-toast--error { border-color: rgba(234,57,67,0.5); }
.x1-toast--error .x1-toast-ic { color: var(--x1-down); }
.x1-toast--info .x1-toast-ic { color: var(--x1-primary); }
@keyframes x1-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.x1-toast--out { animation: x1-toast-out var(--x1-speed) var(--x1-ease) forwards; }
@keyframes x1-toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ============ Loading / Spinner ============ */
.x1-spinner {
  width: 16px; height: 16px; border: 2px solid var(--x1-border); border-top-color: var(--x1-primary);
  border-radius: 50%; animation: x1-spin 0.8s linear infinite; display: inline-block;
}
.x1-btn .x1-spinner { border-top-color: #fff; }
.x1-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes x1-spin { to { transform: rotate(360deg); } }

/* Skeleton */
.x1-skeleton { background: linear-gradient(90deg, var(--x1-bg-4) 25%, var(--x1-bg-2) 37%, var(--x1-bg-4) 63%); background-size: 400% 100%; animation: x1-skeleton 1.4s ease infinite; border-radius: var(--x1-radius-sm); }
@keyframes x1-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ Empty / Error states ============ */
.x1-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; gap: 12px; color: var(--x1-text-3); }
.x1-empty-ic { font-size: 40px; opacity: 0.4; }
.x1-empty-title { font-size: var(--x1-font-size-base); color: var(--x1-text-2); font-weight: 500; }
.x1-empty-desc { font-size: var(--x1-font-size-sm); color: var(--x1-text-3); }
.x1-error { border: 1px solid rgba(234,57,67,0.35); background: rgba(234,57,67,0.08); color: var(--x1-down); border-radius: var(--x1-radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-size: var(--x1-font-size-md); }

/* ============ Kline region ============ */
.x1-kline {
  width: 100%; background: var(--x1-bg-1); border: 1px solid var(--x1-border-soft);
  border-radius: var(--x1-radius-md); overflow: hidden; position: relative; min-height: 320px;
}
.x1-kline canvas { display: block; width: 100%; height: 100%; }
.x1-kline-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--x1-bg-2); border-bottom: 1px solid var(--x1-border-soft); }
.x1-kline-frame { height: 360px; }

/* ============ Wallet component ============ */
.x1-wallet-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--x1-radius-full); font-size: var(--x1-font-size-md); font-weight: 600;
  background: linear-gradient(135deg, var(--x1-primary), var(--x1-primary-strong)); color: #fff;
  box-shadow: var(--x1-glow-primary); transition: all var(--x1-speed) var(--x1-ease);
}
.x1-wallet-btn:hover { filter: brightness(1.1); }
.x1-wallet-addr { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--x1-radius-full); background: var(--x1-bg-2); border: 1px solid var(--x1-border); color: var(--x1-text-1); font-family: var(--x1-font-num); font-size: var(--x1-font-size-md); cursor: pointer; transition: all var(--x1-speed) var(--x1-ease); }
.x1-wallet-addr:hover { border-color: var(--x1-primary); box-shadow: var(--x1-glow-primary); }
.x1-wallet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--x1-up); box-shadow: 0 0 8px var(--x1-up); }

/* ============ Navigation (Sidebar / Header) ============ */
.x1-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--x1-radius-md); color: var(--x1-text-2); font-size: var(--x1-font-size-md); font-weight: 500; cursor: pointer; transition: all var(--x1-speed) var(--x1-ease); white-space: nowrap; }
.x1-nav-item:hover { color: var(--x1-text-1); background: var(--x1-bg-4); }
.x1-nav-item--active { color: var(--x1-primary); background: var(--x1-primary-soft); }
.x1-nav-item--active .x1-nav-ic { color: var(--x1-primary); }
.x1-nav-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.x1-nav-group-label { font-size: var(--x1-font-size-xs); color: var(--x1-text-3); text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 14px 6px; font-weight: 600; }

/* ============ Misc helpers ============ */
.x1-grid { display: grid; gap: var(--x1-space-4); }
.x1-flex { display: flex; }
.x1-flex--between { display: flex; align-items: center; justify-content: space-between; }
.x1-flex--center { display: flex; align-items: center; justify-content: center; }
.x1-flex--col { display: flex; flex-direction: column; }
.x1-gap-2 { gap: 8px; } .x1-gap-3 { gap: 12px; } .x1-gap-4 { gap: 16px; } .x1-gap-6 { gap: 24px; }
.x1-text-up { color: var(--x1-up); } .x1-text-down { color: var(--x1-down); }
.x1-text-2 { color: var(--x1-text-2); } .x1-text-3 { color: var(--x1-text-3); }
.x1-text-primary { color: var(--x1-primary); }
.x1-mt-2 { margin-top: 8px; } .x1-mt-4 { margin-top: 16px; } .x1-mt-6 { margin-top: 24px; }
.x1-mb-4 { margin-bottom: 16px; }
.x1-divider { height: 1px; background: var(--x1-border-soft); margin: var(--x1-space-4) 0; }
.x1-shrink0 { flex-shrink: 0; }
.x1-grow { flex: 1; }
.x1-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Progress bar */
.x1-progress { height: 6px; background: var(--x1-bg-4); border-radius: var(--x1-radius-full); overflow: hidden; }
.x1-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--x1-primary), var(--x1-primary-strong)); border-radius: var(--x1-radius-full); transition: width 0.5s var(--x1-ease); box-shadow: var(--x1-glow-primary); }