:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b0811; color: #ece7f6; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; } button { border: 0; cursor: pointer; }
#app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
aside { border-right: 1px solid #2c203b; padding: 16px 10px; background: linear-gradient(180deg, #120d1d, #0b0811 75%); }
.brand { display: flex; align-items: center; gap: 9px; padding: 7px 10px 22px; font-weight: 750; letter-spacing: -.04em; }.mark { width: 25px; height: 25px; border-radius: 8px; background: linear-gradient(135deg, #bd9cff, #7041d8); box-shadow: 0 0 24px #8353df77; }
nav { display: grid; gap: 3px; } nav button { text-align: left; color: #a99db9; background: transparent; border-radius: 7px; padding: 9px 10px; font-size: 13px; } nav button:hover, nav button.active { color: #f1ebff; background: #271b36; }
.side-note { position: fixed; bottom: 15px; left: 18px; color: #81738f; font: 11px ui-monospace, monospace; }
section { padding: 24px; max-width: 1280px; width: 100%; margin: 0; }.top { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }.eyebrow { color: #a485e4; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }.title { margin: 3px 0 0; font-size: 25px; letter-spacing: -.045em; }.subtitle { color: #978aa8; font-size: 13px; margin: 7px 0 0; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.card, .panel { background: linear-gradient(145deg, #181123, #130e1d); border: 1px solid #2c203b; border-radius: 10px; }.card { padding: 14px; }.card label, .panel h2 { color: #9688a7; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }.metric { display: block; margin-top: 8px; font-size: 23px; font-weight: 700; letter-spacing: -.04em; }.panel { margin-top: 12px; overflow: hidden; }.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid #2c203b; background: #130e1b99; }.panel h2 { margin: 0; }.panel-body { padding: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; } th { color: #8c7c9d; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; } th, td { padding: 10px 8px; border-bottom: 1px solid #251a31; } tr:last-child td { border-bottom: 0; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.muted { color: #9688a7; }.ok { color: #83d6a9; }.bad { color: #f28aab; }.warn { color: #f0c971; }
.log-row { cursor: pointer; transition: background .15s ease; }.log-row:hover, .log-row:focus, .log-row.expanded { outline: 0; background: #21172e; }.log-row td:first-child::before { content: "+"; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 7px; border: 1px solid #574066; border-radius: 50%; color: #c9b6da; font-weight: 700; }.log-row.expanded td:first-child::before { content: "-"; }.log-detail-row td { padding: 0 8px 12px; background: #110c19; }.log-detail { display: grid; gap: 12px; margin: 4px 0 0; padding: 14px; border: 1px solid #39294b; border-radius: 8px; background: linear-gradient(135deg, #191221, #120d19); }.log-detail.loading { display: block; color: #a899b6; }.log-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid #35253f; color: #a89ab3; font-size: 12px; }.log-meta span { overflow-wrap: anywhere; }.log-meta b { color: #d7cbe2; margin-right: 4px; }.log-meta code { color: #c9b6dc; font: 11px ui-monospace, monospace; }.log-meta-action { display: flex; align-items: center; justify-content: flex-start; }.log-json-control { padding: 5px 8px; color: #ddcff4; background: #2c1d3d; border: 1px solid #54366e; border-radius: 4px; font-size: 10px; font-weight: 700; }.log-json-control:hover { background: #3c2851; }.log-payload { margin: 0; border: 1px solid #3a2e43; border-radius: 7px; background: #0d0a11; }.log-payload h3, .log-payload summary { margin: 0; padding: 10px 12px; color: #e0d7e8; font-size: 12px; font-weight: 700; }.log-payload summary { cursor: pointer; list-style: none; }.log-payload summary::after { content: "Show"; float: right; color: #a991c7; font-size: 10px; font-weight: 600; text-transform: uppercase; }.log-payload[open] summary { border-bottom: 1px solid #382a43; }.log-payload[open] summary::after { content: "Hide"; }.log-payload p { margin: 0; padding: 0 12px 11px; font-size: 11px; }.log-payload pre, .log-error pre { max-height: 300px; margin: 0; padding: 12px; overflow: auto; color: #dcd4e4; background: #0a080d; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }.log-payload pre.beautified-json { overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }.log-error { border: 1px solid #693047; border-radius: 7px; overflow: hidden; color: #f1b0c3; font-size: 12px; }.log-error b { display: block; padding: 9px 12px; }.log-error pre { border-top: 1px solid #693047; color: #ffc7d5; }.retention-control { gap: 7px; }.retention-control output { color: #d9c7f1; font-size: 13px; font-weight: 750; }.retention-control input[type="range"] { accent-color: #b895fa; padding: 0; }.retention-control .muted { line-height: 1.4; }
.model-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }.model-tile { position: relative; min-width: 0; min-height: 35px; padding: 9px 10px; background: linear-gradient(145deg, #1d1429, #140e20); border: 1px solid #342448; border-radius: 6px; color: #e8def7; font-size: 11px; overflow-wrap: anywhere; }.model-tile > .mono { display: block; padding-right: 45px; }.model-test { position: absolute; top: 5px; right: 5px; padding: 4px 7px; color: #e8dffe; background: #36234d; border: 1px solid #674687; border-radius: 4px; font-size: 10px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity .15s ease, transform .15s ease, background .15s ease; }.model-test:hover:not(:disabled) { background: #563878; }.model-tile:hover .model-test, .model-tile:focus-within .model-test { opacity: 1; pointer-events: auto; transform: translateY(0); }.model-test:disabled { cursor: wait; opacity: 1; }.model-test-result { display: block; max-width: 100%; margin-top: 5px; font-size: 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-test-result.ok::before { content: "\2713"; display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 5px; border-radius: 50%; color: #11281c; background: #83d6a9; font-size: 10px; line-height: 1; }.model-test-result:empty { display: none; }.quota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-actions { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #2c203b; }.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 29px; padding: 0; }.icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.account-test-result { flex: 1; min-width: 0; margin: 0; }
.primary { color: #130d1f; background: #ae8cff; border-radius: 7px; padding: 8px 11px; font-size: 12px; font-weight: 750; }.secondary { color: #d8ccea; background: #2a1e38; border-radius: 7px; padding: 7px 10px; font-size: 12px; }.danger { color: #ffb2c6; background: transparent; font-size: 12px; }.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.form label { display: grid; gap: 5px; color: #a698b5; font-size: 11px; }.form input, .form textarea, .form select { width: 100%; color: #eee8f7; background: #0e0a15; border: 1px solid #342443; border-radius: 6px; padding: 8px; }.form textarea { min-height: 100px; resize: vertical; }.form .wide { grid-column: 1/-1; }.switch { display: flex !important; align-items: center; gap: 7px; }.switch input { width: auto; }.flash { color: #bb9aff; font-size: 12px; }
.primary { color: #130d1f; background: linear-gradient(135deg, #c0a2ff, #9470ea); border-radius: 7px; padding: 8px 11px; font-size: 12px; font-weight: 750; }.secondary { color: #d8ccea; background: #2a1e38; border: 1px solid #3c2a51; border-radius: 7px; padding: 7px 10px; font-size: 12px; }.danger { color: #ffb2c6; background: transparent; font-size: 12px; }.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.form label { display: grid; gap: 5px; color: #a698b5; font-size: 11px; }.form input, .form textarea, .form select { width: 100%; color: #eee8f7; background: #0e0a15; border: 1px solid #342443; border-radius: 6px; padding: 8px; }.form textarea { min-height: 100px; resize: vertical; }.form .wide { grid-column: 1/-1; }.switch { display: flex !important; align-items: center; gap: 7px; }.switch input { width: auto; }.flash { color: #bb9aff; font-size: 12px; }
.connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.connection-row label { display: block; color: #9688a7; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }.connection-row code, .flash code { color: #e2d7ff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.oauth-actions, .oauth-login-link { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.oauth-login-link { margin-top: 10px; padding: 9px; border: 1px solid #342448; border-radius: 7px; background: #0e0a15; }.oauth-login-link a { flex: 1 1 280px; color: #d7c8ff; font-size: 11px; overflow-wrap: anywhere; }.oauth-status { margin: 10px 0 0; font-size: 11px; }
.settings-actions { display: flex; align-items: center; gap: 10px; }.settings-actions .primary:disabled { cursor: wait; opacity: .7; }.settings-actions span { font-size: 11px; }
.usage-filter { display: flex; align-items: center; gap: 7px; color: #9688a7; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.usage-filter select { color: #e6dcf7; background: #21162e; border: 1px solid #49335f; border-radius: 6px; padding: 5px 25px 5px 8px; font: 600 11px ui-sans-serif, system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.new-key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.new-key-row label { display: block; color: #bb9aff; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }.new-key-row code { color: #f0e9ff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }.new-key-row p { margin: 6px 0 0; font-size: 11px; }
.account-test { margin-right: 7px; }.account-test-result { margin-top: 7px; max-width: 380px; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.quota-card { background: linear-gradient(135deg, #181123 0%, #110c1a 100%); border: 1px solid #342448; border-radius: 11px; padding: 15px; min-width: 0; box-shadow: inset 0 1px #ffffff08; }.quota-card header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }.account-name { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }.account-id { display: block; color: #83738f; font-size: 10px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }.account-header-actions { display: flex; align-items: center; gap: 7px; }.account-toggle { display: inline-flex; cursor: pointer; }.account-toggle input { position: absolute; opacity: 0; }.account-toggle span { width: 28px; height: 16px; padding: 2px; border-radius: 99px; background: #3b2b4a; border: 1px solid #59406d; transition: .15s ease; }.account-toggle span::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: #a295af; transition: .15s ease; }.account-toggle input:checked + span { background: #457c65; border-color: #72c89a; }.account-toggle input:checked + span::after { transform: translateX(12px); background: #d7f7e4; }.account-toggle input:disabled + span { opacity: .5; cursor: wait; }.quota-status { border: 1px solid currentColor; border-radius: 99px; padding: 3px 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }.quota-window { display: flex; justify-content: space-between; color: #8d7b9e; font-size: 10px; margin: 15px 0 11px; text-transform: uppercase; letter-spacing: .06em; }.quota-meter { margin-top: 11px; }.meter-heading, .meter-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; }.meter-heading > span:first-child { color: #cabbd9; font-weight: 650; }.meter-heading > span:last-child { color: #95849f; text-align: right; }.meter-heading b { color: #eee8f7; }.meter-heading i { color: #816f91; font-style: normal; }.meter-track { height: 7px; overflow: hidden; background: #0b0811; border: 1px solid #2c2039; border-radius: 99px; margin: 7px 0 5px; }.meter-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7251cb, #b392fb); box-shadow: 0 0 13px #966eff88; }.quota-meter.warning .meter-track span { background: linear-gradient(90deg, #b77828, #f1c45c); box-shadow: 0 0 13px #f1bc5080; }.quota-meter.critical .meter-track span { background: linear-gradient(90deg, #c64b70, #ff9eb5); box-shadow: 0 0 13px #ef668b80; }.quota-meter.unlimited .meter-track span { background: linear-gradient(90deg, #375bbb, #62b0e6); box-shadow: none; }.meter-footer { color: #81718e; font-size: 10px; }.quota-form { display: flex; align-items: end; gap: 9px; border-top: 1px solid #2b1f38; margin-top: 15px; padding-top: 12px; }.quota-form label { color: #9889a8; font-size: 10px; }.quota-form .switch { grid-column: span 2; align-self: end; }.quota-form button { align-self: end; }
.codex-quota-windows { min-height: 103px; }
.quota-unavailable { margin: 0; padding: 25px 0; text-align: center; font-size: 11px; }
@media (max-width: 760px) { #app { display: block; } aside { position: sticky; top: 0; z-index: 2; padding: 9px; border-right: 0; border-bottom: 1px solid #2c203b; }.brand { padding: 4px 7px 10px; } nav { display: flex; overflow-x: auto; } nav button { white-space: nowrap; }.side-note { display: none; } section { padding: 17px 12px; }.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quota-grid { grid-template-columns: 1fr; }.model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form, .quota-form { grid-template-columns: 1fr; }.form .wide, .quota-form .switch { grid-column: auto; }.top { display: block; }.connection-row, .new-key-row { align-items: start; flex-direction: column; }.panel-head { align-items: start; gap: 9px; }.usage-filter { align-items: start; flex-direction: column; }.account-name, .account-id { max-width: 180px; }.panel-body { overflow-x: auto; }.log-table { min-width: 720px; }.log-meta { grid-template-columns: 1fr 1fr; }.log-detail-row td { min-width: 700px; } }