/* 页面设计中的次级 .btn 通常是深色底，但许多页面只定义了底色， 没定义文字色时会退回浏览器默认黑字。统一使用白字；更具体的页面规则 （如白底 CTA 和渐变主按钮）仍可保留自己的文字色。 */ .btn{color:#fff} .eivoice-live-status{display:block;margin-top:10px;color:#bdf3fb;font-size:13px;min-height:1.5em} .eivoice-error{color:#ff8fb9}.eivoice-real-player{width:100%;min-width:220px}.eivoice-upload-name{margin-top:12px;color:#bdf3fb;font-size:13px} .eivoice-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100020;max-width:min(380px,calc(100vw - 32px));padding:13px 17px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(13,10,31,.96);color:#f3f0ff;box-shadow:0 18px 45px rgba(0,0,0,.35);text-align:center} .eivoice-empty{grid-column:1/-1;padding:30px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px} .eivoice-rowtext{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04)} .eivoice-rowtext-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .eivoice-rowtext-head span{min-width:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eivoice-rowtext-body{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.9;max-height:320px;overflow-y:auto} .eivoice-disabled,[aria-disabled="true"]{pointer-events:none;opacity:.5} .eivoice-player-meta{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:11px;color:var(--muted)} .eivoice-player-meta .txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eivoice-dl,.hdown{flex:none;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--txt);font-size:11px;text-decoration:none;cursor:pointer;background:transparent} .eivoice-dl:hover,.hdown:hover{border-color:#8b5cf6;color:#c4b5fd} .eivoice-vpick-overlay{position:fixed;inset:0;z-index:100000;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;background:rgba(3,2,12,.82);backdrop-filter:blur(8px)} /* 弹窗固定高（2026-10-14）：高度不再跟内容走。换页/换 tab/筛空时 load() 会先把 grid 清成 「加载中…」、pager 清空，内容驱动高度下整窗先塌后长（九卡页 774px → 加载中 364px → 774px；overlay 居中定位，连 top 一起跳 63→268），用户报「音色换页时选择窗闪一下」。 固定后 .eivoice-vpick-grid 用 flex:1 吃剩余高度，任何页/任何结果集窗口尺寸都不变。 宽度同理（2026-10-14 复查）：overlay 的 auto 轨道 + 弹窗 width:100% 是循环百分比，浏览器按内容 撑轨道，窄屏下窗宽跟着卡片数变（390px 视口实测 9卡 396.2 ↔ 空结果 380，还都溢出 overlay）。 轨道钉成 minmax(0,1fr) 后 100% 解到确定值：窗宽 = min(880px, 视口-40px)，与内容无关； grid 列下限 min(250px,100%) 防更窄视口下单列溢出。 高度 min(820px,86vh)：大屏一屏九卡（内容约 781px）不内滚，矮屏取视口八成。 */ .eivoice-vpick-dialog{width:min(880px,100%);height:min(820px,86vh);display:flex;flex-direction:column;padding:24px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:#12102a;box-shadow:0 28px 80px rgba(0,0,0,.5);color:#f5f3ff} .eivoice-vpick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .eivoice-vpick-head b{font-size:17px} .eivoice-vpick-head .close{border:none;background:transparent;color:#aaa5c6;font-size:22px;cursor:pointer;line-height:1} .eivoice-vpick-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} /* 语言/方言/性别：跟音色库页同一排法 —— 一行三格，点格子开选项弹窗，搜索框并排放在右边。 底下那三个 chips 容器现在只剩「存选中态」的职责（markup 里是 display:none），所以这里不再有 .chips 布局规则。弹窗会在多个页面上出现，格子里的字色一律用字面值，不吃 --txt/--line 这类页面变量。 */ .eivoice-vpick-filterbar{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:14px} .eivoice-vpick-picks{display:flex;align-items:stretch;flex:1 1 420px;max-width:560px;min-width:0;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden} .eivoice-vpick-picks .pick-cell{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:11px 16px;cursor:pointer;transition:.2s} .eivoice-vpick-picks .pick-cell:hover{background:rgba(255,255,255,.05)} .eivoice-vpick-picks .pick-cell+.pick-cell{border-left:1px solid rgba(255,255,255,.12)} .eivoice-vpick-picks .pick-label{flex:none;color:#aaa5c6;font-size:12px} .eivoice-vpick-picks .oval{flex:1;min-width:0;font-size:14px;color:#f5f3ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .eivoice-vpick-picks .ch{flex:none;color:#7c5cff;font-size:15px;font-weight:700} /* 手机宽度：一行塞三格时每格只剩 ~104px，值再长一点就被省略号截掉（「普通话」→「普通…」）， 所以窄屏改成竖排三行 —— 每格独占一行，值多长都放得下，› 这个「点得开」的暗示也留着。 */ @media(max-width:560px){ .eivoice-vpick-picks{flex:1 1 100%;max-width:none;flex-direction:column} .eivoice-vpick-picks .pick-cell+.pick-cell{border-left:none;border-top:1px solid rgba(255,255,255,.12)} } /* 搜索框跟三格同一行：靠 align-items:stretch 撑到和三格一样高（所以纵向 padding 给 0）； min-height 是兜底 —— 三格要是没点亮，它也不至于塌成一条线 */ .eivoice-vpick-search{flex:1 1 300px;min-width:220px;min-height:44px;box-sizing:border-box;margin:0;padding:0 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#0d0a20;color:#f5f3ff;font-size:13px;outline:none} .eivoice-vpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px;overflow-y:auto;flex:1;min-height:0} .eivoice-vpick-card{display:flex;flex-direction:column;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);transition:.25s} .eivoice-vpick-card:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.5)} .eivoice-vpick-card .vtop{display:flex;align-items:center;gap:12px} .eivoice-vpick-card .avatar{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#7c5cff,#22d3ee);color:#fff;font-weight:800;font-size:19px} .eivoice-vpick-card .avatar.g-male{background:linear-gradient(135deg,#3b82f6,#22d3ee)} .eivoice-vpick-card .avatar.g-female{background:linear-gradient(120deg,#ff5e9c,#7c5cff)} .eivoice-vpick-card .avatar.g-neutral,.eivoice-vpick-card .avatar.g-custom{background:linear-gradient(135deg,#a99fc4,#6f6890)} .eivoice-vpick-card .vinfo{flex:1;min-width:0} .eivoice-vpick-card .vname{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .eivoice-vpick-card .vmeta{margin-top:2px;font-size:11px;color:#aaa5c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 卡片上的试听键与「选择」：跟音色库页底栏同一套（桌面版 #ToolBtn）—— 5% 白底 + 12% 白描边 + 12px 圆角，hover 只把描边提到 30%；原先 ▶ 是描边圆圈、「选择」是渐变胶囊。 改这里要同步 voice-library.html 的 .vfoot 那条，两处是一套视觉。 */ .eivoice-vpick-card .vplay{flex:none;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#f5f3ff;cursor:pointer;font-size:12px;line-height:1} .eivoice-vpick-card .vplay:hover,.eivoice-vpick-card .vuse:hover{border-color:rgba(255,255,255,.3)} .eivoice-vpick-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0} .eivoice-vpick-card .tag{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(124,92,255,.16);color:#d9c9ff;font-weight:600} /* flex-end 右对齐 + 8px 间距：跟音色库底栏一样，▶ 和「选择」并排贴在右下角 */ .eivoice-vpick-card .vfoot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#aaa5c6} .eivoice-vpick-card .vuse{flex:none;padding:8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);color:#f5f3ff;font-size:12px;line-height:1;cursor:pointer} .eivoice-vpick-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:12px;color:#aaa5c6} .eivoice-vpick-pager button{padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f5f3ff;font-size:12px;cursor:pointer} .eivoice-vpick-pager button:disabled{opacity:.4;cursor:not-allowed} .eivoice-vpick-pager .pjump{display:inline-flex;align-items:center;gap:6px} .eivoice-vpick-pager .pjump-input{width:52px;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f5f3ff;font-size:12px;text-align:center;outline:none} .eivoice-vpick-pager .pjump-input:disabled{opacity:.4;cursor:not-allowed} button:disabled{cursor:not-allowed;opacity:.6} .ac audio{width:100%;height:38px}.crow .eivoice-delete{color:#ff8fb9} /* 删除记录：文件会一起删掉且不可恢复，用告警色和试听/下载按钮区分开 */ .eivoice-del{color:#ff8fb9} .eivoice-voice-select{width:100%;margin:10px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#0d0a20;color:var(--txt);font:inherit} .eivoice-identity-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(3,2,12,.82);backdrop-filter:blur(8px)} .eivoice-identity-dialog{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:#12102a;box-shadow:0 28px 80px rgba(0,0,0,.5);color:#f5f3ff}.eivoice-identity-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}.eivoice-identity-dialog h2{margin:0}.eivoice-identity-close{flex:none;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.06);color:#f5f3ff;font-size:24px;line-height:1;cursor:pointer}.eivoice-identity-close:hover{background:rgba(255,255,255,.13)}.eivoice-identity-close:focus-visible{outline:2px solid #42e8e0;outline-offset:2px}.eivoice-identity-close:disabled{opacity:.45;cursor:not-allowed}.eivoice-identity-dialog p{margin:0 0 20px;color:#aaa5c6;line-height:1.7}.eivoice-identities{display:grid;gap:10px}.eivoice-identity-option{display:flex;flex-direction:column;gap:5px;width:100%;padding:15px;text-align:left;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.04);color:#f5f3ff;cursor:pointer}.eivoice-identity-option:hover,.eivoice-identity-option.is-current{border-color:#42e8e0;background:rgba(66,232,224,.08)}.eivoice-identity-option span{color:#aaa5c6;font-size:13px}.eivoice-identity-option .eivoice-identity-current{align-self:flex-start;padding:3px 8px;border-radius:999px;background:rgba(66,232,224,.14);color:#42e8e0;font-size:11px;font-style:normal;font-weight:700}.eivoice-identity-option .eivoice-identity-current[hidden]{display:none} @media(max-width:640px){.crow{flex-wrap:wrap}.crow .info{min-width:calc(100% - 62px)}} /* 顶栏右上角：23 个有顶栏的页面共用这一份（原先 14 个应用页各写一份 .user/.av/.uinfo， team 那份还少了头像，改一处要改 14 个文件）。 静态 HTML 渲染的是未登录态（默认头像 + 登录）；已登录态由 eivoice-api.js 的 paintUserShell() 在运行时改写——所以没 JS 时看到的是「登录」，不是空白。 */ .user{display:flex;align-items:center;gap:12px;position:relative} .user .av{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;flex:none;overflow:hidden} .user .av img{width:100%;height:100%;object-fit:cover} .user .av.is-guest{background:rgba(255,255,255,.07);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)} .user .av svg{width:21px;height:21px} .user .userlink{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none} .user .namebox{display:flex;flex-direction:column;min-width:0} .user .nick{font-size:14px;font-weight:700;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 昵称下的套餐与身份说明：小字弱化、共用 150px 截断（类名避开套餐卡片的 .plan） */ .user .plan-tag{font-size:11px;color:var(--muted);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user .identity-tag{font-size:11px;color:var(--muted);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user .userlink:hover .nick{color:#c4b5fd} /* 未登录的「登录」按钮不走各页的 .btn：team 那个 .btn 是 11px 圆角，用 .btn 就会和别的页不一样 */ .user .login{padding:9px 18px;border:none;border-radius:999px;background:var(--grad);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none;box-shadow:0 10px 26px rgba(124,92,255,.35)} .user .login:hover{filter:brightness(1.06)} /* 头像悬停菜单（已登录态由 paintUserShell 注入）：用户ID / 控制台 / 切换身份 / 退出登录。 hover 区是整个 .user（菜单在它里面），从头像挪向菜单不会半路收起； 触屏没有 hover——点头像本身仍走 userlink 进控制台，不受影响。 */ .eivoice-usermenu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:180px;padding:8px;background:rgba(13,10,31,.97);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);z-index:90} .user:hover .eivoice-usermenu,.user:focus-within .eivoice-usermenu{display:block} /* 菜单与头像间 8px 的落差用伪元素桥接，鼠标滑过去时不丢 hover */ .eivoice-usermenu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px} .eivoice-usermenu .um-id{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted,#a99fc4);font-size:12px;white-space:nowrap} /* ID 行里的复制按钮：覆盖下面「菜单 button 通栏」那条规则（width:100% 会把它拉成整行） */ .eivoice-usermenu .um-copy{display:inline-block;width:auto;padding:2px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted,#a99fc4);font-size:11px;font-weight:600;line-height:1.6;flex:none} .eivoice-usermenu .um-copy:hover{background:rgba(124,92,255,.25);color:var(--txt,#f3f0ff)} .eivoice-usermenu a,.eivoice-usermenu button{display:block;width:100%;padding:9px 12px;border:none;border-radius:9px;background:none;color:var(--txt,#f3f0ff);font-size:14px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer} .eivoice-usermenu a:hover,.eivoice-usermenu button:hover{background:rgba(255,255,255,.06)} /* 窄下来时该缩的是昵称（它带 overflow:hidden + 省略号），不是把「呗乐配音」或导航项断成两行。 word-break 那类断行一旦发生，整条顶栏会从 70px 高变两行，比挤更难收拾。 */ .logo{flex:none;white-space:nowrap} /* ── 登录弹窗 ──────────────────────────────────────────────────────────────── 需要登录时开弹窗，不再整页跳走；卡片结构在 eivoice-api.js 的 LOGIN_CARD_HTML 里就地建（2026-09-20 起。此前是从 /login/ 页取，那个页已删，说明一并订正）。 两条约束写在前面，删规则前先看： 1. 卡片的样式必须挂在 .eivoice-login-card 下。裸着写会串味——.field 在 invoices/settings/studio 三个页面也在用，.submit 在 invoices，label 更是 每个页面的表单都有。卡片自己也用这套，所以样式仍然只有一份。 2. 颜色一律 var(--x, 字面量)。team.html 的 :root 里没有 --c1/--c2，404.html 没有 --card/--line；弹窗会在 team 这种受保护页上打开，缺变量时得退到字面量， 否则那一个页面的卡片会掉色。 2026-09-20：网页端登录收窄成「只留微信」——手机验证码那套表单节点已从 LOGIN_CARD_HTML 删掉，对应的 label/.field/.codebtn/.captcha-img/.row/.submit/ .divider/.back 规则一并清掉（含 .eivoice-login-dialog .back，它挡的正是卡片里 那个 .back）。同日再收一道：只剩一条路，开窗即自动取码，那个「微信登录」按钮 也撤了，.social 那三行随之变死。**仍是活的**：h2 / .desc / .alt（协议行）/ .wxqr。 */ .eivoice-login-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(3,2,12,.82);backdrop-filter:blur(8px)} .eivoice-login-dialog{position:relative;width:min(432px,100%);max-height:88vh;overflow-y:auto;padding:26px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:#0b0818;box-shadow:0 28px 80px rgba(0,0,0,.5);color:var(--txt,#f3f0ff)} .eivoice-login-close{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.05);color:#a99fc4;font-size:18px;line-height:1;cursor:pointer} .eivoice-login-close:hover{color:#f3f0ff;border-color:rgba(255,255,255,.3)} /* 「返回首页·进入控制台·帮助中心」在弹窗里没意义（点「进入控制台」只会又弹一次），只在登录页留 */ .eivoice-login-card{width:100%;max-width:380px;margin:0 auto} .eivoice-login-card h2{font-size:28px;font-weight:800;margin-bottom:6px} .eivoice-login-card .desc{color:var(--muted,#a99fc4);font-size:14px;margin-bottom:26px} .eivoice-login-card .alt{margin-top:20px;text-align:center;color:var(--muted,#a99fc4);font-size:13px} .eivoice-login-card .alt a{color:var(--c1,#ff5e9c)} /* 页内微信二维码（仅 dev 的 inlineQr 打开时出图，线上这一屏给的是「去微信页面扫码」按钮）。 卡片如今就这一件东西，所以是常显的，没有「藏起来的默认值」这回事了； 里面 #wxQrImg 与 #wxQrRetry 仍由 JS 写 inline style 显隐。 */ .eivoice-login-card .wxqr{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0 2px} .eivoice-login-card .wxqr-img{width:200px;height:200px;padding:9px;border-radius:16px;background:#fff;border:1px solid var(--line,rgba(255,255,255,.12))} .eivoice-login-card .wxqr-state{color:var(--muted,#a99fc4);font-size:13px;text-align:center;line-height:1.6} .eivoice-login-card .wxqr-retry{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:13px;background:var(--card,rgba(255,255,255,.05));color:var(--c1,#ff5e9c);font-size:13px;font-weight:700;cursor:pointer} .eivoice-login-card .wxqr-retry:hover{border-color:rgba(124,92,255,.5)} .eivoice-login-card .wxqr-retry-icon{width:16px;height:16px;flex:none} /* 设置页「绑定手机号」弹窗：骨架复用 .eivoice-login-overlay/.eivoice-login-dialog/.eivoice-login-close， 这里只补表单件。图形码一次性消费后要刷新，所以图片本身是可点的。 */ .eivoice-bind h3{font-size:20px;font-weight:800;margin:0 0 4px} .eivoice-bind .bind-desc{color:var(--muted,#a99fc4);font-size:13px;margin-bottom:18px} .eivoice-bind .bind-row{display:flex;gap:10px;margin-bottom:12px} .eivoice-bind input[type=text]{flex:1;min-width:0;padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line,rgba(255,255,255,.12));color:var(--txt,#f3f0ff);font-size:14px;outline:none} .eivoice-bind input[type=text]:focus{border-color:rgba(124,92,255,.55)} .eivoice-bind .bind-captcha-img{width:110px;height:44px;flex:none;border-radius:11px;border:1px solid var(--line,rgba(255,255,255,.12));background:#fff;cursor:pointer;object-fit:cover} .eivoice-bind .btn{flex:none;white-space:nowrap} .eivoice-bind .bind-submit{display:block;width:100%;margin-top:6px;padding:12px;border-radius:13px;font-size:15px;text-align:center} /* 用户协议：登录页与弹窗共用（挂 eivoice- 前缀，免得和别的页面将来的 .modal 撞名）。 z-index 比 .eivoice-login-overlay 高一层，弹窗里点开时盖在登录卡上。 */ .eivoice-modal{display:none;position:fixed;inset:0;z-index:100010;background:rgba(4,3,12,.74);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px} .eivoice-modal.open{display:flex} .eivoice-mbox{width:100%;max-width:420px;max-height:86vh;display:flex;flex-direction:column;background:#0f0c20;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.55)} .eivoice-mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 4px} .eivoice-mhead h3{font-size:17px;font-weight:800;margin:0} .eivoice-mclose{background:var(--card,rgba(255,255,255,.05));border:1px solid var(--line,rgba(255,255,255,.12));color:var(--muted,#a99fc4);width:32px;height:32px;border-radius:10px;font-size:15px;cursor:pointer;line-height:1} .eivoice-mclose:hover{color:var(--txt,#f3f0ff);border-color:rgba(255,255,255,.3)} .eivoice-mbody{padding:12px 20px 20px;overflow-y:auto} .eivoice-mbody .mhint{color:var(--muted,#a99fc4);font-size:13px;margin-bottom:14px} .eivoice-mbody h4{font-size:14px;font-weight:800;margin:16px 0 6px;display:flex;align-items:center;gap:8px} .eivoice-mbody h4::before{content:"";width:5px;height:15px;border-radius:3px;background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee));flex:none} .eivoice-mbody p,.eivoice-mbody li{color:var(--muted,#a99fc4);font-size:13px;line-height:1.6} .eivoice-mbody ul{margin:4px 0 0 18px;display:grid;gap:4px} /* ── 权益余量（控制台 + 各功能页）──────────────────────────────────────────── 三端同一套口径，数据全来自 /account/summary（控制台由 requireSession 已经取回， 功能页复用同一份，不再发请求）。文案与桌面端 ToolQuota 保持一致： 没套餐说「未订阅」而不是「剩余 0」（0 是没权限，不是用完了），上限 0 说「不限」。 auto-fill 而不是媒体查询：media 块里套选择器会让「新增段落每条都带 .eivoice- 前缀」 那条守门断言误判（它按 { 切选择器，@media 那行会被当成一个没前缀的选择器）。 */ .eivoice-quota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:22px} .eivoice-quota-card{background:var(--card,rgba(255,255,255,.05));border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;padding:20px} .eivoice-quota-card .k{font-size:16px;font-weight:800;color:var(--muted,#a99fc4)} .eivoice-quota-card .v{font-size:13px;font-weight:400;margin-top:6px;background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee));-webkit-background-clip:text;background-clip:text;color:transparent} .eivoice-quota-card .v.plain{background:none;color:var(--muted,#a99fc4);font-size:13px} .eivoice-quota-card .d{font-size:12px;color:var(--c3,#22d3ee);margin-top:4px} .eivoice-quota-card .bar{margin-top:12px;height:6px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden} .eivoice-quota-card .bar i{display:block;height:100%;border-radius:999px;background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee))} .eivoice-quota-card.is-low .bar i{background:var(--c1,#ff5e9c)} /* 用完了/快用完：数字也换成告警色（渐变文字没法变色，得先把 clip 摘掉） */ .eivoice-quota-card.is-low .v{background:none;color:var(--c1,#ff5e9c)} .eivoice-quota-hint{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:9px 15px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:999px;background:var(--card,rgba(255,255,255,.05));color:var(--muted,#a99fc4);font-size:13px} .eivoice-quota-hint b{color:var(--txt,#f3f0ff);font-weight:700} /* 一页挂两项（配音页：配音次数 + 本周期字数）时并排两个药丸，别贴在一起 */ .eivoice-quota-hint + .eivoice-quota-hint{margin-left:10px} .eivoice-quota-hint.is-low{border-color:var(--c1,#ff5e9c);color:var(--c1,#ff5e9c)} .eivoice-quota-hint.is-low b{color:var(--c1,#ff5e9c)} /* ── 选项弹窗（目标语言/方言/情绪、音色库的语言/方言/性别）────────────────────── 内容由 eivoice-api.js 的 openOptionPicker 建。站点是深色底，这一对卡片类必须走 overlayDialog 的**二参形态**（否则拿到的是那个写死 background:#fff 的白卡， 里面的 .chip 是照深色底配的，在白卡上边框和底色几乎看不见）。 */ .eivoice-opt-mask{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,6,17,.72);backdrop-filter:blur(4px)} .eivoice-opt-card{width:100%;max-width:520px;max-height:80vh;overflow-y:auto;padding:22px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:20px;background:var(--bg2,#0d0a1f);color:var(--txt,#f3f0ff);box-shadow:0 24px 70px rgba(0,0,0,.5)} .eivoice-opt-card h3{margin:0 0 14px;font-size:17px} /* 卡里的选项 chip：三个页面的 .chip 都是按深色底配的（--muted 字 + 12% 白边 + 5% 白底）， 这里只是把「当前可选」提亮一档 —— 字提到 --txt、边到 16%、底到 6%，hover 走紫色强调。 注意别再往 .eivoice-optpick 上加白卡配色（历史上有一对 `color:#555;border-color:#ddd`， 是给已下线的白卡分支写的，特异性 (0,2,0) 会盖住页面的 .chip，把选项染成深灰字+亮白边）。 */ .eivoice-opt-card .chip{color:var(--txt,#f3f0ff);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)} .eivoice-opt-card .chip:hover{color:#fff;border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.16)} .eivoice-opt-card .chip.on{background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee));color:#fff;border:none;box-shadow:0 8px 20px rgba(124,92,255,.35)} /* ── 发票申请 / 改信息 弹窗（网站发票页 + 我的订单页共用）──────────────────────── 弹窗由 eivoice-api.js 动态建、挂在 document.body 上；样式放这份共享表里， 两页都能用，不必在每个 design/*.html 各抄一份。 */ .eivoice-invoice-mask{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,6,17,.72);backdrop-filter:blur(4px)} .eivoice-invoice-card{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:24px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:20px;background:var(--bg2,#0d0a1f);color:var(--txt,#f3f0ff);box-shadow:0 24px 70px rgba(0,0,0,.5)} .eivoice-invoice-card h3{margin:0 0 4px;font-size:18px} .eivoice-invoice-card .eivoice-invoice-sub{margin-bottom:18px;color:var(--muted,#a99fc4);font-size:12px} .eivoice-invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .eivoice-invoice-field{display:flex;flex-direction:column;gap:6px} .eivoice-invoice-field.full{grid-column:1/-1} .eivoice-invoice-field label{color:var(--muted,#a99fc4);font-size:13px} .eivoice-invoice-field input,.eivoice-invoice-field select{padding:10px 13px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:11px;background:rgba(255,255,255,.03);color:var(--txt,#f3f0ff);font:inherit;font-size:14px;outline:none} .eivoice-invoice-orders{margin-top:18px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;padding:12px;max-height:230px;overflow-y:auto} .eivoice-invoice-orders label{display:flex;align-items:center;gap:11px;padding:9px 7px;border-radius:10px;cursor:pointer;font-size:13px} .eivoice-invoice-orders label:hover{background:rgba(255,255,255,.05)} .eivoice-invoice-orders input{flex:none;width:16px;height:16px;accent-color:#7c5cff} .eivoice-invoice-orders .n{font-variant-numeric:tabular-nums;color:var(--muted,#a99fc4);min-width:104px} .eivoice-invoice-orders .m{margin-left:auto;font-weight:700} .eivoice-invoice-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line,rgba(255,255,255,.12));font-weight:700} .eivoice-invoice-total b{background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee));-webkit-background-clip:text;background-clip:text;color:transparent} .eivoice-invoice-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} .eivoice-invoice-foot button{padding:10px 18px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--line,rgba(255,255,255,.12));background:rgba(255,255,255,.05);color:var(--txt,#f3f0ff)} .eivoice-invoice-foot button.primary{border:none;background:var(--grad,linear-gradient(120deg,#ff5e9c,#7c5cff,#22d3ee));color:#fff} .eivoice-invoice-foot button:disabled{opacity:.45;cursor:not-allowed} .eivoice-invoice-empty{padding:26px 10px;text-align:center;color:var(--muted,#a99fc4);font-size:13px} /* .hidden = true 只靠浏览器默认的 [hidden]{display:none}，会被上面那条 .eivoice-invoice-field{display:flex} 盖掉（作者样式优先于默认样式），字段显隐得自己再声明一次 ——同 studio.html 的 .player[hidden]。 */ .eivoice-invoice-field[hidden]{display:none} @media(max-width:640px){.eivoice-invoice-grid{grid-template-columns:1fr}} /* 价格页套餐列表上方的「当前套餐」信息条（paintCurrentPlanBar 注入，未登录/无套餐时 hidden） */ .cur-plan-bar{margin:0 0 16px;padding:13px 18px;border:1px solid rgba(124,92,255,.35);border-radius:14px;background:rgba(124,92,255,.08);font-size:13px;color:#cfc9e8} .cur-plan-bar b{color:#f3f0ff} /* 记录列表右上角「⟳ 刷新」按钮（15 个功能记录页共用，由 attachListRefresh 注入）； 不接各页本地 .btn 定义（形态各异），这里一份统一外观 */ /* 侧栏工具组手风琴（2026-10-12）：组头可点，箭头走伪元素（不进 textContent， 侧栏分组标题有逐字断言）；展开/收起用 display 切换，收起的链接点不着。 */ .side .grp.side-grp-collapsible{cursor:pointer;user-select:none;-webkit-user-select:none} .side .grp.side-grp-collapsible:hover{color:var(--txt,#f3f0ff)} .side .grp.side-grp-collapsible::after{content:"";float:right;margin-top:8px; border-left:6px solid rgba(255,255,255,.45); border-top:5px solid transparent;border-bottom:5px solid transparent; transition:transform .15s ease} .side .grp.side-grp-collapsible.open::after{transform:rotate(90deg)} .side .side-group{display:none} .side .side-group.open{display:block} /* 侧栏 / 顶栏下拉 图标-文字垂直对齐（2026-10-12，全站统一覆写）。本表在 DesignPage 里排在各页内联