/* Operations center 3.13.0:「AI 提供商」, 「AI 费用对账」 and the key list grouped by provider. Loaded after admin-refine.css. */

/* ---- AI 提供商 ---- */
#page .provider-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-bottom:18px}
#page .provider-panels .panel{margin:0;min-width:0}
#page .provider-panel dd small{display:block;margin-top:2px;font-size:12px;line-height:1.6}
#page .provider-models-title{margin:4px 0 10px;font-size:14px;font-weight:700;color:#14213d}
#page .price-lines{font-size:12.5px;color:#33445e;line-height:1.6}
#page .price-lines small{display:block;color:var(--muted)}
#page .provider-panel .panel-actions{display:flex;justify-content:flex-end;margin-top:14px}
#page .provider-panel .facts .badge{margin-left:6px;vertical-align:1px}
@media(max-width:1180px){#page .provider-panels{grid-template-columns:1fr}}

/* ---- 违规管理 (xAI refusals; beside the xAI card on wide screens) ---- */
#page .ai-blocks{scroll-margin-top:72px}
#page .ai-blocks:focus{outline:none}
#page .ai-blocks:focus-visible{outline:2px solid #e85d8b;outline-offset:2px}
#page .ai-blocks .panel-title p{margin:2px 0 0;font-size:12.5px}
#page .ai-blocks-rules{margin:0 0 14px;padding-left:18px;font-size:12.5px;line-height:1.65;color:#33445e}
#page .ai-blocks-rules li{margin-bottom:4px}
#page .ai-blocks td{vertical-align:top}
#page .ai-blocks td small{display:block;margin-top:2px;font-size:12px;line-height:1.5}
#page .ai-blocks td .text-link{padding:0;font-weight:600;text-align:left}
#page .ai-blocks td.numeric strong{font-size:15px;font-variant-numeric:tabular-nums}
#page .ai-blocks tr.ai-block-paused>td{background:#fff6f7}
#page .ai-blocks-empty{display:grid;gap:4px;justify-items:center;text-align:center;padding:22px 12px;border:1px dashed var(--line);border-radius:10px;background:#fafbfd}
#page .ai-blocks-empty .muted{font-size:12.5px}
/* The panel sits beside the xAI card (or fills a phone), too narrow for six columns: each member becomes a small card,
   chosen by the panel's own width (container query). Two rows when there is room, three on a phone. */
#page .ai-blocks{container-type:inline-size}
@media(max-width:640px){#page .ai-blocks .panel-title{flex-wrap:wrap;gap:8px}}
@container (max-width:760px){
  #page .ai-blocks .table-wrap{border:0;overflow:visible}
  #page .ai-blocks table,#page .ai-blocks tbody,#page .ai-blocks tr,#page .ai-blocks td{display:block}
  #page .ai-blocks thead{display:none}
  #page .ai-blocks tbody tr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.1fr) auto;grid-template-areas:"member count state action" "member last until action";gap:10px 14px;padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px}
  #page .ai-blocks td{padding:0;border:0;text-align:left;background:transparent!important}
  #page .ai-blocks td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11px;color:var(--muted)}
  #page .ai-blocks td.ab-member::before,#page .ai-blocks td.ab-action::before{display:none}
  #page .ai-blocks .ab-member{grid-area:member}#page .ai-blocks .ab-action{grid-area:action;justify-self:end;align-self:start}
  #page .ai-blocks .ab-count{grid-area:count}#page .ai-blocks .ab-state{grid-area:state}#page .ai-blocks .ab-last{grid-area:last}#page .ai-blocks .ab-until{grid-area:until}
  #page .ai-blocks tr.ai-block-paused{background:#fff6f7;border-color:#f3c9d2}
}
@container (max-width:460px){
  #page .ai-blocks tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"member action" "count state" "last until"}
}

/* ---- AI 费用对账 ---- */
#page .cost-filter{grid-template-columns:repeat(3,minmax(0,220px));align-items:end}
#page .cost-filter .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#page .cost-guide{margin-bottom:18px}
#page .cost-guide .form-notes li{margin-bottom:6px}
#page .cost-figures{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#page .cost-figures strong{font-size:20px}
#page .cost-figures>div.attention{background:#fff7f8}
#page .cost-figures>div.attention strong{color:#b02649}
#page .cost-panel table td{vertical-align:top}
#page .cost-usd{font-size:15px}
#page .cost-models{margin-top:6px;font-size:12px}
#page .cost-models summary{cursor:pointer;color:#305c91;width:max-content}
#page .cost-models ul{list-style:none;margin:6px 0 0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fafbfd;display:grid;gap:3px;min-width:220px}
#page .cost-models li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;font-variant-numeric:tabular-nums}
#page .cost-models li span:first-child{overflow-wrap:anywhere}
#page .cost-points small.warn{color:#9a6919}
#page .cost-points small.bad{color:#b02649}
#page .cost-check-form{display:grid;grid-template-columns:minmax(96px,120px) minmax(110px,1fr) auto;gap:6px;align-items:center;max-width:none!important;min-width:300px}
#page .cost-check-form input{padding:6px 8px;min-height:0;font-size:13px}
#page .cost-console small{margin-top:4px}
#page tr.cost-flagged>td{background:#fff6f7}
#page tr.cost-zero>td:not(.cost-console){color:#8a97ab}
#page tr.cost-zero .cost-usd{font-weight:500}
#page tr.cost-unknown>td:nth-child(2){background:#fdeef0}
@media(max-width:900px){#page .cost-filter{grid-template-columns:1fr}#page .cost-check-form{grid-template-columns:1fr;min-width:160px}}

/* ---- Key list: provider filter and group rows ---- */
#page .key-provider-filter{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
#page .key-provider-filter button{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#33445e;font-size:13px;cursor:pointer;min-width:0}
#page .key-provider-filter button strong{font-size:15px;color:#14213d;font-variant-numeric:tabular-nums}
#page .key-provider-filter button small{grid-column:1/-1;font-size:11px;color:var(--muted)}
#page .key-provider-filter button[aria-pressed=true]{border-color:#e63259;background:#fff3f6;box-shadow:inset 0 0 0 1px #e63259}
#page .key-provider-filter button:focus-visible{outline:2px solid #e85d8b;outline-offset:2px}
#page tr.key-group-row>th{background:#f7f9fc;text-align:left;font-size:13px;color:#263851;padding:8px 12px}
#page tr.key-group-row>th span{font-weight:400;color:var(--muted);margin-left:8px;font-size:12px}
#page #key-provider-hint{color:#305c91}
#page #key-provider-hint:empty{display:none}
#page #key-provider-hint.conflict{color:#a52643}
/* A note right under a table gets air (key list, rates, video prices). */
#page .table-wrap+p.muted{margin-top:12px}

/* ---- Staff dialogs (provider switch, 解除): staff-dialog.js injects its own <style>, which the server's CSP
   (style-src 'self') blocks, so the body lost its line breaks; the rules the ops center needs live here. ---- */
.staff-dialog form{display:flex;flex-direction:column;gap:14px;margin:0;max-height:calc(88vh - 48px)}
.staff-dialog h2{margin:0;font-size:19px;line-height:1.4}
.staff-dialog .staff-dialog-body{margin:0;color:#4b5a73;white-space:pre-line;overflow-wrap:anywhere;overflow:auto}
.staff-dialog .staff-dialog-body:empty{display:none}
.staff-dialog input{box-sizing:border-box;width:100%}
.staff-dialog .staff-dialog-error{margin:-6px 0 0;color:#a52643;font-size:12px}
.staff-dialog .staff-dialog-error:empty{display:none}
.staff-dialog .staff-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:6px}
.staff-dialog button.danger{background:#a91636;border-color:#a91636;color:#fff}