/* 负债工作台共享样式（债首页 / 负债分析 / 债务明细 三页复用）
   改色只改 :root 令牌；--ws- 前缀避免与全局主题令牌冲突 */
:root {
    --ws-brand: #07A698;
    --ws-brand-dark: #058a7e;
    --ws-ink: #162726;
    --ws-muted: #6C706F;
    --ws-border: #E0E5EB;
    --ws-border-soft: #e2e6e5;
    --ws-bg: #F2F4F7;
    --ws-bg-soft: #fafbfc;
    --ws-ok-bg: #e6f7f4;
    --ws-neutral-bg: #eef0f3;
    --ws-err: #e23d3d;
    --ws-err-bg: #fdecec;
    /* 分类色板（仅饼图等分类图用）——Okabe-Ito 色盲安全配色，7 类机构一一对应 */
    --ws-cat-1: #0072B2; /* 银行 */
    --ws-cat-2: #009E73; /* 持牌消金 */
    --ws-cat-3: #E69F00; /* 网贷 */
    --ws-cat-4: #CC79A7; /* 信用卡 */
    --ws-cat-5: #56B4E9; /* 资产管理 */
    --ws-cat-6: #D55E00; /* 其他 */
    --ws-cat-7: #999999; /* 未知 */
}
.ws-page { min-height: 100vh; background: var(--ws-bg); }
.ws-page * { box-sizing: border-box; }

/* 精简顶栏（不含营销 header/footer）+ 三页导航 */
.ws-topbar {
    background: #fff; border-bottom: 1px solid var(--ws-border);
    height: 64px;
}
/* 顶栏内容与页面 .ws-container 同宽居中，两侧留出间隙、与下方内容对齐 */
.ws-topbar-inner {
    max-width: 1080px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
}
.ws-topbar-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.ws-topbar .ws-logo img { height: 34px; }
.ws-topbar .ws-right { display: flex; align-items: center; gap: 16px; }
.ws-nav { display: flex; gap: 4px; }
.ws-nav a { padding: 8px 14px; border-radius: 8px; font-size: 14px; color: var(--ws-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.ws-nav a:hover { color: var(--ws-brand); background: var(--ws-bg); }
.ws-nav a.active { color: var(--ws-brand); background: var(--ws-ok-bg); }
.ws-hello { font-size: 14px; color: var(--ws-ink); font-weight: 500; }
/* 圆形图标按钮（返回首页等）：与头像按钮同一套圆形/hover 语言，不再是突兀的文字链 */
.ws-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ws-muted); font-size: 16px; text-decoration: none; border: 1px solid transparent; }
.ws-icon-btn:hover { background: var(--ws-bg); color: var(--ws-brand); }
/* 用户区：头像 + 昵称 ▾，点开下拉（退出等） */
.ws-user { position: relative; }
.ws-user-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 4px 10px 4px 4px; background: none; border: 1px solid transparent; border-radius: 100px; cursor: pointer; }
.ws-user-btn:hover, .ws-user-btn[aria-expanded="true"] { background: var(--ws-bg); }
.ws-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--ws-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.ws-caret { font-size: 11px; color: var(--ws-muted); transition: transform .2s; }
.ws-user-btn[aria-expanded="true"] .ws-caret { transform: rotate(180deg); }
.ws-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; background: #fff; border: 1px solid var(--ws-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; display: none; z-index: 1200; }
.ws-user-menu.open { display: block; }
.ws-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: none; border-radius: 8px; font-size: 14px; color: var(--ws-ink); text-align: left; cursor: pointer; }
.ws-menu-item i { width: 16px; color: var(--ws-muted); }
.ws-menu-item:hover { background: var(--ws-bg); }
#wsLogout:hover, #wsLogout:hover i { color: var(--ws-err); }

.ws-container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 60px; }
.ws-h1 { font-size: 24px; font-weight: 600; color: var(--ws-ink); margin: 0 0 20px; }
.ws-section-title { font-size: 16px; font-weight: 600; color: var(--ws-ink); margin: 28px 0 14px; }

/* 盘点卡 */
.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; }
.ws-card { background: #fff; border: 1px solid var(--ws-border); border-radius: 12px; padding: 18px 20px; }
.ws-card .ws-card-label { font-size: 13px; color: var(--ws-muted); margin-bottom: 8px; }
.ws-card .ws-card-value { font-size: 22px; font-weight: 700; color: var(--ws-ink); }
.ws-card .ws-card-value .ws-unit { font-size: 13px; font-weight: 400; color: var(--ws-muted); margin-left: 4px; }
.ws-card.ws-card-accent .ws-card-value { color: var(--ws-brand); }

/* 债务列表 */
.ws-table-wrap { background: #fff; border: 1px solid var(--ws-border); border-radius: 12px; overflow: hidden; }
.ws-table { width: 100%; border-collapse: collapse; }
.ws-table th, .ws-table td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--ws-bg); }
.ws-table th { background: var(--ws-bg-soft); color: var(--ws-muted); font-weight: 500; }
.ws-table td { color: var(--ws-ink); }
.ws-table tr:last-child td { border-bottom: none; }
.ws-tag { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; }
.ws-tag-ongoing { background: var(--ws-ok-bg); color: var(--ws-brand); }
.ws-tag-settled { background: var(--ws-neutral-bg); color: var(--ws-muted); }
.ws-money { font-variant-numeric: tabular-nums; }

.ws-state { padding: 40px; text-align: center; color: var(--ws-muted); font-size: 14px; }
.ws-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; display: none; }
.ws-msg-err { background: var(--ws-err-bg); color: var(--ws-err); }
.ws-msg-ok { background: var(--ws-ok-bg); color: var(--ws-brand); }

/* 工具条 + 按钮 */
.ws-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 14px; }
.ws-toolbar .ws-section-title { margin: 0; }
.ws-btn { border: none; background: var(--ws-brand); color: #fff; height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ws-btn:hover { background: var(--ws-brand-dark); }
.ws-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ws-btn-ghost { border: 1px solid var(--ws-border-soft); background: #fff; color: var(--ws-muted); height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.ws-btn-ghost:hover { border-color: var(--ws-brand); color: var(--ws-brand); }
.ws-act { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 6px; }
.ws-act-detail { color: #2f6fed; }
.ws-act-edit { color: var(--ws-brand); }
.ws-act-del { color: var(--ws-err); }

/* 还款明细：页内全宽视图（年化横幅 + 全宽表格）*/
.ws-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ws-detail-title { font-size: 22px; font-weight: 600; color: var(--ws-ink); margin: 0; }
#wsDetailView .ws-table-wrap { overflow-x: auto; }
#wsDetailView .ws-table { min-width: 800px; }
.ws-rate-banner { border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.ws-rate-value { font-size: 20px; font-weight: 700; }
.ws-rate-capped { font-size: 12px; font-weight: 400; margin-left: 6px; }
.ws-rate-note { font-size: 13px; margin-top: 4px; }
.ws-rate-ok { background: var(--ws-ok-bg); color: #0a7d72; border: 1px solid #bce6df; }
.ws-rate-warn { background: var(--ws-err-bg); color: #c5341f; border: 1px solid #f3c6c0; }
.ws-rate-info { background: var(--ws-neutral-bg); color: var(--ws-muted); border: 1px solid var(--ws-border); }
.ws-modal-subtitle { font-size: 13px; font-weight: 400; color: var(--ws-muted); margin-left: 8px; }

/* 弹窗 */
.ws-modal-overlay { position: fixed; inset: 0; background: rgba(14,18,29,.45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; z-index: 1000; overflow-y: auto; }
.ws-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.2); max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.ws-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--ws-border); font-size: 17px; font-weight: 600; color: var(--ws-ink); }
.ws-modal-close { border: none; background: none; font-size: 24px; line-height: 1; color: var(--ws-muted); cursor: pointer; }
.ws-modal-body { padding: 20px 22px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ws-modal-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--ws-border); }

/* 表单 */
.ws-form-row { margin-bottom: 16px; }
.ws-form-row > label { display: block; font-size: 13px; color: var(--ws-ink); font-weight: 500; margin-bottom: 6px; }
.ws-input, .ws-select, .ws-textarea { width: 100%; height: 44px; padding: 0 14px; font-size: 14px; border: 1px solid var(--ws-border-soft); border-radius: 10px; outline: none; transition: border-color .2s; background: #fff; }
.ws-textarea { height: auto; min-height: 72px; padding: 10px 14px; resize: vertical; }
.ws-input:focus, .ws-select:focus, .ws-textarea:focus { border-color: var(--ws-brand); box-shadow: 0 0 0 3px rgba(7,166,152,.12); }
.ws-creditor-pick { display: flex; gap: 10px; }
.ws-creditor-pick .ws-select { flex: 1; }
.ws-creditor-form { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 12px 14px; background: var(--ws-bg); border-radius: 10px; }
.ws-creditor-form .ws-input { flex: 1 1 auto; min-width: 0; }
.ws-creditor-form .ws-select { flex: 0 0 120px; min-width: 0; }
.ws-creditor-form .ws-input, .ws-creditor-form .ws-select, .ws-creditor-form .ws-btn { height: 40px; }
.ws-creditor-form .ws-btn { flex: 0 0 auto; padding: 0 16px; white-space: nowrap; }

/* 债权机构联想输入 */
.ws-typeahead { position: relative; flex: 1; min-width: 0; }
.ws-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--ws-border-soft); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; z-index: 20; }
.ws-suggest-item { padding: 10px 14px; font-size: 14px; color: var(--ws-ink); cursor: pointer; }
.ws-suggest-item:hover, .ws-suggest-item.active { background: var(--ws-ok-bg); color: var(--ws-brand); }
.ws-suggest-empty { padding: 10px 14px; font-size: 13px; color: var(--ws-muted); }

/* 复选框行 */
.ws-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ws-ink); font-weight: 500; cursor: pointer; }
.ws-checkbox input { width: 16px; height: 16px; accent-color: var(--ws-brand); cursor: pointer; }

/* 分期计划提示 + 字段说明 */
.ws-plan-hint { font-size: 13px; color: var(--ws-muted); margin: 0 0 14px; line-height: 1.6; }
.ws-hint { font-size: 12px; color: var(--ws-muted); margin-top: 6px; line-height: 1.5; }

/* 图表 / 卡片 */
.ws-chart-card { background: #fff; border: 1px solid var(--ws-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.ws-chart-title { font-size: 14px; font-weight: 600; color: var(--ws-ink); margin-bottom: 16px; }
.ws-chart-empty { padding: 24px; text-align: center; color: var(--ws-muted); font-size: 13px; }
.ws-chart-cap { font-size: 12px; color: var(--ws-muted); margin-top: 12px; line-height: 1.6; }
/* Chart.js canvas 容器（固定高度，响应式宽度）*/
.ws-canvas-wrap { position: relative; height: 280px; }
.ws-canvas-wrap.tall { height: 320px; }

/* 本月计划两栏 */
.ws-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-plan-sum { font-size: 13px; font-weight: 400; color: var(--ws-muted); margin-left: 8px; }
.ws-plan-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ws-bg); }
.ws-plan-item:last-child { border-bottom: none; }
.ws-plan-item[data-plan-ulid] { cursor: pointer; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.ws-plan-item[data-plan-ulid]:hover { background: var(--ws-bg-soft); }
.ws-plan-item .ws-plan-name { color: var(--ws-ink); font-size: 13px; }
.ws-plan-item .ws-plan-meta { color: var(--ws-muted); font-size: 12px; margin-top: 2px; }
.ws-plan-item .ws-plan-amt { color: var(--ws-ink); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-plan-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 100px; background: var(--ws-neutral-bg); color: var(--ws-muted); margin-left: 6px; }
.ws-plan-tag.suggest { background: var(--ws-ok-bg); color: var(--ws-brand); }
.ws-plan-tag.overdue { background: var(--ws-err-bg); color: var(--ws-err); }

/* 债务分析：进度条 + 统计网格 */
.ws-progress-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ws-ink); font-weight: 500; margin-bottom: 8px; }
.ws-progress-track { height: 12px; background: var(--ws-bg); border-radius: 100px; overflow: hidden; }
.ws-progress-fill { height: 100%; background: var(--ws-brand); border-radius: 100px; min-width: 2px; transition: width .3s; }
.ws-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: 18px; }
.ws-stat-label { font-size: 12px; color: var(--ws-muted); margin-bottom: 4px; }
.ws-stat-value { font-size: 15px; color: var(--ws-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 单色 SVG 柱（债务明细页「该债务月度应还」mini 图）*/
.ws-vbars { display: flex; align-items: stretch; gap: 8px; height: 180px; }
.ws-vbar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ws-vbar-track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.ws-vbar-fill { width: 100%; background: var(--ws-brand); border-radius: 6px 6px 0 0; min-height: 2px; transition: height .3s; }
.ws-vbar-x { flex: 0 0 auto; font-size: 11px; color: var(--ws-muted); margin-top: 6px; white-space: nowrap; }
.ws-overdue-alert { display: inline-flex; align-items: center; gap: 6px; background: var(--ws-err-bg); color: var(--ws-err); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; margin-bottom: 14px; }

@media (max-width: 900px) {
    .ws-cards { grid-template-columns: repeat(2, 1fr); }
    .ws-plan-grid { grid-template-columns: 1fr; }
    .ws-topbar-inner { padding: 0 14px; }
    .ws-topbar-left { gap: 12px; }
    .ws-nav a { padding: 8px 10px; }
    .ws-hello { display: none; }
    /* 仅精简债务列表（#wsMainView 内），明细视图表不受影响：窄屏隐藏还款方式(4)与预计结清日(6) */
    #wsMainView .ws-table th:nth-child(4), #wsMainView .ws-table td:nth-child(4),
    #wsMainView .ws-table th:nth-child(6), #wsMainView .ws-table td:nth-child(6) { display: none; }
}