/* 定投平台 app 區 — 貼紙風格（沿用 ../css/style.css 的 token） */

.app-nav {
    max-width: 1120px; margin: 0 auto; padding: 20px 20px 4px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.app-nav .brand-mini {
    font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink);
    text-decoration: none; margin-right: 10px;
}
.app-nav .brand-mini .lu { color: var(--orange-d); }
.app-nav a.tab {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
    /* 邊框固定 3px（透明），與 hover/active 同尺寸 → 切換分頁不位移 */
    padding: 8px 15px; border-radius: var(--r-pill); border: 3px solid transparent;
    transition: background .12s, border-color .12s, transform .06s;
}
.app-nav a.tab:hover { background: #fff; border: var(--bd); box-shadow: var(--sh-sm); }
.app-nav a.tab.active {
    background: var(--orange); color: var(--ink); border: var(--bd); box-shadow: var(--sh-sm);
}
.app-nav .spacer { flex: 1; }
.app-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 手機：品牌＋頭像同一列，分頁改成整列平分的分頁條 */
@media (max-width: 760px) {
    .app-nav { padding: 12px 14px 4px; gap: 8px; row-gap: 10px; }
    .app-nav .brand { margin-right: auto; }
    .app-nav .spacer { display: none; }
    .app-nav #app-auth { margin-left: auto; }
    .app-tabs { order: 3; flex: 1 1 100%; gap: 6px; }
    .app-tabs a.tab { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: 13.5px; }
}

.app-main { max-width: 1120px; margin: 0 auto; padding: 12px 20px 70px; }
.page-title { font-family: var(--display); font-size: 30px; margin: 14px 2px 6px; color: var(--ink); font-weight: 700; }
.page-sub { color: var(--ink-2); margin: 0 2px 24px; font-size: 15px; max-width: 640px; }
/* 行內單色平面圖示（取代 emoji，維持貼紙風格一致） */
.ei { width: 1.06em; height: 1.06em; vertical-align: -0.16em; flex: 0 0 auto; }

.card-box {
    background: #fff; border: var(--bd); border-radius: var(--r-lg);
    box-shadow: var(--sh); padding: 24px 26px; margin-bottom: 22px;
}
.card-box h3 { font-family: var(--display); margin: 0 0 20px; font-size: 19px; color: var(--ink); font-weight: 700; }

/* 表單：整齊 3 欄 × 2 列（連線/買賣/交易對 → 金額/時間/送出），按鈕與金額時間對齊 */
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 18px; align-items: end; }
.form-grid .btn { width: 100%; align-self: end; }
@media (max-width: 760px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13.5px; color: var(--ink); font-weight: 700; }
.field input, .field select {
    background: #fff; border: var(--bd-2); color: var(--ink);
    padding: 12px 14px; border-radius: 14px; font-size: 15px; outline: none;
    min-height: 46px; font-family: var(--body);
    transition: box-shadow .1s, border-color .1s;
}
.field input::placeholder { color: #a3abbd; }
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: var(--sh-sm); }

/* 金額輸入 + 幣別後綴（陰影加在整個外框，避免只顯示一半） */
.amount-wrap { display: flex; align-items: stretch; border-radius: 14px; transition: box-shadow .1s; }
.amount-wrap:focus-within { box-shadow: var(--sh-sm); }
.amount-wrap:focus-within input, .amount-wrap:focus-within .amount-unit { border-color: var(--ink); }
.amount-wrap input { flex: 1; min-width: 0; border-radius: 14px 0 0 14px; border-right: none; }
.amount-wrap input:focus { box-shadow: none; }
.amount-unit {
    display: flex; align-items: center; justify-content: center;
    min-width: 62px; padding: 0 14px;
    border: var(--bd-2); border-left: none; border-radius: 0 14px 14px 0;
    background: var(--paper); font-family: var(--display); font-weight: 700; color: var(--ink);
}
.field-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lbl-min { font-weight: 500; color: var(--muted); font-size: 12px; }

/* 發票統計條 */
.inv-summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--orange-50); border: var(--bd-2); border-radius: 14px;
    padding: 12px 16px; margin: 0 0 16px; font-size: 15px;
}
.inv-summary[hidden] { display: none; } /* CSS display:flex 會蓋過 [hidden]，需明確隱藏 */

/* 查詢/同步按鈕組 */
.btn-group { display: flex; gap: 10px; align-items: flex-end; }
.btn-group .btn { white-space: nowrap; }
.inv-summary b { font-family: var(--display); color: var(--ink); }
.inv-summary .inv-count b { color: var(--orange-d); font-size: 18px; }
.inv-summary .inv-arrow { color: var(--muted); font-weight: 700; }
.inv-summary .inv-rule { color: var(--muted); font-size: 12.5px; }

/* 同步進度條 */
.sync-progress { margin: 0 0 18px; }
.sp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sp-top #sp-label { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; }
.sp-top #sp-count { font-family: var(--display); font-weight: 700; color: var(--orange-d); font-variant-numeric: tabular-nums; }
.sp-bar { height: 20px; background: #fff; border: var(--bd); border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--sh-sm); }
.sp-fill {
    height: 100%; width: 0%;
    background: repeating-linear-gradient(45deg, var(--orange) 0 14px, var(--orange-d) 14px 28px);
    border-radius: var(--r-pill); transition: width .25s ease;
}
.sp-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.btn {
    background: var(--orange); color: var(--ink); border: var(--bd);
    border-radius: var(--r-pill); padding: 13px 26px;
    font-family: var(--display); font-weight: 700; font-size: 15px; cursor: pointer; min-height: 46px;
    box-shadow: var(--sh-sm); transition: transform .07s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: var(--sh); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.danger {
    background: #fff; border: var(--bd-2); color: var(--muted);
    padding: 8px 14px; min-height: 0; box-shadow: none; font-family: var(--body);
    font-weight: 700; font-size: 13px; border-radius: var(--r-pill);
}
.btn.danger:hover { border-color: var(--red); color: var(--red); background: #ffecec; transform: none; box-shadow: none; }

/* 表格 */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.data th, table.data td { text-align: left; padding: 14px 12px; border-bottom: 2px solid #eee5d4; white-space: nowrap; }
table.data th { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data td { color: var(--ink-2); }
table.data tbody tr:hover { background: var(--paper); }
table.data tbody tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block; padding: 3px 12px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; border: 2px solid var(--ink); color: var(--ink);
}
.badge.max { background: var(--orange); }
.badge.bitopro { background: var(--mint); }
.badge.dry_run { background: #e6ecfb; }
.badge.filled { background: var(--mint); }
.badge.failed { background: #ffd4d4; }
.badge.active { background: var(--mint); }
.badge.disabled { background: #eceadf; color: var(--muted); border-color: var(--muted); }
.badge.pending { background: #e6ecfb; }
.badge.partial { background: #fff0c2; }

/* 搬磚：雙腿流程與風險狀態 */
.arb-flow {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 16px; align-items: stretch; margin-bottom: 20px;
}
.arb-leg { border: var(--bd); border-radius: var(--r); padding: 18px; background: #fff; box-shadow: var(--sh-sm); }
.arb-leg.sell { background: #eaf2ff; }
.arb-leg.buy { background: #fff4dc; }
.arb-leg-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--display); font-weight: 700; color: var(--ink); }
.arb-arrow { align-self: center; font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--ink); }
.arb-warning {
    background: #fff0c2; border: var(--bd); border-radius: var(--r); padding: 14px 16px;
    color: var(--ink-2); line-height: 1.7; font-size: 13.5px; margin: 18px 0;
}
.arb-warning strong { color: var(--ink); }
.arb-form-actions { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.arb-form-actions .btn { min-width: 160px; }
.arb-spread.pos { color: var(--mint); font-weight: 700; }
.arb-spread.neg { color: var(--red); font-weight: 700; }
.arb-book { margin-top: 16px; padding: 16px; border: var(--bd-2); border-radius: var(--r); background: #fff; color: var(--ink-2); }
.arb-book-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--ink); }
.arb-book-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.arb-book-grid > div { padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
.arb-book-grid span,.arb-book-grid small { display: block; color: var(--muted); font-size: 12px; }
.arb-book-grid b { display: block; margin: 4px 0; color: var(--ink); overflow-wrap: anywhere; }
.arb-book-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.arb-book-note.warn { color: var(--red); font-weight: 700; }
.arb-min-hint { margin: 8px 0 0; min-height: 18px; line-height: 1.5; }
@media (max-width: 760px) { .arb-book-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .arb-book-grid { grid-template-columns: 1fr; } }
.arb-error { white-space: normal; max-width: 280px; color: var(--red); font-size: 12px; }
.arb-invoice { margin-top: 18px; }
.arb-invoice-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; margin-top: 12px; }
.arb-invoice-group { background: #fff; border: var(--bd-2); border-radius: 14px; padding: 14px; }
.arb-invoice-group h4 { margin: 0 0 10px; color: var(--ink); font-family: var(--display); font-size: 15px; }
.arb-fee-breakdown { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 700px) {
    .arb-flow { grid-template-columns: 1fr; }
    .arb-arrow { transform: rotate(90deg); justify-self: center; }
    .arb-form-actions { flex-direction: column; align-items: stretch; }
    .arb-form-actions .btn { width: 100%; }
}

.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 46px 16px; }
.hint {
    font-size: 13px; color: var(--ink-2); margin-top: 14px; line-height: 1.75;
    background: #fff8e9; border: var(--bd-2); border-radius: 14px; padding: 12px 16px;
}
.hint b { color: var(--ink); }
.need-login { text-align: center; padding: 80px 16px; }
.need-login h2 { font-family: var(--display); color: var(--ink); font-size: 28px; }
.need-login .btn { display: inline-block; text-decoration: none; margin-top: 18px; }

/* ---- 帳戶餘額 + 可定投天數（貼紙風格） ---- */
.btn.ghost.sm { padding: 6px 14px; font-size: 13px; }
.hint.err { background: #ffe9e9; color: var(--red); }
.budget-box {
    margin-top: 18px; border: var(--bd); border-radius: var(--r-lg);
    background: #fff; box-shadow: var(--sh); padding: 16px 18px;
}
.budget-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
}
.budget-title { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 17px; }
.budget-title .badge { margin-left: 6px; }
.budget-grid {
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch;
    border: var(--bd); border-radius: var(--r); padding: 16px 18px;
}
.budget-grid.ok { background: #eafaf2; }
.budget-grid.short { background: #fff1e0; }
.bstat { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bstat-label {
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    color: var(--muted); text-transform: uppercase;
}
.bstat-val { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 26px; line-height: 1.1; }
.bstat-val em { font-style: normal; font-size: 15px; color: var(--ink-2); margin-left: 2px; }
.bstat-sub { font-size: 13px; color: var(--ink-2); }
.bstat.days {
    align-items: center; text-align: center; justify-content: center;
    border-left: var(--bd-2); padding-left: 18px; min-width: 116px;
}
.bstat-days { font-family: var(--display); font-weight: 700; line-height: 1; font-size: 46px; color: var(--mint); }
.budget-grid.short .bstat-days { color: var(--red); }
.bstat-days em { font-style: normal; font-size: 16px; color: var(--ink-2); margin-left: 4px; }
.budget-note {
    margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.7;
    border-radius: 12px; padding: 10px 14px; border: var(--bd-2);
}
.budget-note.ok { background: #f2fbf6; }
.budget-note.short { background: #fff7ee; }
.budget-note b { color: var(--ink); font-weight: 700; }
@media (max-width: 560px) {
    .budget-grid { grid-template-columns: 1fr; }
    .bstat.days { border-left: 0; border-top: var(--bd-2); padding-left: 0; padding-top: 12px; }
}

/* ---- 新增連線：API 權限醒目提示 ---- */
.perm-notice {
    margin-top: 18px; border: var(--bd); border-radius: var(--r-lg);
    background: #fff8e9; box-shadow: var(--sh-sm); padding: 18px 20px;
}
.perm-notice-head {
    font-family: var(--display); font-weight: 700; color: var(--ink);
    font-size: 18px; line-height: 1.4; margin-bottom: 14px;
}
.perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.perm-list li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: var(--bd-2); border-radius: 14px; padding: 10px 14px;
}
.perm-ico { display: inline-flex; flex: 0 0 auto; }
.perm-ico svg { display: block; }
.perm-notice-head { display: flex; align-items: center; gap: 8px; }
.perm-lock { flex: 0 0 auto; }
.perm-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.perm-tag {
    font-family: var(--display); font-weight: 700; font-size: 14px;
    border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 2px 12px;
}
.perm-tag.on  { background: var(--mint); color: #fff; }
.perm-tag.off { background: var(--red);  color: #fff; }
.perm-list li.off { border-color: var(--red); background: #fff5f5; }
.perm-why { color: var(--ink-2); font-size: 14px; margin-left: 2px; }
.perm-foot { margin: 14px 2px 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }

/* ---- 我的排程：編輯列 ---- */
.btn.sm { padding: 6px 14px; font-size: 13px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
tr.editing { background: #fff8e9; }
tr.editing td { vertical-align: middle; }
.edit-market, .edit-time {
    font-family: var(--body); font-size: 14px; color: var(--ink);
    background: #fff; border: var(--bd-2); border-radius: 10px; padding: 7px 10px; max-width: 160px;
}
.edit-amt-wrap { display: inline-flex; align-items: center; gap: 6px; }
.edit-amt {
    font-family: var(--body); font-size: 14px; color: var(--ink); width: 96px;
    background: #fff; border: var(--bd-2); border-radius: 10px; padding: 7px 10px;
}
.edit-unit { font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* ---- 每日總覽（獨立區塊，橫向排版） ---- */
.ps-row { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.ps-stat {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    background: #fff; border: var(--bd-2); border-radius: var(--r); padding: 14px 18px;
    min-width: 150px;
}
.ps-stat.invoice { background: #eafaf2; }
.ps-stat.fee { background: #fff3e0; }
.ps-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }
.ps-val { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 34px; line-height: 1.1; }
.ps-stat.invoice .ps-val { color: var(--mint); }
.ps-stat.fee .ps-val { color: var(--orange-d); }
.ps-acc-fee { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
.inv-merged { color: var(--muted); font-size: 12.5px; }
.ps-unit { font-size: 12px; color: var(--ink-2); }
@media (max-width: 620px) {
    .ps-stat { flex: 1 1 140px; }
}

/* ---- 購買歷史：分頁 ---- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pager .pg-info { font-size: 13px; color: var(--ink-2); font-weight: 700; }
.pager .btn.sm:disabled, .pager .btn.ghost.sm:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- 下拉選單箭頭：改用自訂 chevron，往左內縮不貼右邊 ---- */
.field select, .edit-market, .edit-time {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    padding-right: 42px;
}
.edit-market, .edit-time { background-position: right 13px center; padding-right: 32px; }

/* ---- 可摺疊卡（新增連線） ---- */
details.collapse > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 10px; }
.collapse-title { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.collapse-ico { font-size: 20px; color: var(--ink); transition: transform .2s; }
details.collapse[open] > summary .collapse-ico { transform: rotate(180deg); }
.collapse-inner { margin-top: 20px; }

/* ---- 交易所推薦註冊（QR + 連結，貼紙風格） ---- */
.ref-lede { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.7; }
.ref-lede b { color: var(--orange-d); }
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ref-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    border: var(--bd); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-sm); padding: 20px;
}
.ref-top { display: flex; align-items: center; gap: 8px; }
.ref-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 17px; }
.ref-qr {
    display: inline-block; line-height: 0; background: #fff;
    border: var(--bd); border-radius: 16px; padding: 10px; box-shadow: var(--sh-sm);
    transition: transform .07s, box-shadow .12s;
}
.ref-qr:hover { transform: translate(-1px,-1px); box-shadow: var(--sh); }
.ref-qr img { display: block; width: 160px; height: 160px; }
.ref-perk { font-size: 14px; font-weight: 700; color: var(--orange-d); margin: 0; }
.ref-btn { text-decoration: none; }
@media (max-width: 620px) { .ref-grid { grid-template-columns: 1fr; } }

/* 發票估算（選交易所＋交易對＋金額後顯示 4 種折抵組合的開票燈號） */
.inv-reminder {
    margin-top: 16px; padding: 14px 16px;
    background: #eafaf3; border: 2px solid var(--ink); border-radius: var(--r);
    box-shadow: var(--sh-sm); font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.inv-reminder b { color: var(--ink); }
.inv-reminder a { color: var(--orange-d); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--orange); }
.inv-reminder a:hover { background: #fff2d6; }
.inv-hint { margin: 0; }
.inv-est-head { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.inv-est-sub { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.inv-squares { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 10px; }
.inv-sq-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 46px; }
.inv-sq { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900; line-height: 1; color: #fff;
    border: 2px solid var(--ink); border-radius: 13px; box-shadow: 2px 2px 0 var(--ink); }
.inv-sq.on  { background: var(--mint); color: var(--ink); }
.inv-sq.off { background: var(--red); }
.inv-sq-item .sq-l { font-size: 11.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.15; white-space: nowrap; }
.inv-sq-item .sq-f { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.inv-est-foot { margin: 0; font-size: 12px; color: var(--muted); }

/* 買/賣 方向徽章 */
.badge.side-buy  { background: var(--orange); }
.badge.side-sell { background: var(--sky); }

/* 平台 DCA 紀錄 · 發票達標（緊湊表格，可擴充多帳號不爆版） */
.dca-accounts { margin: 12px 0 20px; }
.dca-total { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.dca-total b { font-family: var(--display); color: var(--orange-d); font-size: 17px; }
.dca-acc-table .da-inv { font-family: var(--display); color: var(--orange-d); font-size: 17px; }
.dca-acc-table .ok { color: var(--mint); font-weight: 700; }
.dca-acc-table .no { color: var(--red); font-weight: 700; }

/* DCA 時間區間切換 + 今日狀態橫幅 */
.dca-range { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.dca-r { padding: 7px 16px; border: var(--bd-2); border-radius: var(--r-pill); background: #fff;
    font-family: var(--body); font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
    transition: transform .06s, box-shadow .12s; }
.dca-r:hover { box-shadow: var(--sh-sm); }
.dca-r.active { background: var(--orange); color: var(--ink); border: var(--bd); box-shadow: var(--sh-sm); }
.dca-status { border: var(--bd-2); border-radius: 14px; padding: 11px 16px; margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.dca-status b { color: var(--ink); }
.dca-status.wait { background: #fff2d6; }
.dca-status.done { background: #eafaf3; }

/* ============================================================
   搬磚頁 UI/UX 優化（貼紙風格）— 沿用既有 token
   ============================================================ */

/* 區塊標題貼紙：小方章 + 標題，方章微傾斜像貼上去 */
.card-h { display: flex; align-items: center; gap: 11px; }
.card-sticker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 2px solid var(--ink); border-radius: 10px;
    box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
    font-size: 17px; font-weight: 900; line-height: 1;
    transform: rotate(-5deg);
}
.card-sticker.s-orange { background: var(--orange); }
.card-sticker.s-mint   { background: var(--mint); }
.card-sticker.s-sky    { background: var(--sky); }

/* 購買歷史：分區（編號大區標頭 + 該區卡片群） */
.hist-region { margin-bottom: 30px; }
.hist-region > .card-box + .card-box { margin-top: 18px; }
.region-head { display: flex; align-items: center; gap: 14px; margin: 6px 2px 16px; }
.region-num {
    flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
    font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink);
    background: var(--orange); border: var(--bd); border-radius: 50%;
    box-shadow: var(--sh-sm); transform: rotate(-4deg);
}
.hist-region.r2 .region-num { background: var(--sky); }
.region-txt h2 { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0; line-height: 1.2; }
.region-txt p { color: var(--ink-2); font-size: 13.5px; margin: 3px 0 0; }

/* 標題列（標題 + 狀態圖例並排） */
.card-h-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.card-h-row .card-h { margin-bottom: 0; }
.run-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.run-legend .badge { font-size: 11px; padding: 2px 10px; }

/* A→B 雙腿：編號步驟貼紙 + 說明 */
.arb-leg { position: relative; padding-top: 22px; }
.arb-step {
    position: absolute; top: -15px; left: -13px;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink);
    border: var(--bd); border-radius: 50%; box-shadow: var(--sh-sm);
    transform: rotate(-8deg);
}
.arb-leg.buy  .arb-step { background: var(--orange); }
.arb-leg.sell .arb-step { background: var(--sky); }
.arb-leg-head { margin-bottom: 16px; }
.arb-leg .arb-leg-title { margin-bottom: 6px; }
.arb-leg-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.arb-leg-sub b { color: var(--ink); }

/* 中間箭頭 + 「實際成交量」連接標籤 */
.arb-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arb-arrow-ic { font-size: 26px; line-height: 1; }
.arb-arrow-lbl {
    font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--ink);
    background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-pill);
    padding: 3px 11px; white-space: nowrap; transform: rotate(-3deg);
}

/* 訂單簿預覽：空狀態做成刻意的置中提示 */
.arb-book.is-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: var(--muted); background: var(--paper);
    border-style: dashed; padding: 26px 16px;
}
.arb-book-emptyic { font-size: 26px; line-height: 1; opacity: .8; }

/* 交易模式橫幅：模擬=藍、真實=紅，左側狀態燈 */
.arb-mode {
    display: flex; align-items: flex-start; gap: 11px;
    border: var(--bd); border-radius: var(--r); padding: 13px 16px; margin: 18px 0;
    font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.arb-mode strong { color: var(--ink); }
.arb-mode-dot {
    flex: 0 0 auto; width: 13px; height: 13px; margin-top: 4px;
    border: 2px solid var(--ink); border-radius: 50%;
}
.arb-mode.dry  { background: #e9f0ff; }
.arb-mode.dry  .arb-mode-dot  { background: var(--sky); }
.arb-mode.live { background: #ffe9e9; }
.arb-mode.live .arb-mode-dot  { background: var(--red); }

@media (max-width: 700px) {
    /* 直向堆疊時：箭頭改橫向、圖示轉向下，標籤保持水平可讀 */
    .arb-arrow { transform: none; flex-direction: row; }
    .arb-arrow-ic { transform: rotate(90deg); }
    .arb-step { top: -13px; left: -11px; width: 36px; height: 36px; font-size: 19px; }
}

/* 我的搬磚排程：卡片格（取代寬表格） */
.arb-plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.arb-plan-card {
    display: flex; flex-direction: column; gap: 14px;
    border: var(--bd); border-radius: var(--r); background: #fff;
    box-shadow: var(--sh-sm); padding: 16px 18px;
    transition: transform .07s, box-shadow .12s;
}
.arb-plan-card:hover { transform: translate(-1px, -1px); box-shadow: var(--sh); }
.apc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.apc-top > .badge { flex: 0 0 auto; white-space: nowrap; }
.apc-flow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apc-leg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.apc-role {
    flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 12px;
    border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 1px 9px; background: #fff;
}
.apc-role.a { background: #fff4dc; }
.apc-role.b { background: #e6f7ef; }
.apc-conn { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.apc-arrow { color: var(--muted); font-family: var(--display); font-weight: 700; padding-left: 10px; line-height: 1; }
.apc-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    border-top: 2px solid #eee5d4; border-bottom: 2px solid #eee5d4; padding: 13px 0;
}
.apc-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apc-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.apc-v { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.apc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 搬磚執行紀錄：卡片列（左側色條標示狀態） */
.arb-run-list { display: flex; flex-direction: column; gap: 14px; }
.arb-run-card {
    display: flex; flex-direction: column; gap: 12px;
    border: var(--bd); border-left-width: 8px; border-radius: var(--r); background: #fff;
    box-shadow: var(--sh-sm); padding: 14px 16px;
}
.arb-run-card.filled  { border-left-color: var(--mint); }
.arb-run-card.partial { border-left-color: var(--orange); }
.arb-run-card.failed  { border-left-color: var(--red); }
.arb-run-card.dry_run { border-left-color: var(--sky); }
.arc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.arc-time { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.arc-right { display: flex; align-items: center; gap: 10px; }
.arc-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arc-leg {
    display: flex; flex-direction: column; gap: 5px; min-width: 0;
    border: var(--bd-2); border-radius: 12px; padding: 10px 12px; background: var(--paper);
}
.arc-leg-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.arc-conn { color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.arc-px { color: var(--ink); font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.arc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; }
.arc-market { color: var(--muted); font-weight: 700; }
.arc-error { color: var(--red); font-weight: 700; overflow-wrap: anywhere; }

/* 單次搬磚損益／手續費（TWD 明細，不用 %） */
.arc-econ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arc-ec {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
    border: var(--bd-2); border-radius: 12px; padding: 9px 12px; background: var(--paper);
}
.arc-ec.net { background: #fff; border-color: var(--ink); box-shadow: var(--sh-sm); }
.arc-ec .k { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.arc-ec .v { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.arc-ec.net .v { font-size: 18px; }
.arc-ec .v.pos { color: var(--mint); }
.arc-ec .v.neg { color: var(--red); }
.arc-econ-note { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.arc-econ-note b { font-family: var(--display); }
.arc-econ-note b.pos { color: var(--mint); }
.arc-econ-note b.neg { color: var(--red); }
.arc-econ-note.err { background: #ffe9e9; border: var(--bd-2); border-color: var(--red); border-radius: 12px; padding: 10px 12px; color: var(--ink-2); }
.arc-econ-note.err b { color: var(--red); }

@media (max-width: 560px) {
    .arc-legs { grid-template-columns: 1fr; }
    .arc-econ { grid-template-columns: 1fr; }
}