:root{--ink:#152456;--muted:#71809d;--brand:#3155c7;--brand-dark:#263b9b;--mint:#e4eaff;--bg:#f4f6ff;--line:#d9e1f6;--danger:#c73a32;--warn:#a86400;--white:#fff;--shadow:0 10px 26px rgba(42,61,152,.07)}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}.material-symbols-outlined{font-size:18px;line-height:1}.page{width:100%;max-width:1660px;margin:0 auto;padding:24px 28px 44px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.eyebrow,.section-kicker{display:block;color:#2d7567;font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:6px}.page-head h1{font-size:28px;line-height:1.25;margin:0 0 7px;letter-spacing:-.5px}.page-head p,.card-head p{color:var(--muted);font-size:12px;line-height:1.55;margin:0}.head-actions,.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.button,.select-wrap{height:38px;border:1px solid #c4d2cd;border-radius:10px;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}.button:hover{background:#eef6f2}.button.primary{background:var(--brand);border-color:var(--brand);color:#fff}.button.primary:hover{background:var(--brand-dark)}.select-wrap select{border:0;background:transparent;color:inherit;font-size:13px;font-weight:700;outline:0;cursor:pointer}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.metric-card{position:relative;min-height:116px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 17px;box-shadow:var(--shadow)}.metric-card.primary{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}.metric-label{font-size:12px;color:var(--muted)}.primary .metric-label,.primary .metric-note{color:#dbe4ff}.metric-value{font-size:29px;line-height:1;font-weight:800;margin:18px 0 8px;letter-spacing:-1px}.metric-note{font-size:11px;color:var(--muted)}.metric-icon{position:absolute;right:14px;top:14px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#3a7569}.primary .metric-icon{background:#fff;color:var(--brand);border-color:#fff}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(330px,.8fr);gap:14px;margin-bottom:14px}.card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 18px}.card-head h2{font-size:17px;line-height:1.3;margin:0 0 4px}.scope-badge{background:var(--mint);color:#3155c7;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.funnel{padding:0 18px 18px;display:grid;gap:8px}.funnel-row{display:grid;grid-template-columns:34px minmax(150px,1fr) 58px;align-items:center;gap:9px}.funnel-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e7edff;color:#3155c7}.funnel-track{position:relative;height:41px;background:#f0f3fc;border-radius:0 9px 9px 0;overflow:hidden}.funnel-fill{position:absolute;inset:0 auto 0 0;background:#dce3f7;min-width:5px}.funnel-row:nth-child(2) .funnel-fill{background:#cad5fb}.funnel-row:nth-child(3) .funnel-fill{background:#acbef5}.funnel-row:nth-child(4) .funnel-fill{background:#8199e9}.funnel-row:nth-child(5) .funnel-fill{background:#5068d9}.funnel-content{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;font-size:12px}.funnel-content strong{font-size:16px}.funnel-rate{text-align:right;font-size:11px;color:var(--muted);font-weight:700}.side-stack{display:grid;grid-template-rows:1fr 1fr;gap:14px}.output-card{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}.output-card .section-kicker,.output-card .card-head p,.output-hint{color:#dbe4ff}.info-icon{color:#cbd7ff}.output-main{padding:0 18px 17px}.output-value{font-size:34px;font-weight:800;line-height:1;margin:2px 0 7px}.output-hint{font-size:11px}.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.output-stat{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px}.output-stat span{display:block;color:#dbe4ff;font-size:10px;margin-bottom:5px}.output-stat strong{font-size:15px}.anomaly-card{min-height:0}.text-button{border:0;background:transparent;color:#3155c7;font-size:11px;font-weight:700;cursor:pointer}.anomaly-list{padding:0 14px 14px;display:grid;gap:6px}.anomaly{display:grid;grid-template-columns:30px 1fr;gap:9px;padding:8px;border-radius:9px;background:#f7f9f8}.anomaly-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffebe8;color:var(--danger)}.anomaly.medium .anomaly-icon{background:#fff3d9;color:var(--warn)}.anomaly b{font-size:12px}.anomaly p{font-size:10px;color:var(--muted);margin:3px 0 0}.empty{display:grid;place-items:center;text-align:center;color:var(--muted);padding:28px 16px;font-size:12px}.empty .material-symbols-outlined{font-size:29px;color:#8ab2a7;margin-bottom:7px}
.comparison-card{overflow:hidden;margin-bottom:14px}.comparison-head{align-items:center}.filters input,.filters select{height:36px;border:1px solid #cbd8d4;border-radius:9px;background:#fff;color:var(--ink);padding:0 10px;font-size:12px;min-width:145px}.filters input{min-width:190px}.table-wrap{width:100%;overflow:auto;border-top:1px solid #e1e9e6}table{width:100%;border-collapse:collapse;min-width:980px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #e5ece9;font-size:12px}th{font-size:10px;color:#687a74;background:#f7faf8;white-space:nowrap;text-transform:none}.channel-name{font-weight:800}.channel-sub{font-size:10px;color:var(--muted);margin-top:3px}.rate{display:inline-flex;padding:3px 7px;border-radius:999px;background:#e5ebff;color:#3155c7;font-weight:800}.rate.warn{background:#fff0d6;color:#8a5900}.rate.danger{background:#ffe6e2;color:#a92b20}.row-button{width:30px;height:30px;border:1px solid #cbd9d4;border-radius:8px;background:white;color:var(--ink);cursor:pointer;display:grid;place-items:center}.row-button:hover{background:#e9f6f1}.table-foot{display:flex;justify-content:space-between;gap:20px;padding:11px 15px;color:var(--muted);font-size:10px}
.trend-card{margin-bottom:0}.legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}.legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.legend .added:before{background:#3155c7}.legend .registered:before{background:#7188df}.legend .settled:before{background:#cbd7ff}.chart-wrap{width:100%;height:210px;padding:0 18px 16px;overflow:hidden}.chart-wrap canvas{display:block;width:100%;height:100%;max-width:100%}
.drawer-mask{position:fixed;inset:0;background:rgba(4,37,31,.38);z-index:70;display:none;justify-content:flex-end}.drawer-mask.open{display:flex}.drawer{width:min(460px,100%);height:100%;overflow:auto;background:#fff;box-shadow:-20px 0 60px rgba(3,35,29,.18);padding:21px}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:17px}.drawer-head h2{margin:5px 0 0;font-size:23px}.icon-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}.detail-stat{background:#f5f8f7;border:1px solid #e0e9e5;border-radius:10px;padding:11px}.detail-stat span{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.detail-stat strong{font-size:18px}.section-title{font-size:14px;margin:20px 0 9px}.detail-list{display:grid;gap:7px}.detail-item{padding:10px;border:1px solid var(--line);border-radius:10px;font-size:12px}.config-form label{display:block;font-size:11px;font-weight:700;margin:12px 0 5px}.config-form input,.config-form textarea{width:100%;border:1px solid #c7d6d1;border-radius:9px;padding:9px 10px}.config-form textarea{min-height:78px;resize:vertical}.config-actions{display:flex;justify-content:flex-end;margin-top:14px}.toast{display:none;position:fixed;right:22px;bottom:22px;z-index:100;padding:11px 15px;border-radius:10px;background:var(--brand);color:#fff;box-shadow:var(--shadow)}.toast.show{display:block}.toast.error{background:var(--danger)}
@media(max-width:1050px){.overview-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.page{padding:18px 15px 34px}.page-head{display:block}.head-actions{margin-top:14px}.head-actions>*{flex:1}.metric-grid{gap:9px}.metric-card{min-height:108px;padding:14px}.metric-value{font-size:26px}.side-stack{grid-template-columns:1fr}.comparison-head{display:block}.filters{display:grid;grid-template-columns:1fr;margin-top:13px}.filters input,.filters select{width:100%;min-width:0}.legend{display:none}.table-foot{display:block}.table-foot span{display:block;margin-top:3px}}
@media(max-width:480px){.head-actions{display:grid;grid-template-columns:1fr 1fr}.head-actions .select-wrap{grid-column:1/-1}.head-actions>*{width:100%}.page-head h1{font-size:25px}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:112px}.funnel-row{grid-template-columns:30px 1fr 48px}.funnel-content strong{font-size:14px}}

/* Stitch 原型比例：桌面端将漏斗和右侧洞察控制在同一紧凑工作区。 */
@media(min-width:1051px){.overview-grid{height:380px}.side-stack{min-height:0}.side-stack>.card{min-height:0;overflow:hidden}}

/* 漏斗条左右两端统一圆弧，避免左侧出现生硬直角。 */
.funnel-track{border-radius:10px}