/* AURORA V2 — UI primitives */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--f-bg);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(179, 91, 51, 0.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(123, 59, 37, 0.04), transparent 26%),
    linear-gradient(180deg, #f7f2e9 0%, var(--f-bg) 26%, var(--f-bg) 100%);
  color: var(--f-ink-1);
  font-family: var(--f-font-ui), var(--f-font-cjk);
  font-size: var(--f-text-base);
  line-height: var(--f-leading-base);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
    linear-gradient(rgba(23, 18, 13, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 18, 13, 0.012) 1px, transparent 1px);
  background-size: auto, 100% 24px, 24px 100%;
  mix-blend-mode: multiply;
  opacity: 0.42;
  pointer-events: none;
  z-index: -1;
}

::selection {
  background: rgba(179, 91, 51, 0.16);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--f-focus-ring);
  border-radius: var(--f-r-sm);
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-s2);
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  background: var(--f-surface-1);
  color: var(--f-ink-1);
  font-size: var(--f-text-sm);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: var(--f-shadow-1);
  transition:
    transform var(--f-dur-fast) var(--f-ease),
    background var(--f-dur-fast) var(--f-ease),
    border-color var(--f-dur-fast) var(--f-ease),
    box-shadow var(--f-dur-fast) var(--f-ease),
    color var(--f-dur-fast) var(--f-ease);
  white-space: nowrap;
  user-select: none;
}

.ui-btn:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--f-line-strong);
  box-shadow: var(--f-shadow-2);
}

.ui-btn:active {
  transform: translateY(0);
  box-shadow: var(--f-shadow-1);
}

.ui-btn[aria-pressed="true"] {
  background: var(--f-ink-1);
  border-color: var(--f-ink-1);
  color: var(--f-ink-on);
}

.ui-btn--primary {
  background: var(--f-ink-1);
  border-color: var(--f-ink-1);
  color: var(--f-ink-on);
}

.ui-btn--primary:hover {
  background: #231b14;
  border-color: #231b14;
}

.ui-btn--warm {
  background: var(--f-accent);
  border-color: var(--f-accent);
  color: var(--f-ink-on);
}

.ui-btn--warm:hover {
  background: var(--f-accent-hover);
  border-color: var(--f-accent-hover);
}

.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ui-btn--ghost:hover {
  background: var(--f-surface-2);
  border-color: var(--f-line);
  box-shadow: none;
}

.ui-btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: var(--f-text-xs);
}

.ui-btn--icon {
  width: 42px;
  padding: 0;
}

.ui-btn--icon.ui-btn--sm {
  width: 34px;
}

.ui-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--f-s1);
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  background: var(--f-surface-1);
  color: var(--f-ink-2);
  font-size: var(--f-text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform var(--f-dur-fast) var(--f-ease),
    border-color var(--f-dur-fast) var(--f-ease),
    background var(--f-dur-fast) var(--f-ease),
    color var(--f-dur-fast) var(--f-ease);
}

.ui-chip:hover {
  transform: translateY(-1px);
  border-color: var(--f-line-strong);
  color: var(--f-ink-1);
}

.ui-chip[aria-pressed="true"],
.ui-chip.is-active {
  background: var(--f-ink-1);
  border-color: var(--f-ink-1);
  color: var(--f-ink-on);
}

.ui-chip--ghost {
  background: transparent;
}

.ui-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-pill);
  background: rgba(255, 255, 255, 0.55);
}

.ui-tabs__tab {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--f-r-pill);
  color: var(--f-ink-3);
  font-size: var(--f-text-sm);
  font-weight: 700;
  transition:
    background var(--f-dur-fast) var(--f-ease),
    color var(--f-dur-fast) var(--f-ease),
    transform var(--f-dur-fast) var(--f-ease);
}

.ui-tabs__tab:hover {
  color: var(--f-ink-1);
}

.ui-tabs__tab[aria-selected="true"] {
  background: var(--f-ink-1);
  color: var(--f-ink-on);
}

.ui-card {
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 253, 248, 0.98));
  padding: var(--f-s6);
  box-shadow: var(--f-shadow-1);
}

.ui-card--flat {
  background: var(--f-surface-2);
  box-shadow: none;
}

.ui-card--padless {
  padding: 0;
}

.ui-card--outline {
  background: transparent;
  box-shadow: none;
}

.ui-stat {
  display: grid;
  gap: var(--f-s2);
}

.ui-stat__label {
  color: var(--f-ink-3);
  font-size: var(--f-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ui-stat__value {
  color: var(--f-ink-1);
  font-family: var(--f-font-num);
  font-size: var(--f-text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ui-stat__delta {
  font-family: var(--f-font-num);
  font-size: var(--f-text-xs);
  font-weight: 700;
}

.ui-stat__delta--up { color: var(--f-up); }
.ui-stat__delta--down { color: var(--f-down); }

ui-price {
  font-family: var(--f-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

ui-price[data-loading="1"] {
  color: var(--f-ink-3);
}

.ui-skel {
  display: block;
  border-radius: var(--f-r-sm);
  background: linear-gradient(90deg, var(--f-surface-2) 0%, var(--f-surface-3) 50%, var(--f-surface-2) 100%);
  background-size: 200% 100%;
  animation: ui-skel-shimmer 1.6s linear infinite;
}

.ui-skel--line { height: 14px; }
.ui-skel--chip { width: 88px; height: 28px; border-radius: var(--f-r-pill); }
.ui-skel--card { height: 260px; border-radius: var(--f-r-lg); }
.ui-skel--hero { height: 96px; border-radius: var(--f-r-lg); }

@keyframes ui-skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--f-r-pill);
  background: var(--f-surface-2);
  color: var(--f-ink-2);
  font-size: var(--f-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ui-badge--up {
  background: var(--f-up-soft);
  border-color: var(--f-up-border);
  color: var(--f-up);
}

.ui-badge--down {
  background: var(--f-down-soft);
  border-color: var(--f-down-border);
  color: var(--f-down);
}

.ui-badge--warn {
  background: var(--f-warn-soft);
  border-color: var(--f-warn-border);
  color: var(--f-warn);
}

.ui-badge--accent {
  background: var(--f-accent-soft);
  color: var(--f-accent);
}

.ui-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--f-line);
  border-radius: var(--f-r-md);
  background: #fffdf9;
  color: var(--f-ink-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    border-color var(--f-dur-fast) var(--f-ease),
    box-shadow var(--f-dur-fast) var(--f-ease),
    background var(--f-dur-fast) var(--f-ease);
}

.ui-input:hover {
  border-color: var(--f-line-strong);
}

.ui-input:focus {
  border-color: var(--f-accent);
  background: #fff;
  box-shadow: var(--f-focus-ring);
  outline: none;
}

.ui-input::placeholder {
  color: var(--f-ink-3);
}

.ui-empty {
  display: grid;
  justify-items: center;
  gap: var(--f-s3);
  padding: var(--f-s8) var(--f-s6);
  color: var(--f-ink-3);
  text-align: center;
}

.ui-empty__icon {
  font-size: 28px;
  opacity: 0.52;
}

.ui-empty__text {
  max-width: 360px;
  font-size: var(--f-text-base);
  line-height: var(--f-leading-snug);
}

/* ─────────── ui-loading：卡片掃描 SVG 動畫 ─────────── */
.ui-loading {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 16px;
  color: rgba(135, 70, 28, 0.92);
}

.ui-loading--sm { padding: 14px 10px; gap: 8px; }

.ui-loading__svg {
  width: 96px;
  height: 116px;
  overflow: visible;
}
.ui-loading--sm .ui-loading__svg { width: 64px; height: 78px; }
.ui-loading--lg .ui-loading__svg { width: 128px; height: 154px; }

/* corners 邊框慢慢呼吸 */
.ui-loading .ul-corners {
  animation: ulCornersPulse 2.4s ease-in-out infinite;
  transform-origin: 48px 57px;
}
@keyframes ulCornersPulse {
  0%, 100% { opacity: 0.62; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* 後 / 中 / 前三張卡片的浮動（疊牌感） */
.ui-loading .ul-card {
  transform-origin: 48px 57px;
  animation: ulCardFloat 2.6s ease-in-out infinite;
}
.ui-loading .ul-card--back  { animation-delay: 0s;    opacity: 1; }
.ui-loading .ul-card--mid   { animation-delay: -0.4s; }
.ui-loading .ul-card--front { animation-delay: -0.8s; }

@keyframes ulCardFloat {
  0%, 100% { transform: translate(-2px, 1px) rotate(-1.6deg); }
  50%      { transform: translate(2px, -1px) rotate(1.6deg); }
}

/* 掃描條從卡片上方掃到下方再回來 */
.ui-loading .ul-sweep {
  animation: ulSweep 1.6s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
@keyframes ulSweep {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(78px); opacity: 0; }
}

/* mini chart bars 高度脈動（像股價跳動） */
.ui-loading .ul-bars rect {
  transform-origin: bottom;
  animation: ulBars 1.2s ease-in-out infinite;
}
.ui-loading .ul-bars rect:nth-child(1) { animation-delay: 0s; }
.ui-loading .ul-bars rect:nth-child(2) { animation-delay: 0.10s; }
.ui-loading .ul-bars rect:nth-child(3) { animation-delay: 0.20s; }
.ui-loading .ul-bars rect:nth-child(4) { animation-delay: 0.30s; }
.ui-loading .ul-bars rect:nth-child(5) { animation-delay: 0.40s; }
.ui-loading .ul-bars rect:nth-child(6) { animation-delay: 0.50s; }
.ui-loading .ul-bars rect:nth-child(7) { animation-delay: 0.60s; }
.ui-loading .ul-bars rect:nth-child(8) { animation-delay: 0.70s; }

@keyframes ulBars {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 0.95; }
}

/* 三點輪流呼吸 */
.ui-loading .ul-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: ulDot 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
@keyframes ulDot {
  0%, 100% { transform: scale(0.62); opacity: 0.35; }
  50%      { transform: scale(1.1);  opacity: 1; }
}

/* 文字組 */
.ui-loading__copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.ui-loading__kicker {
  font-family: var(--f-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(135, 70, 28, 0.55);
}

.ui-loading__text {
  font-family: var(--f-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(70, 48, 16, 0.92);
}
.ui-loading--sm .ui-loading__text { font-size: 14px; font-weight: 500; }
.ui-loading--sm .ui-loading__kicker { display: none; }

.ui-loading__sub {
  font-family: var(--f-font-ui);
  font-size: 12px;
  color: rgba(105, 78, 30, 0.62);
}

/* dark theme override (for use in dark cards) */
.feature-card--accent .ui-loading,
.ui-loading--dark {
  color: rgba(229, 184, 95, 0.85);
}
.feature-card--accent .ui-loading__text,
.ui-loading--dark .ui-loading__text { color: #fff5dc; }
.feature-card--accent .ui-loading__kicker,
.ui-loading--dark .ui-loading__kicker { color: rgba(255,245,220,0.6); }
.feature-card--accent .ui-loading__sub,
.ui-loading--dark .ui-loading__sub { color: rgba(255,245,220,0.55); }

ui-sparkline {
  display: inline-block;
  width: 88px;
  height: 24px;
}

ui-sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sec-title {
  margin: 0 0 var(--f-s4);
  color: var(--f-ink-3);
  font-size: var(--f-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}