/* ============ Deposit Viewer · 样式 ============ */
:root{
  --bg:#f2f4f8;
  --card:#ffffff;
  --text:#1a2332;
  --muted:#8291a7;
  --border:#e6eaf1;
  --primary:#3b6ef5;
  --primary-dark:#2a53c4;
  --primary-soft:#eaf1ff;
  --time:#3b6ef5;          /* 定期(正常) */
  --time-soft:#eaf1ff;
  --demand:#0fb99b;        /* 活期 */
  --demand-soft:#e4faf5;
  --expired:#e5484d;       /* 定期到期 */
  --expired-soft:#ffecec;
  --radius:16px;
  --shadow:0 6px 22px rgba(30,45,90,.08);
  --shadow-hover:0 12px 30px rgba(30,45,90,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
}
.app{max-width:1280px;margin:0 auto;padding:22px 22px 60px}

/* ---- 顶栏 ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{font-size:34px;filter:drop-shadow(0 2px 4px rgba(60,110,245,.3))}
.brand h1{font-size:22px;font-weight:800;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.topbar-actions{display:flex;align-items:center;gap:14px}
.currency-default{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.currency-default select{
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;
  background:#fff;color:var(--text);cursor:pointer;outline:none;
}
.currency-default select:focus{border-color:var(--primary)}

/* ---- 按钮 ---- */
.btn{border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(59,110,245,.28)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-ghost{background:#eef1f6;color:#46536a}
.btn-ghost:hover{background:#e2e7f0}
.btn-danger{background:var(--expired);color:#fff}
.btn-danger:hover{background:#c93b40}
.btn-small{padding:6px 12px;font-size:12px;border-radius:8px}

/* ---- 总览信息区 ---- */
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.summary-card{
  background:var(--card);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);border:1px solid var(--border);border-top:4px solid var(--primary);
  position:relative;overflow:hidden;
}
.summary-card::after{content:"";position:absolute;right:-22px;top:-22px;width:90px;height:90px;border-radius:50%;opacity:.08;background:var(--primary)}
.sum-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.sum-value{font-size:27px;font-weight:800;margin:6px 0 4px;color:var(--text);font-variant-numeric:tabular-nums}
.sum-note{font-size:11px;color:var(--muted)}
.summary-card.sum-daily{border-top-color:var(--demand)}
.summary-card.sum-daily::after{background:var(--demand)}
.summary-card.sum-monthly{border-top-color:#8a6bf5}
.summary-card.sum-monthly::after{background:#8a6bf5}
.summary-card.sum-yearly{border-top-color:#f0a020}
.summary-card.sum-yearly::after{background:#f0a020}
.summary-card .sum-value small{font-size:14px;font-weight:700;color:var(--muted);margin-left:4px}

/* ---- 主体布局 ---- */
.main-layout{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{font-size:17px;font-weight:700}
.section-count{font-size:12px;background:#eef1f6;color:var(--muted);padding:4px 12px;border-radius:20px;font-weight:600}

/* ---- 存款卡片网格 ---- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.deposit-card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow);overflow:hidden;transition:.2s;animation:cardIn .25s ease;
}
.deposit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 卡片顶部分类型色条 + 标题 */
.card-head{padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:relative}
.card-title{display:flex;align-items:center;gap:8px}
.card-bank{font-size:15px;font-weight:700}
.card-amount{font-size:13px;color:var(--muted);margin-top:2px}
.type-badge{
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;
  color:#fff;letter-spacing:.5px;
}
.type-badge.time{background:var(--time)}
.type-badge.demand{background:var(--demand)}
.type-badge.expired{background:var(--expired)}

/* 类型语义色：应用于卡片 */
.deposit-card.is-time{border-top:4px solid var(--time)}
.deposit-card.is-demand{border-top:4px solid var(--demand)}
.deposit-card.is-expired{border-top:4px solid var(--expired)}
.deposit-card.is-expired{background:linear-gradient(180deg,#fff,#fff8f8)}

/* 到期红色：整张卡片强调 */
.deposit-card.is-expired .card-head{border-bottom-color:#f3d4d4}
.expiry-flag{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--expired);
  background:var(--expired-soft);padding:3px 9px;border-radius:20px;margin-top:6px;
}

/* 卡主体信息网格 */
.card-body{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.info-item{display:flex;flex-direction:column;gap:1px}
.info-item.full{grid-column:1/-1}
.info-label{font-size:11px;color:var(--muted)}
.info-value{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.info-value .sym{color:var(--muted);font-weight:600;margin-right:2px}

/* 利率/利息区 */
.interest-grid{
  margin:0 18px 14px;border-radius:12px;padding:12px 14px;background:var(--bg);
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;
}
.interest-item .i-label{font-size:10.5px;color:var(--muted)}
.interest-item .i-value{font-size:15px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.interest-item .i-value .ico{font-size:12px}
.deposit-card.is-time .interest-item.daily .i-value{color:var(--time)}
.deposit-card.is-demand .interest-item.daily .i-value{color:var(--demand)}
.deposit-card.is-expired .interest-item .i-value{color:var(--expired)}

/* 卡脚注(到期日期/操作) */
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--border);background:#fafbfd}
.maturity-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.maturity-note .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.maturity-note .dot.time{background:var(--time)}
.maturity-note .dot.demand{background:var(--demand)}
.maturity-note .dot.expired{background:var(--expired)}
.card-ops{display:flex;gap:6px}

/* ---- 空状态 ---- */
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-icon{font-size:52px;margin-bottom:14px;opacity:.5}
.empty-state p{font-size:15px;font-weight:600;color:#5b6a82}
.empty-hint{font-size:13px;font-weight:400;margin-top:6px}

/* ---- 侧边日历 ---- */
.calendar-panel{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow);padding:16px;position:sticky;top:20px;
}
.calendar-panel h3{font-size:14px;font-weight:700;margin-bottom:2px}
.calendar-hint{font-size:11px;color:var(--muted);margin-bottom:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-title{font-weight:700;font-size:14px}
.cal-nav{
  border:none;background:#eef1f6;width:28px;height:28px;border-radius:8px;cursor:pointer;
  font-size:16px;color:#46536a;transition:.15s;line-height:1;
}
.cal-nav:hover{background:var(--primary);color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font-size:10.5px;color:var(--muted);text-align:center;padding:4px 0;font-weight:600}
.cal-day{
  position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;border-radius:9px;cursor:pointer;transition:.12s;border:none;background:transparent;color:#3a4659;
}
.cal-day:hover{background:#eef1f6}
.cal-day.other{color:#c4ccd9}
.cal-day.today{border:2px solid var(--primary);font-weight:700}
.cal-day.selected{background:var(--primary);color:#fff;font-weight:800}
.cal-day.selected:hover{background:var(--primary-dark)}
/* 有到期日的标记点 */
.cal-day .mark{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--expired)}
.cal-day.selected .mark{background:#fff}

.cal-dateinfo{margin-top:14px;border-top:1px dashed var(--border);padding-top:12px}
.cal-date-label{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.cal-info-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px}
.cal-info-row span{color:var(--muted)}
.cal-info-row strong{font-variant-numeric:tabular-nums;font-weight:800}
.cal-info-row strong.interest{color:var(--demand)}
.cal-info-row strong.principal{color:var(--primary)}
.cal-info-row strong.expiry{color:var(--expired)}

/* ---- 弹窗 ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,28,45,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;animation:fadeIn .18s}
/* 关键：让 hidden 属性真正生效，避免 display:flex 覆盖 hidden 导致弹窗加载即显示且关不掉 */
.modal-backdrop[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:18px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:popIn .2s ease;max-height:92vh;overflow:auto}
.modal-sm{max-width:400px}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:16px;font-weight:700}
.modal-close{border:none;background:#eef1f6;width:30px;height:30px;border-radius:8px;font-size:18px;cursor:pointer;color:#46536a;line-height:1}
.modal-close:hover{background:#e2e7f0}

#depositForm{padding:18px 20px 20px}
.field{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-label{display:block;font-size:12.5px;font-weight:600;color:#46536a;margin-bottom:6px}
.field-label em{color:var(--expired);font-style:normal}
input[type=text],input[type=password],input[type=number],input[type=date],select{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;
  background:#fff;color:var(--text);outline:none;transition:.15s;font-family:inherit;
}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,110,245,.12)}
.hint{font-size:11px;color:var(--muted);margin-top:4px;display:block}

/* 类型切换 */
.type-toggle{display:flex;gap:10px}
.type-opt{flex:1;cursor:pointer}
.type-opt input{display:none}
.type-chip{display:block;text-align:center;padding:11px;border-radius:10px;font-weight:700;font-size:14px;border:1.5px solid var(--border);transition:.15s;color:#5b6a82;background:#fafbfd}
.type-opt input:checked + .chip-time{background:var(--time);border-color:var(--time);color:#fff}
.type-opt input:checked + .chip-demand{background:var(--demand);border-color:var(--demand);color:#fff}

/* 实时预览 */
.live-preview{background:var(--bg);border-radius:12px;padding:12px 14px;margin-top:4px}
.lp-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.lp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.lp-item span{display:block;font-size:10.5px;color:var(--muted)}
.lp-item strong{display:block;font-size:14px;font-weight:800;margin-top:2px;color:var(--primary);font-variant-numeric:tabular-nums}

.modal-error{background:var(--expired-soft);color:var(--expired);border:1px solid #f3d0d0;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;font-weight:600}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* 删除确认 */
.confirm-text{font-size:14px;padding:18px 20px;color:#46536a}

/* ---- Toast ---- */
.toast{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);background:#1a2332;color:#fff;
  padding:12px 22px;border-radius:30px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:100;animation:toastIn .2s;white-space:nowrap;
}
.toast.ok{background:#0fb99b}
.toast.err{background:var(--expired)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- 响应式 ---- */
@media(max-width:1020px){.main-layout{grid-template-columns:1fr}.calendar-panel{position:static}}
@media(max-width:720px){
  .summary-strip{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .interest-grid{grid-template-columns:repeat(2,1fr)}
}
/* ============ 落地页 (landing) ============ */
body.landing-body{background:linear-gradient(160deg,#f4f7ff 0%,#eef2fb 40%,#f6fbf7 100%)}
.brand-logo{width:38px;height:38px;border-radius:10px;box-shadow:0 3px 10px rgba(60,110,245,.25)}
.landing-app{max-width:1120px}
.landing-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:start;margin-top:8px}
.landing-intro .landing-badge{display:inline-block;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12.5px;padding:5px 14px;border-radius:30px;margin-bottom:14px}
.landing-hero{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.25;letter-spacing:.3px;color:var(--text)}
.landing-sub{font-size:15px;color:#4b5a72;margin:14px 0 22px;line-height:1.7}
.landing-sec{font-size:16px;font-weight:700;margin:22px 0 12px}
.feature-grid{display:grid;gap:12px}
.feature{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.feature-icon{font-size:26px;flex-shrink:0}
.feature-title{font-weight:700;font-size:14.5px}
.feature-desc{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.6}
.instructions{margin:0;padding-left:22px;color:#3a4659;font-size:14px;line-height:1.9}
.landing-footer{color:var(--muted);font-size:12.5px;text-align:center;margin:46px 0 6px}

/* 授权卡 */
.auth-card{background:#fff;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow-hover);padding:22px;position:sticky;top:22px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);padding:5px;border-radius:12px;margin-bottom:18px}
.auth-tab{border:none;background:transparent;padding:9px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);font-family:inherit;transition:.15s}
.auth-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(30,45,90,.10)}
.auth-form .field{margin-bottom:14px}
.btn-block{width:100%;margin-top:4px;display:block;text-align:center;text-decoration:none}
.auth-switch{text-align:center;font-size:13px;margin-top:12px;color:var(--muted)}
.auth-switch a{color:var(--primary);text-decoration:none;font-weight:600}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:20px 0 12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-demo{background:linear-gradient(135deg,#17b08f,#0fb99b);color:#fff;box-shadow:0 4px 14px rgba(15,185,155,.28)}
.btn-demo:hover{filter:brightness(1.05);transform:translateY(-1px)}
.auth-demo-hint{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

/* 密码强度条 */
.strength{display:flex;align-items:center;gap:10px;margin-top:8px}
.strength-bars{display:flex;gap:4px;flex:1}
.strength-bars i{height:6px;flex:1;border-radius:4px;background:#e6eaf1;transition:.15s}
.strength-text{font-size:12px;font-weight:700;color:var(--muted);min-width:44px;text-align:right}

/* ============ 仪表盘新增 ============ */
.demo-banner{background:#fff7e0;border:1px solid #f2d98a;color:#a06a00;border-radius:12px;padding:10px 16px;font-size:13.5px;font-weight:600;margin-bottom:16px}
.icon-btn{border:none;background:var(--primary-soft);color:var(--primary);width:30px;height:30px;border-radius:8px;font-size:17px;font-weight:800;cursor:pointer;transition:.15s;line-height:1}
.icon-btn:hover{background:var(--primary);color:#fff}
[data-i18n-attr]{}
@media(max-width:900px){.landing-grid{grid-template-columns:1fr}.auth-card{position:static}}

/* ============ 隐私声明面板 ============ */
.privacy-panel{background:linear-gradient(135deg,#f2fdf7,#e9fcf5);border:2px solid #6fd3ae;border-radius:16px;padding:18px 20px;margin:6px 0 22px;box-shadow:0 8px 24px rgba(15,185,155,.16)}
.privacy-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:#0b7a62;margin-bottom:10px}
.privacy-head span{display:inline}
.privacy-list{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;color:#24503f;line-height:1.7}
.privacy-list li::marker{color:#0fb99b;font-weight:700}
.privacy-final{margin-top:12px;padding-top:11px;border-top:1px dashed #9adcc0;font-weight:800;color:#0b7a62;font-size:14.5px;line-height:1.6}

/* 密码框下"忘记无法找回"的提醒(浅琥珀色, 温和但可见) */
.hint.forgot-hint{color:#b07b1f;font-weight:600}

/* 存款时间(年/月)输入 */
.term-inputs{display:flex;align-items:center;gap:6px}
.term-inputs input{width:64px;text-align:center}
.term-inputs span{color:var(--muted);font-size:13px;font-weight:600}
/* 添加币种按钮(更醒目) */
.add-cur-btn{border:1.5px dashed var(--primary);color:var(--primary);background:var(--primary-soft);white-space:nowrap}
.add-cur-btn:hover{background:var(--primary);color:#fff}