/* =====================================================
   汕尾农商银行 · 养殖e贷 智能核算系统 — 样式
   ===================================================== */

:root {
    --primary:    #c41e3a;   /* 农商红 */
    --primary-d:  #9e1530;
    --primary-l:  #fdf0f2;
    --gold:       #d4a843;
    --gold-l:     #fdf8e8;
    --ink:        #1f2937;
    --ink-2:      #4b5563;
    --ink-3:      #9ca3af;
    --line:       #e5e7eb;
    --bg:         #f4f6f9;
    --green:      #059669;
    --amber:      #d97706;
    --card:       #ffffff;
    --shadow:     0 2px 12px rgba(0,0,0,.06);
    --shadow-lg:  0 8px 30px rgba(0,0,0,.10);
    --radius:     14px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:"Microsoft YaHei","PingFang SC","WenQuanYi Micro Hei",sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    font-size:14px;
}

/* ============ 顶部栏 ============ */
.topbar {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
    color:#fff;
    box-shadow:0 2px 8px rgba(196,30,58,.25);
    position:sticky; top:0; z-index:100;
}
.topbar-inner {
    max-width:1400px; margin:0 auto;
    padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between;
}
.logo-area { display:flex; align-items:center; gap:14px; }
.logo-area i {
    font-size:34px; background:rgba(255,255,255,.15);
    padding:10px; border-radius:12px;
}
.logo-text { display:flex; flex-direction:column; }
.logo-text .bank { font-size:20px; font-weight:700; letter-spacing:1px; }
.logo-text .sub  { font-size:12px; opacity:.85; }

.topbar-actions { display:flex; gap:12px; }
.btn {
    border:none; cursor:pointer;
    padding:9px 18px; border-radius:9px;
    font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; gap:7px;
    transition:all .2s;
}
.btn-primary { background:#fff; color:var(--primary); }
.btn-primary:hover { background:var(--gold-l); transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.15); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.25); }

/* ============ 容器 ============ */
.container { max-width:1400px; margin:24px auto; padding:0 24px 60px; }

/* ============ 产品切换 ============ */
.product-switch {
    display:grid; grid-template-columns:1fr 1fr;
    gap:18px; margin-bottom:20px;
}
.product-card {
    background:var(--card); border-radius:var(--radius);
    padding:22px 26px; cursor:pointer;
    border:2px solid transparent;
    box-shadow:var(--shadow);
    display:flex; align-items:center; gap:18px;
    transition:all .28s;
    position:relative; overflow:hidden;
}
.product-card::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:var(--primary); opacity:0; transition:opacity .28s;
}
.product-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.product-card.active {
    border-color:var(--primary);
    background:linear-gradient(135deg, #fff 0%, var(--primary-l) 100%);
}
.product-card.active::before { opacity:1; }
.pc-icon {
    width:58px; height:58px; border-radius:14px; flex-shrink:0;
    background:var(--primary-l); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:26px;
}
.product-card.active .pc-icon { background:var(--primary); color:#fff; }
.pc-title { font-size:16px; font-weight:700; }
.pc-title b { color:var(--primary); }
.pc-desc { font-size:12px; color:var(--ink-3); margin-top:4px; line-height:1.5; }

/* ============ 公式说明栏 ============ */
.formula-bar {
    background:linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color:#fff; border-radius:var(--radius);
    padding:20px 26px; margin-bottom:20px;
    box-shadow:var(--shadow);
}
.formula-bar .fb-title {
    font-size:13px; color:var(--gold); font-weight:700;
    letter-spacing:1px; margin-bottom:10px;
    display:flex; align-items:center; gap:8px;
}
.fb-formula {
    font-family:"Consolas","Courier New",monospace;
    font-size:14px; background:rgba(255,255,255,.08);
    padding:12px 16px; border-radius:9px;
    border-left:3px solid var(--gold);
    line-height:1.8;
}

/* ============ 主网格 ============ */
.main-grid {
    display:grid; grid-template-columns:1.1fr 1fr;
    gap:22px;
}
@media (max-width:1000px) { .main-grid { grid-template-columns:1fr; } }

.panel {
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
}
.panel-header {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
    color:#fff; padding:14px 22px; font-weight:700; font-size:15px;
    display:flex; align-items:center; gap:10px;
}

/* ============ 表单 ============ */
.form-panel { padding:0 0 24px; }
.section-title {
    display:flex; align-items:center; gap:9px;
    font-size:13px; font-weight:700; color:var(--primary);
    margin:22px 22px 12px; padding-bottom:8px;
    border-bottom:1px dashed var(--line);
}
.section-title i { font-size:15px; }
.form-row {
    display:grid; grid-template-columns:1fr 1fr;
    gap:16px; padding:0 22px; margin-bottom:14px;
}
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label {
    font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.form-group label .req { color:var(--primary); }
.form-group label small { color:var(--ink-3); font-weight:400; }
.form-group input,
.form-group select {
    width:100%; padding:10px 12px;
    border:1.5px solid var(--line); border-radius:9px;
    font-size:13px; color:var(--ink);
    transition:border .2s, box-shadow .2s;
    background:#fff;
}
.form-group input:focus,
.form-group select:focus {
    outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(196,30,58,.10);
}
.form-group input[readonly] { background:#f9fafb; color:var(--ink-2); }
.hint { font-size:11px; color:var(--ink-3); }
.checkbox-label {
    display:flex !important; flex-direction:row !important;
    align-items:center; gap:8px !important;
    cursor:pointer; padding-top:8px;
}
.checkbox-label input { width:auto; }

/* ============ 结果面板 ============ */
.result-panel { position:sticky; top:78px; max-height:calc(100vh - 100px); overflow-y:auto; }
.result-amount {
    text-align:center; padding:30px 22px 20px;
    background:linear-gradient(180deg, var(--primary-l) 0%, #fff 100%);
}
.result-label { font-size:13px; color:var(--ink-2); }
.amount-value {
    font-size:42px; font-weight:800; color:var(--primary);
    font-family:"Consolas",monospace; letter-spacing:1px;
    margin:6px 0 2px;
}
.amount-unit { font-size:13px; color:var(--ink-3); }

/* A/B 对比 */
.compare-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    padding:0 22px 16px;
}
.compare-card {
    border-radius:11px; padding:14px; text-align:center;
    border:1.5px solid var(--line); background:#fff;
    transition:all .2s;
}
.compare-card.recommend {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(196,30,58,.08);
}
.cc-title { font-size:12px; font-weight:700; color:var(--ink-2); }
.cc-amount { font-size:20px; font-weight:800; margin:6px 0 2px; font-family:monospace; }
.a-card .cc-amount { color:#2563eb; }
.b-card .cc-amount { color:var(--green); }
.cc-desc { font-size:11px; color:var(--ink-3); }
.cc-badge {
    display:inline-block; margin-top:6px;
    font-size:10px; padding:2px 8px; border-radius:20px;
    background:var(--primary); color:#fff; font-weight:600;
}

/* 明细 */
.detail-section { padding:0 22px 18px; }
.detail-placeholder {
    text-align:center; padding:40px 20px; color:var(--ink-3);
}
.detail-placeholder i { font-size:28px; margin-bottom:10px; opacity:.4; }
.detail-group { margin-bottom:16px; }
.detail-group-title {
    font-size:12px; font-weight:700; color:var(--primary);
    margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.detail-table { width:100%; border-collapse:collapse; font-size:12px; }
.detail-table td {
    padding:6px 10px; border-bottom:1px solid #f3f4f6;
}
.detail-table td:first-child { color:var(--ink-2); width:55%; }
.detail-table td:last-child {
    text-align:right; font-weight:600; font-family:monospace; color:var(--ink);
}

/* 规则提示 */
.rules-box {
    margin:0 22px 22px; padding:14px 16px;
    background:#f9fafb; border-radius:10px;
    border-left:3px solid var(--amber);
    font-size:12px; color:var(--ink-2);
}
.rules-box .rb-title {
    font-weight:700; color:var(--amber); margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
}
.rules-box ul { padding-left:18px; }
.rules-box li { margin-bottom:3px; }
.rules-box .ok  { color:var(--green); }
.rules-box .no  { color:var(--primary); }

/* ============ PDF 模板（打印用） ============ */
#pdfTemplate {
    font-family:"Microsoft YaHei",sans-serif; color:#1f2937;
}
.pdf-header { text-align:center; border-bottom:3px solid var(--primary); padding-bottom:14px; margin-bottom:18px; }
.pdf-header h2 { color:var(--primary); font-size:22px; }
.pdf-header h3 { font-size:16px; margin-top:6px; }
.pdf-meta {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    font-size:13px; margin-bottom:18px; padding:12px;
    background:#f9fafb; border-radius:8px;
}
.pdf-meta div { display:flex; justify-content:space-between; padding:3px 0; }
.pdf-meta span:first-child { color:#6b7280; font-weight:600; }
.pdf-result {
    text-align:center; padding:20px; background:var(--primary-l);
    border-radius:10px; margin-bottom:18px;
}
.pdf-result .big {
    font-size:32px; font-weight:800; color:var(--primary);
    font-family:monospace;
}
.pdf-detail { font-size:12px; }
.pdf-detail h4 {
    color:var(--primary); border-bottom:1px solid #e5e7eb;
    padding-bottom:4px; margin:14px 0 8px;
}
.pdf-detail table { width:100%; border-collapse:collapse; margin-bottom:10px; }
.pdf-detail td { padding:5px 8px; border-bottom:1px solid #f3f4f6; font-size:12px; }
.pdf-detail td:first-child { color:#4b5563; width:50%; }
.pdf-detail td:last-child { text-align:right; font-family:monospace; }
.pdf-footer {
    margin-top:30px; padding-top:12px; border-top:1px solid #e5e7eb;
    font-size:11px; color:#9ca3af; text-align:center;
}

/* ============ 打印优化 ============ */
@media print {
    .topbar, .product-switch, .formula-bar, .form-panel { display:none !important; }
    .container { max-width:none; margin:0; padding:0; }
    .result-panel { position:static; max-height:none; box-shadow:none; }
    body { background:#fff; }
    #pdfTemplate { display:block !important; }
    .main-grid { grid-template-columns:1fr; }
    #resultPanel { display:none; }
}

/* ============ 动画 ============ */
@keyframes pulse {
    0%,100% { opacity:1; }
    50%     { opacity:.5; }
}
.amount-value.calculating { animation:pulse 1s infinite; }

@keyframes slideUp {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
.detail-section.has-data { animation:slideUp .3s ease; }

/* ============ Toast ============ */
.toast {
    position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
    background:#1e293b; color:#fff; padding:12px 24px; border-radius:10px;
    font-size:13px; z-index:999; box-shadow:var(--shadow-lg);
    display:flex; align-items:center; gap:8px;
    animation:slideUp .3s ease;
}
.toast.success { background:var(--green); }
.toast.error   { background:var(--primary); }

/* ============ 贷款用途切换（A / B 唯一性） ============ */
.purpose-switch {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px;
}
.purpose-card {
    display:flex; align-items:center; gap:12px;
    padding:14px; border:2px solid var(--line); border-radius:12px;
    cursor:pointer; transition:all .2s; background:#fff;
}
.purpose-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.purpose-card.active {
    border-color:var(--primary); background:var(--primary-l);
    box-shadow:0 4px 12px rgba(196,30,58,.12);
}
.purpose-card .pc-radio i {
    font-size:24px; color:var(--ink-3); transition:all .2s;
}
.purpose-card.active .pc-radio i { color:var(--primary); }
.purpose-card .pc-name { font-size:14px; }
.purpose-card .pc-tip { font-size:11px; color:var(--ink-3); margin-top:2px; line-height:1.4; }

/* ============ 额度标签 ============ */
.quota-badge { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qb-tag {
    display:inline-block; padding:6px 14px; border-radius:20px;
    font-size:13px; font-weight:700; color:#fff;
}
.qb-tag.qb-A { background:var(--primary); }
.qb-tag.qb-B { background:var(--amber); }
.qb-tag.qb-C { background:var(--green); }
.qb-desc { font-size:12px; color:var(--ink-3); }

/* ============ 弹窗 ============ */
.modal-mask {
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
    background:#fff; border-radius:16px; max-width:460px; width:100%;
    box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-head {
    background:linear-gradient(135deg, var(--primary), var(--primary-d));
    color:#fff; padding:16px 20px; font-size:16px; font-weight:700;
    display:flex; align-items:center; gap:8px;
}
.modal-body { padding:20px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.modal-body ul { padding-left:20px; margin:8px 0; }
.modal-body .modal-tip { background:var(--primary-l); border-radius:8px; padding:10px 12px; margin-top:10px; font-size:12px; color:var(--primary-d); }
.modal-foot { padding:14px 20px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--line); }
.modal-foot .btn { padding:9px 22px; font-size:13px; }