/* ============================================================
   AllocLab 2.0 Components
   ------------------------------------------------------------
   12 個 Jinja macro 對應 CSS + .al-btn 按鈕基礎。
   Mobile-first，桌機用 @media (min-width: 640px|960px) 增強。
   規則：docs/ui-rules.md
   ============================================================ */


/* ============================================================
   BUTTONS (.al-btn) — 給 macro 內 CTA 使用
   規則：§10 Buttons（primary / secondary / ghost 三層）
   ============================================================ */

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--al-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  min-height: var(--tap-min);
  user-select: none;
  /* 按鈕標籤永遠不逐字斷行（2-3 中文字會被壓成直排） */
  white-space: nowrap;
  word-break: keep-all;
}
.al-btn:disabled,
.al-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary：深底白字 */
.al-btn--primary {
  background: var(--al-ink-deep);
  color: #fff;
  border-color: var(--al-ink-deep);
}
.al-btn--primary:hover:not(:disabled) {
  background: var(--al-ink);
  border-color: var(--al-ink);
}

/* Secondary：白底 + border */
.al-btn--secondary {
  background: var(--al-surface);
  color: var(--al-ink);
  border-color: var(--al-border-md);
}
.al-btn--secondary:hover:not(:disabled) {
  background: var(--al-active-bg);
  border-color: var(--al-accent);
}

/* Ghost：無底無邊 */
.al-btn--ghost {
  background: transparent;
  color: var(--al-ink-2);
  border-color: transparent;
}
.al-btn--ghost:hover:not(:disabled) {
  color: var(--al-ink-deep);
  background: var(--al-active-bg);
}


/* ============================================================
   (1) chip_group (.al-chip-group / .al-chip)
   規則：§3 Color（alpha<0.1 不飽和）、§4 Layout（>4 個 2-col）
   ============================================================ */

.al-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.al-chip-group--cols-1 { flex-direction: column; }
.al-chip-group--cols-2,
.al-chip-group--cols-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .al-chip-group--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* auto: 手機 >4 個自動轉 2-col */
.al-chip-group--cols-auto.al-chip-group:has(> :nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .al-chip-group--cols-auto.al-chip-group:has(> :nth-child(5)) {
    display: flex;
    flex-wrap: wrap;
  }
}

.al-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  border-radius: 99px;
  border: 1px solid transparent;
  color: var(--al-ink-2);
  background: var(--al-surface-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

/* md 尺寸 chip（pill 風） */
.al-chip-group--md .al-chip {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-caption);
}

/* variant */
.al-chip--default { background: var(--al-surface-2); color: var(--al-ink-2); border-color: var(--al-hairline); }
.al-chip--accent  { background: var(--al-active-bg); color: var(--al-accent); border-color: rgba(110,143,179,0.18); }
.al-chip--up      { background: var(--al-up-bg); color: var(--al-up); }
.al-chip--dn      { background: var(--al-dn-bg); color: var(--al-dn); }
.al-chip--muted   { background: transparent; color: var(--al-ink-muted); border-color: var(--al-hairline); }

/* chip 為 a.tag 時的點擊效果 */
a.al-chip:hover { background: var(--al-active-bg); color: var(--al-ink-deep); }


/* ============================================================
   (2) signal_badge (.al-sig)
   規則：§3 Color、§8 AI（三態）
   ============================================================ */

.al-sig {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1;
  /* 不加 letter-spacing——CJK 上只會浪費空間 */
  border-radius: var(--r-xs);
  white-space: nowrap;
  word-break: keep-all;
}

.al-sig--sm { padding: 3px 7px; font-size: var(--fs-micro); min-height: 22px; }
.al-sig--md { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-meta); min-height: 28px; }

.al-sig--up      { background: var(--al-up-bg); color: var(--al-up); }
.al-sig--dn      { background: var(--al-dn-bg); color: var(--al-dn); }
.al-sig--neutral { background: rgba(138,150,168,0.12); color: var(--al-ink-muted); }
/* alert 是 severity 非方向性，硬編碼不用 up token */
.al-sig--alert   { background: rgba(184,50,50,0.10); color: #b83232; }


/* ============================================================
   (3) price_cell (.al-price)
   規則：§6 Data Display 全部
   ============================================================ */

.al-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--al-ink);
}

.al-price--right  { justify-content: flex-end; text-align: right; }
.al-price--left   { justify-content: flex-start; text-align: left; }
.al-price--center { justify-content: center; text-align: center; }

.al-price__unit {
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  font-weight: var(--fw-regular);
}

.al-price__value {
  color: var(--al-ink-deep);
  font-weight: var(--fw-semibold);
}

.al-price__delta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}

.al-price__delta--up   { color: var(--al-up); }
.al-price__delta--dn   { color: var(--al-dn); }
.al-price__delta--zero { color: var(--al-ink-muted); }

/* Sizes */
.al-price--sm .al-price__value { font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.al-price--md .al-price__value { font-size: var(--fs-body); }
.al-price--lg .al-price__value { font-size: var(--fs-h3); }
.al-price--hero .al-price__value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.al-price--hero .al-price__delta { font-size: var(--fs-body); }

.al-price--empty .al-price__value { color: var(--al-ink-muted); font-weight: var(--fw-regular); }


/* ============================================================
   (4) metric_tile (.al-metric)
   規則：§2 Typography、§4 Layout（2-col mobile / 3-4-col desktop）、§6
   ============================================================ */

.al-metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  min-width: 0;
}

.al-metric__label {
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

.al-metric__value .al-price {
  color: var(--al-ink-deep);
}

.al-metric__hint {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--al-ink-muted);
}

/* Sizes */
.al-metric--sm .al-price__value { font-size: var(--fs-body); }
.al-metric--md .al-price__value { font-size: var(--fs-h3); }
.al-metric--lg .al-price__value { font-size: var(--fs-h2); }

.al-metric--muted {
  background: var(--al-surface-2);
}


/* ============================================================
   (5) section (.al-section) — 基礎 layout 已在 layout.css
   ============================================================ */


/* ============================================================
   (6) empty_state (.al-empty)
   規則：§13 Empty State（不戲劇化、三要素）
   ============================================================ */

.al-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  text-align: center;
}

.al-empty--compact {
  padding: var(--sp-5) var(--sp-4);
  gap: var(--sp-2);
}

.al-empty__icon {
  width: 24px;
  height: 24px;
  color: var(--al-ink-muted);
  margin-bottom: var(--sp-2);
}

.al-empty__reason {
  color: var(--al-ink-deep);
  font-weight: var(--fw-medium);
  margin: 0;
}

.al-empty__next {
  color: var(--al-ink-2);
  margin: 0;
  max-width: 420px;
}

.al-empty__cta {
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--al-ink);
  background: var(--al-surface);
  border: 1px solid var(--al-border-md);
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  min-height: var(--tap-min);
  white-space: nowrap;
  word-break: keep-all;
}
.al-empty__cta:hover {
  background: var(--al-active-bg);
  border-color: var(--al-accent);
}


/* ============================================================
   (7) skeleton (.al-skel)
   規則：§13 Loading（al-surface-2 底、shimmer ≤0.08、週期 ≥1.4s）
   ============================================================ */

@keyframes al-skel-shimmer {
  0%   { opacity: 0.55; }
  50%  { opacity: 0.62; }
  100% { opacity: 0.55; }
}

.al-skel {
  background: var(--al-surface);
  border: 1px solid var(--al-hairline);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  animation: al-skel-shimmer 1.8s var(--ease-inout) infinite;
}

.al-skel + .al-skel { margin-top: var(--sp-3); }

.al-skel__line {
  height: 12px;
  background: var(--al-surface-2);
  border-radius: 2px;
  margin-bottom: var(--sp-2);
}
.al-skel__line:last-child { margin-bottom: 0; }

.al-skel__line--kicker   { height: 10px; width: 30%; margin-bottom: var(--sp-2); background: rgba(39,48,67,0.08); }
.al-skel__line--headline { height: 20px; width: 75%; background: rgba(39,48,67,0.10); }
.al-skel__line--body     { height: 12px; width: 100%; }
.al-skel__line--symbol   { height: 14px; width: 40%; background: rgba(39,48,67,0.10); }
.al-skel__line--meta     { height: 10px; width: 55%; }
.al-skel__line--price    { height: 16px; width: 60%; background: rgba(39,48,67,0.10); }
.al-skel__line--delta    { height: 10px; width: 40%; }
.al-skel__line--value    { height: 20px; width: 70%; background: rgba(39,48,67,0.10); }

.al-skel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.al-skel__col {
  flex: 1;
  min-width: 0;
}
.al-skel__col--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.al-skel__chips {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.al-skel__chip {
  height: 20px;
  width: 60px;
  background: var(--al-surface-2);
  border-radius: 99px;
}

.al-skel--chart {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-skel__chart-label {
  color: var(--al-ink-muted);
}


/* ============================================================
   (8) range_tabs (.al-tabs)
   規則：§11 Filter/Tab（active 用 active-bg、禁深底白字）
   ============================================================ */

.al-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 3px;
  background: var(--al-surface-2);
  border: 1px solid var(--al-hairline);
  border-radius: var(--r-sm);
  width: fit-content;
}

.al-tabs--scroll {
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.al-tabs--scroll::-webkit-scrollbar { display: none; }

.al-tabs__btn {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--al-ink-2);
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-sm) - 3px);
  cursor: pointer;
  scroll-snap-align: start;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  min-height: 36px;
  white-space: nowrap;
  word-break: keep-all;
}
.al-tabs__btn:hover { color: var(--al-ink-deep); }

.al-tabs__btn.is-active {
  background: var(--al-active-bg);
  color: var(--al-ink-deep);
  font-weight: var(--fw-semibold);
}


/* ============================================================
   (9) stock_card (.al-stock-card)
   規則：§5、§6、§7
   ============================================================ */

.al-stock-card {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.al-stock-card:hover {
  border-color: var(--al-border-md);
  box-shadow: var(--shadow-xs);
}

.al-stock-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}

.al-stock-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
}

.al-stock-card__id {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.al-stock-card__price {
  min-width: 0;
  flex-shrink: 0;
}

.al-stock-card__symbol {
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
}

.al-stock-card__name {
  color: var(--al-ink-deep);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-stock-card__price { text-align: right; }

.al-stock-card__spark {
  height: 40px;
  position: relative;
}
.al-stock-card__spark canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.al-stock-card__signal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.al-stock-card__note {
  color: var(--al-ink-2);
  min-width: 0;
}

.al-stock-card__meta {
  color: var(--al-ink-muted);
  font-family: var(--ff-body);
}

.al-stock-card__actions {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--al-hairline);
}
.al-stock-card__actions .al-btn {
  flex: 1;
  font-size: var(--fs-caption);
  padding: var(--sp-2) var(--sp-3);
}

.al-stock-card--compact {
  padding: var(--sp-3);
  gap: var(--sp-2);
}


/* ============================================================
   (10) ai_card (.al-ai-card) — 最核心
   規則：§8 AI Content 全部、§5（elevated 一頁上限 2）
   ============================================================ */

.al-ai-card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .al-ai-card { padding: var(--sp-6) var(--sp-5); }
}

.al-ai-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.al-ai-card__kicker {
  color: var(--al-ink-muted);
}

.al-ai-card__headline {
  margin: 0;
  color: var(--al-ink-deep);
  /* 保險：超過 2 行截斷 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.al-ai-card__summary {
  margin: 0;
  color: var(--al-ink);
  /* 不得 bullet — Jinja macro 輸出即 <p>，不支援 <ul> 直接嵌入 */
}

.al-ai-card__chips {
  margin-top: var(--sp-1);
}

.al-ai-card__kps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.al-ai-card__kp {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--al-active-bg);
  border-radius: var(--r-sm);
}

.al-ai-card__kp-num {
  flex-shrink: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--al-accent);
  min-width: 18px;
}

.al-ai-card__kp-text {
  margin: 0;
  color: var(--al-ink);
}

.al-ai-card__sources {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--al-hairline);
  padding-top: var(--sp-3);
}

.al-ai-card__sources-toggle {
  cursor: pointer;
  color: var(--al-ink-2);
  padding: var(--sp-2) 0;
  list-style: none;
  user-select: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.al-ai-card__sources-toggle::-webkit-details-marker { display: none; }
.al-ai-card__sources-toggle::before {
  content: "+ ";
  margin-right: var(--sp-1);
  font-weight: var(--fw-semibold);
}
.al-ai-card__sources[open] .al-ai-card__sources-toggle::before {
  content: "− ";
}

.al-ai-card__sources-list {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.al-ai-card__source-item {
  font-size: var(--fs-caption);
  line-height: 1.5;
}


/* ============================================================
   (11) data_grid (.al-grid)
   規則：§7 Table / List Fallback
   ============================================================ */

.al-grid {
  width: 100%;
}

.al-grid__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  background: var(--al-surface);
}

.al-grid__table {
  /* auto + min-width 100% 讓表格可超出容器寬度觸發橫滑（手機多欄必需） */
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
}

.al-grid__th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-2);
  background: var(--al-surface-2);
  border-bottom: 1px solid var(--al-border);
  white-space: nowrap;
}
.al-grid__th--right  { text-align: right; }
.al-grid__th--center { text-align: center; }

.al-grid__td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--al-hairline);
  color: var(--al-ink);
  min-height: 48px;
  vertical-align: middle;
  /* 表格永遠橫向滑動，cell 內不得逐字斷行（手機空間寶貴） */
  white-space: nowrap;
  word-break: keep-all;
}
.al-grid__td--right  { text-align: right; }
.al-grid__td--center { text-align: center; }

.al-grid__row:hover .al-grid__td {
  background: var(--al-active-bg);
}

.al-grid__row:last-child .al-grid__td {
  border-bottom: 0;
}

/* Sticky 第一欄（4-5 欄橫滑模式） */
.al-grid--mobile-scroll .al-grid__th--sticky,
.al-grid--mobile-scroll .al-grid__td--sticky {
  position: sticky;
  left: 0;
  background: var(--al-surface);
  z-index: 1;
}
.al-grid--mobile-scroll .al-grid__th--sticky {
  background: var(--al-surface-2);
  box-shadow: 1px 0 0 var(--al-border);
}

/* Sort button */
.al-grid__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: inherit;
}
.al-grid__sort-btn:hover { color: var(--al-ink-deep); }
.al-grid__sort-icon {
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
}

/* Mobile stack mode（≥6 欄） */
.al-grid__cards { display: none; }

@media (max-width: 639px) {
  .al-grid--mobile-stack .al-grid__table-wrap { display: none; }
  .al-grid--mobile-stack .al-grid__cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .al-grid__card {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .al-grid__card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    min-height: 28px;
  }
  .al-grid__card-label {
    color: var(--al-ink-muted);
    font-weight: var(--fw-medium);
    flex-shrink: 0;
  }
  .al-grid__card-value {
    color: var(--al-ink-deep);
    text-align: right;
    min-width: 0;
  }
}


/* ============================================================
   (12) bottom_sheet (.al-bsheet)
   規則：§11 Filter（bottom-sheet 取代 modal filter）
         z-index：遮罩 800，低於 modal 900、高於 sticky nav 200
   ============================================================ */

.al-bsheet__overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  transition: opacity var(--dur-base) var(--ease-out);
}

.al-bsheet__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-overlay) + 1);
  background: var(--al-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  outline: none;
}

@media (min-width: 640px) {
  .al-bsheet__panel {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 520px;
    border-radius: var(--r-md);
  }
}

.al-bsheet__handle {
  width: 40px;
  height: 4px;
  background: var(--al-border-md);
  border-radius: 99px;
  margin: var(--sp-2) auto var(--sp-1);
}
@media (min-width: 640px) {
  .al-bsheet__handle { display: none; }
}

.al-bsheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--al-hairline);
}

.al-bsheet__head-text { min-width: 0; }
.al-bsheet__desc {
  margin: var(--sp-1) 0 0;
  color: var(--al-ink-2);
}

.al-bsheet__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 99px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--al-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.al-bsheet__close:hover {
  background: var(--al-active-bg);
  color: var(--al-ink-deep);
}

.al-bsheet__body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.al-bsheet__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--al-hairline);
  background: var(--al-surface-2);
}

.al-bsheet__primary { width: 100%; }

/* Transitions */
.al-bsheet__anim-enter { transition: transform var(--dur-base) var(--ease-out); }
.al-bsheet__anim-enter-start { transform: translateY(100%); }
.al-bsheet__anim-enter-end   { transform: translateY(0); }
.al-bsheet__anim-leave { transition: transform var(--dur-base) var(--ease-inout); }
.al-bsheet__anim-leave-start { transform: translateY(0); }
.al-bsheet__anim-leave-end   { transform: translateY(100%); }

@media (min-width: 640px) {
  .al-bsheet__anim-enter-start { transform: translate(-50%, -40%); opacity: 0; }
  .al-bsheet__anim-enter-end   { transform: translate(-50%, -50%); opacity: 1; }
  .al-bsheet__anim-leave-start { transform: translate(-50%, -50%); opacity: 1; }
  .al-bsheet__anim-leave-end   { transform: translate(-50%, -40%); opacity: 0; }
}

/* ═══ fancy_chart ═══════════════════════════════════════════════
   Apple Stocks 風格主力圖（Lightweight Charts v4.2 + 雙 AreaSeries）
   規則：docs/ui-rules.md §9 chart（260 mobile / 360 desktop、紅漲綠跌）
*/
.al-chart {
  position: relative;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

.al-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}

.al-chart__legend {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--al-ink);
  min-height: 1.4em;
}

.al-chart__legend-date {
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
}

.al-chart__legend-value {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--al-ink-deep);
}

.al-chart__body {
  position: relative;
  width: 100%;
  min-height: 260px;
  height: 260px;
}

@media (min-width: 768px) {
  .al-chart__body { min-height: 360px; height: 360px; }
}

.al-chart__tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  pointer-events: none;
  background: #1c222e;
  color: #fff;
  border-radius: var(--r-xs);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.al-chart__tooltip-date {
  opacity: 0.7;
  margin-right: var(--sp-2);
}

.al-chart__ranges {
  margin-top: var(--sp-2);
}