* { box-sizing: border-box; margin: 0; padding: 0; }
input, select, button, textarea { font-family: inherit; }

body {
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    background: #F7FBFA;
    min-height: 100vh;
    padding: 30px 20px 60px;
}

.web-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    overflow: hidden;
    border: 1px solid #D7E5E1;
}

/* ── Header ── */
.header {
    background: #fff;
    padding: 28px 28px 24px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #1F2D2A;
    border-bottom: 1px solid #E8F0ED;
    letter-spacing: 0.01em;
    position: relative;
}
.case-info-area {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.case-id-badge {
    font-size: 11px;
    font-weight: 500;
    color: #8FA8A2;
    background: #F0F7F5;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0;
}
.case-status-badge {
    font-size: 11px;
    font-weight: 500;
    color: #2FAE9B;
    background: #E8F7F4;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ══════════════════════════════════════
   LEVEL 1 — 財務狀況 / 負債狀況 / 不動產資料
   ══════════════════════════════════════ */
.l1-card {
    border: 1px solid #D7E5E1;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.l1-card.active {
    border-color: #A8D5CC;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.l1-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.15s;
}
.l1-header:hover           { background: #F7FBFA; }
.l1-header.no-click        { cursor: default; }
.l1-header.no-click:hover  { background: #fff; }
.l1-title {
    font-size: 18px;
    font-weight: 600;
    color: #1F2D2A;
    display: flex;
    align-items: center;
    gap: 9px;
}
.l1-body {
    display: none;
    border-top: 1px solid #E8F0ED;
    padding: 14px;
    background: #FAFCFB;
}
.l1-body.open { display: flex; flex-direction: column; gap: 10px; }

/* 物件基本資料卡 input / select 背景 */
#prop-basic-card input,
#prop-basic-card select {
    background-color: #e8f5e9;
}

/* 物件基本資料卡 header 專用配色 */
.prop-basic-header {
    background: #F0F6F4;
    border-bottom: 1px solid #C8DAD5;
}
.prop-basic-header:hover { background: #E6F0ED; }
.prop-basic-header .t-arrow { color: #5A8F87; }

/* ══════════════════════════════════════
   不動產資料專用 class（隔離全域 l2）
   ══════════════════════════════════════ */
.prop-card {
    border: 1px solid #D7E5E1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.prop-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.15s;
}
.prop-header:hover { background: #F7FBFA; }
.prop-body {
    display: none;
    padding: 12px;
    background: #fff;
}
.prop-body.open { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════
   LEVEL 2 — 借款人 / 保證人
   ══════════════════════════════════════ */
.l2-card {
    border: 1px solid #D7E5E1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.l2-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.15s;
}
.l2-header:hover { background: #F7FBFA; }
.l2-title {
    font-size: 16px;
    font-weight: 600;
    color: #1F2D2A;
    display: flex;
    align-items: center;
    gap: 8px;
}
.l2-body {
    display: none;
    padding: 12px;
    border-top: 1px solid #E8F0ED;
    background: #fff;
}
.l2-body.open { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════
   LEVEL 3 — 資產資料 / 負債資料 / 收入資料
   ══════════════════════════════════════ */
.l3-card {
    border: 1px solid #D7E5E1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.l3-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.15s;
}
.l3-header:hover           { background: #F7FBFA; }
.l3-header.no-click        { cursor: default; }
.l3-header.no-click:hover  { background: #fff; }
.l3-title {
    font-size: 15px;
    font-weight: 500;
    color: #1F2D2A;
    display: flex;
    align-items: center;
    gap: 7px;
}
.l3-body {
    display: none;
    padding: 12px;
    border-top: 1px solid #E8F0ED;
}
.l3-body.open { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════
   LEVEL 4 — 活存類 / 定存類 / … etc
   ══════════════════════════════════════ */
.l4-card {
    border: 1px solid #E8F0ED;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.l4-header {
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #F7FBFA;
    user-select: none;
    transition: background 0.15s;
}
.l4-header:hover { background: #EEF5F2; }
.l4-title {
    font-size: 14px;
    font-weight: 500;
    color: #2E6B5E;
    display: flex;
    align-items: center;
    gap: 7px;
}
.l4-body {
    display: none;
    padding: 12px 14px 14px;
    border-top: 1px solid #E8F0ED;
}
.l4-body.open { display: block; }

/* ── L4 active (accordion open) state ── */
.l4-card.active {
    border-color: #A8D5CC;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.l4-card.active .l4-header {
    background: #EEF8F5;
}
.l4-card.active .l4-title {
    color: #1F7A67;
    font-weight: 600;
}

/* ── Shared arrow ── */
.t-arrow {
    color: #A8BCBA;
    font-size: 11px;
    display: inline-block;
    transition: transform 0.25s;
    flex-shrink: 0;
}
.t-arrow.open { transform: rotate(90deg); }

/* ── Coming soon badge ── */
.badge-soon {
    font-size: 13px;
    font-weight: 400;
    color: #8FA8A2;
    background: #F2F7F5;
    border: 1px solid #D7E5E1;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Item card ── */
.item-card {
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity:0; transform:translateY(-5px); }
    to   { opacity:1; transform:translateY(0); }
}
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
}
.item-index { font-size: 13px; font-weight: 400; color: #8FA8A2; }
.del-btn {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.del-btn:hover { background: #fecaca; }

/* ── Form fields ── */
.frow { display: grid; gap: 8px; margin-bottom: 8px; }
.frow:last-child { margin-bottom: 0; }
.c1 { grid-template-columns: 1fr; }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: 1fr 1fr 1fr; }
.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }  /* BT-20260422-HOTFIX-002：form.html 客戶基本資料使用 */

/* prop-fields: plain block wrapper inside l3-body (avoids flex-gap doubling frow margins) */
.prop-fields { display: block; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #5F726C;
    margin-bottom: 4px;
}
.field input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #D7E5E1;
    border-radius: 8px;
    font-size: 14px;
    color: #1F2D2A;
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
    border-color: #2FAE9B;
    box-shadow: 0 0 0 3px rgba(47,174,155,0.10);
}
.field input[type="number"] { text-align: right; }

/* ── Add button ── */
.add-btn {
    width: 100%;
    padding: 9px;
    background: #fff;
    color: #2FAE9B;
    border: 1px dashed #A8D5CC;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.15s;
    font-family: inherit;
}
.add-btn:hover { background: #F7FBFA; border-color: #2FAE9B; }

/* ── Subtotal bar ── */
.sub-bar { display: none; }
.sub-bar .s-lbl { font-size: 13px; font-weight: 400; color: #5F726C; }
.sub-bar .s-amt { font-size: 15px; font-weight: 600; color: #1F7A67; }

/* ── Real estate sub-section ── */
.re-sub {
    border: 1px solid #DCE8E3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
.re-sub-hd {
    padding: 10px 14px;
    background: #F7FBFA;
    font-size: 13px;
    font-weight: 700;
    color: #1F2D2A;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.re-sub-hd.clickable { cursor: pointer; user-select: none; transition: background 0.2s; }
.re-sub-hd.clickable:hover { background: #EAF7F4; }
.re-sub-bd { padding: 12px 14px; }

.re-total-bar { display: none; }
.re-total-bar .rt-lbl { font-size: 13px; font-weight: 400; color: #5F726C; }
.re-total-bar .rt-amt { font-size: 15px; font-weight: 600; color: #1F7A67; }

/* ── Grand total ── */
.grand-total {
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
    color: #1F2D2A;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.gt-lbl { font-size: 13px; font-weight: 600; color: #5F726C; }
.gt-amt { font-size: 18px; font-weight: 700; color: #1F7A67; }

/* ── Combined total ── */
.combined-total {
    background: linear-gradient(135deg, #1F7A67, #2FAE9B);
    color: #fff;
    padding: 18px 22px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #2FAE9B;
}
.combined-total .ct-lbl { font-size: 15px; font-weight: 700; }
.combined-total .ct-amt { font-size: 24px; font-weight: 800; color: #B2EFE9; }

/* ── Report button ── */
.btn-report {
    background: #2FAE9B;
    color: #fff;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s;
    letter-spacing: 0.02em;
}
.btn-report:hover { background: #229989; }

/* ── OCR / Photo section ── */
.ocr-toggle-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff;
    color: #2FAE9B;
    border: 1px dashed #A8D5CC;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.ocr-toggle-btn:hover { background: #F7FBFA; }

.ocr-section {
    margin-top: 8px;
    padding: 12px;
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
    border-radius: 10px;
}
.ocr-sec-label {
    font-size: 11px;
    font-weight: 600;
    color: #5F726C;
    margin-bottom: 9px;
}
.ocr-btns-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.ocr-file-lbl {
    flex: 1;
    padding: 9px 6px;
    background: #fff;
    border: 1px solid #A8D5CC;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #2FAE9B;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
    display: block;
}
.ocr-file-lbl:hover { background: #F7FBFA; }
.ocr-file-lbl input { display: none; }

.ocr-preview { display: none; margin-bottom: 8px; }
.ocr-preview img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 9px;
    display: block;
    border: 1px solid #7ECDC3;
}

.ocr-start-btn {
    width: 100%;
    padding: 9px;
    background: #2FAE9B;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    margin-bottom: 8px;
    display: none;
}
.ocr-start-btn:hover:not(:disabled) { background: #1F7A67; }
.ocr-start-btn:disabled { background: #7ECDC3; cursor: not-allowed; }

.ocr-result-box {
    display: none;
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 9px;
    padding: 12px;
}
.ocr-result-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 9px;
}
.ocr-rf { margin-bottom: 6px; }
.ocr-rf label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 3px;
}
.ocr-rf input {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}
.ocr-rf input:focus { border-color: #2FAE9B; background: #fff; }
.ocr-rf input[type="number"] { text-align: right; }

.ocr-apply-btn {
    width: 100%;
    padding: 9px;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
    transition: background 0.2s;
}
.ocr-apply-btn:hover { background: #16a34a; }

/* ── OCR Tabs ── */
.ocr-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.ocr-tab {
    flex: 1;
    padding: 8px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.ocr-tab.active {
    background: #EAF7F4;
    border-color: #2FAE9B;
    color: #1F7A67;
}

/* ── PDF Upload ── */
.pdf-upload-lbl {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    text-align: center;
    padding: 12px;
    background: #fff;
    border: 1px dashed #A8D5CC;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2FAE9B;
    cursor: pointer;
    transition: background 0.15s;
}
.pdf-upload-lbl:hover { background: #F7FBFA; }
.pdf-upload-lbl input { display: none; }

/* ── PDF Status Bar ── */
.pdf-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F6FBF9;
    border: 1.5px solid #DCE8E3;
    border-radius: 10px;
    margin-bottom: 8px;
}
.pdf-status-icon { font-size: 22px; flex-shrink: 0; }
.pdf-status-info { flex: 1; min-width: 0; }
.pdf-fname {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdf-state-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}
.pdf-reupload-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}
.pdf-reupload-btn:hover { background: #e2e8f0; }

/* ── PDF Password Box ── */
.pdf-pwd-box {
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}
.pdf-pwd-title {
    font-size: 12px;
    font-weight: 700;
    color: #c2410c;
    margin-bottom: 9px;
}
.pdf-pwd-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.pdf-pwd-input {
    flex: 1;
    padding: 9px 11px;
    border: 1.5px solid #fed7aa;
    border-radius: 9px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    color: #1e293b;
}
.pdf-pwd-input:focus { border-color: #f97316; }
.pdf-pwd-eye {
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid #fed7aa;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
}
.pdf-pwd-err {
    font-size: 12px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 8px;
}
.pdf-unlock-btn {
    width: 100%;
    padding: 9px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.pdf-unlock-btn:hover:not(:disabled) { background: #ea580c; }
.pdf-unlock-btn:disabled { background: #fdba74; cursor: not-allowed; }

/* ── PDF Scanned Warning ── */
.pdf-scan-warn {
    background: #fefce8;
    border: 1.5px solid #fde047;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pdf-warn-icon { font-size: 20px; }
.pdf-warn-text { font-size: 12px; color: #713f12; line-height: 1.5; }
.pdf-warn-text strong { font-weight: 700; }

/* ── PDF Parse Failed Fallback ── */
.pdf-fail-box {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}
.pdf-fail-title { font-size: 13px; font-weight: 800; color: #dc2626; margin-bottom: 4px; }
.pdf-fail-sub   { font-size: 12px; color: #64748b; margin-bottom: 8px; }
.pdf-alt-btns   { display: flex; flex-direction: column; gap: 6px; }
.pdf-alt-btn {
    width: 100%;
    padding: 8px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    text-align: left;
}
.pdf-alt-btn:hover { background: #f1f5f9; }
.pdf-alt-btn.manual { color: #1F7A67; border-color: #BFE4DA; background: #EAF7F4; }
.pdf-alt-btn.manual:hover { background: #BFE4DA; }

/* ── Scanned badge in results ── */
.scan-warning-badge {
    font-size: 11px;
    color: #92400e;
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

/* ── Save bar ── */
.save-bar {
    background: #fff;
    border-top: 1px solid #E8F0ED;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.save-indicator {
    font-size: 13px;
    font-weight: 400;
    color: #8FA8A2;
    display: flex;
    align-items: center;
    gap: 5px;
}
.save-indicator.saved  { color: #16a34a; }
.save-indicator.saving { color: #f59e0b; }
.save-indicator.unsaved{ color: #dc2626; }
.save-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.save-btn {
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    border: 1.5px solid transparent;
}
.save-btn.export {
    background: #fff;
    color: #2FAE9B;
    border-color: #A8D5CC;
}
.save-btn.export:hover { background: #F7FBFA; }
.save-btn.import-lbl {
    background: #fff;
    color: #2FAE9B;
    border-color: #A8D5CC;
    display: inline-block;
}
.save-btn.import-lbl:hover { background: #F7FBFA; }
.save-btn.import-lbl input { display: none; }
.save-btn.clear {
    background: #fff5f5;
    color: #dc2626;
    border-color: #fecaca;
}
.save-btn.clear:hover { background: #fee2e2; }
.save-btn.case-save {
    background: #2FAE9B;
    color: #fff;
    border-color: #2FAE9B;
}
.save-btn.case-save:hover { background: #28998A; }
.save-btn.case-load {
    background: #fff;
    color: #2FAE9B;
    border-color: #A8D5CC;
}
.save-btn.case-load:hover { background: #F7FBFA; }

/* ══ DEBT MODULE ══ */

/* select field (matches input style) */
.field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #D7E5E1;
    border-radius: 8px;
    font-size: 14px;
    color: #1F2D2A;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
    outline: none;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field select:focus {
    border-color: #2FAE9B;
    box-shadow: 0 0 0 3px rgba(47,174,155,0.12);
}
.field select.err, .field input.err { border-color: #ef4444 !important; }
.field-err {
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
    margin-top: 3px;
}
.amt-err {
    font-size: 12px;
    color: #E05050;
    margin-top: 4px;
    display: none;
}
.amt-err.show { display: block; }

/* Debt form panel */
.debt-form-panel {
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
}
.debt-form-title {
    font-size: 16px;
    font-weight: 600;
    color: #1F2D2A;
    margin-bottom: 14px;
}
.debt-form-btns {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.debt-submit-btn {
    flex: 1;
    padding: 10px;
    background: #2FAE9B;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.debt-submit-btn:hover { background: #229989; }
.debt-cancel-btn {
    padding: 10px 18px;
    background: #fff;
    color: #5F726C;
    border: 1px solid #D7E5E1;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.debt-cancel-btn:hover { background: #F7FBFA; }

/* Debt empty state */
.debt-empty {
    text-align: center;
    padding: 28px 16px;
    color: #8FA8A2;
    font-size: 13px;
    font-weight: 400;
    background: #F7FBFA;
    border: 1px dashed #D7E5E1;
    border-radius: 10px;
}

/* Debt item card */
.debt-item-card {
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}
.debt-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.debt-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
}
.debt-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.debt-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.debt-badge.borrower { background: #EEF8F5; color: #1F7A67; }
.debt-badge.guarantor { background: #F2F7F5; color: #4E6E66; }
.debt-badge.type { background: #F2F7F5; color: #5F726C; }
.debt-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.debt-edit-btn {
    background: #fff;
    color: #2FAE9B;
    border: 1px solid #A8D5CC;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.debt-edit-btn:hover { background: #F7FBFA; }
.debt-del-btn {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.debt-del-btn:hover { background: #fecaca; }
.debt-item-bank {
    font-size: 16px;
    font-weight: 600;
    color: #1F2D2A;
    margin-bottom: 10px;
}
.debt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.debt-stat {
    background: #F7FBFA;
    border-radius: 8px;
    padding: 8px 10px;
}
.debt-stat-lbl { font-size: 12px; font-weight: 400; color: #8FA8A2; margin-bottom: 3px; }
.debt-stat-val { font-size: 14px; font-weight: 600; color: #1F2D2A; }
.debt-item-note {
    margin-top: 8px;
    font-size: 13px;
    color: #5F726C;
    background: #F7FBFA;
    border-radius: 7px;
    padding: 6px 10px;
}

/* Debt summary */
.debt-summary-wrap { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.debt-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.debt-summary-card {
    border-radius: 14px;
    padding: 14px 16px;
}
.debt-summary-card.blue {
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
}
.debt-summary-card.purple {
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
}
.ds-title { font-size: 15px; font-weight: 600; color: #1F2D2A; margin-bottom: 8px; }
.ds-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ds-lbl { font-size: 13px; font-weight: 400; color: #5F726C; }
.ds-val { font-size: 14px; font-weight: 600; color: #1F2D2A; }
.debt-combined {
    background: #2FAE9B;
    color: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    gap: 20px;
    justify-content: space-around;
    flex-wrap: wrap;
}
.dct-block { text-align: center; }
.dct-lbl { font-size: 13px; font-weight: 400; opacity: 0.85; margin-bottom: 4px; }
.dct-val { font-size: 18px; font-weight: 600; }

@media (max-width: 520px) {
    .debt-summary-row { grid-template-columns: 1fr; }
    .debt-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Footer nav ── */
.footer-nav {
    background: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #E8F0ED;
}
.nav-item { text-align:center; color:#A8BCBA; font-weight:400; font-size:13px; text-decoration:none; }
.nav-item.active { color: #2FAE9B; }

/* ── Add guarantor row ── */
.add-guarantor-row {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 14px;
    background: #fff;
    border: 1px dashed #D7E5E1;
    border-radius: 10px;
    cursor: pointer;
    color: #5F726C;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.add-guarantor-row:hover {
    background: #F7FBFA;
    border-color: #A8D5CC;
    color: #2FAE9B;
}

/* ── Guarantor menu dropdown ── */
.g-menu {
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 12px;
    padding: 16px;
    display: none;
}
.g-menu.open { display: block; }
.g-menu-title {
    font-size: 15px;
    font-weight: 600;
    color: #1F2D2A;
    margin-bottom: 12px;
}
.g-menu-opts { display: flex; flex-direction: column; gap: 8px; }
.g-opt {
    padding: 14px 16px;
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.g-opt:hover { background: #EEF5F2; border-color: #A8D5CC; }
.g-opt-title { font-size: 15px; font-weight: 600; color: #1F2D2A; }
.g-opt-sub { font-size: 13px; font-weight: 400; color: #5F726C; margin-top: 3px; }

/* ── Guarantor invite card ── */
.g-invite-card {
    background: #fff;
    border: 1px solid #D7E5E1;
    border-radius: 12px;
    padding: 16px;
    display: none;
}
.g-invite-card.open { display: block; }
.g-invite-title {
    font-size: 15px;
    font-weight: 600;
    color: #1F2D2A;
    margin-bottom: 4px;
}
.g-invite-sub {
    font-size: 13px;
    font-weight: 400;
    color: #5F726C;
    margin-bottom: 14px;
    line-height: 1.6;
}
.g-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.g-link-input {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid #D7E5E1;
    border-radius: 8px;
    font-size: 12px;
    color: #8FA8A2;
    background: #F7FBFA;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.g-copy-btn {
    padding: 9px 16px;
    background: #2FAE9B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.g-copy-btn:hover { background: #229989; }
.g-share-row { display: flex; gap: 8px; }
.g-share-btn {
    flex: 1;
    padding: 10px 8px;
    background: #F7FBFA;
    border: 1px solid #D7E5E1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #8FA8A2;
    cursor: default;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.g-share-btn .badge-soon { font-size: 11px; padding: 2px 7px; }
.g-invite-cancel {
    margin-top: 12px;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: none;
    color: #8FA8A2;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.g-invite-cancel:hover { color: #5F726C; }

/* ── Debt section guarantor invite status ── */
.debt-g-invite-status {
    background: #F7FBFA;
    border: 1px dashed #A8D5CC;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.debt-g-invite-status-text {
    flex: 1;
    font-size: 13px;
    color: #5F726C;
    line-height: 1.6;
}
.debt-g-invite-status-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1F2D2A;
    margin-bottom: 2px;
}
.debt-g-cancel-btn {
    font-size: 12px;
    color: #8FA8A2;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.debt-g-cancel-btn:hover { color: #E05050; }

/* ── Mobile ── */
@media (max-width: 520px) {
    body { padding: 12px 10px 50px; }
    .main-content { padding: 12px; }
    .c2 { grid-template-columns: 1fr; }
    .c3 { grid-template-columns: 1fr 1fr; }
    .c4 { grid-template-columns: 1fr 1fr; }  /* BT-20260422-HOTFIX-002：手機版 4 欄退回 2 欄 */
    .gt-amt { font-size: 16px; }
}