/* ============================================================ 私域智能系统 · 统一专业后台主题 加载顺序：置于各页面 末尾 设计语言：白底 + 藏青蓝主色 #2c5cc5 + 小圆角 + 清晰层次 参考：Work Buddy / 微信企业产品风格的沉稳蓝 ============================================================ */ :root{ /* 主色：藏青蓝（比 #2563eb 更沉稳、更专业） */ --brand: #2c5cc5; --brand-600: #2c5cc5; --brand-700: #1e4a8f; --brand-800: #163a6e; --brand-50: #e8f0fe; --brand-100: #d2e3fc; --brand-200: #aec9f8; /* 中性 */ --bg: #e8edf2; --surface: #ffffff; --surface-2: #f1f4f8; --border: #e5e9f0; --border-strong:#d4dae6; --text: #1e293b; --text-2: #334155; --muted: #64748b; --muted-2: #94a3b8; /* 语义色 */ --green: #16a34a; --green-bg: #ecfdf3; --green-bd: #a6f0c2; --amber: #d97706; --amber-bg: #fff7ed; --amber-bd: #fcd9a6; --red: #dc2626; --red-bg: #fef2f2; --red-bd: #fbcfcf; /* 阴影 / 圆角 */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow-lg: 0 12px 40px rgba(15,23,42,.18); --radius: 10px; --radius-sm: 8px; --radius-xs: 6px; /* 兼容旧变量名 */ --card:#fff; --ink:#1e293b; --sub:#64748b; --line:#e5e9f0; --tx:#1e293b; --mut:#64748b; --bd:#e5e9f0; --blue:var(--brand); --brand2:var(--brand-50); --ok:var(--green); --warn:var(--amber); --green-d:#15803d; } *{box-sizing:border-box} html,body{margin:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:var(--brand);text-decoration:none} h1,h2,h3{color:var(--text)} /* ---------- 顶部导航（统一白底蓝主色） ---------- */ .top,.topbar{ display:flex; align-items:center; gap:16px; padding:0 24px; height:56px; background:#fff; color:var(--text); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; } .top h1,.topbar b,.brand{font-size:17px;font-weight:700;color:var(--text);margin:0} .topbar .brand{white-space:nowrap} .top nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .topbar .sp{flex:1} .top nav a,.topbar a{ text-decoration:none; color:var(--muted); font-size:13px; padding:7px 13px; border-radius:var(--radius-xs); border:1px solid transparent; transition:.15s; } .top nav a:hover,.topbar a:hover{color:var(--brand);background:var(--brand-50)} .top nav a.on{color:var(--brand);background:var(--brand-50);border-color:var(--brand-100);font-weight:600} .topbar .nb,.topbar .topbtn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:var(--radius-xs); height:36px; padding:0 16px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:.15s; } .topbar .nb:hover,.topbar .topbtn:hover{background:var(--brand-700);border-color:var(--brand-700)} .topbar select{ height:34px; padding:0 10px; border-radius:var(--radius-xs); border:1px solid var(--border); background:#fff; color:var(--text); font-size:13px; cursor:pointer; max-width:240px; } .topbar #saveStatus{font-size:13px;color:var(--muted);font-weight:400} /* ---------- 内容容器 ---------- */ .wrap{max-width:1080px;margin:0 auto;padding:24px 24px 64px} .content{max-width:1080px;margin:0 auto;padding:24px} /* ---------- 卡片 / 面板 ---------- */ .card,.panel,.qcard,.ocard,.box,.status-card,.item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .card{padding:16px 18px;margin-bottom:14px} .panel{padding:18px} .qcard{padding:16px 18px;margin-bottom:14px} .ocard{padding:14px 16px} .box{padding:13px 15px} .section-title,.sec-t{ font-size:15px; font-weight:700; color:var(--text); margin:26px 0 12px; display:flex; align-items:center; gap:8px; } .sec-t .tag,.section-title small{font-size:12px;font-weight:500;color:var(--muted)} .empty{color:var(--muted);text-align:center;padding:40px 0} .err{color:var(--red);padding:20px} .loading{text-align:center;padding:60px 0;color:var(--muted)} /* ---------- 统计卡 ---------- */ .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .card .num{font-size:26px;font-weight:700;line-height:1.1;color:var(--text)} .card .num.brand{color:var(--brand)} .card .lbl{color:var(--muted);font-size:12px;margin-top:6px} .overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:22px} .ocard .k{color:var(--muted);font-size:12px;margin-bottom:6px} .ocard .v{font-size:22px;font-weight:800;color:var(--brand)} .score-badge{margin-left:auto;text-align:center;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--radius);padding:8px 14px} .score-badge .num{font-size:24px;font-weight:800;color:var(--brand)} .score-badge .lv{font-size:12px;color:var(--muted)} .stat .n,.status-card .n{font-size:24px;font-weight:700;color:var(--brand)} .status-card{border-left:4px solid var(--brand);padding:14px 16px;margin-bottom:12px} .status-card .l{color:var(--muted);font-size:12px;margin-top:4px} .status-card.high{border-left-color:var(--green)} .status-card.warn{border-left-color:var(--amber)} /* ---------- 按钮 ---------- */ .btn,.act,.qbtn,.nb,.submit,button.submit,.iconbtn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:var(--radius-xs); height:36px; padding:0 16px; cursor:pointer; font-size:13px; transition:.15s; font-family:inherit; font-weight:500; } .btn:hover,.act:hover,.qbtn:hover,.iconbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--surface-2)} .btn.primary,.act,.qbtn,.nb,.submit,button.submit,.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); } .btn.primary:hover,.submit:hover,button.submit:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff;opacity:1} .btn.ghost{background:var(--surface-2);color:var(--brand);border-color:var(--border)} .btn.ghost:hover{background:var(--brand-50)} .btn.danger,.iconbtn.danger{color:var(--red);border-color:var(--red-bd);background:#fff} .btn.danger:hover{background:var(--red-bg);color:var(--red)} .btn.sm{height:28px;padding:0 10px;font-size:12px} .btn.block{display:block;width:100%;max-width:480px;margin-left:auto;margin-right:auto} .btn:disabled,.submit:disabled{background:var(--muted-2);border-color:var(--muted-2);color:#fff;cursor:not-allowed;opacity:.7} .quickbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .qbtn{color:var(--brand);border-color:var(--brand-100);background:var(--brand-50)} .qbtn:hover{background:var(--brand-100)} /* 问卷/报告全宽提交按钮（不再变成粗条） */ button.submit,.submit{ display:block; width:100%; max-width:480px; min-width:140px; margin:24px auto 0; height:48px; padding:0 20px; font-size:16px; font-weight:600; border-radius:var(--radius-sm); letter-spacing:0.5px; } @media(min-width:760px){ button.submit,.submit{height:44px;font-size:15px} } /* ---------- 徽标 / 标签 / 药丸 ---------- */ .badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-xs);font-size:11px;font-weight:600} .badge.pub,.badge.resp,.badge.dim{background:var(--brand-50);color:var(--brand)} .badge.draft{background:var(--amber-bg);color:var(--amber)} .tag{font-size:11px;padding:2px 9px;border-radius:var(--radius-xs);background:var(--brand-50);color:var(--brand);font-weight:600} .tag.dim{background:var(--surface-2);color:var(--muted)} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-50);color:var(--brand);border-radius:var(--radius-xs);padding:5px 12px;font-size:13px;margin:4px} .chip b{cursor:pointer;font-weight:700} .status-pill{font-size:11px;padding:2px 9px;border-radius:var(--radius-xs);font-weight:600;margin-left:4px} .status-pill.none{background:var(--surface-2);color:var(--muted)} .status-pill.low{background:var(--amber-bg);color:var(--amber)} .status-pill.medium{background:var(--red-bg);color:var(--red)} .status-pill.high{background:var(--brand);color:#fff} .status-pill.needed{background:var(--brand);color:#fff} .status-pill.given{background:var(--green-bg);color:var(--green)} .pill{font-size:11px;padding:1px 7px;border-radius:var(--radius-xs);background:var(--brand-50);color:var(--brand);margin-left:6px} .hl-tag{font-size:11px;padding:2px 8px;border-radius:var(--radius-xs);background:var(--brand-50);color:var(--brand)} .hl-tag.red{background:var(--red-bg);color:var(--red)} .hl-tag.green{background:var(--green-bg);color:var(--green)} .kw{display:inline-block;background:var(--surface-2);color:var(--text-2);border-radius:var(--radius-xs);padding:1px 8px;font-size:12px;margin:3px 4px 0 0} .type-tag{display:inline-block;margin:8px 0 4px;padding:3px 10px;background:var(--brand-50);color:var(--brand);border-radius:var(--radius-xs);font-size:12px} .pstage{font-size:11px;padding:1px 7px;border-radius:var(--radius-xs);background:var(--brand-50);color:var(--brand);font-weight:600;flex:0 0 auto;align-self:flex-start} .s-unknown{background:var(--surface-2);color:var(--muted)} .s-path1{background:var(--green-bg);color:var(--green)} .s-path2{background:var(--amber-bg);color:var(--amber)} /* ---------- 表格 ---------- */ table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--border);font-size:13px} th{color:var(--muted);font-weight:600;font-size:12px;background:var(--surface-2)} td .title{font-weight:500} /* ---------- 表单 ---------- */ .field{margin-bottom:12px} .field label,.item .req,label{font-size:13px;color:var(--muted);display:block;margin:10px 0 5px} input,select,textarea{ width:100%;border:1px solid var(--border);border-radius:var(--radius-xs); padding:9px 11px;font-size:14px;outline:none;font-family:inherit;background:#fff;color:var(--text); transition:.15s; } input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)} .field input,.field select,.field textarea{min-height:40px} .field textarea{min-height:60px;resize:vertical} textarea{line-height:1.6} .inprow{display:flex;gap:8px;align-items:flex-start} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .controls label{margin:0} select{min-width:0} .hint{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.6} .desc{color:var(--muted);font-size:13px;margin-bottom:18px} .search{padding:10px 12px;display:flex;gap:8px} .search input,.search select{flex:1;border:1px solid var(--border);border-radius:var(--radius-xs);padding:7px 9px;font-size:13px;outline:none} .search select{flex:0 0 96px} .tag-add{display:flex;gap:8px;margin-top:10px} .tag-add input{flex:1;border:1px solid var(--border);border-radius:var(--radius-xs);padding:8px 10px;outline:none} .tag-add button{border:none;background:var(--brand);color:#fff;border-radius:var(--radius-xs);height:36px;padding:0 14px;cursor:pointer;font-size:13px} .tag-add button:disabled{background:var(--muted-2)} .req{color:var(--red);margin-left:2px} .bindinfo{background:var(--brand-50);color:var(--brand);font-size:12px;border-radius:var(--radius-xs);padding:8px 12px;margin-bottom:14px} .desc-inp,.otherinput,.other-preview .otherinput{border:1px dashed var(--brand-200)!important;border-radius:var(--radius-xs);padding:8px 10px;font-size:12px;color:var(--muted);width:100%} /* ---------- 选项 / 量表（问卷表单） ---------- */ .opt{display:flex;flex-wrap:wrap;gap:8px} .opt label{border:1px solid var(--border);border-radius:var(--radius-xs);padding:8px 14px;font-size:14px;background:#fff;cursor:pointer;transition:.15s} .opt input{display:none} .opt input:checked + span{color:var(--brand);font-weight:600} .opt label:has(input:checked){border-color:var(--brand);background:var(--brand-50);color:var(--brand);font-weight:600} .opt label.other{border-style:dashed;color:var(--muted)} .scale{display:flex;gap:8px} .scale label{flex:1;text-align:center;border:1px solid var(--border);border-radius:var(--radius-xs);padding:12px 0;font-size:16px;cursor:pointer;background:#fff;transition:.15s} .scale input{display:none} .scale label:has(input:checked){border-color:var(--brand);background:var(--brand-50);color:var(--brand);font-weight:700} .mic{flex:none;width:56px;height:44px;border:1px solid var(--border);border-radius:var(--radius-xs);background:#fff;color:var(--muted);font-size:12px;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center} .mic::before{content:"语音";font-size:12px} .mic:active{background:var(--brand-50)} .mic.recording{background:var(--red-bg);border-color:var(--red);color:var(--red)} .mic.recording::before{content:"录音中"} /* ---------- 列表 / 侧栏（admin 客户列表） ---------- */ .app{display:flex;height:100vh} .side{width:320px;min-width:320px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column} .side-h{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px} .side-h b{font-size:16px;color:var(--text)} .side-h .btn{cursor:pointer;font-size:12px;color:var(--brand);margin-left:auto;background:none;border:none;font-weight:600;height:auto;padding:0} .list{flex:1;overflow:auto} .cust{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--surface-2);cursor:pointer} .cust:hover{background:var(--surface-2)} .cust.on{background:var(--brand-50)} .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#7aa7f0);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 38px;font-size:14px} .cust .nm{font-weight:600;font-size:14px;color:var(--text)} .cust .sub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .list .item{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin:0 0 10px} .list .item .main{flex:1;min-width:0} .list .item .nm{font-weight:700;font-size:15px;color:var(--text)} /* ---------- 详情（admin） ---------- */ .main{flex:1;overflow:auto;padding:0} .empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)} .detail{display:flex;flex-direction:column;min-height:100%} .dhead{padding:18px 22px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px} .dhead .avatar{width:48px;height:48px;flex-basis:48px;font-size:18px} .dhead h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px;color:var(--text)} .dhead .meta{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.7} .dhead .meta span{margin-right:12px} .tabs{display:flex;gap:4px;padding:0 18px;background:#fff;border-bottom:1px solid var(--border)} .tab{padding:12px 14px;cursor:pointer;color:var(--muted);font-size:14px;border-bottom:2px solid transparent} .tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .pane{padding:20px 22px;flex:1} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:18px} .box .k{color:var(--muted);font-size:12px;margin-bottom:5px} .box .v{font-size:15px;font-weight:600;color:var(--text)} .box .v.sm{font-size:13px;font-weight:500;line-height:1.6} /* ---------- 规则 / 触发器（rules/triggers） ---------- */ .rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;display:flex;align-items:flex-start;gap:12px} .rule .badge{font-size:11px;padding:2px 8px;border-radius:var(--radius-xs);background:var(--brand-50);color:var(--brand);font-weight:600;white-space:nowrap} .rule .badge.pay{background:var(--brand-50);color:var(--brand)} .rule .badge.urge{background:var(--amber-bg);color:var(--amber)} .rule .badge.trigger{background:var(--red-bg);color:var(--red)} .rule .body{flex:1} .rule .name{font-weight:600;margin-bottom:4px;color:var(--text)} .rule .meta{color:var(--muted);font-size:12px;line-height:1.6} .rule .del,.del{color:var(--red);font-size:12px;cursor:pointer;border:none;background:none;padding:0} .del{align-self:center;height:28px;padding:0 10px;border:1px solid var(--red-bd);border-radius:var(--radius-xs);background:#fff} .del:hover{background:var(--red-bg)} /* ---------- 问卷 / 报告 ---------- */ .qa{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:6px 16px;margin-bottom:10px} .qa .q{color:var(--muted);font-size:13px;padding:10px 0 2px} .qa .a{font-size:14px;padding:2px 0 12px;line-height:1.7;white-space:pre-wrap;color:var(--text-2)} .qa .a.empty{color:var(--muted-2);font-style:italic} .md h1,.md h2,.md h3{font-size:16px;margin:14px 0 8px;color:var(--text)} .md p{line-height:1.8;color:var(--text-2);margin:8px 0} .md ul{line-height:1.9;padding-left:20px} .md b,.md strong{color:var(--text)} .md code{background:var(--surface-2);padding:1px 5px;border-radius:4px} .bar{height:8px;background:var(--surface-2);border-radius:var(--radius-xs);overflow:hidden;margin-top:6px} .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7aa7f0)} .rbar{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .toolbar{display:flex;gap:10px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:5} .sharehint{font-size:12px;color:var(--muted);margin-top:6px} .sharebox{background:var(--green-bg);border:1px solid var(--green-bd);border-radius:var(--radius-xs);padding:12px;margin-top:12px;font-size:13px;display:none} .sharebox input{width:100%;border:1px solid var(--green-bd);border-radius:var(--radius-xs);padding:8px;font-size:12px;margin-top:6px} /* ---------- 时间线 ---------- */ .tl{position:relative;padding-left:18px} .tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--border)} .tl .ev{position:relative;padding:9px 0} .tl .ev::before{content:"";position:absolute;left:-16px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 1px var(--border)} .tl .et{font-weight:600;color:var(--text)} .tl .ed{color:var(--muted);font-size:12px;margin-top:2px} .tl .etime{color:var(--muted-2);font-size:11px;float:right} /* ---------- 图表 ---------- */ .trend{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:8px} .trend .bar{flex:1;background:var(--brand-100);border-radius:4px 4px 0 0;position:relative;min-height:2px;transition:height .3s} .trend .bar:hover{background:var(--brand)} .trend .bar .v{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);opacity:0} .trend .bar:hover .v{opacity:1} .trend-x{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px} .funnel .row{display:flex;align-items:center;gap:12px;margin:8px 0} .funnel .row .st{width:84px;font-size:13px;color:var(--text-2);font-weight:600;flex:0 0 auto} .funnel .row .track{flex:1;background:var(--surface-2);border-radius:var(--radius-xs);height:30px;overflow:hidden;position:relative} .funnel .row .fill{height:100%;background:linear-gradient(90deg,var(--brand),#7aa7f0);border-radius:var(--radius-xs);transition:width .4s} .funnel .row .cnt{width:60px;text-align:right;font-weight:600;color:var(--text)} .funnel .row .conv{width:104px;text-align:right;color:var(--green);font-size:12px} .funnel .row .conv.dim{color:var(--muted)} .funnel .overall{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);font-size:14px;color:var(--text-2)} .funnel .overall b{color:var(--brand);font-size:20px} .funnel .sec2{margin-top:18px;padding-top:12px;border-top:1px dashed var(--border);font-size:13px;color:var(--muted);font-weight:600} .brow{display:flex;align-items:center;gap:10px} .brow .bn{width:140px;font-size:13px;color:var(--text-2);flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brow .bt{flex:1;background:var(--surface-2);border-radius:var(--radius-xs);height:22px;overflow:hidden} .brow .bf{height:100%;background:linear-gradient(90deg,var(--brand),#7aa7f0);border-radius:var(--radius-xs);transition:width .4s;min-width:2px} .brow .bc{width:42px;text-align:right;font-weight:600;font-size:13px;flex:0 0 auto;color:var(--text)} .scaleavg{font-size:13px;color:var(--muted);margin-bottom:10px} .scaleavg b{color:var(--amber);font-size:16px} .dist .row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:13px} .dist .row .name{width:170px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dist .row .track{flex:1;background:var(--surface-2);border-radius:var(--radius-xs);height:18px;overflow:hidden} .dist .row .fill{height:100%;background:var(--brand);border-radius:var(--radius-xs)} .dist .row .cnt{width:42px;text-align:right;color:var(--muted);font-size:12px} .samples{display:flex;flex-direction:column;gap:6px} .sample{background:var(--surface-2);border-radius:var(--radius-xs);padding:8px 11px;font-size:13px;line-height:1.6;white-space:pre-wrap;color:var(--text-2)} .hl-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)} .hl-item:last-child{border-bottom:none} .hl-name{font-weight:500;color:var(--text)} .hl-tags{display:flex;gap:6px;margin-top:4px} /* ---------- 报表仪表（report / index H5） ---------- */ .scorebox{display:flex;align-items:center;gap:18px} .gauge{--p:0;width:96px;height:96px;border-radius:50%;flex:none; background:conic-gradient(var(--brand) calc(var(--p)*1%), #eef0f3 0); display:flex;align-items:center;justify-content:center;position:relative} .gauge::after{content:"";position:absolute;width:74px;height:74px;border-radius:50%;background:#fff} .gauge .num{position:relative;font-size:24px;font-weight:800;z-index:1;color:var(--text)} .gauge .num small{font-size:12px;font-weight:500;color:var(--muted)} .lvl{font-size:18px;font-weight:700;color:var(--text)} .lvl .tag{display:inline-block;background:var(--brand-50);color:var(--brand);font-size:13px;padding:2px 10px;border-radius:var(--radius-xs);margin-left:8px;font-weight:600} .dims{margin-top:6px} .dim{margin:12px 0} .dim .dl{font-weight:600;font-size:14px;display:flex;justify-content:space-between;color:var(--text)} .dim .dl .dv{color:var(--muted);font-weight:400} .track{height:10px;background:var(--surface-2);border-radius:var(--radius-xs);overflow:hidden;margin-top:5px} .fill{height:100%;background:var(--brand);border-radius:var(--radius-xs)} .summary{color:var(--text-2);font-size:15px} ul.sug{margin:8px 0 0;padding-left:20px;color:var(--text-2)} .score{font-size:42px;font-weight:800;color:var(--brand);text-align:center} .level{text-align:center;color:var(--muted);margin-bottom:14px} .report{margin-top:16px} /* ---------- 弹窗 ---------- */ .modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:100} .modal-mask.show{display:flex} .mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:100} .mask.show{display:flex} .modal{background:#fff;border-radius:var(--radius);max-width:760px;width:100%;padding:22px;box-shadow:var(--shadow-lg);border:1px solid var(--border)} .modal h3{margin:0 0 8px;font-size:17px;color:var(--text)} .modal .meta{color:var(--muted);font-size:12px;margin-bottom:14px} .modal .share-url{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-xs);padding:9px;font-size:12px;margin-top:6px} .modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .close{float:right;cursor:pointer;color:var(--muted);font-size:20px;border:none;background:none} /* ---------- 问卷生成器（builder）布局 ---------- */ .wrap.chat-layout{display:flex;height:calc(100vh - 56px)} .left{width:42%;border-right:1px solid var(--border);display:flex;flex-direction:column;background:#fff} .right{flex:1;display:flex;flex-direction:column;background:var(--surface-2)} .chat-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)} .chat{flex:1;overflow-y:auto;padding:16px} .msg{margin-bottom:14px;max-width:86%} .msg.user{margin-left:auto} .msg .bubble{padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;line-height:1.6;white-space:pre-wrap} .msg.bot .bubble{background:var(--surface-2);color:var(--text);border-top-left-radius:4px} .msg.user .bubble{background:var(--brand);color:#fff;border-top-right-radius:4px} .chat-input{border-top:1px solid var(--border);padding:12px;display:flex;gap:8px;align-items:flex-end;background:#fff} .chat-input textarea{flex:1;resize:none;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 12px;font-family:inherit;line-height:1.5} .editor-head{padding:14px 18px;border-bottom:1px solid var(--border);background:#fff} .editor-head .titlerow{display:flex;gap:8px;align-items:center;margin-bottom:8px} .editor-head input.title{flex:1;width:auto;font-size:17px;font-weight:600;border:1px solid var(--border);border-radius:var(--radius-xs);outline:none;min-height:44px;padding:10px 12px;background:#fff} .editor-head .meta{display:flex;gap:10px;align-items:center} .editor-head input.t,.editor-head input.d{border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 12px;font-size:14px;min-height:44px} .editor-head input.d{flex:1} .iconbtn{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:#fff;color:var(--muted);font-size:13px;cursor:pointer} .iconbtn:hover{background:var(--surface-2)} .iconbtn.danger{color:var(--red);border-color:var(--red-bd)} .editor{flex:1;overflow-y:auto;padding:16px 18px;background:var(--surface-2)} .editor-foot{padding:10px 18px;border-top:1px solid var(--border);background:#fff;display:flex;gap:10px;align-items:center;justify-content:flex-end} .item input.lbl,.item select{border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 12px;font-size:14px;min-height:44px} .item .row1{display:flex;gap:8px;align-items:center;margin-bottom:8px} .item .ops{margin-top:8px} .item .opt{display:flex;gap:6px;margin-bottom:6px;align-items:center} .item .opt input{flex:1;border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 12px;font-size:14px;min-height:44px} .othertoggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:8px;cursor:pointer} .addfield-wrap{text-align:center;margin:6px 0 4px} .addfield-wrap .btn{min-height:36px;width:100%;max-width:360px} /* ---------- 通用 flex ---------- */ .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:10px 18px;border-radius:var(--radius-xs);font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:200} .toast.show{opacity:.95} /* ---------- 专业强化：焦点环 + 触感反馈 + 过渡（可访问性） ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,.btn:focus-visible,.qbtn:focus-visible,.act:focus-visible, .topbar a:focus-visible,.top nav a:focus-visible,.tab:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; } .btn:active,.qbtn:active,.act:active,.submit:active,.topbar .nb:active,.iconbtn:active{transform:translateY(1px) scale(.985)} .cust,.list .item,.tab,.opt label,.scale label,.card,.panel,.qcard,.box,.chip,.tag{ transition:background .15s,border-color .15s,transform .15s,box-shadow .15s; } .topbar a,.top nav a,.side-h .btn{transition:color .15s,background .15s} .tab{cursor:pointer} .top,.topbar{box-shadow:0 1px 0 var(--border)} .link{color:var(--brand);cursor:pointer} .link:hover{text-decoration:underline} /* ---------- 响应式 ---------- */ @media(max-width:760px){ .cards{grid-template-columns:repeat(2,1fr)} .dist .row .name{width:110px} .funnel .row .st{width:60px} .funnel .row .conv{width:74px} .top,.topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px} .top nav{margin-left:0;width:100%} }