/* 客户门户与原有邮箱登录独立作用域，共用蓝紫品牌；不影响运营后台。 */
[data-portal] { color:#17233e; background:#f7f9fe; min-height:100vh; font-family:Inter,system-ui,sans-serif; }
[data-portal] * { box-sizing:border-box; }
[data-portal] button,[data-portal] input { font:inherit; }
[data-portal] button { cursor:pointer; background:#315bf5; color:white; border:1px solid #315bf5; border-radius:9px; padding:11px 18px; font-size:14px; font-weight:600; }
[data-portal] button:disabled { opacity:.5; cursor:wait; }
[data-portal] button.secondary { background:white; color:#3657a8; border-color:#dce3f3; }
[data-portal] a { color:#315bf5; text-decoration:none; }
[data-portal] svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; vertical-align:middle; }
[data-portal] h1 { font-size:32px; line-height:1.3; margin:0 0 16px; letter-spacing:-.6px; color:#17233e; }
[data-portal] h2 { color:#17233e; font-size:21px; margin:24px 0 16px; }
[data-portal] p { line-height:1.75; }
.portal-header { height:80px; display:flex; padding:0 max(24px,calc((100vw - 1280px)/2)); align-items:center; justify-content:space-between; gap:24px; background:white; border-bottom:1px solid #e6eaf5; }
.portal-header nav { display:flex; align-items:center; gap:26px; font-size:14px; }
.public-header { position:sticky; top:0; z-index:20; color:#315bf5; font-family:Inter,system-ui,sans-serif; }
.public-header a { color:#315bf5; text-decoration:none; font-weight:600; }
.public-header .public-entry { background:#315bf5; color:white; padding:12px 22px; border-radius:10px; min-width:112px; box-sizing:border-box; text-align:center; }
.public-header .public-entry[aria-current="page"] { box-shadow:0 0 0 3px #315bf526; }
.public-header nav a:not(.public-entry)[aria-current="page"] { text-decoration:underline; text-underline-offset:8px; }
.public-header a:hover { filter:brightness(.85); }
.public-header a:focus-visible { outline:3px solid #647eff; outline-offset:4px; }
.public-header ~ .auth-shell,.public-header ~ .session-gate { min-height:calc(100svh - 80px); }
@media(max-width:800px) { .public-header ~ .auth-shell .auth-showcase { display:none; } }
.portal-brand { display:flex; align-items:center; font-size:21px; font-weight:800; letter-spacing:.3px; gap:10px; }
.portal-brand img { width:38px; height:38px; }
.portal-layout { max-width:1360px; margin:auto; }
.portal-main { padding:40px; min-width:0; }
.portal-layout.has-sidebar { display:grid; grid-template-columns:210px minmax(0,1fr); min-height:75vh; }
.portal-sidebar { padding:32px 16px; background:#fff; border-right:1px solid #e6eaf5; }
.portal-sidebar small { color:#8290a5; display:block; padding:0 12px 20px; }
.portal-sidebar a { display:flex; gap:12px; padding:14px; border-radius:9px; color:#53617a; font-size:14px; margin:4px 0; }
.portal-sidebar a.active { color:#315bf5; background:#edf2ff; font-weight:700; }
.portal-user { font-size:12px; color:#748199; padding:30px 10px; overflow-wrap:anywhere; }
.pricing-hero { text-align:center; padding:35px 12px 50px; background:radial-gradient(ellipse,#eceeff,transparent 70%); }
.pricing-hero h1 { font-size:44px; margin:18px 0; }
.pricing-hero p { color:#687790; }
.portal-tag { display:inline-block; color:#4967d5; background:#edf1ff; border:1px solid #dde5ff; font-size:12px; padding:5px 10px; border-radius:6px; }
.portal-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.portal-plan { background:#fff; border:1px solid #dfe6f2; padding:30px; border-radius:18px; display:flex; flex-direction:column; box-shadow:0 6px 24px #21356b05; }
.portal-plan.featured { border:2px solid #5374fa; box-shadow:0 8px 28px #315bf510; }
.portal-plan { position:relative; }
.portal-plan { cursor:pointer; }
.plan-choice { position:absolute; right:20px; top:20px; width:18px; height:18px; accent-color:#315bff; cursor:pointer; }
.portal-plan:has(.plan-choice:focus-visible) { outline:2px solid #315bff; outline-offset:4px; }
.portal-plan ul { border-top:1px solid var(--line,#edf0f7); }
.portal-plan.featured > .portal-tag { position:absolute; top:-15px; left:24px; background:#edf1ff; }
.portal-plan h2 { font-size:26px; margin:18px 0 4px; }.portal-plan p { color:#6e7b93; }
.portal-price { font-size:36px; font-weight:750; margin:20px 0; }.portal-price small { font-size:14px; font-weight:400; color:#71809a; }
.portal-plan dl { border-top:1px solid #edf0f7; padding-top:16px; }
.portal-plan dl div { display:flex; justify-content:space-between; gap:8px; margin:14px 0; font-size:14px; }.portal-plan dt { color:#68758f; }.portal-plan dd { margin:0; font-weight:700; }
.portal-plan ul { padding:0; list-style:none; font-size:14px; color:#64718a; line-height:1.9; flex:1; }
.portal-plan li { position:relative; padding:12px 0 12px 24px; border-bottom:1px solid var(--line,#edf0f7); overflow-wrap:anywhere; }
.portal-plan li::before { content:"✓"; position:absolute; left:0; color:var(--brand,#315bff); }
.portal-plan li:last-child { border-bottom:0; }
.portal-plan button { width:100%; margin:16px 0 0; min-height:44px; }
.portal-info { padding:20px 24px; margin:24px 0; border:1px solid #dfe6f7; border-radius:12px; background:#eef3ff; color:#536789; font-size:14px; }
.portal-info p:last-child { margin-bottom:0; }.portal-info pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.portal-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:36px 0; }
.portal-steps article { padding:26px; border-radius:14px; background:white; border:1px solid #e3e9f3; }.portal-steps b { color:#8c9dea; font-size:26px; }.portal-steps p { font-size:14px; color:#718098; }
.portal-faq { max-width:860px; margin:45px auto; }.portal-faq details { padding:20px 0; border-bottom:1px solid #dfe6f2; }.portal-faq summary { cursor:pointer; font-weight:600; }.portal-faq p { color:#687790; font-size:14px; }
.portal-footer { padding:32px 20px; text-align:center; font-size:12px; color:#7886a0; line-height:1.9; border-top:1px solid #e3e9f5; }
.portal-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }.portal-muted { color:#74829a; font-size:14px; }
.portal-stats,.portal-quotas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:25px 0; }
.portal-stats article,.portal-quotas article { background:white; border:1px solid #e2e8f2; padding:22px; border-radius:13px; }
.portal-stats span { color:#718097; font-size:13px; }.portal-stats strong { display:block; font-size:28px; margin-top:12px; }
.portal-quotas strong { display:block; font-size:24px; color:#315bf5; }.portal-quotas small { color:#77859b; font-size:12px; }.portal-quotas p { font-size:13px; }
.portal-table { overflow-x:auto; background:white; border:1px solid #e3e9f3; border-radius:12px; margin:22px 0; }.portal-table table { border-collapse:collapse; width:100%; font-size:13px; }.portal-table th,.portal-table td { padding:17px; border-bottom:1px solid #edf0f6; text-align:left; white-space:nowrap; color:#485876; }.portal-table th { color:#74829a; background:#fbfcff; }
.portal-code { background:white; border:1px solid #e1e7f4; border-radius:16px; padding:24px; }.portal-code header { display:flex; justify-content:space-between; align-items:center; }.portal-code pre { background:#14213b; color:#d7e3ff; border-radius:10px; padding:22px; overflow-x:auto; line-height:1.7; font-size:13px; }
.portal-key-form { display:flex; gap:16px; align-items:end; margin:24px 0; }.portal-key-form label { display:grid; gap:10px; }.portal-key-form input { padding:11px 14px; border:1px solid #cad5e9; background:white; border-radius:8px; color:#17233e; }
/* Key页复用门户卡片与按钮，创建结果独立于列表刷新，窄屏仅表格内部滚动。 */
.portal-key-card { margin:24px 0; padding:24px; background:white; border:1px solid #e0e7f4; border-radius:14px; }
.portal-key-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.portal-key-card-heading h2 { margin:0; font-size:18px; }.portal-key-card-heading h2 span { margin-left:8px; font-size:13px; color:#7a88a0; }
.portal-key-card .portal-key-form { margin:20px 0 12px; }.portal-key-form label { flex:1; max-width:480px; min-width:0; position:relative; }.portal-key-form small { position:absolute; left:42px; color:#7a88a0; font-size:12px; top:3px; }.portal-key-form input { width:100%; }
.portal-key-card .portal-muted { margin-bottom:0; font-size:13px; }
/* 创建弹窗使用既有主题变量，窄屏保持单列，取消和提交不挤出视口。 */
.portal-dialog.portal-key-dialog { max-width:620px; padding:28px; border-radius:24px; max-height:calc(100dvh - 32px); overflow-y:auto; }
.portal-key-dialog header { display:flex; gap:16px; align-items:start; }.portal-key-dialog h2 { margin:0 0 8px; }.portal-key-dialog header p { margin:0; color:var(--muted,#74829a); font-size:14px; }
.key-dialog-icon { display:flex; padding:14px; border-radius:14px; color:#3658ff; background:var(--panel,#eef3ff); }.key-dialog-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; }
.portal-key-dialog .key-dialog-close { margin-left:auto; padding:2px 8px; font-size:26px; background:transparent; border:0; }
.portal-key-dialog .portal-key-form { display:block; margin:28px 0 0; }.portal-key-dialog label { max-width:none; }.portal-key-dialog input { background:var(--surface,#fff); color:var(--ink,#17233e); border-color:var(--line,#cad5e9); }
.portal-key-dialog .portal-key-form small { left:56px; }
.key-dialog-hint { display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-size:12px; color:var(--muted,#74829a); }.key-dialog-hint [data-key-count-input] { white-space:nowrap; }
.portal-key-dialog .portal-info { margin:24px 0; font-size:13px; }.portal-key-dialog footer { display:flex; justify-content:flex-end; gap:12px; border-top:1px solid var(--line,#e1e7f4); padding-top:20px; }
[data-create-feedback]:not([hidden]) { color:var(--ink,#855921); padding:12px; background:var(--surface-soft,#fff7e9); }
.portal-key-table { margin:18px 0 0; }.portal-key-table td strong { display:block; overflow-wrap:anywhere; white-space:normal; max-width:240px; }.portal-key-table td code { display:block; margin-top:7px; color:#77859b; font-size:12px; }.portal-key-table .portal-empty { padding:32px 16px; white-space:normal; }.portal-key-table .portal-empty h3 { color:#536789; }
.portal-key-actions { display:flex; gap:10px; flex-wrap:wrap; }.portal-key-actions button { padding:8px 12px; }.portal-key-actions .danger { color:#b23c3c; }
.portal-key-status { padding:4px 8px; border-radius:5px; background:#fff4dd; color:#a96200; border:1px solid #f2d59c; }.portal-key-status.active { background:#e9f8ef; color:#16804b; border-color:#bce9cc; }
/* 删除确认沿用仪表盘卡片分区，共用水平内边距，避免说明随标题图标缩进。 */
.portal-dialog.portal-delete-dialog { padding:0; }
.portal-delete-dialog header { align-items:center; padding:24px; border-bottom:1px solid var(--line,#e1e7f4); }
[data-portal] .portal-delete-dialog h2 { margin:0; }
.portal-delete-dialog .key-dialog-icon { flex-shrink:0; padding:10px; }
.delete-key-body { padding:24px; }
.delete-key-body p { margin:0; }
.delete-key-description { color:var(--muted,#74829a); font-size:14px; line-height:1.6; }
.delete-key-body .portal-muted { margin:20px 0 10px; font-size:13px; }
.portal-delete-dialog footer { padding:18px 24px; align-items:center; }
.portal-delete-dialog footer button { min-height:44px; }
.portal-delete-dialog .key-dialog-icon,.delete-key-warning { background:#fff1f2; color:#c43445; }
.delete-key-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px; background:var(--panel,#f3f6ff); border:1px solid var(--line,#e1e7f4); border-radius:12px; }
.delete-key-summary>div { min-width:0; overflow-wrap:anywhere; }.delete-key-summary code { display:block; margin-top:8px; color:var(--muted,#74829a); }.delete-key-summary .portal-key-status { white-space:nowrap; }
.delete-key-body .delete-key-warning { display:flex; align-items:center; gap:10px; margin-top:16px; padding:14px; border-radius:10px; font-size:14px; line-height:1.6; }
.delete-key-warning>span:first-child { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; border:1.5px solid currentColor; border-radius:50%; font-weight:700; }
@media(max-width:480px) { .portal-delete-dialog header,.delete-key-body,.portal-delete-dialog footer { padding:18px; } }
.portal-delete-dialog [data-delete-confirm] { background:#d92d42; color:white; border:1px solid #d92d42; display:flex; align-items:center; gap:6px; }
.portal-delete-dialog [data-delete-confirm] svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
html[data-theme="dark"] .portal-key-status { background:#382b18; color:#f4c779; border-color:#806239; }
html[data-theme="dark"] .portal-key-status.active { background:#193529; color:#75dda4; border-color:#386b51; }
html[data-theme="dark"] .portal-delete-dialog .key-dialog-icon,html[data-theme="dark"] .delete-key-warning { background:#3c202a; color:#ff9baa; }
@media(max-width:760px) { .portal-key-card { padding:18px; }.portal-key-card .portal-key-form { display:grid; }.portal-key-form label { max-width:none; }.portal-key-card-heading { flex-wrap:wrap; } }
.portal-dialog { max-width:520px; width:calc(100% - 32px); border:1px solid #dce4f3; border-radius:16px; padding:30px; color:#17233e; background:white; }.portal-dialog::backdrop { background:#14213b88; }.portal-dialog input[type=checkbox] { width:auto; }.portal-empty { padding:60px 20px; text-align:center; color:#7a88a0; }
[data-portal] :focus-visible { outline:3px solid #819bff; outline-offset:3px; }
@media(max-width:1050px) { .portal-main { padding:25px; }.portal-layout.has-sidebar { grid-template-columns:175px minmax(0,1fr); }.portal-plans { gap:12px; }.portal-plan { padding:20px; }.pricing-hero h1 { font-size:35px; } }
@media(max-width:760px) { .portal-header { height:auto; padding:18px; flex-wrap:wrap; gap:16px; }.portal-header nav { gap:15px; flex-wrap:wrap; }.portal-layout.has-sidebar { display:block; }.portal-sidebar { display:flex; flex-wrap:wrap; padding:8px; }.portal-sidebar small,.portal-user { display:none; }.portal-sidebar a { padding:10px; }.portal-main { padding:24px 16px; }.portal-plans,.portal-steps,.portal-stats,.portal-quotas { grid-template-columns:1fr; }.pricing-hero { padding:20px 0 32px; }.pricing-hero h1 { font-size:30px; }.portal-key-form { flex-wrap:wrap; }.portal-heading { flex-wrap:wrap; } }
/* 客户控制台沿用登录页浅蓝紫玻璃质感；颜色仅负责视觉，不改变额度与结算状态。 */
/* 全站顶栏占据同一网格首行；控制台只占剩余高度，公共页恢复文档滚动。 */
body.console-view { height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
[data-portal].portal-authenticated:not([hidden]) { min-height:0; display:grid; grid-template-rows:minmax(0,1fr); overflow:hidden; background:radial-gradient(ellipse at 100% 0,#eee9ff80,transparent 45%),linear-gradient(125deg,#f0f7ff,#f8faff 48%,#f3f0ff); }
.portal-authenticated .portal-layout { width:100%; max-width:none; margin:0; grid-template-columns:230px minmax(0,1fr); min-height:0; overflow:hidden; }
.portal-authenticated .portal-main { padding:32px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
/* 控制台限定为视口高度；主内容和短屏导航各自滚动，邮箱退出不参与导航滚动。 */
.portal-authenticated .portal-main > .portal-footer { margin-top:32px; }
.portal-authenticated .portal-sidebar { background:#ffffff80; display:flex; flex-direction:column; padding:22px 14px; min-height:0; overflow:hidden; }
.portal-sidebar nav { display:grid; gap:8px; min-height:0; overflow-y:auto; }
.portal-user > span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.portal-authenticated .portal-sidebar a { min-height:52px; font-size:15px; position:relative; transition:background .15s,color .15s; }
.portal-sidebar a:hover,.portal-sidebar a:focus-visible { color:#245df3; background:#eaf1ff; }
.portal-sidebar a.active { color:#1959ee; background:linear-gradient(100deg,#e6eeff,#f0f4ff); }
.portal-sidebar a.active::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:#3168ff; }
.portal-authenticated .portal-user { margin-top:auto; flex-shrink:0; padding:24px 12px 0; color:#25375b; display:grid; gap:18px; font-size:12px; }
.portal-user button.secondary { border:0; border-top:1px solid #e0e7f7; border-radius:0; text-align:left; background:none; padding:18px 0; display:flex; gap:12px; align-items:center; color:#536584; }
.portal-user button:hover { color:#245df3; }
/* 版本只作辅助信息；桌面跟随账号出口，手机移至页脚，避免重复展示。 */
.portal-version { font-size:11px; font-weight:400; color:var(--muted,#7886a0); }
.portal-sidebar .portal-version { margin-top:-12px; }
.portal-footer .portal-version,.portal-mobile-account .portal-version { display:none; }
@media(max-width:760px) { .portal-footer .portal-version { display:block; margin-top:8px; } }
.portal-authenticated h1 { font-size:30px; margin-bottom:8px; }
.portal-authenticated h2 { font-size:18px; margin:26px 0 16px; }
.portal-authenticated h3 { font-size:16px; margin:0; }
.portal-authenticated .portal-heading { margin-bottom:22px; }
.portal-authenticated .portal-heading p { margin:6px 0; }
.console-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.console-stats article { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:center; border:1px solid #e2e8f6; background:#ffffffaf; padding:22px; border-radius:20px; box-shadow:0 4px 12px #2e477a04; }
.console-stats .console-icon { grid-row:span 2; width:52px; height:52px; }
.console-stats article>span:not(.console-icon) { font-size:13px; color:#607190; }
.console-stats strong { font-size:24px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; margin-top:6px; overflow-wrap:anywhere; }
.console-icon { display:inline-flex; flex:none; justify-content:center; align-items:center; width:42px; height:42px; border-radius:13px; border:1px solid #ffffff; box-shadow:0 2px 5px #49619407; }
.console-icon svg { width:24px; height:24px; }
.console-icon.blue { color:#2867ed; background:linear-gradient(135deg,#dae9ff,#f4f8ff); }
.console-icon.teal { color:#009da7; background:linear-gradient(135deg,#d8f2f2,#f2fcfb); }
.console-icon.purple { color:#8b4bf3; background:linear-gradient(135deg,#e9dfff,#fbf7ff); }
.console-icon.orange { color:#e78117; background:linear-gradient(135deg,#ffebd7,#fffaf3); }
.console-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.console-card { min-width:0; border:1px solid #e0e7f6; border-radius:22px; background:#ffffffac; box-shadow:0 5px 20px #536ba306; overflow:hidden; }
.console-card>header { min-height:90px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid #e7ecf9; }
.console-card>header p { font-size:12px; color:#70809b; margin:6px 0 0; }
.console-card>header>.console-link,.console-card>header>button,.console-card>header>.console-ranges { margin-left:auto; }
.console-link { border:1px solid #dce5fc; background:#fafbff; padding:8px 12px; font-size:12px; border-radius:10px; white-space:nowrap; }
.console-card-body { padding:22px; }
.subscription-banner { display:flex; gap:14px; align-items:center; border:1px solid #e7eafa; background:linear-gradient(110deg,#f0edff,#eff5ff); border-radius:15px; padding:16px; }
.subscription-banner strong,.subscription-banner small { display:block; }
.subscription-banner strong { font-size:14px; }
.subscription-banner small { margin-top:6px; font-size:12px; color:#657695; }
.subscription-banner a { display:inline-block; margin-top:8px; font-size:13px; }
.console-note { padding:13px 14px; background:#eff4fe; border-radius:12px; font-size:12px; color:#5a6d8d; }
.console-note svg { width:16px; height:16px; margin-right:5px; }
.console-mini-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.console-mini-stats article { min-width:0; padding:14px; border:1px solid #e4eaf9; background:linear-gradient(135deg,#f9fbff,#f0f4ff80); border-radius:14px; }
.console-mini-stats .console-icon { width:32px; height:32px; margin-bottom:10px; border-radius:9px; }
.console-mini-stats .console-icon svg { width:19px; height:19px; }
.console-mini-stats article>span:not(.console-icon),.quota-tile>span:not(.console-icon) { display:block; color:#657694; font-size:12px; }
.console-mini-stats strong { display:block; font-size:17px; margin-top:8px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
/* 每日额度独占首行，每周与订阅周期共用次行；按窗口标识定位，不依赖数组下标。 */
.console-quota-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.console-quota-grid [data-quota-window="day"] { grid-column:1/-1; }
.quota-tile { padding:16px; border:1px solid #e3e9f9; background:linear-gradient(110deg,#f4faff,#f5f2ff70); border-radius:15px; min-width:0; }
.quota-tile .console-icon { width:30px; height:30px; float:left; margin-right:10px; margin-bottom:10px; }
.quota-tile>strong { display:block; clear:both; font-size:23px; font-variant-numeric:tabular-nums; margin:10px 0; overflow-wrap:anywhere; }
.quota-tile small { font-size:11px; color:#5f7193; font-weight:400; }
/* 两种主题及两个额度页面共享圆角渐变条，轨道随主题变化；保留原生progress数值语义和预警覆盖。 */
:is(.quota-tile,.portal-quotas) progress { display:block; width:100%; height:6px; margin:12px 0; border:0; border-radius:8px; overflow:hidden; appearance:none; background:var(--quota-track,#dce5f7); }
:is(.quota-tile,.portal-quotas) progress::-webkit-progress-bar { border-radius:8px; background:var(--quota-track,#dce5f7); }
:is(.quota-tile,.portal-quotas) progress::-webkit-progress-value { border-radius:8px; background:linear-gradient(90deg,#2f83ff,#8562ff); }
:is(.quota-tile,.portal-quotas) progress::-moz-progress-bar { background:linear-gradient(90deg,#2f83ff,#8562ff); border-radius:8px; }
.quota-tile[data-state="warning"] progress::-webkit-progress-value { background:#d97706; }
.quota-tile[data-state="exhausted"] progress::-webkit-progress-value { background:#dc2626; }
.quota-tile[data-state="warning"] progress::-moz-progress-bar { background:#d97706; }
.quota-tile[data-state="exhausted"] progress::-moz-progress-bar { background:#dc2626; }
.console-ranges { display:flex; flex-wrap:wrap; gap:8px; }
.console-ranges button { padding:7px 10px; font-size:12px; }
.console-chart { border:1px solid #e7ecf9; border-radius:15px; padding:18px; background:linear-gradient(140deg,#ffffffa0,#f5f7ffa0); min-width:0; }
.console-chart header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.console-chart header strong { font-size:21px; font-variant-numeric:tabular-nums; }
[data-portal] .usage-chart { width:100%; height:auto; margin:16px 0 2px; stroke:none; }
.chart-grid line { stroke:#dce4f5; stroke-dasharray:3 3; stroke-width:1; }
.chart-grid text { fill:#66789d; font-size:10px; }
.chart-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.usage-chart .blue { stroke:#3168ff; }.usage-chart .teal { stroke:#08aabc; }.usage-chart .purple { stroke:#9563ed; }.usage-chart .orange { stroke:#ee921f; }
.chart-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; font-size:11px; color:#637394; }
.chart-legend i { display:inline-block; width:12px; height:3px; margin-right:5px; vertical-align:middle; }
/* 图例不继承全局颜色标签的底色，保留系列线段与文字。 */
.chart-legend > span { background:transparent; }
.chart-legend .blue i { background:#3168ff; }.chart-legend .teal i { background:#08aabc; }.chart-legend .purple i { background:#9563ed; }.chart-legend .orange i { background:#ee921f; }
.console-chart details { font-size:12px; margin-top:12px; color:#5373b5; }
.console-chart summary { cursor:pointer; }
.console-footnote { font-size:11px; color:#6a7a96; text-align:center; padding:0 18px 10px; }
.console-log-table { margin:0; background:#ffffff50; border-radius:12px; }
.console-log-table th,.console-log-table td { padding:15px 12px; font-size:12px; }
.console-log-table th { background:#f1f5ff70; color:#506586; }
.console-log-table td { color:#213255; }
.console-log-table tr:hover td { background:#ebf3ff80; }
.console-log-table td strong { font-weight:500; font-size:13px; }
.console-log-table td small { display:block; margin-top:7px; color:#6d7ea1; font-size:11px; }
.console-log-table td .log-source { display:table; padding:3px 6px; border:1px solid #e0e8ff; color:#5e75ac; border-radius:4px; background:#eff4ff; }
.token-chips { display:flex; gap:6px; flex-wrap:wrap; }
.token-chips span { display:inline-block; padding:4px 6px; border:1px solid; border-radius:5px; font-size:11px; }
.token-chips .teal { color:#087d91; border-color:#cbe9f2; background:#effafe; }
.token-chips .purple { color:#7d4ac6; border-color:#e5d6fd; background:#f6f0ff; }
.token-chips .orange { color:#b96512; border-color:#f9dfc6; background:#fff7ee; }
.log-cost { font-variant-numeric:tabular-nums; }
.log-status { display:inline-block; border:1px solid #e0e5f3; padding:4px 7px; border-radius:5px; color:#657793; }
.log-status.success { color:#168651; background:#eefaf2; border-color:#ccebd9; }.log-status.failed { color:#b65e17; background:#fff5e9; border-color:#f6dfc1; }
.console-log-table button.secondary { color:#2460ee; background:transparent; border:0; padding:6px; display:flex; align-items:center; gap:6px; font-size:12px; }
.console-log-table button svg { width:17px; height:17px; }
.console-pagination { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:20px; font-size:12px; color:#526689; }
.console-pagination nav { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-left:auto; }
.console-pagination form { display:flex; gap:8px; align-items:center; }
.console-pagination button { padding:8px 11px; font-size:12px; min-height:36px; }
.console-pagination input,.console-pagination select { border:1px solid #d7e1f5; border-radius:7px; padding:8px; color:#314263; background:#fff; font:inherit; }
.console-pagination input { width:62px; }
[data-portal] .console-detail { margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(520px,100%); border-radius:20px 0 0 20px; background:#f8faff; }
.console-detail header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.console-detail h2 { margin:0; }
.console-detail dl>div { display:grid; grid-template-columns:145px minmax(0,1fr); border-bottom:1px solid #e4eafa; gap:12px; padding:13px 0; font-size:13px; }
.console-detail dt { color:#687b99; }.console-detail dd { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
@media(min-width:1600px) { .console-log-table th,.console-log-table td { padding:12px 16px; font-size:13px; }.token-chips span { font-size:12px; } }
@media(max-width:1250px) { .console-stats { gap:10px; }.console-stats article { padding:16px; gap:10px; }.console-stats .console-icon { width:36px; height:36px; }.console-stats strong { font-size:20px; }.console-card-body { padding:16px; }.console-card>header { padding:18px; }.console-mini-stats article { padding:10px; }.console-mini-stats strong { font-size:15px; } }
@media(max-width:1050px) { .portal-authenticated .portal-layout { grid-template-columns:180px minmax(0,1fr); }.portal-authenticated .portal-main { padding:24px; }.console-columns { grid-template-columns:1fr; }.console-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .portal-authenticated .portal-layout { display:grid; grid-template-columns:minmax(0,1fr); }.portal-authenticated .portal-sidebar { display:none; }.portal-authenticated .portal-main { padding:20px 12px; }.console-stats article { padding:12px; }.console-stats article>span:not(.console-icon) { font-size:11px; }.console-stats strong { font-size:17px; }.console-card>header { padding:16px; }.console-card-body { padding:12px; }.console-pagination nav { margin-left:0; }.console-card { border-radius:16px; }.console-chart { padding:12px; }.console-mini-stats { gap:6px; }.console-mini-stats article { padding:9px; }.console-mini-stats strong { font-size:13px; }.console-mini-stats article>span:not(.console-icon) { font-size:11px; }.quota-tile { padding:12px; }.quota-tile>strong { font-size:19px; }.console-detail dl>div { grid-template-columns:110px minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .portal-authenticated * { transition:none!important; } }
/* 会话尚未确认时只展示中性入口，避免登录页与私有页面闪现。 */
.session-gate { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; padding:24px; text-align:center; color:#17264d; background:linear-gradient(120deg,#eef7ff,#f3efff); }
.portal-mobile-tabs,.portal-mobile-account { display:none; }
@media(max-width:760px) {
  .portal-authenticated .portal-layout { grid-template-rows:auto minmax(0,1fr); }
  /* 五个入口等分宽度；窄屏上下排图文，避免挤掉入口或产生横向滚动。 */
  .portal-mobile-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-width:0; white-space:nowrap; border-bottom:1px solid #dce3f3; background:var(--surface,#fff); }
  .portal-mobile-tabs a { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; padding:12px 2px; font-size:13px; color:var(--muted,#607190); border-bottom:2px solid transparent; }
  .portal-mobile-tabs svg { width:18px; height:18px; flex-shrink:0; }
  .portal-mobile-tabs span { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .portal-mobile-tabs a:hover { color:#4264ed; background:#edf1ff; }
  .portal-mobile-tabs a[aria-current] { color:#4264ed; border-bottom-color:#4264ed; font-weight:600; }
  .portal-mobile-tabs a:focus-visible { outline:2px solid #819bff; outline-offset:-3px; }
  .portal-mobile-account { display:block; }
}
@media(max-width:480px) {
  .portal-mobile-tabs a { flex-direction:column; gap:4px; font-size:11px; }
}
.session-gate h1 { font-size:24px; }
.session-gate nav { display:flex; gap:24px; }
.session-gate a { color:#385bdf; }
.session-gate button { padding:12px 24px; border:0; border-radius:12px; color:white; background:#385bdf; cursor:pointer; }

/* 新建记录仅短暂高亮，不保留敏感明文；减少动态效果偏好下不播放动画。 */
.key-created { animation:key-created 3s ease-out; }
@keyframes key-created { from { background:var(--panel,#edf3ff); } to { background:transparent; } }
@media(prefers-reduced-motion:reduce) { .key-created { animation:none; } }

/* 操作色表达语义；禁用态保留接口限制，不因视觉稿放开复制权限。 */
[data-portal] .portal-key-actions [data-action="reveal-key"] { background:#eaf1ff; color:#345bff; border-color:#ccdaff; }
[data-portal] .portal-key-actions [data-action="assistant"] { background:#345bff; color:white; border-color:#345bff; }
[data-portal] .portal-key-actions [data-status="active"] { background:#e8f8ef; color:#16834a; border-color:#bce9cc; }
[data-portal] .portal-key-actions [data-status="disabled"] { background:#fff4dd; color:#a96200; border-color:#f2d59c; }
[data-portal] .portal-key-actions .danger { background:#fff1f2; color:#c43445; border-color:#f0b4bd; }
.portal-key-actions button:disabled { opacity:.45; cursor:not-allowed; }
/* 浮层不遮挡页面点击；手机留出安全区，提示自身支持关闭和键盘暂停。 */
.portal-toasts { position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); right:24px; width:min(400px,calc(100vw - 32px)); z-index:19; display:grid; gap:10px; pointer-events:none; }
.portal-toast { --toast-color:#345bff; position:relative; display:flex; align-items:center; gap:12px; padding:18px; overflow:hidden; border:1px solid var(--line,#dde5f5); border-radius:12px; background:var(--surface,#fff); color:var(--ink,#17243e); box-shadow:0 8px 28px #152a5420; pointer-events:auto; }
.portal-toast.success { --toast-color:#179b58; }.portal-toast.warning { --toast-color:#bd7900; }.portal-toast.error { --toast-color:#d43d51; }
.toast-symbol { color:var(--toast-color); font-size:24px; font-weight:700; }
[data-portal] .portal-toast button { margin-left:auto; border:0; background:transparent; color:var(--muted,#65758f); padding:4px 8px; font-size:22px; }
.toast-countdown { position:absolute; bottom:0; left:0; height:3px; width:100%; background:var(--toast-color); transform-origin:left; animation:toast-time linear forwards; }
@keyframes toast-time { to { transform:scaleX(0); } }
@media(max-width:640px) { .portal-toasts { right:16px; } }
@media(prefers-reduced-motion:reduce) { .toast-countdown { animation:none; } }
html[data-theme="dark"] [data-portal] .portal-key-actions button.secondary { background:#25324a; }
html[data-theme="dark"] [data-portal] .portal-key-actions [data-action="reveal-key"] { color:#9ebaff; border-color:#45629b; }
html[data-theme="dark"] [data-portal] .portal-key-actions [data-action="assistant"] { background:#345bff; color:white; border-color:#345bff; }
html[data-theme="dark"] [data-portal] .portal-key-actions [data-status="active"] { color:#75dda4; border-color:#386b51; }
html[data-theme="dark"] [data-portal] .portal-key-actions [data-status="disabled"] { color:#f4c779; border-color:#806239; }
html[data-theme="dark"] [data-portal] .portal-key-actions .danger { color:#ff9baa; border-color:#915262; }
