:root { color-scheme: light; --ink: #242424; --muted: #616161; --brand: #0078d4; --line: #e0e0e0; --surface: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.credential-value { display: block; overflow-wrap: anywhere; padding: 1rem; margin: 1rem 0; }
body { margin: 0; background: #f5f6f8; color: var(--ink); font: 14px/1.6 "Segoe UI", system-ui, sans-serif; }
header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 24px; background: #0078d4; color: white; position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 4px #0002; }
header > div { display: flex; align-items: center; gap: 12px; }
header strong { font-size: 20px; }
.header-tools { flex-wrap: wrap; justify-content: end; }
.language-control { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.language-control select { width: auto; margin: 0; padding: 6px 10px; }
.mark { background: #ffffff26; color: white; padding: 4px 8px; border-radius: 2px; font-weight: 800; }
.app-name { line-height: 1.3; }
.badge { display: inline-block; border: 1px solid #ffffff80; color: inherit; border-radius: 2px; padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: 1px; }
main { max-width: none; margin: 0 auto; padding: 0 24px; min-height: 78vh; }
.card { background: var(--surface); padding: 20px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.login { max-width: 660px; margin: 7vh auto; padding: 44px; }
.login h1 { font-size: 42px; line-height: 1.25; }
html[lang="en"] .login h1 { font-size: 38px; }
h1 { font-size: 26px; font-weight: 600; line-height: 1.35; }
h2 { font-size: 17px; margin: 0 0 18px; }
p, small, .muted, #connection { color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--brand); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
label { display: block; margin-bottom: 14px; font-weight: 550; font-size: 13px; }
input, select, textarea { width: 100%; display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid #8a8886; border-radius: 2px; background: white; color: var(--ink); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
button { background: var(--brand); color: white; border: 1px solid transparent; border-radius: 2px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; margin: 2px 5px 2px 0; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
button:hover { filter: brightness(.93); }
button:disabled { opacity: .5; cursor: wait; }
button.secondary { background: white; color: var(--muted); border-color: var(--line); }
button.danger { background: #fff1ee; color: #b44230; border-color: #f1d0c9; }
button.small { padding: 4px 9px; font-size: 12px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
nav button { background: transparent; color: var(--muted); }
nav button.selected { background: #e5f1fb; color: #005a9e; }
#refresh { margin-left: auto; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.heading h1 { margin: 0; }
.heading > span { font-size: 12px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric { background: white; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 3px; padding: 18px; }
.metric strong { display: block; font-size: 29px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.metric span { color: var(--muted); }
code, pre { font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
pre { background: #f5f5f5; padding: 16px; border: 1px solid var(--line); border-radius: 2px; overflow: auto; }
code { color: var(--brand); }
.answer { min-height: 240px; }
#image-results img { display: block; max-width: 100%; max-height: 480px; margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 12px; }
th { color: #424242; background: #fafafa; font-weight: 600; }
tbody tr:hover { background: #f0f6fc; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.check { display: flex; align-items: center; gap: 9px; }
.check input { width: auto; margin: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.filters label { flex: 1; min-width: 120px; margin: 0; }
.pagination { display: flex; gap: 16px; justify-content: end; align-items: center; margin-bottom: 22px; }
#notice { position: fixed; right: 24px; bottom: 24px; max-width: min(560px, 90vw); padding: 16px 24px; background: #193f35; color: white; border-radius: 12px; box-shadow: 0 6px 30px #0002; white-space: pre-wrap; z-index: 10; }
#notice.error { background: #922f29; }
#new-key { margin-top: 18px; padding: 15px; background: #eef8f2; border: 1px dashed #6db795; border-radius: 8px; }
#key-value { display: block; margin-bottom: 12px; }
footer { text-align: center; padding: 20px; color: var(--muted); font-size: 12px; }
a { color: var(--brand); }
section, .metrics, .metric, .filters > *, .grid > * { min-width: 0; }
.metric strong { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; min-width: 0; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.usage-chart { display: block; width: 100%; height: auto; }
.usage-chart text { fill: var(--muted); font: 11px system-ui, sans-serif; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-upstream { fill: var(--brand); }
.chart-estimated { fill: #b67a12; }
.chart-manual { fill: #62757c; }
.chart-mock { fill: #8659b9; }
.chart-total { fill: var(--ink); }
.chart-track { fill: #edf3f1; }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 2; }
.chart-line.chart-estimated { stroke: #b67a12; stroke-dasharray: 6 4; }
.chart-line.chart-manual { stroke: #62757c; stroke-dasharray: 3 3; }
.chart-line.chart-mock { stroke: #8659b9; stroke-dasharray: 9 3 2 3; }
.chart-line.chart-total { stroke: var(--ink); stroke-width: 2.5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.legend-upstream::before { background: var(--brand); }
.legend-estimated::before { background: #b67a12; }
.legend-manual::before { background: #62757c; }
.legend-mock::before { background: #8659b9; }
.legend-total::before { background: var(--ink); }
.breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin-bottom: 14px; }
.breakdown-name { overflow-wrap: anywhere; text-align: left; white-space: normal; }
button.breakdown-name { background: transparent; color: var(--brand); padding: 6px 0; margin: 0; }
.rank-bar { display: block; width: 100%; height: 8px; grid-column: 1 / -1; }
summary { cursor: pointer; padding: 8px 0; overflow-wrap: anywhere; }
.log-message { min-width: 240px; max-width: 440px; white-space: normal; overflow-wrap: anywhere; }
#logs-table pre { min-width: 260px; max-width: 480px; }
.log-level { display: inline-block; padding: 2px 8px; border-radius: 6px; }
.log-error { color: #922f29; background: #ffebe8; }
.log-warning { color: #755009; background: #fff4d6; }
#analytics-summary, #logs-summary, [role="status"] { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  header { padding: 16px 18px; }
  header > div { min-width: 0; flex-wrap: wrap; }
  .header-tools { justify-content: start; }
  main { margin-top: 22px; }
  .card { padding: 16px; }
  .heading { flex-direction: column; gap: 8px; }
  .heading > span { max-width: none; }
  .metrics { gap: 10px; }
  .metric { padding: 12px; }
  .metric strong { font-size: 24px; }
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .filters label { min-width: 0; }
  button, button.small, input:not([type="checkbox"]), select, summary { min-height: 44px; }
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; }
  .filters button { width: 100%; margin: 0; }
  nav { gap: 2px; }
  nav button { padding: 9px 11px; margin-right: 0; }
  #refresh { margin-left: 0; }
  .pagination { justify-content: space-between; gap: 8px; }
  .pagination button { padding: 10px; margin: 0; }
}
@media (max-width: 850px) { .grid { grid-template-columns: 1fr; gap: 0; } .metrics { grid-template-columns: 1fr 1fr; } #connection { display: none; } .heading { align-items: start; } .heading > span { max-width: 140px; } .login { padding: 28px; } main { padding: 0 18px; } }

header { min-height: 72px; }
header #connection { color: #fff; font-size: 12px; }
header .language-control select { border-color: #ffffff80; }
#console { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin: 0 -24px; align-items: start; }
#portal-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; position: sticky; top: 72px; height: calc(100dvh - 72px); overflow-y: auto; padding: 16px 10px; margin: 0; border: 0; border-right: 1px solid var(--line); background: #fff; }
#portal-nav button { text-align: left; margin: 0; padding: 10px 14px; border-left: 3px solid transparent; font-weight: 400; }
#portal-nav button.selected { border-left-color: var(--brand); font-weight: 600; }
.nav-caption { padding: 16px 17px 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.portal-content { min-width: 0; padding: 0 28px 28px; }
.portal-commandbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; min-height: 62px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
#page-location { font-size: 12px; color: var(--muted); }
.portal-commandbar button { font-size: 12px; }
.heading h2 { margin: 0; }
.info-strip { padding: 12px 16px; border-left: 3px solid var(--brand); background: #eaf4fc; margin: 0 0 20px; }
.resource-search { max-width: 520px; }
.resource-editor { margin-bottom: 20px; background: white; border: 1px solid var(--line); border-radius: 3px; min-width: 0; }
.resource-editor > summary { padding: 12px 16px; color: #005a9e; font-weight: 600; }
.resource-editor > .card { border: 0; border-top: 1px solid var(--line); margin: 0; }
.resource-editor .grid { gap: 16px; }
#user-editor, #channel-editor { max-width: 820px; }
#key-form > .resource-editor { margin-top: 20px; padding: 0 16px 16px; }
#key-form > .resource-editor:not([open]) { padding-bottom: 0; }
#key-user-context { padding: 10px 12px; background: #f5f6f8; overflow-wrap: anywhere; }
.playground-modes { display: flex; gap: 8px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.playground-modes button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 12px 16px; margin: 0; }
.playground-modes button[aria-pressed="true"] { color: #005a9e; border-bottom-color: var(--brand); }
[data-panel="playground"] .grid { align-items: start; }
#chat-result { min-height: 320px; }
.sent-request { border-top: 3px solid var(--brand); }
.sent-request pre { max-height: 320px; }
#chat-meta, #image-meta { display: block; padding: 8px 0; overflow-wrap: anywhere; }
#client-code { max-height: 520px; }
#menu-toggle { display: none; }
.menu-bars { display: block; width: 18px; height: 14px; border-top: 2px solid; border-bottom: 2px solid; }
.menu-bars::before { content: ""; display: block; border-top: 2px solid; margin-top: 4px; }
dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 24px; color: var(--ink); box-shadow: 0 12px 40px #0004; }
dialog::backdrop { background: #0006; }
#key-quota-error { color: #a4262c; }
.quick-links { display: flex; flex-wrap: wrap; gap: 4px; }
.setup-steps { padding-left: 26px; }
.setup-steps > li::marker { color: var(--brand); font-weight: 600; }
[data-panel="help"] td { white-space: normal; min-width: 150px; vertical-align: top; }
[data-panel="help"] td:last-child { min-width: 230px; }
@media (max-width: 1100px) {
  #console { grid-template-columns: 190px minmax(0, 1fr); }
  .portal-content { padding-left: 20px; padding-right: 20px; }
  .portal-content .grid { grid-template-columns: 1fr; gap: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  main { margin: 0; padding: 0 18px; }
  #console { display: block; margin: 0 -18px; }
  #menu-toggle { display: block; margin: 0; padding: 10px; background: #ffffff1a; color: white; border: 1px solid #ffffff80; }
  #portal-nav { display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 4; height: auto; max-height: calc(100dvh - 72px); border: 1px solid var(--line); margin: 0; box-shadow: 0 8px 20px #0003; }
  #portal-nav.expanded { display: flex; }
  .portal-content { padding: 0 18px 20px; }
  .portal-commandbar { margin-bottom: 20px; }
  .heading { align-items: flex-start; }
  .heading > span { max-width: none; }
  #connection { display: none; }
  button, button.small, summary, select, input:not([type="checkbox"]) { min-height: 44px; }
}
@media (max-width: 480px) {
  header { padding: 10px 16px; gap: 8px; }
  header strong { font-size: 16px; }
  header .badge { display: none; }
  .header-tools { margin-left: auto; }
  .language-control > span { display: none; }
  .language-control select { max-width: 112px; }
  .card { padding: 14px; }
  .playground-modes { gap: 0; }
  .playground-modes button { flex: 1; padding: 10px 8px; font-size: 13px; }
  header:has(.portal-brand) { flex-wrap: nowrap; }
  .portal-brand { flex: 1; flex-wrap: nowrap; gap: 8px; }
  .portal-brand .mark { display: none; }
  .portal-brand .app-name { min-width: 0; font-size: 13px; }
  .portal-brand #menu-toggle { flex-shrink: 0; }
  header:has(.portal-brand) .header-tools { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}