/* a411.css — 4-Star Orders & Results (2025-10-09 • v3.6.8)
   目的：讓清單內容與彈窗「底部發光外框」始終保持距離
   變更：新增「期數膠囊」樣式（顯示在購票紀錄的時間上方，搭配 a411.js v3.5.2）
   修正 v3.6.7：RWD 規則僅套用在資料列（.a411-row .a411-col-date），避免把表頭「日期」降色
   修正 v3.6.8（本次）：
     • 手機版表頭：時間向右內縮、狀態向左內縮
     • 統一 Results 日期膠囊配色；號碼欄加大最小寬避免截斷
   作法：
   - 容器層：.a411-wrap padding-bottom = 安全區 + 外框厚度
   - 內容層：.a411-body::after = 你想要的視覺間距
*/

:root{
  --a411-bg: #0b1120;
  --a411-fg: #e2e8f0;
  --a411-muted: #94a3b8;
  --a411-cyan: #22d3ee;
  --a411-ring: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));

  /* 彈窗內最大高度（可依專案覆蓋） */
  --a411-max-h: 86vh;

  /* === 距離控制（只需調這區） === */
  --a411-safe-b: env(safe-area-inset-bottom, 0px); /* iOS 安全區 */
  --a411-frame-b: 32px;  /* 發光外框在底部「吃進來」的厚度（含陰影/模糊） */
  --a411-gap-b: 14px;    /* ✅ 內容希望與底線保持的可視距離 */
  /* 實際用於容器 padding-bottom 的值（不含視覺間距，避免雙算） */
  --a411-bottom-pad: calc(var(--a411-safe-b) + var(--a411-frame-b));
}

/* Base：由外層負責滾動 */
.a411-wrap{
  color: var(--a411-fg);
  font-size:14px; line-height:1.6; letter-spacing:.02em;
  max-height:var(--a411-max-h);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-right:6px;                 /* 滾動條預留空間 */
  padding-bottom: var(--a411-bottom-pad);              /* ← 預留外框厚度 + 安全區 */
  scroll-padding-bottom: calc(var(--a411-bottom-pad) + var(--a411-gap-b));
  box-sizing: border-box;
}
.a411-table, .a411-table *{ box-sizing:border-box; }
/* grid 子欄位可縮以免表頭溢出 */
.a411-head > div, .a411-row > div{ min-width:0; }

/* Toolbar */
.a411-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; margin:6px 0 10px; }
.a411-input, .a411-select, .a411-limit{
  height:34px; padding:6px 10px;
  background:linear-gradient(135deg, rgba(148,163,184,.22), rgba(53,232,255,.12)) padding-box, var(--a411-ring) border-box;
  border:1px solid transparent; border-radius:10px; color:var(--a411-fg);
}
.a411-input::placeholder{ color:#94a3b8; }
.a411-toolbar .a411-input{ order:0; flex:0 1 52%; min-width:140px; min-height:34px; }
.a411-toolbar .a411-refresh{ order:1; flex:0 0 auto; }
.a411-toolbar .a411-limit{ order:2; flex:0 0 80px; width:80px; }
@media (max-width:340px){
  .a411-toolbar{ gap:6px; }
  .a411-toolbar .a411-input{ flex-basis:50%; min-width:118px; }
  .a411-toolbar .a411-limit{ flex-basis:72px; width:72px; }
}

/* Buttons */
.a411-btn{
  height:34px; padding:0 14px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  background:linear-gradient(135deg, rgba(168,85,247,.35), rgba(34,211,238,.25)) padding-box, var(--a411-ring) border-box;
  color:#eafaff; font-weight:800;
  box-shadow:0 0 0 1px rgba(34,211,238,.18) inset, 0 6px 14px rgba(0,0,0,.2);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.a411-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(34,211,238,.28) inset, 0 8px 20px rgba(0,0,0,.24); filter:saturate(1.06); }
.a411-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Table */
.a411-table{ display:block; }
.a411-head{
  display:grid; gap:10px;
  grid-template-columns:110px 90px 1fr 80px 110px 88px; /* 6 欄（購票紀錄） */
  align-items:center; padding:8px 12px; font-weight:800; color:#cbd5e1;
  background:rgba(255,255,255,.02); border-radius:12px; border:1px dashed rgba(148,163,184,.25);
}
.a411-head .a411-head-label{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px;
}

/* 清單本體：底部用 ::after 做「視覺距離」（與外框分開計） */
.a411-body{
  display:grid; gap:8px; margin-top:8px;
}
.a411-body::after{
  content:"";
  display:block;
  height: var(--a411-gap-b);  /* ✅ 真正讓內容離底線的距離 */
  grid-column:1 / -1;
}

/* 卡片 */
.a411-row{
  display:grid; gap:10px;
  grid-template-columns:110px 90px 1fr 80px 110px 88px;
  align-items:center; padding:12px; border-radius:12px;
  background:linear-gradient(var(--a411-bg), var(--a411-bg)) padding-box, var(--a411-ring) border-box;
  box-shadow:0 0 0 1px rgba(34,211,238,.12) inset, 0 6px 16px rgba(0,0,0,.18);
}

/* Columns */
.a411-col-id{ color:#cbd5e1; }
.a411-col-wallet{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a411-col-date,.a411-col-ts{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.a411-col-digits{ font-variant-numeric:tabular-nums; letter-spacing:.06em; font-weight:800; }
.a411-col-digits code{ font-weight:800; letter-spacing:.08em; }
.a411-col-stake,.a411-col-payout{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.a411-col-payout .cur{ opacity:.9; margin-left:2px; font-size:12px; }
.a411-col-status{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; min-height:34px; }

/* Chips */
.a411-chip{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-size:12px; line-height:1; font-weight:800; letter-spacing:.01em; color:#e2e8f0; background:linear-gradient(180deg, rgba(148,163,184,.20), rgba(148,163,184,.10)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.a411-chip.mult{ color:#1f2937; min-width:34px; background:linear-gradient(180deg,#fde047,#facc15); box-shadow:inset 0 0 0 1px rgba(245,158,11,.45), 0 0 10px rgba(245,158,11,.25); }
.a411-chip.amt{ font-variant-numeric:tabular-nums; }
.a411-chip.amt.win{ color:#052e13; background:linear-gradient(180deg, rgba(34,197,94,.88), rgba(16,185,129,.88)); box-shadow:inset 0 0 0 1px rgba(21,128,61,.55), 0 0 10px rgba(34,197,94,.22); }
.a411-chip.amt.zero{ opacity:.8; }
.a411-chip.amt.pending{ opacity:.65; }

/* Empty/Error */
.a411-empty,.a411-error,.a411-hint{ text-align:center; padding:14px; color:#cbd5e1; border:1px dashed rgba(148,163,184,.25); border-radius:12px; background:rgba(255,255,255,.02); }

/* Pills */
.a411-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid transparent; font-weight:800; font-size:12px; line-height:1; white-space:nowrap; }
.a411-pill.win{ color:#166534; background:#dcfce7; border-color:#bbf7d0; }
.a411-pill.pending{ color:#b45309; background:#fff7ed; border-color:#fed7aa; }
.a411-pill.lose{ color:#334155; background:#f1f5f9; border-color:#e2e8f0; }
.a411-pill.cancelled{ color:#991b1b; background:#fee2e2; border-color:#fecaca; }
.a411-pill.neutral{ color:#0b7285; background:#e3fafc; border-color:#c5f6fa; }

/* === ★ Orders：時間欄上方顯示「期數」膠囊 ===================== */
.a411-col-date{ display:flex; flex-direction:column; align-items:flex-start; }
.a411-col-date .a411-period{ margin-bottom:4px; }
.a411-col-date .a411-period .a411-pill{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:4px 10px;   /* 比一般 pill 稍微緊湊一點 */
}

/* 日期＋時間（共用） */
.a411-col-date .a411-date{ line-height:1.15; }
.a411-col-date .a411-time{ margin-top:2px; font-size:12px; line-height:1.1; color:var(--a411-muted); font-variant-numeric:tabular-nums; }

/* 購票紀錄：號碼下方倍率 chip */
.a411-col-digits{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.a411-under-digits{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* 狀態欄：上狀態、下金額 */
.a411-col-status{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* 表頭字級一致 */
.a411-head > div{ font-size:14px; font-weight:800; letter-spacing:.02em; line-height:1.2; }
.a411-head .a411-col-digits{ font-size:inherit; letter-spacing:.02em; font-variant-numeric:normal; }
@media (max-width:560px){
  .a411-head > div{ font-size:13px; letter-spacing:.02em; }
  .a411-head .a411-col-digits{ font-size:inherit; letter-spacing:.02em; }
}

/* === Results（歷史開獎） === */
.a411-results .a411-head{ grid-template-columns: 120px 110px 1fr; }
.a411-results .a411-row{  grid-template-columns: 120px 110px 1fr; }
.a411-results .a411-col-status{ text-align:left; align-items:flex-start; }
.a411-results .a411-head .a411-col-digits{ line-height:1.2; overflow:hidden; }
/* 右欄最小寬放大，避免截斷；加一點右內距 */
.a411-results .a411-col-digits{ min-width:calc(5.2ch + 1.2em); padding-right:2px; }
.a411-results .a411-col-digits .a411-digits-main{ white-space:nowrap; letter-spacing:.08em; }
/* 日期膠囊配色與期別一致（避免被父層淡化） */
.a411-results .a411-col-date .a411-period .a411-pill.neutral{
  background:#e3fafc !important;
  border-color:#c5f6fa !important;
  color:#0b7285 !important;
  opacity:1 !important;
  filter:none !important;
}

/* Skeleton */
.a411-skel,.a411-skel-row{ height:14px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size:200% 100%; animation:a411-s 1.1s linear infinite; }
.a411-skel-row{ margin:8px 0; }
@keyframes a411-s{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* RWD */
@media (max-width:560px){
  .a411-head{ grid-template-columns: 88px 1fr 96px; }
  .a411-row{  grid-template-columns: 88px 1fr 96px; }

  .a411-results .a411-head{ grid-template-columns: 96px 88px 1fr; }
  .a411-results .a411-row{  grid-template-columns: 96px 88px 1fr; }

  .a411-head > :nth-child(n+4){ display:none; }
  .a411-col-id,.a411-col-wallet,.a411-col-stake,.a411-col-payout{ display:none; }

  /* ✅ 只對「資料列」的日期欄降色，不影響表頭 */
  .a411-row .a411-col-date{ font-size:13px; color:var(--a411-muted); }

  /* ✅ 手機：表頭微調左右內縮（時間→右，狀態→左） */
  .a411-head .a411-col-date{ padding-left:6px; }
  .a411-head .a411-col-status{ padding-right:6px; }

  .a411-col-status{ min-width:96px; gap:6px; }
  .a411-chip{ padding:3px 8px; font-size:11px; }

  /* 期數膠囊在小螢幕更緊湊 */
  .a411-col-date .a411-period .a411-pill{ padding:3px 8px; font-size:11px; }

  /* 小螢幕：右欄最小寬再放大一點 */
  .a411-results .a411-col-digits{ min-width:calc(5.4ch + 1.2em); }
}

/* 支援 dvh 的瀏覽器更精準 */
@supports (height: 1dvh){
  :root{ --a411-max-h: 90dvh; }
}

/* === Mobile header tweak (Orders only, final) ============================ */
@media (max-width:560px){
  /* 時間 → 往右（比前一版再多一點） */
  .a411-table:not(.a411-results) .a411-head .a411-col-date{
    margin-left: 8px;     /* 往右推 */
    padding-left: 6px;    /* 保留一點內距，視覺更居中 */
  }

  /* 號碼 → 往右 */
  .a411-table:not(.a411-results) .a411-head .a411-col-digits{
    margin-left: 8px;     /* 往右推 */
  }

  /* 狀態 → 往左 */
  .a411-table:not(.a411-results) .a411-head .a411-col-status{
    margin-left: -20px;   /* 往左拉 */
    padding-left: 0;
    padding-right: 0;
  }
}
/* --- Fix: 英文 Results 表頭太長溢出（允許換行、加右內距、窄螢幕縮字） --- */
.a411-results .a411-head .a411-col-digits .a411-head-label{
  white-space: normal;       /* 原本是 nowrap，改成可換行 */
  text-overflow: clip;       /* 不要省略號 */
  overflow: visible;
  line-height: 1.15;
}

.a411-results .a411-col-digits{
  padding-right: 8px;        /* 讓文字離右邊框遠一點（原本是 2px） */
}

/* 窄螢幕（例：<= 380px 寬）再微調一下間距與字級 */
@media (max-width: 380px){
  .a411-results .a411-head{ gap: 8px; }
  .a411-results .a411-head .a411-head-label{ font-size: 12px; }
}