body.usage-page #workspace{background:#f6f7f9}
#usageLogView{padding:20px 24px;color:#202428;color-scheme:light}
#usageLogView[hidden]{display:none!important}
#usageLogView .usage-log-panel{height:calc(100dvh - var(--topbar) - 40px);min-height:500px;display:flex;flex-direction:column;border:1px solid #e6e8ec;border-radius:18px;background:#fff;overflow:hidden}
#usageLogView .usage-heading{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 20px 16px}
#usageLogView .usage-heading h1{margin:0;color:#171a1e;font-size:21px;font-weight:600;line-height:1.5}
#usageLogView .usage-heading p{margin:4px 0 0;color:#727d89;font-size:12px;line-height:1.6}
#usageLogView button,#usageLogView input,#usageLogView select,#usageDetailDialog button{font:inherit}
#usageLogView button,#usageDetailDialog button{cursor:pointer;touch-action:manipulation}
#usageLogView button:disabled{opacity:.36;cursor:default}
#usageLogView button:focus-visible,#usageLogView input:focus-visible,#usageLogView select:focus-visible,#usageTable:focus-visible,#usageDetailDialog button:focus-visible{outline:2px solid #b57961;outline-offset:3px}
#usageLogView .usage-subtle-button{border:1px solid #e4e7eb;border-radius:20px;padding:7px 12px;background:#fff;color:#68717b;font-size:12px}
#usageLogView .usage-subtle-button:hover{background:#f5f7f8}
#usageLogView .usage-filters{flex:0 0 auto;margin:0 16px 12px;padding:12px;border:1px solid #e5e7eb;border-radius:14px;font-size:12px}
#usageLogView .usage-filter-grid{display:grid;grid-template-columns:minmax(370px,2fr) minmax(155px,1fr) minmax(100px,.6fr) minmax(110px,.65fr);align-items:end;gap:10px}
#usageLogView .usage-filters label{display:block;min-width:0}
#usageLogView .usage-filters label>span{display:block;margin:0 0 5px;color:#727d89;font-size:11px}
#usageLogView .usage-date-range{display:flex;gap:7px;align-items:center;min-width:0}
#usageLogView .usage-date-range label{flex:1;min-width:0}
#usageLogView .usage-date-divider{padding-top:19px;color:#a7adb5}
#usageLogView .usage-filters input,#usageLogView .usage-filters select{display:block;box-sizing:border-box;width:100%;min-width:0;height:34px;border:1px solid #e3e6ea;border-radius:18px;padding:6px 11px;background:#fff;color:#3a424c;font-size:12px}
#usageLogView .usage-filters input::placeholder{color:#a1a7af}
#usageLogView .usage-filter-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px}
#usageLogView .usage-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#usageLogView .usage-stat-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #eceef1;border-radius:18px;padding:4px 9px;background:#fcfcfd;color:#7a838d;font-size:11px;white-space:nowrap;box-shadow:0 1px 2px #242a3205}
#usageLogView .usage-stat-chip::before{content:"";width:2px;height:12px;border-radius:3px;background:#4ab8ec}
#usageLogView .usage-stat-rpm::before{background:#e97c9b}
#usageLogView .usage-stat-tpm::before{background:#aab8d5}
#usageLogView .usage-stat-chip strong{font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#343b44}
#usageLogView .usage-filter-actions{display:flex;gap:8px;margin-left:auto}
#usageLogView .usage-filter-actions button{border:1px solid #e4e7eb;border-radius:18px;background:#fff;color:#7d858e;padding:6px 13px;font-size:12px;white-space:nowrap}
#usageLogView .usage-filter-actions .usage-search-button{border-color:#171a1e;background:#171a1e;color:#fff}
#usageLogView .usage-notice{flex:0 0 auto;margin:0 20px 10px;color:#737e8a;font-size:11px;line-height:1.7}
#usageLogView .usage-notice.error{color:#bc4e57}
#usageLogView .usage-scroll-hint{display:none}
#usageLogView .usage-log-table{flex:1;min-height:0;margin:0 16px;border:1px solid #e5e7eb;border-radius:13px;overflow:auto;scrollbar-color:#cfd3d8 #fff}
#usageLogView .usage-log-table table{width:100%;min-width:1090px;border-collapse:collapse;table-layout:fixed;font-size:12px}
#usageLogView .usage-log-table th{position:sticky;top:0;z-index:1;padding:13px 12px;border-bottom:1px solid #e5e7eb;background:#fafbfc;color:#343a42;font-weight:500;text-align:left}
#usageLogView .usage-log-table th:nth-child(1){width:16%}
#usageLogView .usage-log-table th:nth-child(2){width:13%}
#usageLogView .usage-log-table th:nth-child(3){width:23%}
#usageLogView .usage-log-table th:nth-child(4){width:9%}
#usageLogView .usage-log-table th:nth-child(5){width:8%}
#usageLogView .usage-log-table th:nth-child(6){width:11%}
#usageLogView .usage-log-table th:nth-child(7){width:20%}
#usageLogView .usage-log-table td{max-width:none;padding:14px 12px;border-top:0;border-bottom:1px solid #e9ebef;color:#474f59;vertical-align:middle;white-space:normal;overflow:visible;line-height:1.8}
#usageLogView .usage-log-table tr:last-child td{border-bottom:0}
#usageLogView .usage-log-table tbody tr:hover{background:#fcfcfd}
#usageLogView .usage-time{display:block;white-space:nowrap;color:#39414b;font:11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}
#usageLogView .usage-type{display:block;margin-top:2px;color:#1c9c73;font-size:11px}
#usageLogView .usage-type.release{color:#538cc1}
#usageLogView .usage-source{display:inline-flex;align-items:center;gap:4px;max-width:100%;border:1px solid #e8ebef;border-radius:13px;padding:1px 7px;background:#fafbfc;color:#46515d;font-size:11px;vertical-align:middle}
#usageLogView .usage-source span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usageLogView .usage-source svg{flex:0 0 auto;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
#usageLogView .usage-secondary{display:block;max-width:100%;margin-top:3px;color:#76818e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
#usageLogView .usage-model-button{display:block;max-width:100%;border:1px solid #ece8dd;border-radius:13px;padding:1px 8px;background:#fffdf8;color:#bd8729;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:11px}
#usageLogView .usage-model-button::before{content:"";display:inline-block;width:5px;height:5px;margin:0 5px 1px 0;border-radius:50%;background:#d19b35}
#usageLogView .usage-model-button:hover{border-color:#d5ba83;background:#fff9eb}
#usageLogView .usage-duration{display:inline-block;padding:1px 7px;border:1px solid #cdece0;border-radius:11px;background:#f4fcf8;color:#1c9e74;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
#usageLogView .usage-duration.slow{border-color:#f7d4d8;background:#fff8f8;color:#d96372}
#usageLogView .usage-duration.unknown{border-color:#e8ebef;background:#fafbfc;color:#9aa2ad}
#usageLogView .usage-tokens{font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#7f8995}
#usageLogView .usage-fee{display:inline-block;padding:1px 8px;border:1px solid #e8ebef;border-radius:13px;background:#fafbfc;color:#303943;font:600 11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
#usageLogView .usage-release-amount{display:block;margin-top:3px;color:#538cc1;font-size:10px;white-space:nowrap}
#usageLogView .usage-billing-button{display:block;max-width:100%;border:0;padding:0;background:transparent;color:#4b545e;font-size:11px;line-height:1.8;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usageLogView .usage-billing-button:hover{color:#1b242d;text-decoration:underline;text-underline-offset:3px}
#usageLogView .usage-billing-link{display:inline-flex;align-items:center;gap:3px;margin-top:3px;border:0;padding:0;background:transparent;color:#717e8c;font-size:10px}
#usageLogView .usage-billing-link:hover{color:#343f49}
#usageLogView .usage-billing-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
#usageLogView .usage-empty td{height:170px;color:#a1a7ae;text-align:center}
#usageLogView .usage-pagination{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:15px 20px;border-top:1px solid #eceef1;margin-top:14px;color:#737e8a;font-size:12px}
#usageLogView .usage-pagination label{display:flex;align-items:center;gap:8px}
#usageLogView .usage-pagination select{width:70px;border:1px solid #e4e7eb;border-radius:17px;padding:5px 8px;background:#fff;color:#68727d;font-size:12px}
#usageLogView .usage-page-buttons{display:flex;align-items:center;gap:7px}
#usageLogView .usage-page-buttons button{display:grid;place-items:center;width:29px;height:29px;border:1px solid #e5e8ec;border-radius:50%;background:#fff;color:#66717c;font-size:18px}
#usageLogView #usagePageLabel{min-width:50px;padding:5px 8px;border-radius:18px;background:#171a1e;color:#fff;font-size:11px;text-align:center}
#usageDetailDialog{box-sizing:border-box;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid #e4e7eb;border-radius:17px;background:#fff;color:#343d47;color-scheme:light;box-shadow:0 16px 72px #15202e35;overflow:auto;font:12px/1.8 system-ui,-apple-system,"Segoe UI",sans-serif}
#usageDetailDialog::backdrop{background:#16202c78;backdrop-filter:blur(3px)}
#usageDetailDialog .usage-detail-header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 21px;border-bottom:1px solid #eceef1;background:#fff}
#usageDetailDialog h2{margin:0;color:#20272f;font-size:17px;font-weight:600}
#usageDetailDialog .usage-detail-header button{width:28px;height:28px;border:0;border-radius:50%;background:#f5f6f8;color:#77818c;font-size:21px;line-height:1}
#usageDetailDialog .usage-detail-body{padding:20px 22px}
#usageDetailDialog .usage-detail-amount{margin:0 0 17px;padding:17px 18px;border:1px solid #e7eaee;border-radius:12px;background:#fafbfc}
#usageDetailDialog .usage-detail-amount>span{display:block;color:#737f8c;font-size:11px}
#usageDetailDialog .usage-detail-amount>strong{display:block;color:#222c36;font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
#usageDetailDialog .usage-detail-amount>p{margin:5px 0 0;color:#758393;font-size:11px}
#usageDetailDialog .usage-detail-grid{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px 14px;margin:0}
#usageDetailDialog dt{color:#737f8c}
#usageDetailDialog dd{min-width:0;margin:0;color:#414d59;overflow-wrap:anywhere}
#usageDetailDialog .usage-detail-copy{max-width:100%;padding:3px 7px;border:1px solid #e7eaee;border-radius:7px;background:#f8f9fb;color:#384653;overflow-wrap:anywhere;cursor:copy;text-align:left;font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
#usageDetailDialog .usage-detail-copy:hover{border-color:#bfc9d5;background:#f0f4f8}
#usageDetailDialog .usage-detail-copy-hint{display:block;margin-top:3px;color:#788592;font-size:10px}
#usageDetailDialog .usage-detail-formula{padding:10px 12px;border:1px solid #e7eaee;border-radius:9px;background:#fafbfc;color:#374653;font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
#usageDetailDialog .usage-detail-help{margin:19px 0 0;padding-top:14px;border-top:1px solid #eceef1;color:#75818e;font-size:11px}
#usageDetailDialog .usage-detail-footer{display:flex;justify-content:flex-end;gap:8px;padding:13px 21px;border-top:1px solid #eceef1}
#usageDetailDialog .usage-detail-footer button{border:1px solid #e4e7eb;border-radius:18px;padding:6px 17px;background:#fff;color:#63707e;font-size:12px}
@media(max-width:1200px){#usageLogView .usage-filter-grid{grid-template-columns:minmax(370px,2fr) minmax(160px,1fr) minmax(110px,.65fr)}#usageLogView .usage-filter-grid>label:last-child{grid-column:2/4;justify-self:stretch}}
@media(max-width:800px){#usageLogView{padding:16px}#usageLogView .usage-log-panel{height:calc(100dvh - var(--topbar) - 32px)}#usageLogView .usage-filter-grid{grid-template-columns:1fr 1fr}#usageLogView .usage-date-range{grid-column:1/-1}#usageLogView .usage-filter-grid>label:last-child{grid-column:auto}#usageLogView .usage-scroll-hint{display:block;flex:0 0 auto;margin:0 16px 8px;color:#a0a6ad;font-size:10px}#usageLogView .usage-pagination{justify-content:space-between;gap:10px;flex-wrap:wrap}#usageLogView .usage-filter-bottom{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:480px){#usageLogView{padding:12px}#usageLogView .usage-log-panel{height:calc(100dvh - var(--topbar) - 24px);min-height:650px;border-radius:13px}#usageLogView .usage-heading{padding:16px 14px 13px}#usageLogView .usage-heading h1{font-size:19px}#usageLogView .usage-heading p{font-size:11px}#usageLogView .usage-filters{margin:0 10px 10px;padding:10px}#usageLogView .usage-filter-grid{gap:9px}#usageLogView .usage-filter-grid>label:nth-child(2){grid-column:1/-1}#usageLogView .usage-filters input,#usageLogView .usage-filters select{font-size:11px;padding:6px 7px}#usageLogView .usage-date-range{gap:5px}#usageLogView .usage-date-range input{font-size:10px}#usageLogView .usage-log-table{margin:0 10px}#usageLogView .usage-pagination{padding:12px;gap:10px;font-size:11px}#usageLogView .usage-page-buttons{margin-left:auto}#usageLogView .usage-summary{gap:5px}#usageLogView .usage-stat-chip{padding:4px 7px;font-size:10px}#usageDetailDialog .usage-detail-grid{grid-template-columns:83px minmax(0,1fr);gap:11px 9px}#usageDetailDialog .usage-detail-body{padding:17px}}