:root{--bg:#E9EEF9;--dark:#161A28;--ink:#1B2233;--muted:#7a859c;--lime:#DDF247;--purple:#9577F0;--blue:#3D63F5;--border:#e9edf6}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 90% 0%,#e5defb88,transparent 45%),linear-gradient(140deg,#e7edf8,#f4f6fc);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:11px;background:#edf1fa;padding:9px 15px;color:var(--ink);transition:background .2s,transform .2s}button:hover{background:#e0e7f8}button:focus-visible,a:focus-visible{outline:3px solid #9577f0;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}input,select{border:1px solid #e0e6f1;background:#ffffffb8;border-radius:9px;padding:8px;color:var(--ink);min-width:0}a{color:var(--blue);text-decoration:none}.hidden{display:none!important}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 3.5%;border-bottom:1px solid #ffffffba;background:#ffffff5a}header .brand{font-size:22px;font-weight:850;letter-spacing:.1em;color:var(--dark);white-space:nowrap}.brand span{display:block;font-size:10px;letter-spacing:.2em;color:var(--muted)}nav{display:flex;background:var(--dark);padding:5px;border-radius:40px;gap:5px}nav button{border-radius:30px;background:none;color:#c8ccda;padding:9px 20px;font-size:13px}nav button:hover{background:#ffffff16}nav button.active{background:var(--lime);color:var(--dark);font-weight:700}.outline{background:#ffffffa0;border:1px solid #d9dfed}.primary{background:var(--dark);color:var(--lime);font-weight:650}.primary:hover{background:#2d3449}main{max-width:1600px;margin:auto;padding:28px 3.5% 12px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--muted)}h1{font-size:30px;letter-spacing:-.04em;line-height:1.3;margin:6px 0}h2{font-size:17px;letter-spacing:-.02em;margin:6px 0 14px}p{margin:7px 0 15px}.heading p{color:var(--muted);font-size:13px;margin:5px 0}.live{font-size:10px;font-weight:600;letter-spacing:0;background:#e2e9d6;color:#506231;border-radius:20px;padding:4px 9px;vertical-align:middle;margin-left:12px}.freshness{font-size:12px;color:var(--muted);text-align:right}.card{background:#ffffffc9;border:1px solid #ffffffed;box-shadow:0 5px 28px #1b223306;border-radius:17px;padding:22px;margin-bottom:18px;overflow:hidden}.filterbar{padding:14px 18px}.channels{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.channels button{font-size:13px;background:transparent;padding:8px 16px;border-radius:25px}.channels button.active{background:var(--lime);font-weight:700}.filterline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:13px}.periods,.segments{display:flex;gap:3px;padding:3px;background:#edf0f9;border-radius:12px}.periods button,.segments button{background:transparent;padding:6px 12px;font-size:12px}.periods .selected,.segments .selected{background:#fff;box-shadow:0 2px 6px #141b3510;color:#6247c0}.daterange{display:flex;align-items:center;gap:5px}.daterange input{font-size:12px}.filterline>#exportBtn{margin-left:auto}.notice{background:#eef1ff;border:1px solid #dce3fb;border-radius:11px;color:#5a6488;padding:10px 15px;font-size:12px;margin:0 0 20px}.notice.warn{background:#fff7e8;border-color:#f1e1ba;color:#876829}.muted{font-size:11px;color:var(--muted);line-height:1.7}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:19px}.kpi{margin:0;padding:20px}.kpi:first-child{background:linear-gradient(135deg,#252c41,var(--dark));border-color:var(--dark);color:#fff}.kpi .label{font-size:12px;display:flex;align-items:center;gap:8px}.kpi .label:before{content:"";height:13px;width:4px;background:var(--purple);border-radius:5px}.kpi:first-child .label:before{background:var(--lime)}.number{font-size:34px;font-weight:780;letter-spacing:-.04em;line-height:1.4;font-variant-numeric:tabular-nums;margin:8px 0}.kpi small{font-size:10px;color:var(--muted)}.kpi:first-child small{color:#b0b6c9}.twocol{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.twocol>.card{min-width:0}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.sectionhead h2{margin:2px 0}.legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;margin-left:8px}.blue{background:var(--blue)}.purple{background:var(--purple)}#trend svg{width:100%;height:auto;display:block}svg text{font-size:11px;fill:#8590a6}svg .gridline{stroke:#e5eaf6;stroke-dasharray:4 4}.barrow{display:grid;grid-template-columns:122px 1fr 66px;align-items:center;gap:10px;margin:15px 0;font-size:12px}.barrow button{padding:0;background:none;text-align:left;font-size:12px;color:#414b65}.track{height:9px;background:#e8edf7;border-radius:4px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#7496ff,var(--blue));border-radius:4px}.barrow:nth-child(2n) .fill{background:linear-gradient(90deg,#b6a7fb,#8a6ef3)}.barrow b{text-align:right;font-variant-numeric:tabular-nums}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:11px;font-weight:500;color:var(--muted);background:#f0f3fa;white-space:nowrap}th,td{padding:12px 13px;border-bottom:1px solid #edf0f6}td{font-variant-numeric:tabular-nums}tbody tr:hover{background:#f4f5fc}td button{background:none;padding:0;color:#6f52d6;font-size:12px;text-align:left}.tablewrap{overflow:auto}.rankgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.rankcard{padding:17px}.rankcard h2{margin:2px 0 15px}.rankcard table{table-layout:fixed}.rankcard td,.rankcard th{padding:8px 6px}.rankcard .rankno{width:27px}.rankcard .modelname{width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rankcard .countcell{width:18%;text-align:right}.rankcard .pricecell{width:21%;text-align:right}.rankcard th{font-size:10px}.rankbadge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#eef1f8;color:#727d94;font-size:10px}.rankbadge.top{background:#e5ed91;color:#343b14}.pricelayout{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:24px}.pricebars{display:flex;height:220px;align-items:end;gap:5px;padding-top:28px}.pricebar{display:flex;flex:1;height:100%;min-width:0;align-items:center;justify-content:end;flex-direction:column;background:none;padding:0;border-radius:5px}.pricebar:hover{background:#f3f4ff}.pricebar b{font-size:10px;margin-bottom:6px}.pricebar i{display:block;width:64%;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(#8b8bff,#4f6ff7)}.pricebar.selected i{background:linear-gradient(#e2f873,#c8e82c)}.pricebar span{font-size:9px;line-height:1.3;min-height:32px;margin-top:8px;word-break:break-word;text-align:center}.pricebar.selected span{font-weight:750;color:#5941ba}.pricecard aside{border-left:1px solid var(--border);padding-left:22px}.bandstats{display:flex;gap:24px;margin:12px 0 16px}.bandstats strong{font-size:24px;display:block}.bandstats span{font-size:11px;color:var(--muted)}.pill{padding:4px 10px;border-radius:20px;background:#ede9fa;color:#7659c5;font-size:11px}.empty{text-align:center;padding:45px}.empty p{color:var(--muted)}.empty button{margin:6px}.emptytable{padding:24px;color:var(--muted);text-align:center;font-size:12px}.dropzone{border:1px dashed #a6add7;border-radius:14px;padding:25px;display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0;background:#f6f6fe;cursor:pointer}.dropzone input{max-width:100%;font-size:12px;background:none;border:0}.dropzone span:last-of-type{font-size:11px;color:var(--muted)}.uploadIcon{font-size:30px;color:var(--purple)}.privacy{background:#f1f3fa;border-radius:12px;padding:15px;font-size:12px}.privacy p{margin-bottom:0;color:#7a859c}.actions{display:flex;gap:10px;margin:20px 0}.storagegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.storagegrid b{display:block;font-size:22px}.storagegrid span{font-size:11px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:10px;padding:18px 0;color:#8994aa;font-size:10px}.login{min-height:100vh;display:flex;align-items:center;justify-content:center}.login .card{max-width:450px;padding:35px}.login h1{font-size:26px}.login p{color:var(--muted);font-size:12px}.login input,.login button{width:100%;margin:8px 0}.error{color:#c84657!important}dialog{border:1px solid #fff;border-radius:20px;background:#f9fbff;box-shadow:0 20px 100px #141b3530;width:min(1150px,92vw);max-height:85vh;padding:24px;color:var(--ink)}dialog::backdrop{background:#19223966;backdrop-filter:blur(5px)}.dialoghead{display:flex;justify-content:space-between;align-items:start;gap:15px}.dialoghead button{font-size:22px;padding:2px 12px}dialog .tablewrap{max-height:55vh;margin-top:15px}#exportDialog{width:470px}.exportOptions{display:flex;flex-direction:column;gap:10px;margin:20px 0}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--dark);color:white;padding:10px 22px;border-radius:30px;box-shadow:0 5px 20px #0002;display:none;max-width:85vw;z-index:1000;font-size:12px}@media(min-width:1450px){.rankcard .modelname{width:47%}}@media(max-width:1100px){header{flex-wrap:wrap}nav button{padding:8px 14px}.kpis{gap:9px}.kpi{padding:14px}.number{font-size:28px}.rankgrid{grid-template-columns:1fr}.rankcard table{table-layout:auto}.rankcard .modelname{width:50%}.twocol{grid-template-columns:1fr}.pricelayout{grid-template-columns:1fr}.pricecard aside{border-left:0;border-top:1px solid var(--border);padding:15px 0 0}}@media(max-width:650px){header{padding:15px 4%;gap:12px}.brand{font-size:19px!important}header>button{margin-left:auto}nav{order:3;width:100%;justify-content:space-between}nav button{padding:7px 11px;font-size:12px}main{padding:20px 4%}.heading{display:block}h1{font-size:25px}.freshness{text-align:left;margin-top:10px}.channels{flex-wrap:nowrap;overflow:auto;white-space:nowrap}.filterline{gap:8px}.daterange{width:100%}.daterange input{width:40%}.kpis{grid-template-columns:repeat(2,1fr)}.kpi:last-child{grid-column:span 2}.card{padding:16px}.sectionhead{align-items:start;flex-wrap:wrap}.barrow{grid-template-columns:115px 1fr 55px}.pricebars{height:170px;gap:2px}.pricebar span{font-size:8px;min-height:34px}.legend{font-size:9px}footer{flex-direction:column}.rankcard .modelname{width:40%}.rankcard td,.rankcard th{font-size:11px}.notice{font-size:11px}.actions{flex-wrap:wrap}} .brandwithlogo{display:flex;align-items:center;gap:12px}.brandwithlogo img{width:64px;height:64px;object-fit:contain;border-radius:13px;background:#090909;box-shadow:0 3px 14px #161a2820}.headeractions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.headeractions button{font-size:12px}.loginlogo{display:block;width:112px;height:112px;object-fit:contain;border-radius:19px;margin:0 0 20px;background:#000}form label{display:block;font-size:12px;margin:12px 0}form label input,form label select{display:block;width:100%;margin-top:5px}.accountactions{display:flex;gap:10px;flex-wrap:wrap}.accountactions button{font-size:11px;padding:4px 7px;background:#f0edfa}.readonlyhide{display:none!important}#resetDialog{max-width:480px}@media(max-width:800px){header{flex-wrap:wrap}header nav{order:3;overflow:auto;justify-content:start;width:100%}nav button{white-space:nowrap}.headeractions{margin-left:auto}.brandwithlogo img{width:54px;height:54px}.brandwithlogo{gap:8px}} /* NX login: empty fields, original brand, restrained glass surface */ .login{min-height:100dvh;padding:36px 20px;background:radial-gradient(ellipse at 75% 15%,#9577f013,transparent 48%),radial-gradient(ellipse at 15% 90%,#3d63f509,transparent 50%)} .login .card{width:420px;max-width:100%;padding:38px 36px 25px;border-radius:24px;background:linear-gradient(145deg,#ffffffef,#ffffffbf);border:1px solid #fff;box-shadow:0 24px 80px #343d660b,0 2px 8px #343d6605} .loginbrand{display:flex;flex-direction:column;align-items:center;gap:13px}.login .loginlogo{width:94px;height:94px;margin:0;border-radius:20px;box-shadow:0 8px 24px #161a281c}.loginbrand .eyebrow{letter-spacing:.26em;color:#8891a7;font-size:10px} .login h1{text-align:center;font-size:27px;font-weight:750;letter-spacing:-.025em;margin:12px 0 10px;white-space:nowrap}.loginaccent{width:32px;height:3px;background:var(--purple);border-radius:3px;margin:0 auto 30px} .login label{display:block;margin:18px 0 7px;font-size:12px;color:#525c72;font-weight:550}.login input{display:block;width:100%;height:46px;margin:0;padding:10px 13px;background:#ffffffb8;border:1px solid #dfe4f1;border-radius:11px;transition:border-color .2s,box-shadow .2s}.login input:focus{outline:none;border-color:#9577f0;box-shadow:0 0 0 3px #9577f014} .login .primary{display:flex;align-items:center;justify-content:center;gap:16px;height:46px;margin:26px 0 0;border-radius:12px;font-size:14px}.login .primary span{font-size:18px;font-weight:400}.login #loginError:empty{display:none}.login #loginError{margin:12px 0 0}.loginfoot{text-align:center;font-size:10px;letter-spacing:.12em;color:#9ca5b8;margin-top:25px;padding-top:17px;border-top:1px solid #edf0f6}@media(max-width:430px){.login .card{padding:30px 26px 22px}.login h1{font-size:24px}} /* Order funnel diagnostics */ .funnelKpis{grid-template-columns:repeat(5,1fr)}.funnelFocus{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.funnelFocus article{border:1px solid var(--border);border-radius:13px;padding:15px;background:#fff}.funnelFocus article.loss{border-top:3px solid #c86c79}.funnelFocus article.wait{border-top:3px solid #d9b832}.funnelFocus b{font-size:24px}.funnelFocus strong{display:block;margin:3px 0 5px}.funnelFocus p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}.flowSteps{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.flowstep{padding:12px;border-radius:11px;background:#f4f3fa;border:1px solid #ece9f4}.flowstep.alert{background:#fcf2f2;border-color:#f3e1e2}.flowstep.wait{background:#fffbed;border-color:#f2eccf}.flowstep b{display:block;font-size:22px}.flowstep span{font-size:11px;color:var(--muted)}.flowstep em{font-style:normal;font-size:10px;color:#746a86;display:block;margin-top:3px}.funnelPhotoTime{padding:10px 13px;border-radius:10px;background:#f3f1fa;margin-top:12px;font-size:12px}.funnelPhotoTime b{font-size:20px;margin-right:6px}.funnelLimits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.funnelLimits div{background:#f5f4f8;border-radius:10px;padding:12px;font-size:11px;line-height:1.65}.funnelLimits b{display:block;margin-bottom:4px;color:#51416f}.modelLossRow{display:flex;justify-content:space-between;padding:8px 3px;border-bottom:1px solid var(--border);font-size:12px}.modelLossRow b{font-variant-numeric:tabular-nums}.funnelKpis .kpi:first-child{background:linear-gradient(135deg,#252c41,var(--dark))}@media(max-width:1050px){.funnelKpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.funnelFocus,.funnelLimits{grid-template-columns:1fr}.flowSteps{grid-template-columns:1fr 1fr}.funnelKpis{grid-template-columns:repeat(2,1fr)}} .twocol.single{grid-template-columns:1fr} /* Fixed left navigation for the operations center */ @media(min-width:1101px){ #workspace{min-height:100vh} .appHeader{position:fixed;inset:0 auto 0 0;width:236px;height:100vh;z-index:50;padding:24px 16px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px;border-right:1px solid #e2e6f1;background:linear-gradient(180deg,#f7f8ff 0%,#eef1fb 100%);box-shadow:8px 0 30px #252d4210} .appHeader .brandwithlogo{padding:3px 8px 20px;border-bottom:1px solid #e3e6f0} .appHeader .brandwithlogo img{width:48px;height:48px;border-radius:12px} .appHeader .brandwithlogo div{font-size:16px;letter-spacing:.06em} .appHeader .brandwithlogo div span{font-size:10px;letter-spacing:.12em} .appHeader nav{display:flex;flex:1;min-height:0;overflow-y:auto;flex-direction:column;align-items:stretch;gap:7px;width:100%;background:transparent;padding:0 2px 0 0;border-radius:0} .appHeader nav .nav{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;align-items:center;justify-items:start;gap:0 10px;width:100%;min-height:48px;padding:10px 12px;border-radius:12px;background:transparent;color:#69738c;text-align:left;font-size:13px} .appHeader nav .nav:hover{background:#e8ebf6;color:#252b3e} .appHeader nav .nav.active{background:#191d2b;color:#fff;box-shadow:0 5px 14px #191d2b20} .appHeader nav .funnelNav:not(.active){background:#f1edff;color:#6045a8;border:1px solid #e3dafa} .appHeader nav .funnelNav.active{background:linear-gradient(135deg,#29223d,#181b2a)} .appHeader nav .navIcon{grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:24px;height:24px;font-size:19px;font-weight:700;color:#8b71d7} .appHeader nav .nav.active .navIcon{color:#d8ee43} .appHeader nav .funnelIcon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .appHeader nav .nav>span:not(.navIcon){grid-column:2;grid-row:1} .appHeader nav .funnelNav small{grid-column:2;grid-row:2;font-size:10px;opacity:.76;margin-top:2px} .appHeader .headeractions{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;padding-top:16px;border-top:1px solid #e3e6f0} .appHeader .headeractions #currentUser{padding:0 5px 8px} .appHeader .headeractions button{width:100%;text-align:left} main{margin-left:236px;width:calc(100% - 236px);padding-left:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px)} } @media(max-width:1100px){.appHeader nav .funnelNav small{display:none}.appHeader nav .nav{display:inline-flex;align-items:center;gap:6px}.appHeader nav .navIcon{display:inline-grid;width:18px;height:18px;font-size:15px}.appHeader nav .funnelIcon svg{width:17px;height:17px}} .executiveHero{padding:clamp(18px,2.2vw,30px)}.executiveHero>.muted{max-width:900px}.executiveHero .sectionhead:not(:first-child){margin-top:30px}.executiveHero .kpis{grid-template-columns:repeat(7,minmax(0,1fr));margin:20px 0}.executiveHero .kpi{min-width:0}.executiveHero .kpi .number{font-size:clamp(24px,2vw,34px)}.executiveTotal{display:flex;align-items:baseline;gap:14px;padding:15px 18px;border-radius:14px 14px 0 0;background:linear-gradient(115deg,#20263a,#353458);color:white}.executiveTotal span{font-size:13px;font-weight:650}.executiveTotal b{font-size:32px}.executiveTotal small{margin-left:auto;color:#c4c8d8;font-size:11px}.statusSegments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px;border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;background:#fafaff}.statusSegment{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 4px auto;align-items:center;gap:6px 12px;padding:12px 13px;text-align:left;border:1px solid #e9e8f2;background:white;border-radius:11px;color:var(--ink)}.statusSegment:hover{border-color:#c9bee8;background:#fbfaff}.statusSegment>span{font-size:12px;font-weight:650}.statusSegment>b{font-size:20px}.statusSegment>small{grid-column:1/-1;color:var(--muted);font-size:10px}.statusSegment>span i{display:block;width:100%;height:4px;background:linear-gradient(90deg,#9276d9 var(--share),#eceaf3 var(--share));border-radius:5px;margin-top:7px}.statusSegment:nth-child(2)>span i,.statusSegment:nth-child(3)>span i{background:linear-gradient(90deg,#d77c85 var(--share),#f1e8ed var(--share))}.executiveNote{margin-top:12px;padding:11px 14px;border-radius:10px;background:#f4f2fb;color:#574d70;font-size:12px;font-weight:700}.executiveNote span{font-weight:450;color:var(--muted);margin-left:7px}.overviewQuoteMetric{display:flex;align-items:baseline;gap:10px;margin-top:12px}.overviewQuoteMetric b{font-size:32px}.overviewQuoteMetric span{font-size:12px;color:var(--muted)}.tabpage>.sectionhead{margin-bottom:16px}.tabpage>.muted{line-height:1.7}.tabpage .funnelKpis{grid-template-columns:repeat(5,minmax(0,1fr))}.tabpage .funnelKpis .kpi{min-width:0}@media(max-width:1100px){.executiveHero .kpis,.tabpage .funnelKpis{grid-template-columns:repeat(3,minmax(0,1fr))}.executiveTotal{flex-wrap:wrap}.executiveTotal small{width:100%;margin-left:0}}@media(max-width:700px){.executiveHero .kpis,.tabpage .funnelKpis{grid-template-columns:repeat(2,minmax(0,1fr))}.statusSegments{grid-template-columns:1fr 1fr}.executiveNote span{display:block;margin:5px 0 0}.statusSegment{padding:10px}.statusSegment>b{font-size:17px}} @media(min-width:1101px){.tabpage#onsite #onsiteKpis,.tabpage#mail #mailKpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.tabpage#onsite #onsiteKpis,.tabpage#mail #mailKpis{grid-template-columns:repeat(2,minmax(0,1fr))}} .quoteOrderBridge{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,.9fr) minmax(180px,1fr);align-items:center;gap:16px;margin:8px 0 22px}.stageBox{min-height:108px;display:flex;flex-direction:column;justify-content:center;padding:16px 20px;border-radius:14px;background:linear-gradient(130deg,#242a3d,#353551);color:white;box-shadow:0 10px 24px #252b4212}.stageBox small{font-size:10px;letter-spacing:.12em;color:#c6c9d8}.stageBox b{font-size:32px;line-height:1.2;margin:5px 0}.stageBox span{font-size:11px;color:#d3d5e0}.orderStage{background:linear-gradient(130deg,#6a4caf,#8f70d0)}.bridgeGap{text-align:center;color:#947b56;padding:10px 5px;border-top:1px dashed #c4b59c;border-bottom:1px dashed #c4b59c}.bridgeGap b{display:block;font-size:12px;margin-bottom:4px}.bridgeGap span{font-size:10px;line-height:1.55;color:#7c7182}@media(max-width:700px){.quoteOrderBridge{grid-template-columns:1fr;gap:9px}.stageBox{min-height:84px}.bridgeGap{border:1px dashed #c4b59c;border-radius:10px}} /* Left navigation and the approved NX brand palette */ @media(min-width:1101px){ .appHeader{width:280px;padding:26px 16px 18px;gap:20px;background:linear-gradient(180deg,#1b1d2b 0%,#242537 100%);border-right:1px solid #161824;box-shadow:8px 0 30px #1b203012} .appHeader .brandwithlogo{padding:3px 8px 20px;border-color:#ffffff1c;color:#fff} .appHeader .brandwithlogo div{color:#f7f7fb} .appHeader .brandwithlogo div span{color:#a9aec2} .appHeader nav{gap:5px;padding-right:1px} .appHeader nav .navGroupLabel{padding:6px 12px 2px;color:#767d98;font-size:10px;font-weight:750;letter-spacing:.18em} .appHeader nav .navGroupLabel.navLower{margin-top:10px;padding-top:14px;border-top:1px solid #ffffff18} .appHeader nav .nav{min-height:45px;color:#d8dbea} .appHeader nav .nav:hover{background:#ffffff12;color:#fff} .appHeader nav .nav.active{background:#d6ef42;color:#1c2030;box-shadow:0 5px 14px #0f111b50} .appHeader nav .navIcon{color:#a99ae0} .appHeader nav .nav.active .navIcon{color:#25283a} .appHeader nav .funnelNav:not(.active){background:#ffffff0b;color:#eeeafa;border:1px solid #ffffff12} .appHeader nav .funnelNav.active{background:#d6ef42;color:#1c2030} .appHeader nav .funnelNav.active .funnelIcon svg{stroke:#25283a} .appHeader .headeractions{border-color:#ffffff1c} .appHeader .headeractions #currentUser{color:#b9bfd2} .appHeader .headeractions button{background:#ffffff0e;border-color:#ffffff1b;color:#eef0f7} .appHeader .headeractions button:hover{background:#ffffff19} main{margin-left:280px;width:calc(100% - 280px)} } @media(max-width:1100px){.appHeader nav .navGroupLabel{display:none}} .executiveTotal{background:linear-gradient(115deg,#1b1d2b,#35304c)}.executiveTotal b{color:#d6ef42} .statusSegment:first-child>span i{background:linear-gradient(90deg,#d6ef42 var(--share),#eceaf3 var(--share))} .statusSegment:nth-child(2)>span i,.statusSegment:nth-child(3)>span i{background:linear-gradient(90deg,#d17a83 var(--share),#f1e8ed var(--share))} .statusSegment:nth-child(4)>span i,.statusSegment:nth-child(5)>span i,.statusSegment:nth-child(6)>span i{background:linear-gradient(90deg,#d8ba49 var(--share),#f2edda var(--share))} .statusSegment:nth-child(n+7)>span i{background:linear-gradient(90deg,#8d78d1 var(--share),#eeeaf6 var(--share))} #qualityDetails tr.returnRow{background:#fff9ed} .funnelScaleNote{margin:4px 0 12px;padding:9px 12px;border-radius:9px;background:#f5f2fb;color:#716587;font-size:11px} .conversionFunnel{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 0 8px} .conversionStage{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;width:var(--stage-width);min-height:64px;padding:10px 28px;color:#fff;background:linear-gradient(100deg,#262a3b,#3c3653);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);border-radius:0;text-align:center;transition:filter .2s,transform .2s} .conversionStage:hover{filter:brightness(1.08);transform:translateY(-1px)} .conversionStage .stageIndex{font-size:10px;letter-spacing:.1em;color:#e2e8a1} .conversionStage .stageContent{text-align:left;min-width:130px} .conversionStage .stageContent b{display:block;font-size:13px;line-height:1.3} .conversionStage .stageContent small{display:block;margin-top:3px;color:#e2e0ed;font-size:10px} .conversionStage strong{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap} .conversionStage .stageChevron{font-style:normal;font-size:21px;color:#d6ef42} .conversionStage.stageTone1{background:linear-gradient(100deg,#6d50a5,#9275c7)} .conversionStage.stageTone0{background:linear-gradient(100deg,#343a50,#4b526d);color:#fff} .conversionStage.stageTone0 .stageContent small{color:#e1e5f1} .conversionStage.stageTone2{background:linear-gradient(100deg,#4d58c8,#7777d1)} .conversionStage.stageTone3{background:linear-gradient(100deg,#554778,#7a68a1)} .conversionStage.stageTone4{background:linear-gradient(100deg,#282b3a,#51455e)} .funnelSplitActions{display:flex;justify-content:center;gap:10px;margin:8px 0 16px} .funnelSplitActions button{padding:7px 12px;border:1px solid #e5e0ef;background:#f8f6fc;color:#68528f;font-size:11px} .funnelSplitActions button:hover{background:#eee9f8} .overviewStatusHead{margin-top:30px} #qualityKpis{grid-template-columns:repeat(5,minmax(0,1fr))} @media(max-width:900px){#qualityKpis{grid-template-columns:repeat(3,minmax(0,1fr))}.conversionStage .stageContent{min-width:100px}} @media(max-width:700px){#qualityKpis{grid-template-columns:repeat(2,minmax(0,1fr))}.conversionStage{width:100%!important;min-height:58px;gap:9px;padding:8px 18px}.conversionStage .stageContent{min-width:0;flex:1}.conversionStage strong{font-size:15px}.funnelSplitActions{flex-wrap:wrap}} .businessSwitch{display:flex;gap:6px;flex-wrap:wrap;padding:4px;background:#f0eff8;border:1px solid var(--border);border-radius:12px}.businessSwitch button{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:9px;font:inherit;font-size:12px;cursor:pointer}.businessSwitch button.selected{background:#d6ef42;color:#20263a;font-weight:750;box-shadow:0 2px 8px #2222}.businessSwitch button:hover:not(.selected){background:#fff;color:var(--ink)}#orderDetailTable td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6653a8;font-size:11px;white-space:nowrap}#orderDetailTable td:nth-child(7){font-variant-numeric:tabular-nums;white-space:nowrap}@media(max-width:800px){.executiveHero .sectionhead:has(#overviewBusinessTabs){align-items:flex-start;flex-direction:column}.businessSwitch{width:100%}.businessSwitch button{flex:1;padding:8px 6px}} .overviewFunnelControls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.overviewFunnelControls .businessSwitch{margin:0}.funnelNote{margin-top:10px;padding:10px 13px;border-radius:10px;background:#f3f1fa;color:#6c6382;font-size:11px} /* Daily operating calendar */ .calendarDow,.calendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendarDow{margin:10px 0 6px}.calendarDow span{padding:0 9px;color:var(--muted);font-size:10px}.calendarGrid{align-items:stretch}.calendarDay.gray{opacity:.55;background:#f6f7fa}.calendarDay.gray b{font-weight:400}.calendarDay{width:100%;min-height:132px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:12px;text-align:left;display:flex;flex-direction:column;gap:5px;color:var(--ink)}.calendarDay:hover,.calendarDay.selected{border-color:var(--purple);box-shadow:0 0 0 2px #9577f018}.calendarDay>strong{font-size:11px;border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:2px}.calendarDay>span{display:flex;justify-content:space-between;gap:5px;font-size:10px;line-height:1.35}.calendarDay i{font-style:normal;color:var(--muted)}.calendarDay b{font-size:11px;font-variant-numeric:tabular-nums}.calendarDay .dayRate b{color:#654ab9;font-size:12px}.calendarDay .dayTrade b{color:#3d63f5}.calendarBlank{min-height:1px}.dayDetail{margin-top:12px;padding:12px 14px;background:#f4f3fa;border-radius:11px;font-size:11px}.dayDetailHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.dayDetailHead button{padding:3px 8px;background:transparent;color:#7056be}.dayDetailRows{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:5px 14px}.dayDetailRows>div{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;padding:7px 0;border-bottom:1px solid var(--border)}.dayDetailRows strong{min-width:135px}.dayDetailRows span{color:#59627a}.dayDetail.muted{color:var(--muted)}@media(max-width:900px){.calendarGrid,.calendarDow{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.calendarGrid,.calendarDow{grid-template-columns:repeat(2,minmax(0,1fr))}.calendarDay{min-height:120px}} .calendarMonthNav{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:6px 10px;background:var(--surface-2,#f5f7fa);border:1px solid rgba(0,0,0,.06);border-radius:10px} .calendarMonthNav b{font-size:14px;letter-spacing:.4px} .calendarMonthNav .calNavBtn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:8px;padding:3px 10px;font-size:12px;cursor:pointer;color:inherit} .calendarMonthNav .calNavBtn:hover:not([disabled]){border-color:var(--accent,#2b6cb0);color:var(--accent,#2b6cb0)} .calendarMonthNav .calNavBtn[disabled]{opacity:.4;cursor:not-allowed} .calendarMonthNav .calNavHint{margin-left:auto;color:var(--muted);font-size:11px} /* 严审与风险单：上门漏斗卡片内的下半段 */ .strictHead{margin-top:20px;padding-top:16px;border-top:1px solid #eceef3} .strictHead h3{margin:0;font-size:15px;letter-spacing:0} .strictBody{margin-top:10px} .strictRemark{max-width:320px;white-space:normal;line-height:1.45;color:#4a4f57} /* 总览 + 漏斗 左右两栏 */ .heroSplit{grid-template-columns:1fr 1.35fr} .heroSplit .kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0} @media(max-width:1100px){.heroSplit{grid-template-columns:1fr}} @media(max-width:800px){.heroSplit .kpis{grid-template-columns:repeat(2,1fr)}} /* 订单编号列：省掉固定字母前缀、等宽小字、点击复制完整单号 */ .noCell{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:11px;font-weight:500;color:#5b6172;letter-spacing:-.2px;white-space:nowrap;cursor:pointer;border-radius:5px;transition:background .15s,color .15s} .noCell:hover{background:#eeecfb;color:#4d43c8} .noCell:focus-visible{outline:2px solid #6f63e8;outline-offset:1px} .noCell.none{color:#b7bcc9;cursor:default;font-family:inherit;font-size:12px;letter-spacing:0} .noCell.none:hover{background:none;color:#b7bcc9} .noCell.copied{background:#e6f6ec;color:#1a7a45} .noCell.copied:after{content:"已复制";margin-left:6px;font-size:9.5px;font-weight:600;letter-spacing:0} .noCell.copyfail{background:#fdecec;color:#b3261e} .noCell.copyfail:after{content:"复制失败";margin-left:6px;font-size:9.5px;font-weight:600;letter-spacing:0} /* 漏斗：转化率直接标在条右侧 */ .stageRow{display:flex;align-items:center;gap:12px;width:100%} .stageRow .conversionStage{flex:0 0 auto} .stageRate{margin-left:auto;align-self:center;font-weight:700;font-size:16px;color:#333a4d;min-width:74px;text-align:right;white-space:nowrap} .stageRate small{font-weight:500;font-size:11px;color:#8a90a0;margin-left:3px} .heroSplit .kpis{height:100%;align-content:space-evenly} .heroSplit .kpi .number{white-space:nowrap;overflow-wrap:normal} .statusSegmentsSolo{border-top:1px solid var(--border);border-radius:14px;margin-top:10px} /* KPI 数字防截断 */ .kpi .number{font-size:clamp(22px,1.5vw,29px);letter-spacing:-0.5px;overflow-wrap:anywhere} .heroSplit .kpi{padding:15px 16px} .heroSplit .kpi .number{font-size:clamp(19px,1.25vw,25px)} .heroSplit .kpi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 三个主指标：收机量 / 成交率 / 回收额 */ .heroSplit .kpiKey{border-color:#d9d4fb;background:#fdfcff} .heroSplit .kpiKey .label{font-size:12.5px;font-weight:600;color:#4a4f63} .heroSplit .kpiKey .number{font-size:clamp(22px,1.6vw,30px);color:#22263a;letter-spacing:-0.5px} .heroSplit .kpiKey .label:before{background:#6f63e8;height:14px;width:5px} /* 明细表分页条 */ .pagerBar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;font-size:12.5px;color:#6a7186} .pagerBar button{padding:6px 14px;font-size:12.5px} .pagerBar button:disabled{opacity:.45;cursor:not-allowed} /* ===== 深色玻璃拟态主题（追加段） ===== */ /* ============================================================ NX 运营数据中心 · 深色玻璃拟态主题（覆盖层） 用法：放在 style.css 之后加载（追加到文件末尾或单独引入均可） 只改视觉，不动结构、不动业务逻辑 ============================================================ */ /* ---------- 1. 色板 ---------- */ :root{ --bg:#070c14; --dark:#0b111c; --ink:#e9f0fa; --muted:#93a3bb; --lime:#ff7a34; /* 原强调色 → 橙 */ --purple:#ff8a3d; /* 原辅助色 → 橙 */ --blue:#6ea8ff; /* 图表/链接 → 亮蓝 */ --border:rgba(255,255,255,.12); --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.10); --edge:rgba(255,255,255,.13); } /* ---------- 2. 底色与氛围光 ---------- */ html{background:#05080e} body{ color:var(--ink); background: radial-gradient(1100px 620px at 16% -8%, #1b3350 0%, transparent 58%), radial-gradient(900px 560px at 88% 6%, #233a52 0%, transparent 60%), radial-gradient(1200px 700px at 50% 108%, #0b2233 0%, transparent 62%), linear-gradient(168deg,#070c14 0%,#060a11 45%,#04070c 100%); } body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(680px 320px at 62% 42%, rgba(120,170,220,.10), transparent 70%), radial-gradient(520px 240px at 22% 74%, rgba(80,140,190,.08), transparent 72%); filter:blur(6px); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px); -webkit-mask-image:radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 100%); mask-image:radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 100%); } ::selection{background:rgba(255,110,45,.35);color:#fff} /* ---------- 3. 文字层级 ---------- */ h1,h2,h3,h4,h5{color:#f2f7ff} h1{color:#f4f8ff} p{color:#c3cfe0} .eyebrow{color:#8b9bb4;letter-spacing:.16em} .muted{color:var(--muted)} .heading p,.freshness{color:var(--muted)} .live{background:rgba(255,120,60,.16);color:#ffc9ab;border:1px solid rgba(255,150,90,.28)} a{color:#8fbcff} a:hover{color:#bcd8ff} button:focus-visible,a:focus-visible{outline:3px solid rgba(255,140,80,.55);outline-offset:3px} .error{color:#ff8a97!important} /* ---------- 4. 左侧导航 ---------- */ .appHeader{ background:linear-gradient(180deg, rgba(18,23,35,.94) 0%, rgba(10,14,22,.94) 100%)!important; border-right:1px solid rgba(255,255,255,.13)!important; box-shadow:10px 0 34px rgba(0,0,0,.5)!important; backdrop-filter:blur(22px) saturate(125%); } .appHeader .brandwithlogo{border-bottom:1px solid rgba(255,255,255,.13)!important} .appHeader .brandwithlogo img{background:#0a0d14;box-shadow:0 4px 14px rgba(0,0,0,.5)} .appHeader .brandwithlogo div{color:#f7f9fd} .appHeader .brandwithlogo div span{color:#96a3b8} .appHeader nav .navGroupLabel{color:#78849c} .appHeader nav .navGroupLabel.navLower{border-top:1px solid rgba(255,255,255,.12)} .appHeader nav .nav{color:#cfd8e7} .appHeader nav .nav:hover{background:rgba(255,255,255,.08);color:#fff} .appHeader nav .nav.active{ background:linear-gradient(160deg,#ff8f43,#ef4c10)!important; color:#fff!important;font-weight:650; box-shadow:0 6px 18px rgba(255,80,20,.42), 0 1px 0 rgba(255,255,255,.25) inset!important; } .appHeader nav .navIcon{color:#adbcd2} .appHeader nav .nav.active .navIcon{color:#fff} .appHeader nav .funnelNav:not(.active){background:rgba(255,255,255,.06);color:#e7eaf3;border:1px solid rgba(255,255,255,.12)} .appHeader nav .funnelNav.active{background:linear-gradient(160deg,#ff8f43,#ef4c10)!important;color:#fff!important} .appHeader nav .funnelNav.active .funnelIcon svg{stroke:#fff} .appHeader .headeractions{border-top:1px solid rgba(255,255,255,.13)} .appHeader .headeractions #currentUser{color:#aab6c9} .appHeader .headeractions button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:#e9f0fa} .appHeader .headeractions button:hover{background:rgba(255,255,255,.13);color:#fff} /* ---------- 5. 卡片：玻璃 ---------- */ .card,.rankcard,.kpi,.flowstep,.statusSegment,.funnelFocus article,.funnelLimits div,.calendarDay{ background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.030) 55%, rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.13); box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 18px 42px -20px rgba(0,0,0,.75); backdrop-filter:blur(18px) saturate(120%); } .card:hover{border-color:rgba(255,255,255,.20)} /* ---------- 6. 按钮 ---------- */ button{background:rgba(255,255,255,.075);color:#e6edf8;border:1px solid rgba(255,255,255,.13)} button:hover{background:rgba(255,255,255,.14)} button:disabled{opacity:.45} .outline{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);color:#e9f0fa} .outline:hover{background:rgba(255,255,255,.14)} .primary{ background:linear-gradient(160deg,#ff8f43,#ef4c10)!important;color:#fff!important;font-weight:650; border:0;box-shadow:0 8px 20px rgba(255,80,20,.35), 0 1px 0 rgba(255,255,255,.3) inset; } .primary:hover{filter:brightness(1.08)} .primary span{color:#fff} /* ---------- 7. 表单 ---------- */ input,select{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#eaf1fa; color-scheme:dark; } input:focus,select:focus{outline:none;border-color:rgba(255,150,90,.6);box-shadow:0 0 0 3px rgba(255,120,50,.14)} input::placeholder{color:#7b8ba3} option{background:#121a27;color:#e9f0fa} /* ---------- 8. 筛选条 ---------- */ .filterline{border-top:1px solid rgba(255,255,255,.10)} .channels button{color:#b9c6d8} .channels button:hover{background:rgba(255,255,255,.08);color:#fff} .channels button.active,.channels button.selected{ background:linear-gradient(160deg,#ff8f43,#ef4c10)!important;color:#fff!important;font-weight:650; box-shadow:0 5px 14px rgba(255,80,20,.35); } .periods,.segments{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} .periods button,.segments button{color:#b9c6d8} .periods button:hover,.segments button:hover{color:#fff} .periods .selected,.segments .selected{background:rgba(255,255,255,.15);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)} .daterange button{background:rgba(255,255,255,.08)} .notice:empty{display:none} .notice{background:rgba(120,160,215,.10);border:1px solid rgba(140,180,230,.22);color:#b9cde6} .notice.warn{background:rgba(255,180,80,.10);border-color:rgba(255,190,110,.28);color:#ffd9a8} /* ---------- 9. KPI ---------- */ .kpi{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)} .kpi:first-child{ background:rgba(255,255,255,.045)!important; border-color:rgba(255,255,255,.12)!important;color:#e9f0fa; } .kpi .label{color:#b7c4d6} .kpi .label:before{background:#ff8a3d} .kpi:first-child .label{color:#b7c4d6} .kpi:first-child .label:before{background:#ff8a3d} .number{color:#fff} .kpi small{color:#8f9db2} .kpi:first-child small{color:#8f9db2} .pill{background:rgba(255,255,255,.08);color:#c3d0e0;border:1px solid rgba(255,255,255,.12)} /* ---------- 10. 表格 ---------- */ th{background:rgba(255,255,255,.045);color:#9fb0c6;border-bottom:1px solid rgba(255,255,255,.10)} th,td{border-bottom:1px solid rgba(255,255,255,.07)} td{color:#dde6f3} tbody tr:hover{background:rgba(255,255,255,.055)} td button{color:#ffb07a} td button:hover{color:#ffc9a8} .tablewrap{overflow:auto} .tablewrap::-webkit-scrollbar{width:9px;height:9px} .tablewrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px} .tablewrap::-webkit-scrollbar-track{background:transparent} .emptytable{color:var(--muted)} #orderDetailTable td:first-child{color:#ffc08a} #qualityDetails tr.returnRow{background:rgba(255,180,80,.10)} /* ---------- 11. 图表 ---------- */ svg text{fill:#8fa0b8} svg .gridline{stroke:rgba(255,255,255,.10)} .barrow button{color:#d7e2f0} .barrow:hover .track{background:rgba(255,255,255,.11)} .track{background:rgba(255,255,255,.07)} .fill{background:linear-gradient(90deg,#ffb066,#ef5c0f)} .barrow:nth-child(2n) .fill{background:linear-gradient(90deg,#9dbcff,#5279f0)} .legend .dot.blue{background:#6ea8ff} .legend .dot.purple{background:#ff8a3d} polyline[stroke="#5579DB"]{stroke:#7fa8ff} circle[fill="#168F83"]{fill:#5fd8bd} polyline[stroke="#5579DB"]{filter:drop-shadow(0 2px 6px rgba(80,130,255,.35))} /* 价格带 / 榜单 */ .pricebar:hover{background:rgba(255,255,255,.06)} .pricebar i{background:linear-gradient(#9dbcff,#5279f0)} .pricebar.selected i{background:linear-gradient(#e6ff9e,#8fd63a)} .pricebar.selected span{color:#ffc9ab} .pricebar b{color:#dbe6f3} .pricebar span{color:#93a3bb} .pricecard aside{border-left:1px solid rgba(255,255,255,.12)} .rankbadge{background:rgba(255,255,255,.08);color:#c3cfdf} .rankbadge.top{background:linear-gradient(160deg,#ff9a4d,#ef5c12);color:#fff} /* ---------- 12. 经营总览 ---------- */ .executiveTotal{background:linear-gradient(115deg, rgba(255,120,50,.22), rgba(255,255,255,.05));color:#fff} .executiveTotal b{color:#ff9a4d} .executiveTotal small{color:#b9c6d8} .statusSegments{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)} .statusSegmentsSolo{border-top:1px solid rgba(255,255,255,.12)} .statusSegment{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#e9f0fa} .statusSegment:hover{border-color:rgba(255,150,90,.5);background:rgba(255,140,80,.12)} .statusSegment>small{color:#93a3bb} .statusSegment:first-child>span i{background:linear-gradient(90deg,#ff7a34 var(--share),rgba(255,255,255,.10) var(--share))} .statusSegment:nth-child(2)>span i,.statusSegment:nth-child(3)>span i{background:linear-gradient(90deg,#ff6b6b var(--share),rgba(255,255,255,.10) var(--share))} .statusSegment:nth-child(4)>span i,.statusSegment:nth-child(5)>span i,.statusSegment:nth-child(6)>span i{background:linear-gradient(90deg,#ffb648 var(--share),rgba(255,255,255,.10) var(--share))} .statusSegment:nth-child(n+7)>span i{background:linear-gradient(90deg,#6ea8ff var(--share),rgba(255,255,255,.10) var(--share))} .executiveNote{background:rgba(255,140,80,.10);color:#ffd0ae} .executiveNote span{color:#93a3bb} .overviewQuoteMetric span{color:var(--muted)} .heroSplit .kpi{padding:12px 11px} .heroSplit .kpi .label{font-size:11px;white-space:nowrap;gap:6px} .heroSplit .kpi .label:before{height:11px;width:3px} .heroSplit .kpi .number{font-size:clamp(18px,1.2vw,24px)} .heroSplit .kpiKey{border-color:rgba(255,150,90,.35);background:rgba(255,140,80,.09)} .heroSplit .kpiKey .label{color:#c7d3e3} .heroSplit .kpiKey .number{color:#fff} .heroSplit .kpiKey .label:before{background:#ff8a3d} /* ---------- 13. 漏斗 / 阶段 ---------- */ .conversionStage{ background:linear-gradient(100deg,#39404f,#4a5266); box-shadow:0 10px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.14) inset; } .conversionStage:hover{filter:brightness(1.12)} .conversionStage .stageIndex{color:rgba(255,255,255,.72)} .conversionStage .stageContent b{color:#fff} .conversionStage .stageContent small{color:rgba(255,255,255,.76)} .conversionStage .stageChevron{color:rgba(255,255,255,.85)} .conversionStage.stageTone0{background:linear-gradient(100deg,#39404f,#4a5266)} .conversionStage.stageTone1{background:linear-gradient(100deg,#8a5a18,#bb832a)} .conversionStage.stageTone2{background:linear-gradient(100deg,#b0631b,#d8852b)} .conversionStage.stageTone3{background:linear-gradient(100deg,#c9500f,#ef7c30)} .conversionStage.stageTone4{background:linear-gradient(100deg,#3c8a2b,#69b93b)} .conversionStage.stageTone4 .stageIndex, .conversionStage.stageTone4 .stageChevron{color:rgba(255,255,255,.9)} .stageRow .stageRate{color:#eef4fc} .stageRow .stageRate small{color:#93a3bb} .funnelSplitActions button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#cfd8e6} .funnelSplitActions button:hover{background:rgba(255,255,255,.13);color:#fff} .quoteOrderBridge .stageBox{background:linear-gradient(130deg, rgba(255,255,255,.08), rgba(255,255,255,.03));color:#fff} .stageBox small{color:#a9b6c9} .stageBox span{color:#c8d4e4} .stageBox.orderStage{background:linear-gradient(130deg, rgba(255,120,50,.34), rgba(255,90,30,.16))} .bridgeGap{color:#e8d6b6;border-top:1px dashed rgba(255,180,110,.35);border-bottom:1px dashed rgba(255,180,110,.35)} .bridgeGap span{color:#9aa7bb} /* ---------- 14. 履约 / 流失 / 严审 ---------- */ .flowstep{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-left-width:3px;border-left-color:rgba(255,255,255,.18)} .flowstep.alert{background:rgba(255,90,90,.07);border-color:rgba(255,255,255,.12);border-left-color:#ff6b6b} .flowstep.wait{background:rgba(255,180,80,.07);border-color:rgba(255,255,255,.12);border-left-color:#ffb648} .flowstep span{color:var(--muted)} .flowstep em{color:#b9c6d8} .funnelPhotoTime{background:rgba(255,255,255,.05);color:#dbe6f3} .funnelFocus article{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .funnelFocus article.loss{border-top:3px solid #ff7a7a} .funnelFocus article.wait{border-top:3px solid #ffb648} .funnelFocus p{color:var(--muted)} .funnelLimits div{background:rgba(255,255,255,.05)} .funnelLimits b{color:#ffc07a} .funnelNote,.funnelScaleNote{background:rgba(255,255,255,.05);color:#b6c4d6} .modelLossRow{border-bottom:1px solid rgba(255,255,255,.07)} .strictHead{border-top:1px solid rgba(255,255,255,.11)} .strictRemark{color:#b6c4d6} .businessSwitch{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .businessSwitch button{color:#a8b6ca} .businessSwitch button:hover:not(.selected){background:rgba(255,255,255,.10);color:#fff} .businessSwitch button.selected{ background:linear-gradient(160deg,#ff8f43,#ef4c10)!important;color:#fff!important;font-weight:650; box-shadow:0 4px 12px rgba(255,80,20,.35); } /* ---------- 15. 日历 ---------- */ .calendarDow span{color:var(--muted)} .calendarDay{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--ink)} .calendarDay.gray{background:rgba(255,255,255,.02)} .calendarDay:hover,.calendarDay.selected{border-color:rgba(255,150,90,.6);box-shadow:0 0 0 2px rgba(255,140,80,.16)} .calendarDay>strong{border-bottom:1px solid rgba(255,255,255,.10)} .calendarDay i{color:var(--muted)} .calendarDay .dayRate b{color:#ffc07a} .calendarDay .dayTrade b{color:#7ec8ff} .dayDetail{background:rgba(255,255,255,.05)} .dayDetailHead button{color:#ffb07a} .dayDetailRows>div{border-bottom:1px solid rgba(255,255,255,.07)} .dayDetailRows span{color:#b6c4d6} .calendarMonthNav{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .calendarMonthNav .calNavBtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#e9f0fa} .calendarMonthNav .calNavBtn:hover:not([disabled]){border-color:#ff9a4d;color:#ffc08a} .calendarMonthNav .calNavHint{color:var(--muted)} /* ---------- 16. 弹窗 / 提示 / 页脚 ---------- */ dialog{ background:linear-gradient(165deg, rgba(20,28,42,.98), rgba(11,16,26,.98)); border:1px solid rgba(255,255,255,.15); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.7); backdrop-filter:blur(24px); } dialog::backdrop{background:rgba(4,7,12,.66);backdrop-filter:blur(5px)} .dialoghead button{color:#cfd8e6} .exportOptions button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:#e9f0fa} .exportOptions button:hover{background:rgba(255,255,255,.13)} #toast{background:rgba(18,24,36,.95);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.6)} footer{color:#7d8da4;border-top:1px solid rgba(255,255,255,.08);margin-top:6px} .empty p,.empty h2{color:#cbd6e6} .storagegrid span{color:var(--muted)} .privacy{background:rgba(255,255,255,.05)} .privacy p{color:var(--muted)} .dropzone{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.22)} .dropzone:hover{background:rgba(255,140,80,.10);border-color:rgba(255,160,90,.5)} .dropzone b{color:#eef4fc} .uploadIcon{color:#ff9a4d} .accountactions button{background:rgba(255,255,255,.07);color:#e9f0fa} .pagerBar{color:#93a3bb} .pagerBar button{background:rgba(255,255,255,.07);color:#e9f0fa;border:1px solid rgba(255,255,255,.14)} .pagerBar button:hover:not(:disabled){background:rgba(255,255,255,.14)} /* ---------- 17. 登录页 ---------- */ .login{ background: radial-gradient(900px 520px at 75% 12%, rgba(255,120,50,.16), transparent 55%), radial-gradient(800px 500px at 20% 88%, rgba(80,140,200,.14), transparent 58%), linear-gradient(168deg,#070c14,#04070c); } .login .card{ background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.15); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 30px 80px rgba(0,0,0,.7); backdrop-filter:blur(24px) saturate(130%); } .login .loginlogo{background:#0a0d14;box-shadow:0 10px 26px rgba(0,0,0,.55)} .loginbrand .eyebrow{color:#9aa8bd} .login h1{color:#fff} .loginaccent{background:linear-gradient(90deg,#ff8f43,#ef4c10)} .login label{color:#aab7c9} .login input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#eaf1fa; } .login input:focus{border-color:rgba(255,150,90,.65);box-shadow:0 0 0 3px rgba(255,120,50,.16)} .loginfoot{color:#7d8da4;border-top:1px solid rgba(255,255,255,.10)} /* ---------- 18. 小屏兜底 ---------- */ @media (max-width:1100px){ .appHeader{ background:linear-gradient(180deg, rgba(16,21,32,.94), rgba(10,14,22,.94))!important; border-bottom:1px solid rgba(255,255,255,.13)!important; border-right:0!important; } } /* ---------- 19. 订单编号复制（.noCell，2026-10-22 新增） ---------- */ .noCell{color:#a9b8cc;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace} .noCell:hover{background:rgba(255,255,255,.10);color:#fff} .noCell:focus-visible{outline:2px solid rgba(255,150,90,.6);outline-offset:1px} .noCell.none{color:#6f7d92} .noCell.none:hover{background:none;color:#6f7d92} .noCell.copied{background:rgba(90,220,140,.16);color:#8ff0b4} .noCell.copied:after{color:#8ff0b4} .noCell.copyfail{background:rgba(255,90,90,.16);color:#ff9c9c} .noCell.copyfail:after{color:#ff9c9c} #orderDetailTable td:first-child .noCell{color:#ffc08a} /* ---------- 20. 经营全链路总览：KPI 网格节奏与对齐 ---------- */ .heroSplit{align-items:stretch} /* 漏斗内容在卡内垂直居中，避免卡片被拉高后底部空一块 */ #executiveFunnel{flex:1;display:flex;flex-direction:column;justify-content:center} .heroSplit .executiveHero{display:flex;flex-direction:column} .heroSplit .kpis{ height:auto;flex:1;min-height:0; grid-template-columns:repeat(6,minmax(0,1fr)); align-content:stretch; grid-auto-rows:minmax(84px,1fr); gap:12px; margin:18px 0 0; } .heroSplit .kpi{ display:flex;flex-direction:column;justify-content:flex-start;gap:0; min-height:0;padding:14px 13px; } .heroSplit .kpi .label{ display:block;font-size:11px;letter-spacing:-.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .heroSplit .kpi .label:before{ content:"";display:inline-block;vertical-align:-1px;margin-right:6px; height:11px;width:3px;border-radius:2px;background:#ff8a3d; } .heroSplit .kpi .number{ font-size:clamp(19px,1.3vw,26px);line-height:1.15;margin:7px 0 3px;letter-spacing:-.5px; } .heroSplit .kpi small{ display:block;font-size:10px;line-height:1.3; min-height:2.6em;white-space:normal;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word; } /* 三个主指标：收机量 / 成交率 / 回收额 —— 用橙色描边突出，不靠大色块 */ .heroSplit .kpiKey{ background:linear-gradient(150deg, rgba(255,122,52,.15), rgba(255,255,255,.05))!important; border-color:rgba(255,150,90,.40)!important; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 16px 34px -22px rgba(255,80,20,.6)!important; } .heroSplit .kpiKey .label{color:#ffc9a8;font-weight:650;font-size:11px} .heroSplit .kpiKey .label:before{background:#ffb066;height:12px} .heroSplit .kpiKey .number{color:#fff} .heroSplit .kpiKey small{color:#dcb9a2} /* ---------- 21. 修复：漏斗阶段宽度 + 右侧转化率列超出卡片，导致左边缘文字被裁 ---------- */ .stageRow{gap:8px} .stageRow .stageRate{min-width:56px;font-size:14px;color:#eef4fc} .stageRow .stageRate small{font-size:10px;margin-left:2px} .stageRow .conversionStage>.stageIndex{white-space:nowrap} /* ---------- 22. 窄屏（≤1300）KPI 标签降一档字号，保证七个字不截断 ---------- */ @media (max-width:1300px){ .heroSplit .kpi .label{font-size:10px;letter-spacing:-.3px} .heroSplit .kpi .number{font-size:clamp(17px,1.2vw,22px)} .heroSplit .kpi{padding:12px 10px} } /* 窄屏下漏斗阶段变窄，缩字号并隐藏 STAGE 序号，避免文字被裁 */ @media (max-width:1360px){ .stageRow .conversionStage{padding:9px 14px;gap:9px} .stageRow .conversionStage>.stageIndex{display:none} .stageRow .stageContent{min-width:74px} .stageRow .stageContent b{font-size:12px} .stageRow .stageContent small{font-size:9.5px} .stageRow .conversionStage strong{font-size:16px} .stageRow .stageChevron{font-size:16px} } /* ---------- 23. 铺满：11 个指标时末行两块各占 1.5 格，整行不留空位 ---------- */ .heroSplit .kpis>.kpi{grid-column:span 2} .heroSplit .kpis>.kpi:nth-child(10):nth-last-child(2), .heroSplit .kpis>.kpi:nth-child(11):last-child{grid-column:span 3} /* ============================================================ 24. 液态玻璃（liquid glass） 要点：玻璃要看得出是玻璃，必须同时具备四件事—— ① 面板背后有可折射的彩色光； ② 面板本身足够半透，让光渗进来； ③ 边缘有一道侧光（上亮下暗、左亮右暗）； ④ 表面有一道斜向镜面反光。 只把 backdrop-filter 调大、背后却是一片纯黑，结果永远是一块灰板。 ============================================================ */ /* ---------- 24.1 背景：极光调亮调近，玻璃才有东西可以折射 ---------- */ body{ background: radial-gradient(1120px 660px at 14% -12%, #101d2e 0%, transparent 58%), radial-gradient(900px 580px at 90% 2%, #131f30 0%, transparent 60%), radial-gradient(1220px 700px at 46% 112%, #081824 0%, transparent 62%), linear-gradient(168deg,#05080f 0%,#050810 45%,#03060a 100%); } body::before{ background: radial-gradient(720px 440px at 34% 16%, rgba(88,154,224,.30), transparent 64%), radial-gradient(600px 380px at 94% 46%, rgba(255,138,72,.18), transparent 66%), radial-gradient(660px 420px at 8% 78%, rgba(48,106,184,.24), transparent 68%), radial-gradient(520px 320px at 64% 98%, rgba(104,200,204,.10), transparent 70%); filter:blur(4px); } /* 斜纹底噪压淡，避免整体发灰 */ body::after{opacity:.10} /* ---------- 24.2 卡片：厚玻璃板 ---------- */ .card,.rankcard{ background: /* 面板内部铺三团极光：KPI 玻璃片透出来的颜色全来自这里， 范围要盖住整个内容区，否则下面几行的格子会掉回中性灰 */ radial-gradient(920px 640px at 24% 16%, rgba(96,158,232,.17), transparent 62%), radial-gradient(780px 540px at 88% 44%, rgba(64,140,214,.12), transparent 66%), radial-gradient(860px 560px at 50% 98%, rgba(56,150,186,.10), transparent 68%), /* 斜向镜面反光 */ linear-gradient(112deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.040) 14%, rgba(255,255,255,0) 30%), /* 底部内缘折光 */ linear-gradient(0deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 16%), /* 基础厚度 */ linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.026) 46%, rgba(255,255,255,.013) 74%, rgba(255,255,255,.045) 100%); border:1px solid rgba(255,255,255,.10); border-top-color:rgba(255,255,255,.26); border-left-color:rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.50), inset 0 2px 10px -6px rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.09), 0 36px 74px -34px rgba(0,0,0,.95), 0 0 70px rgba(104,158,220,.10); backdrop-filter:blur(26px) saturate(142%); -webkit-backdrop-filter:blur(26px) saturate(142%); } /* ---------- 24.3 KPI 格子：更薄的一片玻璃 ---------- */ .kpi{ background: /* 厚度：上亮下暗 */ linear-gradient(180deg, rgba(255,255,255,.100) 0%, rgba(255,255,255,.028) 40%, rgba(255,255,255,.012) 72%, rgba(255,255,255,.030) 100%), /* 斜向一道反光带：玻璃片「湿润」的关键 */ linear-gradient(115deg, transparent 16%, rgba(255,255,255,.075) 25%, rgba(255,255,255,.012) 34%, transparent 48%); border:1px solid rgba(255,255,255,.06); border-top-color:rgba(255,255,255,.30); border-left-color:rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), /* 顶缘高光丝 */ inset 0 9px 18px -14px rgba(255,255,255,.50), /* 顶缘柔光（有厚度，不是一根线） */ inset 1px 0 0 rgba(255,255,255,.10), /* 左缘侧光 */ inset 0 -1px 0 rgba(255,255,255,.06), /* 底缘折光 */ 0 16px 32px -24px rgba(0,0,0,.95); backdrop-filter:blur(16px) saturate(136%); -webkit-backdrop-filter:blur(16px) saturate(136%); } .kpi:first-child{ background: linear-gradient(180deg, rgba(255,255,255,.100) 0%, rgba(255,255,255,.028) 40%, rgba(255,255,255,.012) 72%, rgba(255,255,255,.030) 100%), linear-gradient(115deg, transparent 16%, rgba(255,255,255,.075) 25%, rgba(255,255,255,.012) 34%, transparent 48%)!important; border-color:rgba(255,255,255,.06)!important; border-top-color:rgba(255,255,255,.30)!important; border-left-color:rgba(255,255,255,.15)!important; } /* ---------- 24.4 主指标：琥珀玻璃，暖色只从左上角一束光来 ---------- */ .heroSplit .kpiKey{ background: /* 暖色高光只落在左上角一点点，不整块上色——整块上色就是一块青铜板 */ radial-gradient(66% 52% at 2% -14%, rgba(255,206,168,.26), transparent 64%), /* 同样的斜向反光带，偏暖一点点 */ linear-gradient(115deg, transparent 20%, rgba(255,220,190,.07) 30%, transparent 44%), /* 底色基本保持中性，只在顶/底压一丝琥珀，让背后蓝光透上来 */ linear-gradient(180deg, rgba(255,132,64,.10) 0%, rgba(255,140,72,.035) 44%, rgba(255,255,255,.010) 76%, rgba(255,150,80,.030) 100%)!important; border-color:rgba(255,255,255,.06)!important; border-top-color:rgba(255,208,170,.40)!important; border-left-color:rgba(255,190,152,.18)!important; box-shadow: inset 0 1px 0 rgba(255,240,220,.50), inset 0 9px 18px -14px rgba(255,190,150,.34), inset 1px 0 0 rgba(255,190,150,.10), inset 0 -1px 0 rgba(255,160,110,.08), 0 16px 34px -24px rgba(255,80,20,.38)!important; } /* ---------- 24.5 其它小块：跟主卡同一套光 ---------- */ .statusSegment,.calendarDay,.flowstep,.funnelFocus article,.funnelLimits div{ background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 60%, rgba(255,255,255,.030)); border-color:rgba(255,255,255,.09); border-top-color:rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 28px -22px rgba(0,0,0,.9); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); } /* ---------- 24.6 侧栏：竖玻璃板 ---------- */ .appHeader{ background: linear-gradient(105deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(20,27,41,.92) 0%, rgba(9,13,21,.95) 100%)!important; box-shadow: inset -1px 0 0 rgba(255,255,255,.10), inset 1px 0 0 rgba(255,255,255,.05), 10px 0 38px rgba(0,0,0,.55)!important; backdrop-filter:blur(28px) saturate(170%); -webkit-backdrop-filter:blur(28px) saturate(170%); } /* ---------- 24.7 表单与弹窗 ---------- */ input,select{ background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.040)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.05); backdrop-filter:blur(12px); } button{box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px -14px rgba(0,0,0,.9)} .primary,.channels button.active,.channels button.selected,.businessSwitch button.selected, .appHeader nav .nav.active,.appHeader nav .funnelNav.active{ box-shadow: inset 0 1px 0 rgba(255,215,190,.55), inset 0 -10px 18px -12px rgba(255,120,50,.45), 0 10px 26px -10px rgba(255,80,20,.65)!important; } dialog{ background: radial-gradient(120% 80% at 8% -20%, rgba(255,255,255,.10), transparent 56%), linear-gradient(165deg, rgba(24,32,48,.96), rgba(10,15,24,.97)); border:1px solid rgba(255,255,255,.16); border-top-color:rgba(255,255,255,.30); backdrop-filter:blur(32px) saturate(175%); } /* ---------- 24.8 滚动条：系统默认那条白杠在深色底上太刺眼 ---------- */ *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border:2px solid transparent; border-radius:8px; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box} ::-webkit-scrollbar-corner{background:transparent}