.consumer-list { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow-y:auto; overflow-x:hidden; max-height:300px; }
.consumer-list-head,.consumer-row { display:grid; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(110px,1fr)); align-items:center; column-gap:16px; padding:0 16px; }
.consumer-list-head { min-height:34px; color:var(--dim); background:rgba(255,255,255,.025); border-bottom:1px solid var(--border); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.consumer-row { min-height:64px; border-bottom:1px solid var(--border); }
.consumer-row:last-child { border-bottom:0; }
.consumer-identity { display:flex; align-items:center; gap:9px; min-width:0; font-family:Menlo,monospace; font-size:12px; }
.consumer-identity strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.consumer-index { width:22px; height:22px; border-radius:7px; background:rgba(167,139,250,.15); color:var(--purple); display:grid; place-items:center; }
.consumer-value b { display:block; color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; }
.consumer-value b span { color:var(--dim); font-size:9px; font-weight:500; }
.consumer-value small { display:block; color:var(--purple); font-size:13px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; }

.log-list-wrap { min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; background:rgba(8,10,14,.22); }
.log-list { min-width:0; padding:6px 8px 1px; }
.log-entry { min-width:0; margin-bottom:4px; border:1px solid rgba(42,47,58,.86); border-radius:9px; background:rgba(26,29,36,.82); overflow:hidden; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.log-entry:hover { border-color:#3a4352; background:#1d2028; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.log-entry:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.detailed-log-row { position:relative; cursor:pointer; }
.log-entry-main { position:relative; min-height:42px; display:grid; grid-template-columns:minmax(220px,.95fr) minmax(220px,1fr) minmax(330px,1.4fr) minmax(190px,.82fr); gap:14px; align-items:center; padding:5px 28px 5px 12px; }
.log-entry-main > div { min-width:0; }
.log-entry-identity,.log-entry-model,.log-entry-result { display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; }
.log-entry-identity { white-space:normal; }
.identity-primary { flex:1; display:flex; align-items:baseline; gap:7px; min-width:0; flex-wrap:wrap; }
.identity-primary strong { min-width:0; overflow-wrap:anywhere; font-size:12px; }
.log-entry-identity .time { flex:none; color:var(--dim); font:10px var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }
.identity-meta { display:flex; align-items:center; gap:5px; min-width:0; margin-top:0; }
.identity-meta small { min-width:0; color:var(--dim); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chip { flex:none; padding:2px 5px; border-radius:4px; color:var(--dim); background:rgba(154,160,168,.08); border:1px solid rgba(154,160,168,.16); font-size:9px; font-weight:700; }
.account-chip.account-a { color:var(--green); background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.26); }
.account-chip.account-b { color:var(--blue); background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.26); }
.log-entry-model .model { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parameter-row { flex:none; display:flex; align-items:center; gap:5px; flex-wrap:nowrap; margin-top:0; }
.parameter-chip { min-height:20px; display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid var(--border); border-radius:5px; font-size:9px; font-weight:700; line-height:1; white-space:nowrap; }
.effort-chip { color:#fff; overflow:hidden; border-color:rgba(255,255,255,.18); text-shadow:0 1px 1px rgba(0,0,0,.34); backdrop-filter:blur(6px) saturate(135%); -webkit-backdrop-filter:blur(6px) saturate(135%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 7px rgba(0,0,0,.16); }
.effort-meter { height:9px; display:inline-flex; align-items:flex-end; gap:1.5px; }
.effort-meter i { width:2px; border-radius:1px; background:#fff; opacity:.30; }
.effort-meter i:nth-child(1) { height:3px; }
.effort-meter i:nth-child(2) { height:4px; }
.effort-meter i:nth-child(3) { height:6px; }
.effort-meter i:nth-child(4) { height:7px; }
.effort-meter i:nth-child(5) { height:9px; }
.effort-low .effort-meter i:nth-child(1),
.effort-medium .effort-meter i:nth-child(-n+2),
.effort-high .effort-meter i:nth-child(-n+3),
.effort-xhigh .effort-meter i:nth-child(-n+4),
.effort-max .effort-meter i { opacity:1; }
.effort-unknown { background:linear-gradient(180deg,rgba(107,114,128,.38),rgba(55,65,81,.24)); border-color:rgba(156,163,175,.42); }
.effort-low { background:linear-gradient(180deg,rgba(34,197,94,.42),rgba(21,128,61,.24)); border-color:rgba(74,222,128,.52); }
.effort-medium { background:linear-gradient(180deg,rgba(59,130,246,.44),rgba(29,78,216,.25)); border-color:rgba(96,165,250,.54); }
.effort-high { background:linear-gradient(180deg,rgba(234,179,8,.44),rgba(161,98,7,.27)); border-color:rgba(250,204,21,.56); }
.effort-xhigh { background:linear-gradient(180deg,rgba(249,115,22,.46),rgba(194,65,12,.27)); border-color:rgba(251,146,60,.56); }
.effort-max { background:linear-gradient(180deg,rgba(55,55,58,.62),rgba(5,5,5,.48)); border-color:rgba(255,255,255,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 2px 7px rgba(0,0,0,.24); }
.tier-chip { color:var(--dim); }
.ingress-chip.public_vps { color:#fb923c; background:rgba(251,146,60,.10); border-color:rgba(251,146,60,.28); }
.ingress-chip.tailnet { color:#60a5fa; background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.28); }
.ingress-chip.unknown { color:var(--dim); }
.standard-tier i { width:7px; height:7px; border:1px solid currentColor; border-radius:50%; }
.fast-tier { color:var(--yellow); background:rgba(251,191,36,.10); border-color:rgba(251,191,36,.28); }
.fast-tier svg { width:8px; height:10px; fill:currentColor; filter:drop-shadow(0 0 4px rgba(251,191,36,.35)); }
.fast-tier em { color:#f5cf6d; font:700 7px "SF Mono",Menlo,monospace; font-style:normal; opacity:.78; }
.log-entry-usage { display:flex; align-items:baseline; gap:10px; min-width:0; white-space:nowrap; }
.token-figure { display:flex; align-items:baseline; gap:5px; flex:none; }
.token-figure strong { color:var(--blue); font:700 15px var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.token-figure > span { color:var(--dim); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.token-breakdown { min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; margin-top:0; }
.token-metric { display:inline-flex; align-items:center; gap:4px; color:var(--dim); font-size:9px; white-space:nowrap; }
.token-metric i { width:5px; height:5px; border-radius:2px; background:currentColor; }
.token-metric b { color:var(--text); font:600 9px var(--font-data); font-variant-numeric:tabular-nums; }
.token-input { color:var(--blue); }
.token-output { color:var(--green); }
.token-cache { color:var(--purple); }
.money-figure { display:inline-flex; align-items:baseline; gap:2px; color:var(--purple); }
.money-figure > span { font:700 9px "SF Mono",Menlo,monospace; opacity:.72; }
.money-figure strong { font:750 14px var(--font-data); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; letter-spacing:-.035em; }
.duration-figure { flex:none; display:inline-flex; align-items:center; gap:5px; color:var(--dim); font:10px "SF Mono",Menlo,monospace; font-variant-numeric:tabular-nums; }
.duration-figure i { width:8px; height:8px; border:1px solid currentColor; border-radius:50%; position:relative; }
.duration-figure i::after { content:""; position:absolute; width:2px; height:2px; top:1px; left:3px; border-left:1px solid currentColor; border-bottom:1px solid currentColor; }
.log-expand-indicator { position:absolute; right:10px; top:50%; width:6px; height:6px; border-right:1px solid #7f8792; border-bottom:1px solid #7f8792; transform:translateY(-65%) rotate(45deg); transition:transform .16s ease; }
.call-row[aria-expanded="true"] .log-expand-indicator { transform:translateY(-25%) rotate(225deg); }
.log-muted { color:var(--dim); font-size:11px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:6px; font-size:10px; font-weight:700; white-space:nowrap; }
.badge i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }
.badge.ok { background:rgba(52,211,153,.12); color:var(--green); }
.badge.err { background:rgba(248,113,113,.12); color:var(--red); }
.badge.pending { background:rgba(251,191,36,.12); color:var(--yellow); }
.badge.auth-a { background:rgba(167,139,250,.15); color:var(--purple); }
.badge.auth-b { background:rgba(96,165,250,.15); color:var(--blue); }
.model { color:#c8cdd5; font-family:var(--font-data); font-size:12px; font-weight:650; }
.model.model-luna { color:#60a5fa; }
.model.model-terra { color:#fbbf24; }
.model.model-sol { color:#fb923c; }
.model.model-astra { color:#ff3b30; }
.time { color:var(--dim); font-size:12px; }
.empty { padding:40px; text-align:center; color:var(--dim); font-size:13px; }
.reqid { color:var(--dim); font-family:Menlo,monospace; font-size:11px; }
.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 16px 16px; background:rgba(8,10,14,.18); border-top:1px solid var(--border); }
.detail-item { position:relative; min-width:0; background:rgba(255,255,255,.035); border:1px solid rgba(42,47,58,.55); border-radius:8px; padding:10px 10px 10px 13px; color:#c8ccd2; font:9px "SF Mono",Menlo,monospace; word-break:break-all; }
.detail-item::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:0 2px 2px 0; background:var(--dim); opacity:.7; }
.detail-item b { display:block; color:var(--dim); font:600 8px -apple-system,"PingFang SC",sans-serif; margin-bottom:5px; }
.detail-item.timing-detail::before { background:var(--green); }
.detail-item.match-detail::before { background:var(--purple); }
.detail-item.routing-detail::before { background:var(--yellow); }
.detail-item.reasoning-detail::before { background:var(--blue); }

@media (max-width:1100px) {
  .log-entry-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; padding-block:7px; }
}

@media (max-width:900px) {
  .detail-grid { grid-template-columns:repeat(2,1fr); }
  .consumer-list-head { display:none; }
  .consumer-row { grid-template-columns:repeat(3,1fr); gap:10px 16px; padding:14px; }
  .consumer-identity { grid-column:1/-1; }
  .consumer-value::before { content:attr(data-label); display:block; color:var(--dim); font-size:8px; margin-bottom:3px; }
}

@media (max-width:520px) {
  .consumer-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; padding:14px; }
  .log-list { padding:7px; }
  .log-entry-main { grid-template-columns:1fr; gap:6px; padding:8px 24px 8px 10px; }
  .log-entry-usage,.token-breakdown { flex-wrap:wrap; white-space:normal; row-gap:3px; }
  .log-entry-result { justify-content:flex-start; }
  .detail-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .log-entry,.log-expand-indicator { transition-duration:.01ms; }
}

.ingress-chip.cloudflare { color:#c4b5fd; background:rgba(196,181,253,.10); border-color:rgba(196,181,253,.28); }