/* ============ 樱花CRM 全站样式 ============ */
:root {
  --pink: #e0356b; --pink-dark: #c22558; --pink-soft: #fdeef3;
  --bg: #f4f5f9; --card: #ffffff; --line: #e7e9f0;
  --text: #26293b; --muted: #8a8fa3; --side: #232a3d; --side-w: 208px;
  --green: #22a06b; --blue: #2f6fe4; --orange: #e8830c; --red: #d64545;
  --purple: #7c5cd6; --cyan: #0e9aa7; --gray: #97a0ae;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
input, select, textarea, button { font-family: inherit; font-size: 14px; color: var(--text); }
a { color: var(--pink); text-decoration: none; }
.boot-loading { padding: 120px; text-align: center; color: var(--muted); font-size: 16px; }

/* ---------- 登录页 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fdeef3 0%, #fce4ec 35%, #e8ecf7 100%); }
.login-card { width: 380px; background: #fff; border-radius: 16px; padding: 38px 36px 30px; box-shadow: 0 18px 50px rgba(224,53,107,.14); }
.login-card .logo { text-align: center; font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 13px; }
.login-tip { margin-top: 16px; padding: 10px 12px; background: var(--pink-soft); border-radius: 8px; color: #a04a68; font-size: 12px; line-height: 1.8; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--side-w); background: var(--side); color: #cfd4e4; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 20px 18px 16px; font-size: 17px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand small { display: block; font-size: 11px; color: #8f97b3; font-weight: 400; margin-top: 2px; }
.nav { padding: 10px 10px; flex: 1; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #cfd4e4; margin-bottom: 2px; font-size: 14px; }
.nav a .ic { width: 20px; text-align: center; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.on { background: var(--pink); color: #fff; }
.sidebar .foot { padding: 14px 16px; font-size: 11px; color: #6f7894; border-top: 1px solid rgba(255,255,255,.08); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 0 22px; height: 54px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20; }
.topbar .tb-title { font-size: 16px; font-weight: 600; flex: 1; }
.topbar .tb-user { color: var(--muted); font-size: 13px; }
.topbar .tb-user b { color: var(--text); }
.content { padding: 20px 22px 40px; max-width: 1280px; width: 100%; }

/* ---------- 卡片 / 统计 ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card h3 .more { margin-left: auto; font-size: 12px; font-weight: 400; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .k { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.stat .v { font-size: 24px; font-weight: 700; }
.stat .v small { font-size: 12px; color: var(--muted); font-weight: 400; }
.stat.pink .v { color: var(--pink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid #f0f2f7; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #fafbfd; }
.tbl .rowlink { color: var(--text); font-weight: 600; cursor: pointer; }
.tbl .rowlink:hover { color: var(--pink); }
.tbl .sub { color: var(--muted); font-size: 12px; }

/* ---------- 徽章 ---------- */
.bdg { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; color: #fff; white-space: nowrap; }
.bdg.gray { background: var(--gray); color: #fff; } .bdg.green { background: var(--green); color: #fff; }
.bdg.blue { background: var(--blue); color: #fff; } .bdg.orange { background: var(--orange); color: #fff; }
.bdg.red { background: var(--red); color: #fff; } .bdg.purple { background: var(--purple); color: #fff; }
.bdg.cyan { background: var(--cyan); color: #fff; } .bdg.pink { background: var(--pink); color: #fff; }
.lvl { display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 6px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; }
.lvl.A { background: var(--pink); } .lvl.B { background: var(--orange); } .lvl.C { background: var(--gray); }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 8px; padding: 7px 14px; cursor: pointer; background: var(--pink); color: #fff; font-size: 13px; transition: .15s; white-space: nowrap; }
.btn:hover { background: var(--pink-dark); }
.btn.ghost { background: #fff; color: var(--text); border-color: #d8dce8; }
.btn.ghost:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-soft); }
.btn.mini { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.btn.danger { background: #fff; color: var(--red); border-color: #f0c4c4; }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn.green { background: var(--green); color: #fff; } .btn.green:hover { background: #1c8a5b; }
.btn.blue { background: var(--blue); color: #fff; } .btn.blue:hover { background: #2559b8; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.field label b { color: var(--red); }
.in, .field input, .field select, .field textarea, .toolbar input, .toolbar select {
  width: 100%; border: 1px solid #d8dce8; border-radius: 8px; padding: 8px 10px; background: #fff; outline: none; transition: .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus, .in:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(224,53,107,.08); }
.field textarea { resize: vertical; min-height: 70px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .span2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: span 1; } }

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; }
.toolbar .grow { flex: 1; min-width: 180px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 6px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--text); font-size: 13px; }
.tabs a.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.tabs a .n { opacity: .75; font-size: 12px; margin-left: 2px; }

/* ---------- 弹窗 ---------- */
.mask { position: fixed; inset: 0; background: rgba(20,24,40,.45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 14px; width: 520px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: pop .18s ease; }
.modal.wide { width: 860px; }
@keyframes pop { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .m-h { padding: 16px 20px 12px; font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.modal .m-h .x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.modal .m-h .x:hover { background: #f2f3f8; color: var(--text); }
.modal .m-b { padding: 4px 20px 8px; max-height: 68vh; overflow-y: auto; }
.modal .m-f { padding: 12px 20px 18px; display: flex; justify-content: flex-end; gap: 10px; }
.mask .modal .btn-row { justify-content: flex-end; }

/* ---------- 提示 ---------- */
#toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast-item { background: #2b2f44; color: #fff; padding: 9px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: pop .2s ease; }
.toast-item.err { background: var(--red); }
.toast-item.ok { background: var(--green); }

/* ---------- 客户详情 ---------- */
.cust-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cust-head .name { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cust-head .head-r { margin-left: auto; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; margin-top: 14px; }
.info-grid .ig .k { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.info-grid .ig .v { font-size: 13.5px; }
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #f0e2e8; border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 16px 10px; }
.tl-item::before { content: ""; position: absolute; left: -17px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; box-shadow: 0 0 0 2px #f3c6d6; }
.tl-item .meta { color: var(--muted); font-size: 12px; margin-bottom: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-item .body { font-size: 13.5px; line-height: 1.6; }
.tag-type { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--pink-soft); color: var(--pink); font-size: 12px; }

/* ---------- 编辑器 ---------- */
.items-tbl input { border: 1px solid transparent; background: transparent; padding: 6px; border-radius: 6px; width: 100%; }
.items-tbl input:focus { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 3px rgba(224,53,107,.08); outline: none; }
.items-tbl input[type="number"] { text-align: right; }
.items-tbl .row-amt { text-align: right; font-weight: 600; white-space: nowrap; }
.editor-total { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 10px; font-size: 15px; }
.editor-total b { color: var(--pink); font-size: 22px; }

/* ---------- 状态流转 ---------- */
.flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.flow .st { padding: 4px 12px; border-radius: 18px; background: #f1f2f7; color: var(--muted); font-size: 12.5px; }
.flow .st.done { background: var(--pink-soft); color: var(--pink); }
.flow .st.cur { background: var(--pink); color: #fff; font-weight: 600; }
.flow .arr { color: #ccd0dd; font-size: 12px; }

.empty { text-align: center; color: var(--muted); padding: 34px 0; font-size: 13px; }
.remind { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #f0f2f7; }
.remind:last-child { border-bottom: none; }
.remind .days { margin-left: auto; flex-shrink: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; }
.muted { color: var(--muted); } .fs12 { font-size: 12px; } .bold { font-weight: 600; }
.red { color: var(--red); } .green { color: var(--green); }
.right { text-align: right; }
.linklike { color: var(--pink); cursor: pointer; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .sidebar { width: 56px; }
  .sidebar .brand { font-size: 0; padding: 16px 0; text-align: center; }
  .sidebar .brand small, .nav a .tx, .sidebar .foot { display: none; }
  .nav a { justify-content: center; }
  .content { padding: 14px; }
  .topbar { padding: 0 14px; }
}
@media (max-width: 640px) {
  .items-tbl th:nth-child(7), .items-tbl td:nth-child(7) { display: none; }
}

/* 打印（A4）：只保留正文，隐藏导航与按钮 */
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .sidebar, .topbar, .toolbar, .tabs, .btn, .btn-row, .login-tip { display: none !important; }
  .layout { display: block; }
  .main { margin: 0; padding: 0; overflow: visible; }
  .card { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  table { font-size: 11px; }
}

.pc-reject { border-left:4px solid var(--red); background:#fff4f4; }
.pc-reject b { color:var(--red); }

/* ============ elderly-friendly scale: mobile 2x ============ */
@media screen and (max-width: 900px) {
  body { font-size: 28px; }
  input, select, textarea, button { font-size: 28px; }
  .sidebar { width: 50px; }
  .nav a { font-size: 18px; padding: 8px 4px; }
  .nav a .ic { width: 18px; flex: 0 0 18px; font-size: 18px; }
  .main { min-width: 0; }
  .topbar { height: auto; min-height: 64px; padding: 6px 10px; gap: 6px 8px; flex-wrap: wrap; }
  .topbar .tb-title { font-size: 28px; flex: 0 1 auto; order: 1; }
  .topbar .tb-user { font-size: 20px; flex: 1 1 100%; order: 3; min-width: 0; margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn { order: 2; flex: 0 1 auto; justify-content: center; }
  .content { padding: 14px 10px 60px; }
  .card { padding: 22px 14px; border-radius: 14px; margin-bottom: 18px; min-width: 0; }
  .two-col > * { min-width: 0; }
  .tbl-wrap { max-width: 100%; }
  .card h3 { font-size: 21px; margin-bottom: 10px; }
  .card h3 .more { font-size: 15px; }
  .fs12 { font-size: 13px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
  .stat { padding: 12px 10px; }
  .stat .k { font-size: 14px; }
  .stat .v { font-size: 26px; }
  .stat .v small { font-size: 14px; }
  table.tbl { font-size: 18px; }
  .tbl th { padding: 8px 6px; }
  .tbl td { padding: 9px 6px; }
  .tbl th, .tbl td { white-space: nowrap; }
  .tbl td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
  .tbl td:last-child { max-width: none; overflow: visible; }
  .tbl .btn-row { flex-wrap: nowrap; gap: 6px; }
  .tbl .btn.mini { font-size: 16px; padding: 5px 9px; min-height: 34px; }
  .tbl .sub { font-size: 13px; }
  .btn { font-size: 26px; padding: 12px 20px; min-height: 56px; border-radius: 12px; }
  .btn.mini { font-size: 20px; padding: 7px 12px; min-height: 40px; border-radius: 10px; }
  .bdg { font-size: 17px; padding: 3px 9px; }
  .lvl { font-size: 17px; width: 28px; height: 28px; line-height: 28px; border-radius: 8px; }
  .tag-type { font-size: 17px; padding: 2px 8px; }
  .toolbar { gap: 10px; margin-bottom: 16px; }
  .toolbar input, .toolbar select { padding: 12px 14px; min-height: 56px; width: 100%; flex: 1 1 100%; min-width: 0; }
  .toolbar .grow { min-width: 150px; }
  .tabs a { font-size: 26px; padding: 10px 20px; }
  .tabs a .n { font-size: 22px; }
  .flow .st { font-size: 25px; padding: 8px 16px; }
  .flow .arr { font-size: 25px; }
  .field { margin-bottom: 18px; }
  .field label { font-size: 25px; margin-bottom: 8px; }
  .field input, .field select, .field textarea, .in { padding: 12px 14px; min-height: 56px; }
  .field textarea { min-height: 110px; }
  .items-tbl input { font-size: 26px; padding: 10px 6px; }
  .items-tbl .row-amt { font-size: 26px; }
  .editor-total { font-size: 28px; padding: 14px 4px; }
  .editor-total b { font-size: 44px; }
  .cust-head { gap: 10px; }
  .cust-head .name { font-size: 20px; line-height: 1.3; flex-wrap: wrap; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .info-grid .ig { min-width: 0; }
  .info-grid .ig .k { font-size: 14px; }
  .info-grid .ig .v { font-size: 19px; overflow-wrap: anywhere; }
  .timeline { padding-left: 18px; }
  .tl-item .meta { font-size: 14px; }
  .tl-item .body { font-size: 19px; }
  .empty { font-size: 18px; padding: 26px 0; }
  .remind { font-size: 19px; padding: 10px 0; flex-wrap: wrap; }
  .remind > div { min-width: 0; overflow-wrap: anywhere; }
  .card[style*="display:flex"] { flex-wrap: wrap; }
  .pc-proc-row { flex-wrap: wrap; }
  .pc-proc-row input { min-width: 0; }
  .pc-proc-row input[data-p="desc"] { flex: 1 1 100% !important; }
  .pc-proc-row input[data-p="cost"] { flex: 1 1 100px; }
  .mask { padding: 2vh 8px; }
  .modal, .modal.wide { width: 100%; }
  .modal .m-h { font-size: 32px; padding: 18px 14px 12px; }
  .modal .m-h .x { font-size: 40px; }
  .modal .m-b { padding: 4px 14px 8px; max-height: 64vh; }
  .modal .m-f { padding: 12px 14px 18px; }
  .login-wrap { padding: 16px; }
  .login-card { width: 100%; max-width: 620px; padding: 26px 16px 20px; }
  .login-card .logo { font-size: 40px; line-height: 1.3; }
  .login-card .sub { font-size: 24px; margin-bottom: 22px; }
  .login-tip { font-size: 22px; padding: 14px; line-height: 2; }
}

/* ============ elderly-friendly scale: desktop 1.5x ============ */
@media screen and (min-width: 901px) {
  :root { --side-w: 220px; }
  body { font-size: 21px; }
  input, select, textarea, button { font-size: 21px; }
  .sidebar .brand { font-size: 24px; }
  .sidebar .brand small { font-size: 15px; }
  .sidebar .foot { font-size: 15px; }
  .nav a { font-size: 24px; padding: 11px 12px; gap: 12px; }
  .nav a .ic { width: 30px; flex: 0 0 30px; font-size: 26px; }
  .topbar { height: 66px; }
  .topbar .tb-title { font-size: 24px; }
  .topbar .tb-user { font-size: 18px; }
  .content { max-width: 1440px; padding: 22px 24px 48px; }
  .card { padding: 20px 22px; }
  .two-col > * { min-width: 0; }
  .tbl-wrap { max-width: 100%; }
  .card h3 { font-size: 22px; }
  .card h3 .more { font-size: 18px; }
  .stat { padding: 16px 18px; }
  .stat .k { font-size: 18px; }
  .stat .v { font-size: 36px; }
  .stat .v small { font-size: 18px; }
  table.tbl { font-size: 20px; }
  .tbl th { padding: 11px 10px; }
  .tbl td { padding: 12px 10px; }
  .tbl .sub { font-size: 18px; }
  .btn { font-size: 19px; padding: 9px 16px; min-height: 42px; }
  .btn.mini { font-size: 18px; padding: 5px 11px; min-height: 34px; }
  .bdg { font-size: 18px; padding: 3px 11px; }
  .lvl { font-size: 18px; width: 28px; height: 28px; line-height: 28px; }
  .tag-type { font-size: 18px; }
  .fs12 { font-size: 18px; }
  .toolbar input, .toolbar select { padding: 10px 12px; min-height: 44px; }
  .tabs a { font-size: 19px; padding: 8px 16px; }
  .tabs a .n { font-size: 17px; }
  .flow .st { font-size: 19px; padding: 6px 14px; }
  .field { margin-bottom: 16px; }
  .field label { font-size: 19px; }
  .field input, .field select, .field textarea, .in { padding: 10px 12px; min-height: 44px; }
  .field textarea { min-height: 90px; }
  .items-tbl input { font-size: 20px; padding: 8px 6px; }
  .items-tbl .row-amt { font-size: 20px; }
  .editor-total { font-size: 21px; }
  .editor-total b { font-size: 33px; }
  .cust-head .name { font-size: 30px; }
  .info-grid .ig .k { font-size: 16px; }
  .info-grid .ig .v { font-size: 20px; }
  .tl-item .meta { font-size: 18px; }
  .tl-item .body { font-size: 20px; }
  .empty { font-size: 19px; }
  .remind { flex-wrap: wrap; }
  .remind > div { min-width: 0; overflow-wrap: anywhere; }
  .modal { width: 640px; }
  .modal.wide { width: 1080px; }
  .modal .m-h { font-size: 24px; }
  .modal .m-h .x { font-size: 28px; }
  .login-card { width: 520px; padding: 40px 38px 32px; }
  .login-card .logo { font-size: 34px; }
  .login-card .sub { font-size: 19px; }
  .login-tip { font-size: 17px; }
}