* { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-page); }
body { margin: 0; color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5; }
button, a { font: inherit; }
button { color: inherit; }
.skip-link { position: absolute; z-index: 5; top: -5rem; left: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-ink); color: white; }
.skip-link:focus { top: var(--space-3); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 2; display: flex; width: var(--sidebar-width); flex-direction: column; padding: var(--space-7) var(--space-5); border-right: 1px solid var(--color-line); background: var(--color-surface); }
.brand, .mobile-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.brand { margin: 0 0 var(--space-12) var(--space-2); }
.brand-mark { display: inline-flex; width: 2rem; height: 2rem; align-items: end; justify-content: center; gap: .2rem; padding: .38rem; border-radius: .7rem; background: var(--color-deep); }
.brand-mark span { width: .31rem; border-radius: 99px; background: var(--color-lime); }
.brand-mark span:nth-child(1) { height: .7rem; }
.brand-mark span:nth-child(2) { height: 1.1rem; }
.brand-mark span:nth-child(3) { height: .5rem; }
.brand-name { font-size: 1.08rem; font-weight: 750; letter-spacing: -.04em; }
.sidebar-label { margin: 0 var(--space-3) var(--space-3); color: var(--color-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .05em; }
.side-link { display: flex; min-height: 2.8rem; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--color-soft-green); color: var(--color-deep); font-weight: 680; }
.side-link-icon { font-size: 1.2rem; }
.sidebar-bottom { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: auto; padding: var(--space-3); color: var(--color-muted); font-size: var(--text-xs); }
.live-dot { flex: none; width: .45rem; height: .45rem; margin-top: .27rem; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 0 .2rem var(--color-soft-green); }
.content-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { display: flex; height: var(--header-height); align-items: center; justify-content: flex-end; padding: 0 var(--space-10); border-bottom: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-page) 92%, transparent); }
.mobile-brand { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
.updated { color: var(--color-muted); font-size: var(--text-sm); }
.refresh-button { display: inline-flex; min-height: 2.55rem; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); font-weight: 660; transition: background var(--motion-fast), border var(--motion-fast), transform var(--motion-fast); }
.refresh-button:hover { border-color: var(--color-green); background: var(--color-soft-green); }
.refresh-button:active { transform: translateY(1px); }
.refresh-button:disabled { cursor: wait; opacity: .7; }
.refresh-icon { display: inline-block; font-size: 1.2rem; line-height: 1; }
.refresh-button.loading .refresh-icon { animation: spin 1s linear infinite; }
.main-content { width: min(100%, var(--content-width)); margin: 0 auto; padding: var(--space-10) var(--space-10) var(--space-8); }
.intro { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-8); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-green); font-size: var(--text-xs); font-weight: 750; letter-spacing: .09em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: var(--space-2); font-size: clamp(1.8rem, 3vw, 2.25rem); font-weight: 740; letter-spacing: -.055em; line-height: 1.15; }
.intro-copy { margin-bottom: 0; color: var(--color-muted); }
.private-note { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); padding: .5rem .75rem; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-surface); color: var(--color-muted); font-size: var(--text-xs); }
.private-note span { color: var(--color-green); font-size: 1rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-10); }
.summary-card { min-height: 8.3rem; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.summary-primary { border-color: color-mix(in srgb, var(--color-green) 22%, var(--color-line)); background: linear-gradient(135deg, var(--color-soft-green), var(--color-surface) 75%); }
.summary-top { display: flex; align-items: center; justify-content: space-between; color: var(--color-muted); font-size: var(--text-sm); font-weight: 580; }
.summary-glyph { color: var(--color-deep); font-size: 1.15rem; }
.summary-glyph.good { color: var(--color-green); }
.summary-glyph.accent { color: var(--color-violet); }
.summary-card strong { display: block; margin-top: var(--space-2); font-size: 2rem; font-weight: 730; letter-spacing: -.05em; line-height: 1.1; }
.summary-denominator { color: var(--color-muted); font-size: .58em; font-weight: 620; letter-spacing: -.02em; }
.summary-foot { display: block; margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.accounts-section { padding: var(--space-7); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-heading h2 { margin-bottom: var(--space-1); font-size: 1.2rem; letter-spacing: -.03em; }
.section-heading p { margin-bottom: 0; color: var(--color-muted); font-size: var(--text-sm); }
.filters { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); }
.filter-chip { min-height: 2.15rem; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-surface); color: var(--color-muted); cursor: pointer; font-size: var(--text-xs); transition: background var(--motion-fast), color var(--motion-fast), border var(--motion-fast); }
.filter-chip:hover, .filter-chip.selected { border-color: var(--color-deep); background: var(--color-deep); color: white; }
.provider-list { display: grid; gap: var(--space-6); }
.provider-section { min-width: 0; }
.provider-heading { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.provider-heading h3 { margin: 0; font-size: var(--text-sm); font-weight: 720; }
.provider-count { padding: .12rem .45rem; border-radius: 99px; background: var(--color-page); color: var(--color-muted); font-size: var(--text-xs); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.account-card { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-card); }
.account-header { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.provider-avatar { display: grid; width: 2.4rem; height: 2.4rem; flex: none; place-items: center; border: 1px solid var(--avatar-line); border-radius: .8rem; background: var(--avatar-bg); color: var(--avatar-ink); font-size: .68rem; font-weight: 780; letter-spacing: -.03em; }
.provider-claude { --avatar-bg: var(--color-soft-orange); --avatar-line: var(--color-orange-line); --avatar-ink: var(--color-orange-ink); }
.provider-codex { --avatar-bg: var(--color-soft-blue); --avatar-line: var(--color-blue-line); --avatar-ink: var(--color-blue-ink); }
.provider-antigravity, .provider-gemini { --avatar-bg: var(--color-soft-purple); --avatar-line: var(--color-purple-line); --avatar-ink: var(--color-purple-ink); }
.provider-kimi { --avatar-bg: var(--color-soft-cyan); --avatar-line: var(--color-cyan-line); --avatar-ink: var(--color-cyan-ink); }
.provider-xai, .provider-other { --avatar-bg: var(--color-soft-neutral); --avatar-line: var(--color-line); --avatar-ink: var(--color-neutral-ink); }
.account-title { min-width: 0; flex: 1; }
.account-title h3 { overflow: hidden; margin: 0; font-size: var(--text-sm); font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.account-title p { margin: .1rem 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.account-title h3.quota-account-provider { overflow: visible; text-overflow: clip; white-space: normal; }
.account-title p.quota-account-identity { color: var(--color-ink); font-size: .68rem; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.account-title p.quota-account-plan { font-size: .66rem; line-height: 1.35; overflow-wrap: anywhere; }
.state-pill { flex: none; padding: .22rem .55rem; border-radius: 99px; background: var(--color-soft-green); color: var(--color-green-ink); font-size: .68rem; font-weight: 650; }
.state-disabled { background: var(--color-soft-neutral); color: var(--color-muted); }
.state-unavailable { background: var(--color-soft-amber); color: var(--color-amber-ink); }
.metrics-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.metric-row { min-width: 0; }
.metric-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.metric-label { overflow: hidden; color: var(--color-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.metric-value { flex: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 700; }
.metric-track { overflow: hidden; height: .34rem; margin-top: var(--space-2); border-radius: 99px; background: var(--color-track); }
.metric-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-green), var(--color-lime-deep)); }
.quota-meter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.antigravity-quota-groups { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.antigravity-quota-group { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-page); }
.antigravity-quota-group-heading { margin-bottom: var(--space-2); }
.antigravity-quota-group-heading h4 { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.antigravity-quota-group-heading p { margin: .2rem 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.45; overflow-wrap: anywhere; }
.antigravity-group-models { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
.antigravity-group-model-heading { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-xs); }
.antigravity-group-model-heading strong { font-weight: 700; }
.antigravity-group-model-heading span { padding: .08rem .4rem; border-radius: 99px; background: var(--color-soft-green); color: var(--color-green-ink); font-size: .65rem; font-weight: 680; }
.antigravity-group-model-list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.antigravity-group-model-list li { max-width: 100%; padding: .2rem .55rem; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-page); font-size: .68rem; line-height: 1.4; overflow-wrap: anywhere; }
.antigravity-group-model-empty, .antigravity-group-description { margin: 0; color: var(--color-muted); font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.antigravity-group-description { margin-top: .25rem; }
.antigravity-quota-group .quota-meter-grid { margin-top: 0; }
.quota-meter { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
.quota-meter-low { border-color: var(--color-red-line); background: var(--color-soft-red); }
.quota-meter-warning { border-color: color-mix(in srgb, var(--color-amber-ink) 28%, var(--color-line)); background: var(--color-soft-amber); }
.quota-meter-heading { display: flex; min-height: 2.1rem; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.quota-meter-label { margin: 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.quota-level { flex: none; padding: .1rem .4rem; border-radius: 99px; background: var(--color-soft-green); color: var(--color-green-ink); font-size: .62rem; font-weight: 700; }
.quota-level.quota-meter-warning { background: var(--color-soft-amber); color: var(--color-amber-ink); }
.quota-level.quota-meter-low { background: var(--color-soft-red); color: var(--color-red-ink); }
.quota-meter-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; margin-top: var(--space-2); }
.quota-meter-value { font-size: 1.04rem; font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -.03em; }
.quota-meter-used { color: var(--color-muted); font-size: .68rem; }
.quota-track { overflow: hidden; height: .42rem; margin-top: var(--space-2); border-radius: 99px; background: var(--color-track); }
.quota-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-green), var(--color-lime-deep)); }
.quota-meter-low .quota-fill { background: var(--color-red-ink); }
.quota-meter-warning .quota-fill { background: var(--color-amber-ink); }
.quota-reset { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: .68rem; line-height: 1.4; }
.quota-details { margin-top: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-page); }
.quota-details summary { padding: .65rem .8rem; color: var(--color-deep); cursor: pointer; font-size: var(--text-xs); font-weight: 680; }
.quota-detail-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .8rem; margin: 0; padding: 0 .8rem .8rem; }
.quota-detail-list dt { color: var(--color-muted); font-size: .7rem; overflow-wrap: anywhere; }
.quota-detail-list dd { max-width: 100%; margin: 0; font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 680; overflow-wrap: anywhere; text-align: right; }
.no-metrics { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-page); color: var(--color-muted); font-size: var(--text-xs); }
.empty-mark { color: var(--color-faint); font-size: 1rem; }
.empty-state { display: grid; min-height: 14rem; place-content: center; justify-items: center; padding: var(--space-8); text-align: center; }
.empty-orbit { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: var(--space-3); border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-green); font-size: 1.5rem; }
.empty-state h3 { margin-bottom: var(--space-1); font-size: var(--text-body); }
.empty-state p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.notice { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-soft-green); color: var(--color-green-ink); font-size: var(--text-sm); }
.notice-error { border-color: var(--color-red-line); background: var(--color-soft-red); color: var(--color-red-ink); }
.page-footer { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.skeleton-grid { width: 100%; }
.skeleton-card { display: grid; min-height: 10rem; align-content: start; gap: var(--space-4); }
.skeleton-line { height: .7rem; border-radius: 99px; background: linear-gradient(90deg, var(--color-page) 25%, var(--color-line) 50%, var(--color-page) 75%); background-size: 220% 100%; animation: shimmer 1.5s infinite linear; }
.skeleton-title { width: 65%; height: 1.2rem; }
.skeleton-line.short { width: 45%; }
button:focus-visible, a:focus-visible { outline: .18rem solid var(--color-focus); outline-offset: .16rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -220% 0; } }

@media (max-width: 68rem) {
  .sidebar { width: 13rem; padding-inline: var(--space-4); }
  .content-shell { margin-left: 13rem; }
  .topbar { padding-inline: var(--space-6); }
  .main-content { padding-inline: var(--space-6); }
  .accounts-section { padding: var(--space-5); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .filters { justify-content: flex-start; }
}
@media (max-width: 48rem) {
  .sidebar { display: none; }
  .content-shell { margin-left: 0; }
  .topbar { position: sticky; top: 0; z-index: 1; height: 3.8rem; justify-content: space-between; padding-inline: var(--space-4); border-bottom: 1px solid var(--color-line); background: color-mix(in srgb, var(--color-page) 94%, transparent); backdrop-filter: blur(12px); }
  .mobile-brand { display: inline-flex; gap: var(--space-2); }
  .mobile-brand .brand-mark { width: 1.8rem; height: 1.8rem; border-radius: .6rem; }
  .mobile-brand .brand-name { font-size: 1rem; }
  .topbar-right { gap: var(--space-2); }
  .updated { max-width: 6rem; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .refresh-button { min-height: 2.35rem; padding-inline: var(--space-3); font-size: var(--text-xs); }
  .main-content { padding: var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom)); }
  .intro { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-6); }
  .private-note { font-size: .68rem; }
  .summary-grid { gap: var(--space-2); margin-bottom: var(--space-6); }
  .summary-card { min-height: 7.1rem; padding: var(--space-3); border-radius: var(--radius-sm); }
  .summary-top { font-size: .68rem; }
  .summary-glyph { display: none; }
  .summary-card strong { margin-top: var(--space-3); font-size: 1.65rem; }
  .summary-foot { margin-top: var(--space-1); font-size: .62rem; }
  .accounts-section { padding: var(--space-4); border-radius: var(--radius-md); }
  .filters { gap: var(--space-1); }
  .filter-chip { min-height: 2rem; padding-inline: var(--space-3); }
  .account-grid { grid-template-columns: 1fr; }
  .quota-meter-grid { grid-template-columns: 1fr; }
  .page-footer { flex-direction: column; }
}

/* Cover display: about 360 CSS px; unfolded display: about 750 CSS px. */
@media (max-width: 26.25rem) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card:nth-child(3) { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 4.8rem; }
  .summary-card:nth-child(3) .summary-top, .summary-card:nth-child(3) .summary-foot { grid-column: 1; }
  .summary-card:nth-child(3) strong { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 1.65rem; white-space: nowrap; }
  .summary-card:nth-child(3) .summary-foot { margin-top: .15rem; }
  .quota-meter-grid { gap: var(--space-2); }
  .quota-meter { padding: var(--space-3); }
}

@media (min-width: 40rem) and (max-width: 48rem) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-grid, .quota-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.sidebar-nav { display: grid; gap: var(--space-1); }
.side-link { background: transparent; color: var(--color-muted); font-weight: 620; text-decoration: none; }
.side-link:hover, .side-link[aria-current="page"] { background: var(--color-soft-green); color: var(--color-deep); }
.route-nav { display: none; }
.route-view[hidden] { display: none; }
.oauth-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-page); }
.oauth-flow p { flex: 1 1 12rem; margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.oauth-action { display: inline-flex; min-height: 2.35rem; align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-deep); cursor: pointer; font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
.oauth-action:hover { border-color: var(--color-green); background: var(--color-soft-green); }
.oauth-action:disabled { cursor: wait; opacity: .65; }
.provider-detail { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); }

@media (max-width: 48rem) {
  .route-nav { display: flex; gap: var(--space-2); overflow-x: auto; margin: calc(var(--space-3) * -1) 0 var(--space-6); padding: 0 0 var(--space-2); scrollbar-width: thin; }
  .route-nav a { flex: none; padding: .45rem .8rem; border: 1px solid var(--color-line); border-radius: 99px; background: var(--color-surface); color: var(--color-muted); font-size: var(--text-xs); text-decoration: none; }
  .route-nav a[aria-current="page"] { border-color: var(--color-deep); background: var(--color-deep); color: white; }
}

.toolbar, .card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.card-actions { margin-top: var(--space-4); }
.card-actions select { min-height: 2.35rem; max-width: 100%; padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: var(--text-xs); }
.danger { border-color: var(--color-red-line); background: var(--color-soft-red); color: var(--color-red-ink); }
.danger:hover { border-color: var(--color-red-line); background: var(--color-soft-red); filter: brightness(.98); }
.primary-action { border-color: var(--color-deep); background: var(--color-deep); color: white; }
.secondary-section { margin-top: var(--space-6); }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); }
.inline-form label, .editor-field { display: grid; min-width: min(100%, 13rem); flex: 1; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.inline-form input, .inline-form select, .editor-field input, .editor-field textarea, .editor-toolbar select, .config-delete input { width: 100%; min-height: 2.6rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.editor-toolbar label { color: var(--color-muted); font-size: var(--text-sm); }
.editor-toolbar select { width: auto; min-width: 10rem; }
.json-editor, .pre-output { width: 100%; min-height: 18rem; margin: var(--space-3) 0; padding: var(--space-4); overflow: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-page); color: var(--color-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-xs); line-height: 1.6; tab-size: 2; }
.pre-output { white-space: pre-wrap; overflow-wrap: anywhere; }
.config-delete { margin-top: var(--space-4); }
.form-hint { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.editor-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: min(88vh, 56rem); padding: var(--space-6); overflow: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-dialog); }
.editor-dialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(var(--blur-overlay)); }
.editor-dialog h2 { margin-bottom: var(--space-5); font-size: 1.25rem; }
.editor-field { margin-bottom: var(--space-4); }
.editor-field textarea { min-height: 10rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.plugin-install-form { margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-page); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: .18rem solid var(--color-focus); outline-offset: .12rem; }

@media (max-width: 48rem) {
  .toolbar { width: 100%; }
  .toolbar .refresh-button { flex: 1; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form label { width: 100%; }
  .editor-toolbar { align-items: stretch; }
  .editor-toolbar select, .editor-toolbar .refresh-button { flex: 1; }
  .json-editor, .pre-output { min-height: 14rem; }
  .editor-dialog { padding: var(--space-4); }
  .dialog-actions { position: sticky; bottom: calc(var(--space-4) * -1); padding: var(--space-3) 0; background: var(--color-surface); }
}