/* quanwang-agent / style.css  —  light theme */
:root{
  --bg:#F7F5EF; --panel:#FFFFFF; --panel-2:#FBF9F3;
  --ink:#22302B; --ink-2:#5C6B64; --ink-3:#93A099;
  --line:#E7E3D8; --line-2:#D8D3C5;
  --green:#1F6B4F; --green-2:#2E7D52; --green-soft:#E8F2EC;
  --gold:#C8862A; --gold-soft:#FBF1DE;
  --red:#C0392B; --red-soft:#FBEDEB;
  --blue:#3A6EA5; --blue-soft:#EAF1F9;
  --shadow:0 1px 2px rgba(30,50,40,.04),0 8px 24px rgba(30,50,40,.05);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D9D5C9;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;min-height:100vh}
/* ---------- sidebar ---------- */
.sidebar{width:224px;flex:0 0 224px;background:#FFFFFF;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid var(--line)}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,var(--green),#3E9470);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.brand-t{font-weight:700;font-size:15px;letter-spacing:.3px;line-height:1.25}
.brand-s{font-size:11px;color:var(--ink-3);letter-spacing:.5px}
.nav{padding:12px 10px;flex:1;overflow:auto}
.nav-label{font-size:11px;color:var(--ink-3);padding:10px 10px 6px;letter-spacing:1px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;margin:2px 0;border:0;background:transparent;border-radius:9px;cursor:pointer;text-align:left;color:var(--ink-2);font-size:13.5px;transition:.15s}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.on{background:var(--green-soft);color:var(--green);font-weight:600}
.nav-item .ico{width:18px;text-align:center;font-size:15px}
.nav-item .cnt{margin-left:auto;font-size:11px;background:#EDEAE1;color:var(--ink-2);padding:1px 7px;border-radius:20px}
.nav-item.on .cnt{background:#D3E7DB;color:var(--green)}
.side-foot{padding:12px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.side-foot b{color:var(--green-2);font-weight:600}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:62px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:16px;margin:0;font-weight:700}
.topbar .sub{font-size:12px;color:var(--ink-3)}
.topbar .spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border-radius:20px;background:var(--green-soft);color:var(--green);font-weight:600}
.pill.warn{background:var(--gold-soft);color:#9A661B}
.content{padding:22px 26px 48px;max-width:1440px;width:100%}
.view{display:none;animation:fade .22s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.card h2{font-size:15px;margin:0 0 4px;font-weight:700}
.card h3{font-size:13.5px;margin:18px 0 8px;font-weight:700}
.card .desc{font-size:12.5px;color:var(--ink-2);margin:0 0 14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:1px solid var(--line-2);background:#fff;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:#185A42;color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:#AC7121;color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{color:var(--red);border-color:#EBC9C4}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=number],input[type=url],select,textarea{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:8px 11px;outline:none;width:100%;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,107,79,.09)}
textarea{resize:vertical;min-height:90px;line-height:1.65}
label.fld{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px;font-weight:600}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.banner{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:12.5px;line-height:1.65}
.banner.gold{background:var(--gold-soft);border:1px solid #EFDCB7;color:#7A571C}
.banner.green{background:var(--green-soft);border:1px solid #CFE5D8;color:#1D5C44}
.banner .bico{font-size:16px;line-height:1.3}
.banner b{font-weight:700}
.divider{height:1px;background:var(--line);margin:16px 0}

/* ---------- stats ---------- */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.stat .v{font-size:27px;font-weight:750;letter-spacing:-.5px;margin-top:4px;line-height:1.2}
.stat .d{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.stat.accent .v{color:var(--green)}
.stat.gold .v{color:var(--gold)}

/* ---------- workflow ---------- */
.flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 0}
.flow-step{flex:1;min-width:130px;position:relative;padding:12px 14px 12px 16px;background:var(--panel-2);border:1px solid var(--line);border-right:0}
.flow-step:first-child{border-radius:9px 0 0 9px}
.flow-step:last-child{border-radius:0 9px 9px 0;border-right:1px solid var(--line)}
.flow-step .n{font-size:10.5px;color:var(--ink-3);letter-spacing:1px;font-weight:700}
.flow-step .t{font-size:13px;font-weight:700;margin:3px 0}
.flow-step .s{font-size:11px;color:var(--ink-2);line-height:1.45}
.flow-step.hl{background:var(--green-soft);border-color:#CFE5D8}
.flow-step.hl .t{color:var(--green)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:5px 11px;border:1px solid var(--line-2);border-radius:20px;background:#fff;font-size:12px;cursor:pointer;transition:.15s;color:var(--ink-2)}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.chip .g{font-size:10px;opacity:.65;margin-right:4px}
.link-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
@media(max-width:1100px){.link-grid{grid-template-columns:repeat(3,1fr)}}
.link-btn{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:.15s}
.link-btn:hover{border-color:var(--green);background:var(--green-soft);color:var(--green);text-decoration:none}
.link-btn small{font-size:10.5px;color:var(--ink-3);font-weight:400}
.link-btn.muted{opacity:.72;cursor:default}
.link-btn.muted:hover{border-color:var(--line);background:var(--panel-2);color:var(--ink)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:12.8px;background:#fff}
th{background:var(--panel-2);text-align:left;padding:10px 12px;font-weight:700;color:var(--ink-2);font-size:11.5px;white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid #F0EDE4;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBFDFB;cursor:pointer}
.nm{font-weight:650;color:var(--ink)}
.raw{color:var(--ink-2);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap}
.b-S{background:var(--red-soft);color:var(--red)}
.b-A{background:var(--gold-soft);color:#9A661B}
.b-B{background:var(--blue-soft);color:var(--blue)}
.b-C{background:#F0EEE8;color:var(--ink-3)}
.tag{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);font-size:11px;color:var(--ink-2);margin:1px 3px 1px 0}
.stage{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--green-soft);color:var(--green)}
.stage.won{background:#D9F0E2;color:#17633E}
.stage.lost{background:#F0EEE8;color:var(--ink-3)}
.scorebar{display:flex;align-items:center;gap:7px}
.scorebar .bar{width:52px;height:5px;background:#EEECE4;border-radius:5px;overflow:hidden}
.scorebar .bar i{display:block;height:100%;background:var(--green-2);border-radius:5px}
.scorebar .num{font-weight:700;font-size:12px;width:22px;text-align:right}
.empty{text-align:center;padding:44px 20px;color:var(--ink-3);font-size:13px}

/* ---------- followup ---------- */
.fu-item{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:#fff}
.fu-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fu-head .nm{font-size:14px}
.fu-body{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1000px){.fu-body{grid-template-columns:1fr}}
.script-box{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:12.8px;line-height:1.8;white-space:pre-wrap;color:var(--ink)}
.script-label{font-size:11.5px;font-weight:700;color:var(--green);margin-bottom:6px}
.due{font-size:11.5px;color:var(--red);font-weight:700}
.due.ok{color:var(--green-2)}

/* ---------- funnel ---------- */
.funnel-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.funnel-row .lbl{width:88px;font-size:12.5px;color:var(--ink-2);flex:0 0 88px}
.funnel-row .track{flex:1;height:26px;background:var(--panel-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.funnel-row .fill{height:100%;background:linear-gradient(90deg,var(--green-2),#68AF89);display:flex;align-items:center;padding:0 9px;color:#fff;font-size:11.5px;font-weight:700;min-width:26px;transition:width .4s}
.funnel-row .pct{width:62px;text-align:right;font-size:12px;color:var(--ink-2);flex:0 0 62px}

/* ---------- drawer ---------- */
.mask{position:fixed;inset:0;background:rgba(24,38,32,.32);z-index:50;display:none}
.mask.on{display:block}
.drawer{position:fixed;top:0;right:0;width:min(560px,94vw);height:100vh;background:#fff;z-index:51;box-shadow:-12px 0 40px rgba(20,40,30,.14);transform:translateX(102%);transition:transform .25s ease;overflow-y:auto}
.drawer.on{transform:none}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;position:sticky;top:0;background:#fff;z-index:2}
.drawer-body{padding:18px 22px 40px}
.kv{display:grid;grid-template-columns:88px 1fr;gap:8px 12px;font-size:12.8px;margin-bottom:14px}
.kv .k{color:var(--ink-3)}
.timeline{border-left:2px solid var(--line);padding-left:14px;margin-left:5px}
.timeline .ti{position:relative;margin-bottom:12px;font-size:12.5px}
.timeline .ti:before{content:"";position:absolute;left:-20px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--green-2);border:2px solid #fff}
.timeline .ti .d{font-size:11px;color:var(--ink-3)}

/* ---------- misc ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:9px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.log{background:#F6F4ED;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:11.8px;max-height:180px;overflow:auto;margin-top:12px;line-height:1.9}
.log .ok{color:var(--green-2)}.log .bad{color:var(--red)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
@media(max-width:1050px){.split{grid-template-columns:1fr}}
.mini{font-size:11.5px;color:var(--ink-3)}
.script-cat{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:10px;background:var(--panel-2)}
.script-cat .h{font-weight:700;font-size:12.5px;margin-bottom:6px;color:var(--green)}
.script-cat pre{white-space:pre-wrap;font-family:inherit;font-size:12.5px;line-height:1.8;margin:0;color:var(--ink)}
ul.tight{margin:6px 0 0;padding-left:20px;font-size:12.5px;line-height:1.9;color:var(--ink-2)}
ul.tight b{color:var(--ink)}
.boundary{width:100%;border-collapse:collapse;font-size:12.5px}
.boundary th,.boundary td{border:1px solid var(--line);padding:9px 11px}
.boundary th{background:var(--panel-2)}

/* ---------- 流水线引导条（常驻） ---------- */
.flow-guide{position:sticky;top:62px;z-index:15;background:#FFFDF7;border:1px solid #EFDCB7;border-left:3px solid var(--gold);border-radius:12px;box-shadow:0 6px 24px rgba(160,120,40,.10);padding:12px 16px 11px;margin-bottom:18px}
.fg-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fg-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.fg-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);flex:0 0 9px}
.fg-count{font-size:11.5px;font-weight:700;color:#9A661B;background:var(--gold-soft);border:1px solid #EFDCB7;padding:2px 9px;border-radius:20px}
.fg-bar{width:110px;height:6px;background:#F0E9D9;border-radius:6px;overflow:hidden}
.fg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#E2B35C);border-radius:6px;transition:width .4s}
.fg-tip{font-size:11px;color:var(--ink-3)}
.fg-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.fg-now{font-size:12.5px;color:var(--ink-2);margin-top:9px}
.fg-now b{color:var(--ink)}
.fg-now #fg-now-hint{margin-left:8px;color:var(--ink-3);font-size:11.5px}

/* 三阶段总览：一眼看懂整条流程 */
.fg-phases{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap;margin-top:11px}
.fg-phase{display:flex;align-items:center;gap:9px;flex:1 1 190px;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 10px;transition:.2s}
.fg-phase.active{background:var(--gold-soft);border-color:var(--gold);box-shadow:0 2px 10px rgba(200,134,42,.14)}
.fg-phase.finished{background:var(--green-soft);border-color:#CFE5D8}
.fp-n{width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:#F0E9D9;color:#9A661B;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fg-phase.active .fp-n{background:var(--gold);color:#fff}
.fg-phase.finished .fp-n{background:var(--green);color:#fff}
.fp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.fp-txt b{font-size:12px;color:var(--ink)}
.fp-txt i{font-size:10.5px;color:var(--ink-3);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.fg-phase.active .fp-cnt{color:#9A661B}
.fg-phase-arrow,.fg-group-arrow{display:flex;align-items:center;color:var(--ink-3);font-size:14px}

/* 现在这一步：大白话大卡片 */
.fg-nowcard{display:flex;align-items:center;gap:14px;margin-top:10px;background:#fff;border:1px solid #EFDCB7;border-left:3px solid var(--gold);border-radius:10px;padding:10px 13px;flex-wrap:wrap}
.fg-nc-left{display:flex;align-items:flex-start;gap:12px;flex:1 1 400px;min-width:0}
.fg-nc-badge{flex:0 0 auto;background:var(--gold);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap;margin-top:2px}
.fg-nowcard.all-done .fg-nc-badge{background:var(--green)}
.fg-nc-body{min-width:0;flex:1}
.fg-nc-title{font-size:15px;color:var(--ink);line-height:1.5}
.fg-nc-title b{font-weight:800}
.fg-nc-kicker{font-size:10.5px;color:var(--ink-3);font-weight:700;letter-spacing:1px;margin-right:4px}
#fg-now-hint{font-size:11px;color:var(--ink-3)}
.fg-nc-lines{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.fg-nc-lines>div{display:flex;gap:8px;font-size:12px;color:var(--ink-2);line-height:1.55}
.fg-nc-k{flex:0 0 58px;color:var(--ink-3);font-size:11px;font-weight:700;padding-top:1px}
.fg-nc-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.fg-nc-hint{font-size:10.5px;color:var(--ink-3)}
.fg-msg{margin-top:9px;background:var(--gold-soft);border:1px solid #EFDCB7;color:#7A571C;border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.65}
.fg-msg.is-done{background:var(--green-soft);border-color:#CFE5D8;color:#1D5C44;font-weight:600}
.fg-msg.flash{animation:fgFlash 1.2s ease}
@keyframes fgFlash{0%{background:#F6D89B;box-shadow:0 0 0 0 rgba(200,134,42,.45)}45%{box-shadow:0 0 0 6px rgba(200,134,42,.12)}100%{box-shadow:none}}

/* 卡片就地提示条：刚操作完的那张卡下方立刻出现「下一步」 */
.step-next-tip{display:flex;align-items:center;gap:12px;margin:-6px 0 16px;padding:11px 14px;border-radius:10px;font-size:12.5px;line-height:1.6;flex-wrap:wrap}
.step-next-tip .sn-ico{font-size:16px;flex:0 0 auto;line-height:1.2}
.step-next-tip .sn-txt{display:flex;flex-direction:column;gap:1px;flex:1 1 240px;min-width:0}
.step-next-tip .sn-txt b{font-size:12.5px;font-weight:800}
.step-next-tip .sn-txt span{font-size:12px;opacity:.92}
.step-next-tip.is-done{background:var(--green-soft);border:1px solid #CFE5D8;border-left:3px solid var(--green);color:#1D5C44}
.step-next-tip.is-now{background:var(--gold-soft);border:1px solid #EFDCB7;border-left:3px solid var(--gold);color:#7A571C}
.fg-steps{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;align-items:center}
.fg-group{display:flex;gap:5px;flex-wrap:wrap;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:3px 8px}
.fg-gname{font-size:10px;font-weight:700;color:var(--ink-3);margin-right:2px;white-space:nowrap}
.fg-step{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line);background:#fff;border-radius:20px;font-size:11px;color:var(--ink-3);cursor:pointer;transition:.15s;white-space:nowrap}
.fg-step:hover{border-color:var(--gold);color:#9A661B}
.fg-step .fn{font-weight:700;font-size:11px}
.fg-step.done{background:var(--green-soft);border-color:#CFE5D8;color:var(--green)}
.fg-step.skip{background:#F0EEE8;color:var(--ink-3);text-decoration:line-through}
.fg-step.cur{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(200,134,42,.3)}
.fg-step.cur:hover{color:#fff}
.fg-step.done:hover,.fg-step.skip:hover{color:var(--green)}

/* ---------- 下一步自动高亮 ---------- */
.flow-focus{position:relative!important;border:1px solid var(--gold)!important;border-left-width:3px!important;animation:flowPulse 2.4s ease-in-out infinite}
@keyframes flowPulse{0%,100%{box-shadow:0 0 0 3px rgba(200,134,42,.14),0 10px 30px rgba(200,134,42,.12)}50%{box-shadow:0 0 0 7px rgba(200,134,42,.22),0 12px 34px rgba(200,134,42,.20)}}
.flow-focus::after{content:'▶ 现在做 · ' attr(data-flow-label);position:absolute;top:-12px;left:14px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;padding:2px 11px;border-radius:20px;white-space:nowrap;z-index:4;box-shadow:0 3px 10px rgba(160,110,30,.3)}
.flow-step-box{border-radius:10px;padding:2px 10px;margin:14px -10px 0;transition:.2s}
.flow-inline-tip{font-size:11.5px;color:var(--ink-3);padding:4px 2px 2px;line-height:1.6}
.flow-inline-tip .ft-n{font-weight:700;color:var(--gold);margin-right:5px}
@media(max-width:1100px){.fg-tip{display:none}.flow-guide{position:static}}

/* ---------- SaaS 账户 / 团队 / 套餐面板 ---------- */
.saas-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);width:min(760px,94vw);max-height:86vh;background:var(--panel);border-radius:14px;z-index:52;box-shadow:0 24px 70px rgba(20,40,30,.22);display:none;flex-direction:column;opacity:0;transition:opacity .22s,transform .22s}
.saas-modal.on{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.sm-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.sm-body{padding:18px 22px 30px;overflow-y:auto}
.sm-body h3{font-size:13.5px;margin:22px 0 10px;font-weight:700;border-left:3px solid var(--green);padding-left:9px}
.ac-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--green-soft);border:1px solid #CFE5D8;border-radius:10px;padding:14px 16px}
.ac-org{font-size:17px;font-weight:800;color:var(--green)}
.ac-user{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.ac-plan{text-align:right;flex:none}
.ac-plan b{display:block;font-size:14px;color:var(--green)}
.ac-plan span{font-size:11.5px;color:var(--ink-3)}
.ac-plan .ac-yearly{display:block;margin-top:3px;color:var(--green);font-weight:700}
.qb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 20px}
.qb-t{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:4px;color:var(--ink-2)}
.qb-t b{color:var(--ink);font-weight:700;white-space:nowrap}
.qb-track{height:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.qb-track i{display:block;height:100%;border-radius:20px;transition:width .4s}
@media(max-width:700px){.qb-grid{grid-template-columns:1fr}.saas-modal{width:96vw;max-height:92vh}}

/* ---------- 订阅 / 账单 / 在线支付（v3.3） ---------- */
.bl-banner{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:12.5px;line-height:1.6;border:1px solid transparent}
.bl-banner.info{background:#EAF1F8;border-color:#CBDCEF;color:#2C5580}
.bl-banner.warn{background:#FFF6E2;border-color:#EFDCB7;color:#7A571C}
.bl-banner.danger{background:#FDECEC;border-color:#F2C9C9;color:#9B3535}
.bl-banner-ico{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:currentColor;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;opacity:.85}
.bl-banner-txt{flex:1}
.bl-banner b{font-weight:800}
.bill-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);width:min(880px,95vw);max-height:88vh;background:var(--panel);border-radius:14px;z-index:54;box-shadow:0 24px 70px rgba(20,40,30,.22);display:none;flex-direction:column;opacity:0;transition:opacity .22s,transform .22s}
.bill-modal.on{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.bl-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.bl-pill.on{background:#E8F2EC;color:var(--green)}
.bl-pill.warn{background:#FFF2D8;color:#8B6218}
.bl-pill.off{background:#FDECEC;color:#A03C3C}
.bl-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:6px}
.bl-card.bl-card-danger{background:#FDF0F0;border-color:#F2C9C9}
.bl-card-top{display:flex;flex-direction:column;gap:4px;font-size:13px}
.bl-card-top b{font-size:14px;color:var(--green)}
.bl-card-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px}
.bl-section{margin:0 0 20px}
.bl-section h3{font-size:13.5px;margin:18px 0 10px;font-weight:700;border-left:3px solid var(--green);padding-left:9px}
.bl-status{display:flex;align-items:center;gap:12px;background:var(--green-soft);border:1px solid #CFE5D8;border-radius:10px;padding:14px 16px}
.bl-status.danger{background:#FDF0F0;border-color:#F2C9C9}
.bl-status-l{flex:1;min-width:0}
.bl-status-t{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.bl-status-r{flex:none}
.bl-note{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:12px;color:var(--ink-2);line-height:1.75;margin-top:11px}
.bl-note.warn{background:#FFF9EA;border-color:#EFDCB7;color:#7A571C}
.bl-note.danger{background:#FDF0F0;border-color:#F2C9C9;color:#9B3535}
.bl-note b{color:var(--ink)}
.bl-cycle,.bl-channels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.bl-cycle>span,.bl-channels>span{font-size:12px;color:var(--ink-2);font-weight:700;margin-right:4px}
.bl-seg{padding:6px 13px;border:1px solid var(--line-2);background:#fff;border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit;color:var(--ink-2)}
.bl-seg:hover{border-color:var(--green);color:var(--green)}
.bl-seg.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.bl-seg.off{opacity:.58}
.bl-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:10px 0 14px}
.bl-plan{border:1px solid var(--line-2);border-radius:10px;padding:13px 14px;cursor:pointer;background:#fff;transition:.15s}
.bl-plan:hover{border-color:var(--green)}
.bl-plan.on{border:2px solid var(--green);background:var(--green-soft);padding:12px 13px}
.bl-plan-n{font-size:13.5px;font-weight:800;margin-bottom:6px}
.bl-plan-p{font-size:21px;font-weight:800;color:var(--green);line-height:1.2}
.bl-plan-p span{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.bl-checkout{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:13px 16px;flex-wrap:wrap}
.bl-checkout b{font-size:18px;color:var(--green)}
.bl-check label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin:8px 0;cursor:pointer}
.bl-pay-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.bl-pay-amount{text-align:center;font-size:34px;font-weight:800;color:var(--green);line-height:1.2;margin:12px 0 2px}
.bl-pay-amount span{font-size:14px;color:var(--ink-3)}
.bl-qr{display:flex;justify-content:center;margin:14px 0 8px}
.bl-qr svg{border:1px solid var(--line);border-radius:10px;background:#fff}
.bl-qr-tip{text-align:center;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.bl-paylink{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:11.5px;margin-bottom:12px}
.bl-paylink span{flex:none;color:var(--ink-2);font-weight:700}
.bl-paylink code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.bl-payinfo{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:12px 0}
.bl-payinfo>div{display:flex;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line);font-size:12.5px}
.bl-payinfo>div:last-child{border-bottom:0}
.bl-payinfo span:first-child{flex:0 0 76px;color:var(--ink-3)}
.bl-payinfo b{color:var(--ink)}
.bl-pay-status{text-align:center;font-size:12.5px;color:var(--ink-2);background:var(--panel-2);border-radius:8px;padding:10px 12px;margin:12px 0}
.bl-pay-status .bl-ok{color:var(--green);font-size:14px}
.bl-pay-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
@media(max-width:700px){.bl-plans{grid-template-columns:1fr}.bill-modal{width:96vw;max-height:92vh}.bl-banner{flex-wrap:wrap}}