.case-type-picker { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.case-type-picker legend { width: 100%; margin: 0 0 2px; color: #777b88; font-size: 13px; font-weight: 700; }
.type-choice-input { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.type-choice { display: flex !important; align-items: center; gap: 11px; min-height: 72px; padding: 12px 13px !important; border: 1px solid #e3e3ee; border-radius: 14px; background: #fbfbfe; color: #323440; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.type-choice:hover { border-color: #b9b8f6; transform: translateY(-1px); }
.type-choice-icon { display: grid; place-items: center; flex: 0 0 34px; inline-size: 34px; block-size: 34px; border-radius: 10px; background: #f0efff; color: #5d58d6; font-size: 20px; font-weight: 800; }
.type-choice strong, .type-choice small { display: block; }
.type-choice strong { font-size: 14px; line-height: 1.3; }
.type-choice small { margin-top: 3px; color: #858794; font-size: 12px; font-weight: 500; line-height: 1.25; }
.type-choice-input:checked + .type-choice { border-color: #5d58dc; background: #f1f0ff; box-shadow: 0 0 0 3px rgba(93, 88, 220, .12); }
.type-choice-input:checked + .type-choice .type-choice-icon { background: #5d58dc; color: #fff; }
.type-choice-input:focus-visible + .type-choice { outline: 3px solid rgba(93, 88, 220, .3); outline-offset: 2px; }

.settings-panel { max-width: 1260px; margin: 0 auto; }
.settings-card { margin-bottom: 16px; padding: 24px 28px; border: 1px solid #e5e5eb; border-radius: var(--layout-radius, 21px); background: #fff; box-shadow: 0 1px 2px rgba(26, 26, 42, .025); }
.settings-intro { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(110deg, #fff 0%, #f5f4ff 100%); }
.settings-intro h2, .settings-card h3 { margin: 4px 0 6px; color: #30313d; }
.settings-intro p, .settings-restricted p { margin: 0; color: #80828d; }
.settings-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; background: #5d58dc; color: #fff; font-size: 26px; }
.settings-restricted { border-style: dashed; background: #fbfbfd; }
.settings-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.settings-card-head h3 { font-size: 18px; }
.settings-card-head small { padding-top: 7px; color: #858794; }
.store-form { display: grid; grid-template-columns: .55fr .65fr 1fr 1fr 1.25fr auto; align-items: end; gap: 13px; margin-top: 18px; }
.store-form label { display: grid; gap: 7px; color: #777b88; font-size: 13px; font-weight: 700; }
.store-form input { inline-size: 100%; min-block-size: 42px; box-sizing: border-box; padding: 9px 11px; border: 1px solid #dedee7; border-radius: 10px; background: #fff; color: #30313d; font: inherit; }
.settings-table-wrap { overflow-x: auto; margin: 15px -28px -24px; }
.settings-table { width: 100%; border-collapse: collapse; min-width: 1040px; }
.settings-table th, .settings-table td { padding: 15px 28px; border-top: 1px solid #eeeef3; text-align: left; }
.settings-table th { color: #9698a3; font-size: 13px; font-weight: 700; }
.settings-table td { color: #363741; font-size: 14px; }
.settings-table td:last-child, .settings-table th:last-child { width: 148px; text-align: right; }
.store-contact-empty { color: #a5a6ae; }
.store-actions { display: inline-flex; gap: 8px; }
.store-actions button { min-block-size: 32px; padding: 5px 9px; border: 0; border-radius: 8px; background: #f0efff; color: #5c57d4; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.store-actions .delete-store { background: #fff1f1; color: #c15050; }
.store-identity { display: inline-flex; align-items: center; max-inline-size: 150px; min-block-size: 40px; padding: 0 12px; border: 1px solid #e2e2ec; border-radius: 11px; color: #646677; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager-access { min-block-size: 40px; padding: 0 13px; border: 1px solid #deddf2; border-radius: 11px; background: #f7f6ff; color: #5953c8; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.manager-access.is-active { border-color: #5d58dc; background: #5d58dc; color: #fff; }
.import-card { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.import-card h3 { font-size: 18px; }.import-card p { max-inline-size: 620px; margin: 6px 0 0; color: #81838e; font-size: 13px; line-height: 1.55; }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }.file-picker { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 12px; border: 1px solid #ddddec; border-radius: 10px; color: #5b56cf; font-size: 13px; font-weight: 800; cursor: pointer; }.file-picker:hover { background: #f6f5ff; }
#import-summary { min-inline-size: 130px; color: #858794; font-size: 12px; }.import-ready { color: #31845f !important; font-weight: 700; }
.store-url { display: inline-flex; align-items: center; gap: 7px; max-inline-size: 250px; color: #5b56cf; font-size: 12px; font-weight: 700; }.store-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.copy-store-url { border: 0; border-radius: 7px; background: #f0efff; color: #5b56cf; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.login-modal { width: min(440px, calc(100vw - 36px)); }.login-copy { margin: 4px 0 20px; color: #777985; line-height: 1.6; }.login-fields { display: grid; gap: 14px; }.login-fields label { display: grid; gap: 7px; color: #6f717d; font-size: 13px; font-weight: 700; }.login-fields input { min-block-size: 42px; padding: 9px 11px; border: 1px solid #dedee7; border-radius: 10px; font: inherit; }.login-hint { margin: 15px 0 0; padding: 10px 12px; border-radius: 9px; background: #f6f5ff; color: #6560c9; font-size: 12px; }
@media (max-width: 820px) { .case-type-picker { grid-template-columns: 1fr; }.store-form { grid-template-columns: 1fr; }.store-form .button { inline-size: 100%; }.settings-card { padding: 20px; }.settings-table-wrap { margin-inline: -20px; }.settings-table th, .settings-table td { padding-inline: 20px; }.import-card { align-items: flex-start; flex-direction: column; }.import-actions { justify-content: flex-start; }.store-identity { display: none; } }

/* 多品項標註（置於品項名稱後方，不被名稱省略號裁切） */
.product-line { display: flex; align-items: center; }
.multi-item-badge { flex: 0 0 auto; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: #fff1e4; color: #c2610a; font-size: 12px; font-weight: 780; letter-spacing: -.01em; white-space: nowrap; }

/* 備註欄位跨兩欄 */
.note-field { grid-column: 1 / -1; }
.note-field textarea { min-height: 58px; }

/* 案件下方 inline 展開詳情 */
.case-row.is-expanded { background: #f1f0ff; }
.case-row.is-expanded td { border-bottom-color: transparent; }
.detail-row > td { padding: 0 20px 20px; background: #f7f7fb; border-bottom: 1px solid #eeeef2; }
.detail-inline { position: sticky; left: 24px; box-sizing: border-box; width: min(1180px, calc(100vw - 88px)); border: 1px solid #e5e5ea; border-radius: 16px; background: #fff; padding: 8px 28px 22px; box-shadow: 0 1px 2px rgba(26, 26, 42, .04); }
.detail-inline .detail-shell { width: auto; min-height: 0; padding: 0; box-shadow: none; overflow: visible; }

/* 頂列：事實帶（左）與更新進度（右）同一列對齊 */
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 18px 0; border-bottom: 1px solid #ededf0; }
.detail-status { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.detail-status-label { font-size: 12px; font-weight: 600; color: var(--apple-muted, #6e6e73); }
.detail-status-field { position: relative; }
.detail-status-field::after { content: "⌄"; position: absolute; right: 13px; top: 46%; transform: translateY(-50%); pointer-events: none; color: #86868b; font-size: 13px; }
.detail-status-field select { appearance: none; -webkit-appearance: none; border: 1px solid var(--apple-line, #d2d2d7); border-radius: 980px; background: #fff; padding: 7px 32px 7px 15px; font-size: 13px; font-weight: 600; color: var(--apple-ink, #313134); outline: none; }
.detail-status-field select:focus { border-color: var(--apple-blue, #0071e3); box-shadow: 0 0 0 3px rgba(0, 113, 227, .16); }
.detail-status .button-primary { padding: 8px 17px; font-size: 13px; border-radius: 980px; background: var(--apple-blue, #0071e3); box-shadow: none; }
.detail-status .button-primary:hover { background: var(--apple-blue-deep, #0066cc); }

/* 事實帶：一條 hairline 分隔的關鍵欄位 */
.detail-facts { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; row-gap: 16px; }
.fact { display: flex; flex-direction: column; gap: 5px; padding: 1px 26px; border-left: 1px solid #ececf0; }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact-label { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--apple-muted, #6e6e73); }
.fact-value { font-size: 15px; font-weight: 640; color: var(--apple-black, #1d1d1f); letter-spacing: -.01em; }
.fact-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--apple-blue-deep, #0066cc); letter-spacing: 0; }

/* 付款狀態徽章 */
.pay-status { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pay-status.paid { background: #e7f8f0; color: #167c54; }
.pay-status.partial { background: #fff3dd; color: #9a6400; }
.pay-status.unpaid { background: #fdeceb; color: #c23934; }

/* 到貨處理控制 */
.arrival-form { display: inline-flex; align-items: center; gap: 10px; }
.email-section { display: grid; gap: 10px; }
.email-section h3 { margin-bottom: 0; }
.email-help { margin: 0; color: var(--apple-muted, #6e6e73); font-size: 12px; line-height: 1.5; }
.email-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.email-actions .button { padding: 8px 14px; font-size: 13px; }
.email-actions .button:disabled { cursor: not-allowed; opacity: .48; }
.email-section > small { color: var(--apple-muted, #6e6e73); font-size: 12px; }
.email-reply { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.email-reply textarea { min-height: 42px; resize: vertical; padding: 9px 11px; border: 1px solid var(--apple-line, #d2d2d7); border-radius: 10px; font: inherit; }
.email-reply .button { align-self: start; padding: 9px 12px; font-size: 13px; }
.send-transfer-email { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 2px; border: 0; border-radius: 7px; background: transparent; color: var(--apple-blue, #0071e3); font-size: 13px; font-weight: 720; letter-spacing: -.01em; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.send-transfer-email:hover { color: var(--apple-blue-deep, #0066cc); background: #f1f7ff; }
.send-transfer-email:focus-visible { outline: 3px solid rgba(0, 113, 227, .18); outline-offset: 2px; }
.email-action-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #eaf3ff; color: var(--apple-blue, #0071e3); font-size: 12px; line-height: 1; }
.send-transfer-email.is-sent { color: #267e5f; }
.send-transfer-email.is-sent:hover { color: var(--apple-blue-deep, #0066cc); }
.send-transfer-email.is-sent .email-action-primary { display: inline-flex; align-items: center; gap: 6px; }
.send-transfer-email.is-sent .email-action-mark { width: 16px; height: 16px; border-radius: 50%; background: #dff3e9; color: #21815e; font-size: 10px; }
.email-action-resend { display: none; }
.send-transfer-email.is-sent:hover .email-action-primary { display: none; }
.send-transfer-email.is-sent:hover .email-action-resend { display: inline; }
.send-transfer-email:disabled { cursor: not-allowed; opacity: .42; }
.arrival-done { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.arrival-badge { font-size: 14px; font-weight: 700; color: #167c54; }
.arrival-done small { color: var(--apple-muted, #6e6e73); font-size: 12px; }

/* 備註列 */
.detail-remark { display: flex; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid #ededf0; }
.detail-remark-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #9a6400; background: #fff3dd; padding: 3px 10px; border-radius: 980px; }
.detail-remark p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--apple-ink, #313134); }

.detail-inline .detail-section { margin-top: 18px; padding-top: 16px; }

@media (max-width: 900px) {
  .detail-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .detail-facts { gap: 14px 24px; }
  .fact { padding: 0; border-left: 0; }
}