:root { color-scheme:light; --bg:#f3f5f4; --surface:#fff; --surface2:#f8faf9; --line:#dbe2df; --text:#17211e; --muted:#6c7a75; --green:#167d71; --green2:#dff1ed; --yellow:#b77916; --yellow2:#fff3d9; --red:#b43d47; --red2:#fdebee; --blue:#466c97; --shadow:0 14px 35px rgba(25,51,44,.07); }
html[data-theme="dark"] { color-scheme:dark; --bg:#101513; --surface:#18201d; --surface2:#202925; --line:#34413c; --text:#edf4f1; --muted:#9daca6; --green:#63c7b7; --green2:#193a34; --yellow:#e4b55d; --yellow2:#3b2d18; --red:#ef818b; --red2:#42252a; --blue:#91b7e1; --shadow:0 16px 42px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 "Microsoft YaHei", Inter, Arial, sans-serif; }
button,input { font:inherit; }
button { letter-spacing:0; }
.hidden { display:none !important; }
.shell { width:100%; max-width:none; margin:0; padding:20px 22px 28px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; flex:none; color:white; background:#1d5f57; border-radius:7px; font-weight:800; font-size:15px; }
.eyebrow { margin:0 0 2px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.15em; }
h1,h2,h3,p { margin:0; }
h1 { font-size:24px; line-height:1.15; letter-spacing:0; }
h2 { font-size:17px; letter-spacing:0; }
h3 { font-size:13px; letter-spacing:0; }
.muted,.panel-head p,footer { color:var(--muted); }
.toolbar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.theme-picker { position:relative; }
.theme-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:166px; overflow:hidden; padding:5px; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:0 14px 34px rgba(20,40,34,.18); }
.theme-menu button { width:100%; min-height:38px; display:grid; grid-template-columns:22px 1fr 18px; align-items:center; gap:7px; padding:7px 8px; border:0; border-radius:5px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.theme-menu button:hover,.theme-menu button:focus-visible { outline:0; background:var(--surface2); }
.theme-menu button.active { color:var(--green); font-weight:700; }
.theme-symbol { display:grid; place-items:center; font-size:16px; }
.theme-check { visibility:hidden; color:var(--green); text-align:right; font-weight:800; }
.theme-menu button.active .theme-check { visibility:visible; }
.status-pill { display:flex; align-items:center; gap:6px; min-height:34px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--surface); font-size:12px; }
.status-pill i { width:7px; height:7px; border-radius:50%; background:#8b9994; }
.status-pill.ok i { background:var(--green); box-shadow:0 0 0 3px rgba(22,125,113,.12); }
.status-pill.error { color:var(--red); }.status-pill.error i { background:var(--red); }
.segmented { display:flex; padding:3px; background:#e8edeb; border-radius:7px; }
.segmented button { border:0; background:transparent; color:var(--muted); padding:6px 10px; border-radius:5px; cursor:pointer; }
.segmented button.active { background:white; color:var(--text); box-shadow:0 1px 4px rgba(20,40,34,.1); }
.date-picker { width:144px; height:36px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }
.date-picker.active { border-color:var(--green); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 18%,transparent); }
.recent-controls { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.model-filter { min-width:150px; height:36px; padding:0 30px 0 10px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--text); }
.button,.icon-button { border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; min-height:36px; }
.button { padding:7px 13px; }.button.primary { color:white; background:var(--green); border-color:var(--green); }.button.quiet { color:var(--muted); background:transparent; }.icon-button { width:36px; display:grid; place-items:center; font-size:18px; }
.button:hover,.icon-button:hover { border-color:#9eb1aa; }
.refresh-icon { display:inline-block; margin-right:6px; }
.metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.metrics article { min-height:119px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 5px 20px rgba(28,49,43,.03); }
.metrics span,.metrics small { display:block; color:var(--muted); }.metrics strong { display:block; margin:8px 0 4px; font-size:26px; line-height:1; letter-spacing:0; }.metrics .profit strong { color:var(--green); }.metrics article.highlight { border-color:#9fd0c4; background:#e9f6f2; box-shadow:0 6px 22px rgba(22,125,113,.10); }.metrics article.highlight strong { color:var(--green); }.metrics .failure strong { color:var(--red); }
.metrics article.has-estimated-cost { border-color:#e2c281; background:#fffaf0; }.metrics article.has-estimated-cost>strong { color:#9a5a08; }.metrics article.has-estimated-cost small { color:#8b6727; }
.alerts-section { margin-bottom:14px; padding:17px; border:1px solid #efc4ca; border-radius:8px; background:#fff9fa; }
.section-head,.panel-head,.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }.danger-text { color:var(--red); }
.alerts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:12px; }
.alert-card { display:flex; gap:10px; min-width:0; padding:12px; border:1px solid #efd9dc; border-radius:7px; background:white; }.alert-card.critical { border-color:#e7aab2; }.alert-icon { width:26px; height:26px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--red2); color:var(--red); font-weight:800; }.alert-card p { margin:2px 0; color:#44534e; }.alert-card small { color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(330px,.8fr); gap:14px; margin-bottom:14px; }
.panel { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 5px 20px rgba(28,49,43,.03); }
.panel-head { min-height:66px; padding:15px 17px; border-bottom:1px solid var(--line); }.panel-head p { margin-top:2px; font-size:12px; }
.trend-chart { min-height:296px; padding:22px 18px 16px; display:flex; flex-direction:column; }.chart-bars { height:190px; display:flex; gap:8px; align-items:flex-end; border-bottom:1px solid var(--line); }.chart-column { height:100%; flex:1; min-width:18px; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; gap:4px; }.chart-column span,.chart-column small { color:var(--muted); font-size:11px; }.chart-column i { width:min(34px,70%); min-height:6px; background:var(--green); border-radius:3px 3px 0 0; }.chart-summary { display:flex; gap:8px; overflow:auto; margin-top:13px; }.chart-summary div { min-width:78px; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:11px; }.chart-summary b { color:var(--green); font-weight:700; }
.provider-distribution { min-height:296px; padding:25px 18px; display:flex; align-items:center; justify-content:center; gap:28px; }.donut { width:150px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--stops)); display:grid; place-items:center; flex:none; }.donut:before { content:""; width:92px; aspect-ratio:1; background:white; border-radius:50%; grid-area:1/1; }.donut div { grid-area:1/1; z-index:1; display:flex; flex-direction:column; align-items:center; }.donut strong { font-size:25px; }.donut span { color:var(--muted); font-size:11px; }.legend { min-width:150px; }.legend div { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:8px; margin:9px 0; }.legend i { width:9px; height:9px; border-radius:2px; }.legend b { font-size:12px; }
.table-panel { margin-bottom:14px; }.table-wrap { overflow-x:hidden; }table { width:100%; table-layout:auto; border-collapse:collapse; min-width:0; }th,td { padding:10px 12px; text-align:left; border-bottom:1px solid #edf0ef; white-space:normal; overflow-wrap:anywhere; vertical-align:middle; }th { color:var(--muted); background:var(--surface2); font-size:11px; font-weight:700; }td strong,td small { display:block; }td small { color:var(--muted); }.good { color:var(--green); font-weight:700; }.bad { color:var(--red); font-weight:700; }.empty-cell { padding:35px; color:var(--muted); text-align:center; }.health-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--green); }.health-dot.warning { background:var(--yellow); }.health-dot.danger { background:var(--red); }
.stats-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:14px; }
.stats-panels > .table-panel { min-width:0; }
.recent-panel { margin-bottom:0; }.recent-events { max-height:570px; overflow:auto; }.event-row { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-bottom:1px solid #edf0ef; }.event-row:last-child { border-bottom:0; }.event-mark { width:25px; height:25px; display:grid; place-items:center; flex:none; border-radius:50%; color:var(--green); background:var(--green2); font-weight:800; }.event-row.failure .event-mark { color:var(--red); background:var(--red2); }.event-main { min-width:0; flex:1; }.event-main>div { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.event-main span { color:#3f4e49; }.event-main b { padding:1px 6px; border-radius:4px; color:var(--yellow); background:var(--yellow2); font-size:11px; }.event-main b.risk { color:var(--red); background:var(--red2); }.event-main small { color:var(--muted); }.event-main p { margin-top:4px; color:var(--red); overflow-wrap:anywhere; }.event-money { min-width:90px; text-align:right; }.event-money strong,.event-money small { display:block; }.event-money strong { color:var(--green); }.event-money small { color:var(--muted); }
.estimated-cost { color:#9a5a08 !important; }.estimated-cost-note { color:#9a5a08 !important; }
.empty { width:100%; padding:70px 16px; color:var(--muted); text-align:center; }footer { display:flex; justify-content:space-between; gap:20px; padding:15px 2px 0; font-size:11px; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:20px; }.login-panel { width:min(390px,100%); display:grid; gap:18px; padding:28px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }.login-panel .brand-mark { margin-bottom:2px; }.login-panel label,.settings-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; }.login-panel input,.settings-form input { width:100%; height:38px; border:1px solid var(--line); border-radius:5px; padding:8px 10px; background:white; color:var(--text); }.error-text { min-height:20px; color:var(--red); }
dialog { width:min(1120px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border:1px solid var(--line); border-radius:8px; color:var(--text); background:white; box-shadow:0 25px 80px rgba(20,40,34,.22); }dialog::backdrop { background:rgba(18,30,27,.45); }.settings-form { padding:20px; }.dialog-head { padding-bottom:15px; border-bottom:1px solid var(--line); }.settings-section { padding:16px 0; border-bottom:1px solid var(--line); }.compact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:14px; }.compact-grid label { position:relative; }.compact-grid label span { position:absolute; right:10px; bottom:9px; color:var(--muted); }.compact-grid input { padding-right:55px; }.settings-note { display:flex; justify-content:space-between; gap:20px; margin-bottom:12px; }.settings-note span { color:var(--muted); }.pricing-editor { display:grid; gap:12px; max-height:58vh; overflow:auto; padding-right:4px; }.pricing-worker { border:1px solid var(--line); border-radius:7px; background:var(--surface2); }.pricing-title { display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); }.pricing-title small { color:var(--muted); }.pricing-columns { display:grid; grid-template-columns:minmax(190px,.45fr) minmax(0,1.55fr); gap:16px; padding:12px; }.pricing-columns h3 { margin-bottom:8px; color:var(--muted); }.cost-grid { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:8px; }.price-field { display:grid !important; grid-template-columns:minmax(85px,1fr) minmax(85px,110px); align-items:center; gap:8px !important; margin-bottom:7px; }.price-field>div { position:relative; }.price-field b { position:absolute; left:9px; top:9px; color:var(--muted); }.price-field input { height:34px; padding-left:23px; }.estimated-price { border-left:3px solid var(--yellow); padding-left:6px; }.estimated-price-note { display:block; margin-top:2px; color:#9a5a08; font-size:10px; line-height:1.35; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:16px; }.route-order { white-space:normal; font-size:12px; color:var(--muted); }.route-chips { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }.route-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid var(--line); border-radius:4px; font-size:11px; white-space:nowrap; }.route-chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }.route-chip.healthy { color:var(--green); }.route-chip.warning { color:var(--yellow); }.route-chip.danger { color:var(--red); }
@media (max-width:1100px) { .metrics { grid-template-columns:repeat(3,1fr); }.alerts { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.provider-distribution { min-height:240px; }.cost-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .shell { padding:14px 8px 22px; }.topbar { align-items:flex-start; flex-direction:column; }.toolbar { justify-content:flex-start; }.metrics { grid-template-columns:repeat(2,1fr); }.metrics article { min-height:108px; padding:14px; }.alerts { grid-template-columns:1fr; }.provider-distribution { flex-direction:column; }.event-money { display:none; }footer { flex-direction:column; }.pricing-columns { grid-template-columns:1fr; }.cost-grid { grid-template-columns:1fr; }.compact-grid { grid-template-columns:1fr; }.stats-panels { grid-template-columns:1fr; }.table-wrap { overflow-x:auto; }table { min-width:760px; }.panel-head { align-items:flex-start; flex-direction:column; }.recent-controls { width:100%; justify-content:flex-start; }.model-filter { flex:1; } }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
.pagination-info { color:var(--muted); font-size:12px; }
.pagination-controls { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.page-button { min-width:32px; height:30px; padding:0 9px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--text); font-size:12px; cursor:pointer; }
.page-button.active { border-color:var(--green); background:var(--green2); color:var(--green); font-weight:700; }
.page-button:disabled { opacity:.45; cursor:not-allowed; }
.outcome-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:4px; font-size:11px; font-weight:700; white-space:nowrap; }
.outcome-chip.ok { color:var(--green); background:var(--green2); }
.outcome-chip.bad { color:var(--red); background:var(--red2); }
.outcome-chip.relay { color:#9a5a08; background:#fff0cf; }
.detail-button { min-height:30px; padding:4px 10px; font-size:12px; white-space:nowrap; }
.final-result { display:block; margin-top:3px; font-size:11px; color:var(--muted); white-space:normal; }
#task-dialog { width:min(980px, calc(100vw - 28px)); }
#task-dialog .dialog-head { align-items:flex-start; padding:18px 20px 16px; }
#task-dialog .dialog-head>div { min-width:0; padding-right:14px; }
#task-dialog .dialog-head .eyebrow { margin-bottom:5px; }
#task-dialog .dialog-head h2 { font-size:19px; line-height:1.3; }
#task-dialog .dialog-head .icon-button { flex:none; }
.task-detail { max-height:72vh; overflow:auto; padding:14px 20px 22px; }
.task-detail-section { padding:20px 0 8px; }
.task-detail-section:last-child { border-bottom:0; }
.task-detail-section h3 { margin:0; color:#29473f; font-size:16px; font-weight:800; line-height:1.3; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; }
.detail-grid div { display:grid; gap:4px; min-width:0; }
.detail-grid span { color:var(--muted); font-size:11px; font-weight:600; }
.detail-grid strong { color:var(--text); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.detail-message,.detail-prompt { margin:0; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--surface2); white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.55; }
.detail-diagnosis { margin:0; color:#35453f; line-height:1.7; }
.detail-outcome { margin:8px 0 0; }
.detail-result-bar { display:flex; align-items:flex-start; gap:20px; padding:14px 16px; border:1px solid var(--line); border-left-width:4px; border-radius:6px; background:#f7faf9; }
.detail-result-bar.success { border-left-color:var(--green); background:#f4faf7; }
.detail-result-bar.relay { border-left-color:#d88715; background:#fff9ee; }
.detail-result-bar.failure { border-left-color:var(--red); background:#fff6f4; }
.detail-result-main { display:flex; align-items:center; gap:10px; min-width:0; }
.detail-result-main>strong { font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.detail-result-chips { display:inline-flex; gap:4px; flex:none; }
.detail-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; padding:0 2px; }
.detail-section-heading .eyebrow { margin-bottom:4px; color:var(--red); }
.failure-count { flex:none; padding:4px 8px; border-radius:4px; background:var(--red2); color:var(--red); font-size:11px; font-weight:800; }
.task-failure-item { margin-top:12px; overflow:hidden; border:1px solid #ead6d1; border-left:4px solid var(--red); border-radius:7px; background:white; }
.task-failure-item:first-of-type { margin-top:0; }
.failure-item-head { display:grid; grid-template-columns:28px minmax(130px,.8fr) minmax(220px,1.2fr); align-items:center; gap:10px; padding:11px 12px; background:#fff8f6; border-bottom:1px solid #f0ded9; }
.failure-index { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--red); color:white; font-size:12px; font-weight:800; }
.failure-channel,.failure-kind { display:flex; align-items:center; gap:8px; min-width:0; }
.failure-channel strong { color:#622f28; font-size:15px; }
.failure-channel span { color:var(--muted); font-size:11px; }
.failure-kind { justify-content:flex-end; text-align:right; }
.failure-kind strong { color:#5d3933; font-size:13px; overflow-wrap:anywhere; }
.timeout-badge { flex:none; padding:3px 6px; border-radius:4px; background:#fff0cf; color:#9a5a08; font-size:10px; font-weight:800; }
.failure-raw { padding:12px; }
.failure-raw>span,.failure-explanation span,.failure-handling>span,.request-context-meta span { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:800; }
.failure-raw .detail-message { border-color:#ead6d1; background:#fffafa; color:#512f2a; }
.failure-explanation { display:grid; grid-template-columns:.9fr 1.1fr; border-top:1px solid var(--line); background:var(--surface2); }
.failure-explanation>div { padding:12px; }
.failure-explanation>div+div { border-left:1px solid var(--line); }
.failure-explanation p { margin:0; color:#35453f; line-height:1.65; }
.failure-analysis strong { display:block; margin:-1px 0 5px; color:#7d3b31; font-size:13px; }
.failure-handling { margin-top:14px; padding:12px 14px; border-left:4px solid var(--blue); background:#f3f7fb; }
.failure-handling>span { color:var(--blue); }
.failure-handling p { margin:0; line-height:1.65; }
.detail-no-failure { margin-top:18px; padding:16px; border:1px solid #cfe4dc; border-left:4px solid var(--green); border-radius:6px; background:#f4faf7; }
.detail-no-failure strong { color:var(--green); }
.detail-no-failure p { margin:5px 0 0; color:#3d514a; }
.request-context { margin-top:18px; border-top:1px solid var(--line); }
.request-context summary { padding:15px 2px 4px; color:var(--blue); font-size:12px; font-weight:800; cursor:pointer; }
.request-context-body { padding-top:12px; }
.request-context-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; margin-bottom:16px; }
.request-context-meta div { min-width:0; }
.request-context-meta span { margin-bottom:3px; }
.request-context-meta strong { font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.request-context-body h3 { margin:0 0 7px; color:#42544e; font-size:12px; }
.ref-count { color:var(--muted); font-size:11px; }
.ref-thumbs { display:flex; flex-wrap:wrap; gap:4px; }
.ref-preview { display:block; padding:0; border:0; background:transparent; cursor:zoom-in; }
.ref-thumbs img { display:block; width:52px; height:52px; border:1px solid var(--line); border-radius:5px; object-fit:cover; }
.ref-preview:hover img { border-color:var(--green); box-shadow:0 0 0 2px rgba(22,125,113,.12); }
.result-thumbs img { border-color:#b8cadc; }
.result-thumbs .ref-preview:hover img { border-color:var(--blue); box-shadow:0 0 0 2px rgba(70,108,151,.13); }
.ref-thumb-wrap { display:inline-flex; align-items:center; gap:7px; }
.music-output-summary { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.music-output-summary>small { color:var(--muted); white-space:nowrap; }
.music-results-section { border-bottom:1px solid var(--line); }
.music-count { color:var(--blue); background:#eaf1f8; }
.music-results { display:grid; gap:10px; }
.music-result-item { display:grid; grid-template-columns:82px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:7px; background:var(--surface2); }
.music-cover { display:block; width:82px; height:82px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--surface); cursor:zoom-in; }
.music-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.music-cover:hover { border-color:var(--blue); box-shadow:0 0 0 2px rgba(70,108,151,.13); }
.music-cover-placeholder { width:82px; height:82px; display:grid; place-items:center; padding:8px; border:1px dashed var(--line); border-radius:6px; color:var(--muted); background:var(--surface); text-align:center; font-size:11px; }
.music-result-body { display:grid; gap:9px; min-width:0; }
.music-result-body>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
.music-result-body strong { overflow-wrap:anywhere; }
.music-result-body small { flex:none; color:var(--muted); }
.music-result-body audio { display:block; width:100%; min-width:220px; height:36px; }
#image-dialog { width:min(1100px,calc(100vw - 28px)); height:min(90vh,900px); padding:42px 14px 14px; overflow:hidden; background:#111; border-color:#2c3432; }
#image-dialog .image-close { position:absolute; top:8px; right:8px; color:white; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); z-index:1; }
#image-preview { display:block; width:100%; height:100%; object-fit:contain; }
.provider-counts { display:grid; gap:3px; min-width:130px; }
.provider-counts span { display:block; white-space:nowrap; font-size:12px; }
.provider-counts b { color:var(--text); font-weight:700; }
.result-urls { display:grid; gap:7px; }
.result-urls a { color:var(--blue); overflow-wrap:anywhere; font-size:12px; }
@media (max-width:720px) { .pagination { align-items:flex-start; flex-direction:column; } .detail-grid { grid-template-columns:1fr; } #task-dialog .dialog-head { padding:16px 14px 14px; } .task-detail { padding:10px 14px 18px; } .detail-result-bar { display:grid; gap:8px; } .detail-result-main { align-items:flex-start; flex-direction:column; } .failure-item-head { grid-template-columns:28px 1fr; } .failure-kind { grid-column:2; justify-content:flex-start; text-align:left; } .failure-channel { align-items:flex-start; flex-direction:column; gap:2px; } .failure-explanation { grid-template-columns:1fr; } .failure-explanation>div+div { border-left:0; border-top:1px solid var(--line); } .request-context-meta { grid-template-columns:1fr; } .music-result-item { grid-template-columns:64px minmax(0,1fr); padding:8px; } .music-cover,.music-cover-placeholder { width:64px; height:64px; } .music-result-body audio { min-width:0; } }
#recent-table .prompt-cell { min-width:180px; max-width:320px; overflow-wrap:anywhere; }
#recent-table .image-cell { min-width:72px; }
#recent-table .points-cell { white-space:nowrap; }
#recent-table .points-cell strong,#recent-table .points-cell small { display:block; }
#recent-table .points-cell small { color:var(--muted); }
#recent-table tr.recent-failure { background:#fffaf7; }
#recent-table .backend-source { display:inline-block; margin-top:4px; padding:2px 5px; border-radius:4px; color:var(--red); background:var(--red2); font-size:11px; font-weight:700; }
#recent-table tr.recent-fault { background:#fffdf5; }
#recent-table .worker-order,.worker-profit-table .worker-order { margin-top:3px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.worker-route-details { margin-top:4px; font-size:11px; color:var(--muted); }
.worker-route-details summary { cursor:pointer; }
#recent-table .profit-cell strong { color:var(--green); }
.page-size { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; }
.page-size select { height:30px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--text); padding:0 6px; }

html[data-theme="dark"] .brand-mark { background:#26796e; }
html[data-theme="dark"] .theme-menu { box-shadow:0 16px 38px rgba(0,0,0,.42); }
html[data-theme="dark"] .segmented { background:#252e2b; }
html[data-theme="dark"] .segmented button.active { background:#36423e; box-shadow:0 1px 5px rgba(0,0,0,.35); }
html[data-theme="dark"] .model-filter,
html[data-theme="dark"] .date-picker,
html[data-theme="dark"] .login-panel input,
html[data-theme="dark"] .settings-form input,
html[data-theme="dark"] .page-button,
html[data-theme="dark"] .page-size select,
html[data-theme="dark"] dialog { background:var(--surface); color:var(--text); }
html[data-theme="dark"] .metrics article { box-shadow:0 5px 20px rgba(0,0,0,.16); }
html[data-theme="dark"] .metrics article.highlight { border-color:#347c70; background:#15322e; box-shadow:0 7px 24px rgba(0,0,0,.2); }
html[data-theme="dark"] .alerts-section { border-color:#66363e; background:#24191b; }
html[data-theme="dark"] .alert-card { border-color:#503438; background:#211b1c; }
html[data-theme="dark"] .alert-card.critical { border-color:#87505a; }
html[data-theme="dark"] .alert-card p,
html[data-theme="dark"] .event-main span,
html[data-theme="dark"] .detail-diagnosis,
html[data-theme="dark"] .detail-no-failure p,
html[data-theme="dark"] .request-context-body h3 { color:var(--text); }
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .event-row { border-bottom-color:var(--line); }
html[data-theme="dark"] .donut:before { background:var(--surface); }
html[data-theme="dark"] dialog::backdrop { background:rgba(0,0,0,.68); }
html[data-theme="dark"] .pricing-worker { background:#1d2623; }
html[data-theme="dark"] .detail-message,
html[data-theme="dark"] .detail-prompt { background:#1d2623; }
html[data-theme="dark"] .detail-result-bar { background:#1b2421; }
html[data-theme="dark"] .detail-result-bar.success { border-left-color:var(--green); background:#172b27; }
html[data-theme="dark"] .detail-result-bar.relay { border-left-color:#d88715; background:#2c2417; }
html[data-theme="dark"] .detail-result-bar.failure { border-left-color:var(--red); background:#2b1c1e; }
html[data-theme="dark"] .task-detail-section h3 { color:#b9d8d1; }
html[data-theme="dark"] .task-failure-item { border-color:#5b393e; background:#1d191a; }
html[data-theme="dark"] .failure-item-head { border-bottom-color:#5b393e; background:#2b1d1f; }
html[data-theme="dark"] .failure-channel strong,
html[data-theme="dark"] .failure-kind strong { color:#f1c2c6; }
html[data-theme="dark"] .failure-raw .detail-message { border-color:#5b393e; background:#24191b; color:#f0ced1; }
html[data-theme="dark"] .failure-explanation { background:#1d2422; }
html[data-theme="dark"] .failure-analysis strong { color:#f19aa2; }
html[data-theme="dark"] .failure-handling { background:#192531; }
html[data-theme="dark"] .detail-no-failure { border-color:#32685f; background:#172824; }
html[data-theme="dark"] #recent-table tr.recent-failure { background:#251a1c; }
html[data-theme="dark"] #recent-table tr.recent-fault { background:#282317; }
html[data-theme="dark"] .ref-thumbs img { background:#0d1110; }
html[data-theme="dark"] .music-count { color:#b6cee7; background:#1c2b3a; }
html[data-theme="dark"] .music-result-item,
html[data-theme="dark"] .music-cover,
html[data-theme="dark"] .music-cover-placeholder { background:#1d2623; }
html[data-theme="dark"] #image-dialog { background:#090b0a; }
html[data-theme="dark"] #task-dialog .task-detail,
html[data-theme="dark"] #task-dialog .task-detail-section,
html[data-theme="dark"] #task-dialog .detail-grid strong,
html[data-theme="dark"] #task-dialog .detail-diagnosis,
html[data-theme="dark"] #task-dialog .detail-result-main>strong,
html[data-theme="dark"] #task-dialog .failure-explanation p,
html[data-theme="dark"] #task-dialog .failure-handling p,
html[data-theme="dark"] #task-dialog .request-context-meta strong { color:#e2efeb; }
html[data-theme="dark"] #task-dialog .detail-grid span,
html[data-theme="dark"] #task-dialog .failure-raw>span,
html[data-theme="dark"] #task-dialog .failure-explanation span,
html[data-theme="dark"] #task-dialog .failure-handling>span,
html[data-theme="dark"] #task-dialog .request-context-meta span,
html[data-theme="dark"] #task-dialog .request-context-body h3 { color:#b7cec7; }
html[data-theme="dark"] #task-dialog .detail-message,
html[data-theme="dark"] #task-dialog .detail-prompt { color:#e7f1ee; }
html[data-theme="dark"] #task-dialog .failure-channel span { color:#b7cec7; }