/* ============================================================
   锦玥律证通 · 经营增长工具包 (growth) Wave1 — task #128
   全部 .gr- 前缀，不污染宿主；独立 Vue.createApp 挂 #gr-root。
   ============================================================ */
#gr-root{
  --gr-primary:#4F46E5; --gr-primary-d:#3730A3;
  --gr-text:#1F2328; --gr-text2:#57606A;
  --gr-bg:#FFFFFF; --gr-bg2:#F7F8FA; --gr-border:#E5E7EB;
  --gr-success:#16A34A; --gr-success-d:#15803D; --gr-success-bg:#E8F7EE;
  --gr-warn:#D97706; --gr-warn-d:#92400E; --gr-warn-bg:#FEF3C7;
  --gr-danger:#DC2626; --gr-danger-d:#991B1B; --gr-danger-bg:#FEE2E2;
  --gr-info:#1E40AF; --gr-info-bg:#DBEAFE;
  position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; z-index:15000; background:var(--gr-bg2);
  color:var(--gr-text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
#gr-root *{box-sizing:border-box; margin:0; padding:0;}
#gr-root .gr-hidden{display:none !important;}

/* 顶栏 */
.gr-topbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gr-border); display:flex; align-items:center; gap:10px; padding:12px 16px;}
.gr-topbar img{height:22px; width:auto; display:block;}
.gr-topbar .gr-ttwrap{display:flex; flex-direction:column; line-height:1.25;}
.gr-topbar .gr-tt{font-size:16px; font-weight:700; display:block;}
.gr-topbar .gr-sub{font-size:11.5px; color:var(--gr-text2); font-weight:400; display:block; margin-top:1px;}

/* 更多 tab：列表行卡片 */
.gr-hcard{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gr-border);
  border-radius:12px; padding:13px; margin-bottom:10px; cursor:pointer;}
.gr-hcard:active{background:var(--gr-bg2);}
.gr-hpic{width:44px; height:44px; flex:0 0 44px; border-radius:10px; background:var(--gr-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;}
.gr-hpic svg{width:22px; height:22px;}
.gr-hbody{flex:1; min-width:0; text-align:left;}
.gr-hname{font-size:15px; font-weight:600; color:var(--gr-text);}
.gr-hdesc{font-size:12.5px; color:var(--gr-text2); margin-top:2px;}
.gr-ver{font-size:12px; color:var(--gr-text2); text-align:center; margin-top:24px; line-height:1.6;}
.gr-demo{margin-left:auto; font-size:11px; font-weight:700; color:var(--gr-danger-d); background:var(--gr-danger-bg);
  border:1px solid #FCA5A5; border-radius:6px; padding:2px 8px;}

.gr-wrap{max-width:680px; margin:0 auto; padding:12px 12px 96px;}

/* 汇总分卡 */
.gr-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.gr-card{background:#fff; border:1px solid var(--gr-border); border-radius:12px; padding:12px 14px;}
.gr-card.wide{grid-column:1 / -1;}
.gr-card .gr-lb{font-size:12.5px; color:var(--gr-text2);}
.gr-card .gr-num{font-size:22px; font-weight:700; color:var(--gr-text); margin-top:4px; font-variant-numeric:tabular-nums;}
.gr-card .gr-num small{font-size:12px; font-weight:500; color:var(--gr-text2);}
.gr-card.ink .gr-num{color:var(--gr-info);}
.gr-card.ok .gr-num{color:var(--gr-success-d);}
.gr-card.warn .gr-num{color:var(--gr-warn-d);}

/* 工具行：375 下搜索框整行、按钮下行右对齐，防裁切 */
.gr-tools{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center;}
.gr-tools .gr-input{flex:1 1 100%;}
.gr-tools .gr-btn{flex:0 0 auto; margin-left:auto; white-space:nowrap;}
.gr-input{flex:1; min-width:0; width:100%; border:1px solid var(--gr-border); border-radius:10px; padding:9px 12px; font-size:14px;
  background:#fff; color:var(--gr-text); outline:none;}
.gr-input::placeholder{color:var(--gr-text2);}

/* 记录列表 */
.gr-row{background:#fff; border:1px solid var(--gr-border); border-radius:12px; padding:11px 13px; margin-bottom:9px;}
.gr-row .gr-r1{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.gr-row .gr-title{font-size:14.5px; font-weight:600; color:var(--gr-text);}
.gr-row .gr-amt{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.gr-row .gr-amt.in{color:var(--gr-success-d);}
.gr-row .gr-amt.out{color:var(--gr-warn-d);}
.gr-row .gr-meta{font-size:12px; color:var(--gr-text2); margin-top:3px;}
.gr-row .gr-actions{display:flex; gap:8px; margin-top:8px;}
.gr-overdue{color:var(--gr-danger-d); font-weight:700;}
.gr-empty{text-align:center; color:var(--gr-text2); padding:34px 12px; font-size:13.5px;}
.gr-empty-ic{display:block; width:28px; height:28px; margin:0 auto 8px; color:var(--gr-success-d);}
.gr-empty-ic svg{width:28px; height:28px; display:block;}

/* chips */
.gr-chip{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;}
.gr-chip.c-in{background:var(--gr-success-bg); color:var(--gr-success-d);}
.gr-chip.c-out{background:var(--gr-warn-bg); color:var(--gr-warn-d);}
.gr-chip.c-st{background:var(--gr-info-bg); color:var(--gr-info);}
.gr-chip.c-bad{background:var(--gr-danger-bg); color:var(--gr-danger-d);}

/* 按钮 */
.gr-btn{display:inline-block; border:none; border-radius:10px; padding:9px 15px; font-size:14px; font-weight:600;
  cursor:pointer; background:var(--gr-primary); color:#fff;}
.gr-btn:active{opacity:.88;}
.gr-btn.ghost{background:#fff; color:var(--gr-text); border:1px solid var(--gr-border);}
.gr-btn.danger{background:var(--gr-danger);}
.gr-btn.sm{padding:6px 12px; font-size:13px;}
.gr-btn.block{display:block; width:100%; text-align:center;}
.gr-btn:disabled{opacity:.5; cursor:not-allowed;}

/* 底部 tab 栏 */
.gr-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--gr-border);
  display:flex; max-width:680px; margin:0 auto;}
.gr-tabbar .gr-tb{flex:1; text-align:center; padding:8px 0 calc(10px + env(safe-area-inset-bottom)); cursor:pointer;
  color:var(--gr-text2); font-size:11.5px;}
.gr-tabbar .gr-tb .gr-ic{display:block; width:22px; height:22px; margin:0 auto 2px;}
.gr-tabbar .gr-tb .gr-ic svg{width:22px; height:22px; display:block;}
.gr-tabbar .gr-tb.active{color:var(--gr-primary); font-weight:700;}

/* 表单 */
.gr-field{margin-bottom:12px;}
.gr-field label{display:block; font-size:13px; color:var(--gr-text2); margin-bottom:5px; font-weight:500;}
.gr-textarea{width:100%; border:1px solid var(--gr-border); border-radius:10px; padding:9px 12px; font-size:14px;
  min-height:56px; resize:vertical; background:#fff; color:var(--gr-text); outline:none; font-family:inherit;}

/* 弹层（底部抽屉，移动优先；桌面居中） */
.gr-mask{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:300; display:flex; align-items:flex-end; justify-content:center;}
@media (min-width:640px){ .gr-mask{align-items:center;} }
.gr-sheet{background:#fff; width:100%; max-width:680px; border-radius:16px 16px 0 0; padding:16px; max-height:88vh; overflow-y:auto;}
@media (min-width:640px){ .gr-sheet{border-radius:16px; width:480px;} }
.gr-sheet h3{font-size:16px; margin-bottom:12px;}
.gr-sheet .gr-srow{display:flex; gap:10px; margin-top:14px;}

/* toast */
.gr-toast{position:fixed; left:50%; bottom:110px; transform:translateX(-50%); background:#1F2328; color:#fff;
  padding:10px 18px; border-radius:999px; font-size:13.5px; z-index:400; max-width:80vw; text-align:center;}

/* 自定义 select */
.gr-sel{position:relative;}
.gr-sel-btn{width:100%; text-align:left; border:1px solid var(--gr-border); background:#fff; border-radius:10px;
  padding:9px 12px; font-size:14px; color:var(--gr-text); cursor:pointer;}
.gr-sel-btn .gr-ph{color:var(--gr-text2);}
.gr-sel-pop{position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--gr-border);
  border-radius:10px; z-index:50; max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.12);}
.gr-sel-opt{padding:10px 12px; font-size:14px; cursor:pointer; color:var(--gr-text);}
.gr-sel-opt:active{background:var(--gr-bg2);}
.gr-sel-opt.on{color:var(--gr-primary); font-weight:600;}

/* 自定义 date */
.gr-date{position:relative;}
.gr-date-btn{width:100%; text-align:left; border:1px solid var(--gr-border); background:#fff; border-radius:10px;
  padding:9px 12px; font-size:14px; color:var(--gr-text); cursor:pointer;}
.gr-date-btn .gr-ph{color:var(--gr-text2);}
.gr-date-pop{position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid var(--gr-border);
  border-radius:10px; z-index:50; padding:10px; width:264px; box-shadow:0 8px 24px rgba(0,0,0,.12);}
.gr-date-hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-weight:600; font-size:14px;}
.gr-date-nav{border:none; background:var(--gr-bg2); color:var(--gr-text); width:26px; height:26px; border-radius:6px; cursor:pointer;}
.gr-date-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; font-size:12.5px;}
.gr-date-grid .gr-dh{color:var(--gr-text2); padding:4px 0;}
.gr-date-cell{padding:6px 0; border-radius:6px; cursor:pointer; color:var(--gr-text);}
.gr-date-cell:hover{background:var(--gr-bg2);}
.gr-date-cell.on{background:var(--gr-primary); color:#fff; font-weight:600;}

/* LPR 卡 */
.gr-lpr{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gr-lpr .gr-card .gr-pct{font-size:24px; font-weight:700; color:var(--gr-primary-d); margin-top:4px;}
.gr-lpr .gr-card .gr-pct.ph{font-size:15px; font-weight:500; color:var(--gr-text2); margin-top:10px;}
.gr-hist-hd,.gr-hist{display:grid; grid-template-columns:1fr 60px 60px; gap:8px; padding:5px 0; font-size:12.5px;}
.gr-hist-hd{color:var(--gr-text2); border-bottom:1px solid var(--gr-border); margin-top:6px; font-weight:600;}
.gr-hist{color:var(--gr-text); border-bottom:1px dashed var(--gr-border);}
.gr-hist:last-child{border-bottom:none;}
.gr-note{background:var(--gr-info-bg); border:1px solid #BFDBFE; color:var(--gr-text); border-radius:10px;
  padding:9px 12px; font-size:12.5px; margin-bottom:10px;}
.gr-note.warn{background:var(--gr-warn-bg); border-color:#FCD34D; color:var(--gr-warn-d);}
.gr-src{font-size:11px; color:var(--gr-text2); margin-top:6px;}

/* 占位页 */
.gr-plug{text-align:center; padding:48px 20px; color:var(--gr-text2);}
.gr-plug .gr-pic{width:56px; height:56px; margin:0 auto 14px; color:var(--gr-text2);}
.gr-plug .gr-pic svg{width:56px; height:56px; display:block;}
.gr-plug .gr-name{font-weight:600; color:var(--gr-text); font-size:15px;}
.gr-plug .gr-soon{margin-top:6px; font-size:13px;}

/* 页脚 */
.gr-foot{text-align:center; padding:18px 0 6px; color:var(--gr-text2); font-size:11.5px;}
.gr-foot img{height:20px; margin-bottom:6px; opacity:.9;}

/* flex 子项防溢出 */
.gr-row .gr-r1{min-width:0;}
.gr-row .gr-amt{min-width:0;}
.gr-tools .gr-btn{flex:0 0 auto; white-space:nowrap;}

/* SVG 尺寸防御：功能图标一律由 CSS 约束，禁止靠 intrinsic 尺寸 */
#gr-root svg{width:24px; height:24px;}
#gr-root .gr-cv, #gr-root canvas.gr-cv{width:100%; height:auto;}
#gr-root .gr-tabbar .gr-ic{width:22px; height:22px;}
#gr-root .gr-tabbar .gr-ic svg{width:22px; height:22px;}
#gr-root .gr-plug .gr-pic{width:44px; height:44px;}
#gr-root .gr-plug .gr-pic svg{width:44px; height:44px;}
#gr-root .gr-empty-ic{width:36px; height:36px;}
#gr-root .gr-empty-ic svg{width:36px; height:36px;}

/* 空态三段式：图标 + 价值说明 + 主 CTA */
.gr-emptybox{background:#fff; border:1px solid var(--gr-border); border-radius:12px; padding:26px 16px; text-align:center; margin-bottom:10px;}
.gr-emptybox .gr-empty-ic{width:40px; height:40px; color:var(--gr-primary); margin:0 auto 10px;}
.gr-emptybox .gr-empty-ic svg{width:40px; height:40px;}
.gr-emptybox h4{font-size:15px; color:var(--gr-text); margin-bottom:4px;}
.gr-emptybox p{font-size:13px; color:var(--gr-text2); margin-bottom:14px; line-height:1.5;}

/* 桌面居中收窄 */
@media (min-width:720px){
  #gr-root{background:#E9EAF0;}
  #gr-root .gr-wrap{background:var(--gr-bg2); min-height:100vh; max-width:640px; margin:0 auto;
    border-left:1px solid var(--gr-border); border-right:1px solid var(--gr-border);}
  #gr-root .gr-tabbar{max-width:640px;}
}

/* ---- Wave2 名片/海报 ---- */
.gr-wide{max-width:560px;}
.gr-sub2{font-size:12px; color:var(--gr-text2); font-weight:400; margin-left:8px;}
.gr-cv{width:100%; border:1px solid var(--gr-border); border-radius:10px; background:#fff; display:block;}
.gr-card-cv{aspect-ratio:1063/638;}
.gr-poster-cv{aspect-ratio:1080/1350; max-height:52vh; object-fit:contain;}
.gr-chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.gr-chipbtn{border:1px solid var(--gr-border); background:#fff; color:var(--gr-text); border-radius:999px;
  padding:6px 14px; font-size:13px; cursor:pointer;}
.gr-chipbtn.on{background:var(--gr-primary); border-color:var(--gr-primary); color:#fff; font-weight:600;}
.gr-upbtn{display:inline-block; border:1px dashed var(--gr-border); border-radius:10px; padding:8px 12px;
  font-size:13px; color:var(--gr-text2); cursor:pointer;}
.gr-upbtn input{display:none;}
.gr-plug{cursor:pointer;}