/*
 * CSS rules
 * - Use palette color names directly: --slate, --silver, --smoke, --snow, and related tokens.
 * - Reserve --green for filled accents and payment completion marks, including checkboxes, the logo triangle, and status chart blocks.
 * - Use --orange for the light-theme browser-storage notice.
 * - Reuse existing spacing, radius, and layout tokens before adding values.
 * - Extend an existing rule or group selectors with identical declarations before adding rules.
 * - Keep selector order and responsive overrides intact; format blocks compactly, never minify the file.
 */
:root {
  color-scheme: light;
  --font-sans: "Fakt Soft Pro", sans-serif;
  --slate: #3c4858;
  --black: var(--slate);
  --steel: var(--slate);
  --silver: #8492a6;
  --smoke: #e0e6ed;
  --dark-smoke: #d3dce6;
  --extra-dark-smoke: #c0ccda;
  --white: #fff;
  --snow: #f9fafc;
  --dark-snow: #eff2f7;
  --extra-dark-snow: #e5e9f2;
  --indigo: #6266C9;
  --green: #62c965;
  --orange: #ff7849;
  --checkmark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --card-padding: var(--space-5);
  --field-height: 50px;
  --divider-line: 1px solid var(--smoke);
  --divider-space: var(--space-10);
  --block-space: var(--space-6);
  --label-gap: var(--space-2);
  --list-row-padding: var(--space-3);
  --content-width: 1120px;
  --app-frame-width: 1440px;
  --sidebar-width: calc(var(--app-frame-content-inset) + 180px);
  --app-frame-left: max(0px,calc((100vw - var(--app-frame-width)) / 2));
  --sidebar-content-inset: var(--app-frame-content-inset);
  --page-gutter: 40px;
  --page-content-inset: clamp(40px,4.86vw,70px);
  --app-frame-content-inset: max(
    var(--page-content-inset),
    calc((min(100vw,var(--app-frame-width)) - var(--content-width)) / 2)
  );
  --content-top-inset: 35px;
  --content-bottom-inset: 60px;
  --font-size: 16px;
  --font-weight: 400;
  --line-height: 1.4;
  color: var(--slate);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
}
:root::before {
  position: fixed; z-index: 100; inset: 0 0 auto; height: env(safe-area-inset-top,0px);
  background: #000; content: ""; pointer-events: none;
}
.container-example-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: var(--divider-line);
}
.container-example-card h3,.container-example-card p {margin: 0;}
.container-example-files {display: grid; gap: var(--space-2); padding-top: var(--space-4);}
.container-example-files h3 {margin: 0;}
.container-example-files ul {display: grid; gap: var(--space-2); margin: 0; padding-left: 1.25rem;}
.container-example-list-item {cursor: default;}
.container-example-list-item button {pointer-events: none;}
:root[data-theme="dark"] {
  color-scheme: dark;
  --slate: #fff;
  --black: var(--slate);
  --steel: #273444;
  --smoke: #465262;
  --divider-line: 1px solid var(--steel);
  --dark-smoke: #526175;
  --extra-dark-smoke: #7d8da2;
  --snow: #1f2d3d;
  --dark-snow: #273444;
  --extra-dark-snow: #344254;
  background: var(--snow);
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] html,
:root[data-theme="dark"] .app,
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .chat-message-assistant,
:root[data-theme="dark"] .agent .context-editor,
:root[data-theme="dark"] .agent .context-picker.context-upload-bar,
:root[data-theme="dark"] .context-file,
:root[data-theme="dark"] .balance-topup .topup-amount,
:root[data-theme="dark"] .compose-email-dialog,
:root[data-theme="dark"] .page-navigation {
  background: var(--snow);
}
:root[data-theme="dark"] .page-navigation {border-right-color: var(--steel);}
:root[data-theme="dark"] .storage-notice,
:root[data-theme="dark"] .storage-notice::before {background: var(--steel);}
:root[data-theme="dark"] .chat-dialog {background: var(--snow); color: var(--slate);}
@font-face {
  font-family: "Fakt Soft Pro"; src: url("/FaktSoftPro-Normal.woff2") format("woff2"); font-weight: 400;
  font-style: normal; font-display: swap;
}
*,*::before,*::after {
  box-sizing: border-box; font-family: var(--font-sans); font-size: var(--font-size); outline: none;
  font-weight: var(--font-weight); -webkit-tap-highlight-color: transparent;
}
::selection {
  background-color: var(--smoke); color: inherit;
}
::-moz-selection {
  background-color: var(--smoke); color: inherit;
}
a:link,a:visited {
  color: var(--indigo);
}
a:visited {
  text-decoration: none;
}
body {
  width: 100%; height: 100vh; height: 100dvh; min-width: 320px; min-height: 0;
  margin: 0; background: #fff; line-height: var(--line-height);
}
html {
  background: #fff;
}
@media (pointer: coarse) {
  html,body {overscroll-behavior: none;}
  html {touch-action: manipulation;}
}
.page-shell {
  display: grid; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);
}
.notice-stack {
  display: flex; grid-column: 1; grid-row: 1; flex-direction: column;
}
.page-rail {
  display: none;
}
.page-rail-left {
  left: 0;
}
.page-rail-right {
  right: 0;
}
html[data-storage-notice-dismissed] .storage-notice {
  display: none;
}
.storage-notice {
  grid-column: 1; color: var(--white); background: var(--orange);
}
.storage-notice-inner p {margin: 0;}
.storage-notice::before {
  position: absolute; z-index: -1; top: -100vh; right: 0; left: 0; height: 100vh;
  background: var(--orange); content: ""; pointer-events: none;
}
.storage-notice-inner {
  display: flex;
  width: min(100%,calc(var(--content-width) + 2 * var(--app-frame-content-inset)));
  min-height: 50px;
  align-items: center; justify-content: space-between; gap: var(--space-5);
  padding-inline: var(--app-frame-content-inset); margin: 0 auto; background: transparent;
}
.storage-notice-actions button {
  min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.storage-notice-actions {
  display: flex; align-items: center; gap: 30px;
}
.storage-notice ::selection {
  background-color: var(--smoke); color: var(--orange);
}
.storage-notice ::-moz-selection {
  background-color: var(--smoke); color: var(--orange);
}
* {
  scrollbar-width: none; -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}
html.booting button,html.booting button:disabled,html.booting [role="button"] {
  cursor: pointer;
}
html.booting #app {
  visibility: hidden;
}
html.booting[data-startup-shell-ready] #app {
  visibility: visible;
}
html.booting[data-last-paint] #app {
  opacity: .5;
}
html.booting input,html.booting textarea,
html.booting input:disabled,html.booting textarea:disabled {
  cursor: text;
}
button,a,input,select,textarea {
  font: inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),select,textarea {
  min-width: 0; min-height: var(--field-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--smoke);
  border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none;
  background-color: var(--snow); color: var(--slate);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"])::placeholder,textarea::placeholder {
  color: var(--silver); opacity: 1;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):disabled,
select:disabled,textarea:disabled {
  background-color: var(--snow); color: var(--silver);
}
input[type="number"] {
  appearance: textfield; -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
  margin: 0; -webkit-appearance: none;
}
input[type="checkbox"] {
  display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-content: center; padding: 0;
  border: 1px solid var(--smoke); border-radius: 7px; margin: 0; appearance: none; -webkit-appearance: none;
  background: var(--snow); cursor: pointer;
}
input[type="checkbox"]::before {
  width: 15px; height: 15px;
  background: var(--snow);
  content: "";
  opacity: 0;
  -webkit-mask: var(--checkmark-mask) center / contain no-repeat;
  mask: var(--checkmark-mask) center / contain no-repeat;
}
input[type="checkbox"]:checked {
  border-color: var(--green); background: var(--green);
}
input[type="checkbox"]:checked::before {
  opacity: 1;
}
input[type="checkbox"]:disabled {
  cursor: not-allowed; opacity: 0.45;
}
input[type="radio"] {
  display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-content: center; padding: 0;
  border: 1px solid var(--smoke); border-radius: 50%; margin: 0; appearance: none; -webkit-appearance: none;
  background: var(--snow); cursor: pointer;
}
input[type="radio"]::before {
  width: 8px; height: 8px; border-radius: 50%; background: var(--snow); content: ""; transform: scale(0);
}
input[type="radio"]:checked {
  border-color: var(--slate); background: var(--slate);
}
input[type="radio"]:checked::before {
  transform: scale(1);
}
input[type="radio"]:disabled {
  cursor: not-allowed; opacity: 0.45;
}
input[type="file"]::file-selector-button {
  min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--smoke);
  border-radius: var(--radius-sm); margin-right: var(--space-3); background: var(--snow);
  color: var(--slate); font: inherit; cursor: pointer;
}
select {
  padding-right: 36px;
  background-image: linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);
  background-position: calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-repeat: no-repeat;
  background-size: 5px 5px; cursor: pointer;
}
select option {
  background: var(--snow); color: var(--slate);
}
textarea {
  min-height: 96px; resize: vertical;
}
button {
  color: inherit;
}
button:disabled {
  cursor: pointer; color: var(--silver);
}
.button:disabled {
  color: var(--extra-dark-smoke);
}
:root[data-theme="dark"] button:disabled {
  color: var(--silver);
}
:root[data-theme="dark"] input[type="checkbox"]::before {background: var(--white);}
[hidden] {
  display: none !important;
}
.brand-toggle {
  display: inline-flex; min-width: 0; min-height: 32px; flex: none; align-items: center; gap: 10px;
  padding: 0; border: 0; background: transparent; color: var(--slate); font: inherit;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  text-align: left; cursor: pointer;
}
.brand-mark-icon {display: block; width: 20px; height: 20px; flex: none; object-fit: contain; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-user-drag: none; user-select: none;}
#sign-in,#sign-in.is-active {
  color: var(--slate);
}
.icon {
  display: inline-flex; align-items: center;
}
.brand-name {display: inline-flex; min-width: 0; align-items: center; color: var(--slate); font-family: var(--font-sans); font-weight: var(--font-weight); white-space: nowrap;}
:root[data-theme="dark"] .brand-name {color: var(--white);}
.button {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--slate);
  text-decoration: none; cursor: pointer;
}
.button-primary,
.button-create,
.button-service {
  border: 1px solid var(--smoke); color: var(--slate);
}
.button-quiet {
  border-color: var(--smoke); color: var(--slate);
}
.button-danger-quiet {
  border-color: transparent; color: var(--silver);
}
.button-small {
  min-height: 32px; padding: 0 var(--space-3);
}
.button-action {
  min-height: 44px; padding: 0 var(--space-6);
}
.font-weight-medium {
  font-weight: var(--font-weight);
}
.font-weight-semibold {
  font-weight: var(--font-weight);
}
.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.action-checkout {
  width: min(100% - 32px,440px); max-width: 440px; padding: 0; border: 1px solid var(--smoke);
  border-radius: var(--radius-lg); background: var(--snow); color: var(--slate);
}
.action-checkout::backdrop {
  background: var(--slate); opacity: 0.44; backdrop-filter: blur(3px);
}
.action-checkout-content {
  display: grid; gap: var(--space-4); padding: clamp(22px,6vw,32px); text-align: left;
}
.action-checkout-content h2,.action-checkout-content p {
  margin: 0;
}
.action-checkout-totals {
  display: grid; gap: 0; margin: 0; border-top: 1px solid var(--smoke);
}
.action-checkout-totals > div {
  display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--smoke);
}
.action-checkout-totals dt {
  color: var(--silver);
}
.action-checkout-totals dd {
  margin: 0; font-variant-numeric: tabular-nums; text-align: right;
}
.action-checkout-remaining dd {
  font-weight: var(--font-weight);
}
.action-checkout-note:empty {
  display: none;
}
.action-checkout-actions {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2);
  padding-top: var(--space-2);
}
.action-checkout-actions .button {
  width: 100%;
}
.app {
  position: relative; z-index: 1; display: grid; grid-column: 1; grid-row: 2;
  width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; margin: 0;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr);
  padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px);
  background: #fff; text-align: center;
}
.app::before,.app::after {
  display: none;
}
.header {
  position: relative; z-index: 6; grid-column: 1; grid-row: 1; min-width: 0;
  border-bottom: var(--divider-line); background: #fff;
}
.header-inner {
  position: relative; display: flex; width: min(100%,calc(var(--content-width) + 2 * var(--page-content-inset)));
  align-items: center; gap: var(--space-5);
  padding: 20px var(--page-content-inset); margin: 0 auto;
}
.header-top {
  display: flex; width: 100%; min-width: 0;
  align-items: center; justify-content: space-between; gap: var(--space-5);
}
.header-brand {
  display: flex; min-width: 0; align-items: center;
}
.header-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-4);
  margin-left: auto; text-align: right;
}
.header-actions .button {
  border: 1px solid var(--smoke); background: #fff;
}
.mobile-menu-toggle {display: none;}
#sign-in:not(.is-signed-in) {
  height: 38px; min-height: 38px; padding: 0 18px; border: 1px solid var(--smoke); border-radius: var(--radius-pill);
  background: #fff; color: var(--slate); font: inherit;
}
#sign-in.is-signed-in {
  max-width: min(320px,42vw,calc(100vw - 200px)); min-width: 0; overflow: hidden; min-height: 32px; padding: 0;
  border-color: transparent; border-radius: 0; background: transparent; color: var(--silver);
  text-overflow: ellipsis; white-space: nowrap;
}
@supports (-webkit-background-clip: text) {
  #sign-in.is-signed-in {
    background-color: var(--silver);
    background-image:
      linear-gradient(112deg,transparent 28%,rgba(229,233,239,.16) 36%,rgba(255,255,255,.38) 40%,rgba(246,247,249,.24) 42%,rgba(229,233,239,.1) 47%,transparent 55%),
      linear-gradient(124deg,transparent 51%,rgba(229,233,239,.08) 57%,rgba(255,255,255,.24) 60%,rgba(229,233,239,.1) 64%,transparent 71%),
      linear-gradient(104deg,transparent 7%,rgba(229,233,239,.11) 18%,rgba(246,247,249,.18) 21%,rgba(229,233,239,.06) 25%,transparent 31%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.header-account {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-4);
  white-space: nowrap;
}
.header-account > .button {
  height: 38px; min-height: 38px; flex: none; padding-inline: 18px;
}
#passkey-signin-fallback {
  margin: 0;
}
.card-select {position: relative; width: 100%; min-width: 0;}
.card-select-trigger {display: flex; width: 100%; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--smoke); border-radius: var(--radius-sm); background: var(--snow); color: var(--slate); font: inherit; text-align: left; cursor: pointer;}
.card-select-trigger > span:first-child {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.card-select-caret {display: block; width: 16px; height: 16px; flex: none; color: var(--silver);}
.card-select-caret-icon {display: block; width: 100%; height: 100%; overflow: visible;}
.card-select-caret-icon path {fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}
.card-select-menu {position: absolute; z-index: 40; top: 0; left: 0; display: grid; width: max-content; max-width: calc(100vw - 24px); gap: 0; overflow: visible; padding: var(--space-2); border: 1px solid var(--smoke); border-radius: var(--radius-md); margin: 0; background: var(--snow); box-shadow: 0 1px 3px rgba(31,45,61,.10);}
.card-select-menu[hidden] {display: none;}
.card-select-menu [role="option"] {display: flex; min-height: 44px; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--silver); cursor: pointer; line-height: 1.3; overflow-wrap: anywhere;} .card-select-menu [role="option"][aria-selected="true"] {background: var(--dark-snow); color: var(--slate);} .card-select-menu [role="option"][aria-disabled="true"] {opacity: .5; cursor: default;}
:root[data-theme="dark"] :is(.header-actions .button,#sign-in:not(.is-signed-in)) {
  border-color: var(--dark-smoke);
  background: var(--snow);
}
.chat-widget {display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; align-items: stretch; flex-direction: column;}
.chat-panel {display: flex; width: 100%; max-width: none; height: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: var(--space-2); padding: 0; border: 0; border-radius: 0; background: transparent;}
.chat-messages {display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; gap: var(--space-2); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) 0; border: 0; border-radius: 0; background: transparent;}
.chat-example-label {align-self: center; margin: 0 0 var(--space-2); color: var(--silver);}
.chat-message {max-width: min(78ch,90%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); overflow-wrap: anywhere; white-space: pre-wrap;}
.chat-message-user {align-self: flex-end; background: var(--dark-snow); color: var(--slate);}
.chat-message-assistant {align-self: flex-start; background: var(--snow); color: var(--slate);}
.chat-image-prompt {margin: var(--space-2) 0;}
.chat-image-generate {align-self: flex-start;}
.chat-generated-image {display: block; max-width: 100%; max-height: 60vh; margin-top: var(--space-2); border-radius: var(--radius-md); object-fit: contain;}
.chat-form {position: relative; z-index: 1; display: grid; flex: none; grid-template-columns: auto minmax(0,1fr) auto; align-items: end; gap: var(--space-2); padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow); box-shadow: none;}
.chat-composer-toolbar {display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: center; gap: var(--space-2);}
.chat-composer-toolbar select,.chat-composer-toolbar .card-select {width: min(100%,18rem); min-width: 0; min-height: 44px;}
.chat-target-status {grid-column: 1 / -1; margin: 0;}
.chat-target-status:empty {display: none;}
.chat-decision-controls {
  display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start; gap: var(--space-2);
}
.chat-decision-controls[hidden],.chat-decision-criteria[hidden] {display: none;}
.chat-decision-controls label {align-self: center; color: var(--silver);}
.chat-decision-controls select {width: 100%; min-width: 0; min-height: 44px;}
#chat-form .chat-decision-controls textarea {
  grid-column: 2; width: 100%; height: 6rem; min-height: 6rem; max-height: 16rem;
  padding: var(--space-2) var(--space-3); overflow-y: auto; resize: vertical;
}
.chat-decision-criteria {
  display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start; gap: var(--space-2);
}
.chat-decision-controls .panel-help {grid-column: 1 / -1; margin: 0;}
.chat-form textarea {grid-column: 2; width: 100%; height: auto; min-height: 44px; max-height: 32dvh; padding: var(--space-2) var(--space-3); overflow-y: auto; resize: none;}
.chat-form #chat-send {grid-column: 3;}
.chat-panel[data-prestart="true"] .chat-form {grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: var(--space-3);}
.chat-panel[data-prestart="true"] .chat-form textarea {
  grid-column: 1 / -1; height: 144px; min-height: 144px; max-height: 144px;
  padding: var(--space-3); border: 0; background: transparent; overflow-y: auto; resize: none;
}
.chat-panel[data-prestart="true"] .chat-form #chat-send {grid-column: 2; justify-self: end;}
.chat-feedback {display: flex; min-height: 0; flex: none; align-items: center; flex-wrap: wrap; gap: var(--space-2);}
.chat-status {min-width: 0; flex: 1 1 auto;}
.chat-budget,.chat-status,.chat-session-usage {
  flex: none; margin: 0; line-height: 1.35;
}
.chat-budget:empty,.chat-status:empty,.chat-session-usage:empty {display: none;}
.chat-controls-open {min-height: 44px;}
.chat-settings-content {max-height: min(88dvh,700px); overflow-y: auto;}
.chat-dialog-heading {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);}
.chat-dialog-heading h2 {margin: 0;}
.chat-dialog-controls {display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: var(--space-3);}
.chat-dialog-controls select,.chat-dialog-controls .card-select {width: 100%;}
.chat-settings-note {margin: 0;}
.chat-usage-totals {margin: 0;}
.chat-token-summary {display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2);} .chat-session-actions {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);}
.chat-token-ring {position: relative; display: grid; width: 68px; aspect-ratio: 1; flex: none; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--chat-input-share,0%), var(--slate) var(--chat-input-share,0%) 100%);} .chat-token-ring::before {position: absolute; inset: 6px; border-radius: 50%; background: var(--snow); content: "";} .chat-token-ring > span {position: relative; color: var(--slate); font-variant-numeric: tabular-nums;}
.chat-token-legend {display: grid; gap: var(--space-2);} .chat-token-legend > span {display: flex; align-items: center; gap: var(--space-2);} .chat-token-legend strong {margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--font-weight);}
.chat-token-key {width: 8px; height: 8px; flex: none; border-radius: 50%;} .chat-token-key-input {background: var(--green);} .chat-token-key-output {background: var(--slate);}
.chat-usage-chart-panel {display: grid; gap: var(--space-2);} .chat-session-actions {justify-content: flex-end;}
.chat-usage-chart-panel h3 {margin: 0;}
.chat-usage-chart {display: flex; height: 76px; align-items: end; gap: 3px; padding: var(--space-1) 0; border-bottom: 1px solid var(--smoke);}
.chat-usage-chart-bar {height: var(--usage-height,0%); min-height: 1px; flex: 1 1 0; border-radius: 2px 2px 0 0; background: var(--slate);}
.chat-usage-chart-labels {display: flex; justify-content: space-between; color: var(--silver);}
.chat-cloudflare-settings {padding-top: var(--space-3); border-top: 1px solid var(--smoke);}
.chat-cloudflare-settings summary {color: var(--slate); font-weight: var(--font-weight); cursor: pointer;}
.chat-cloudflare-fields {display: grid; gap: var(--space-2); padding-top: var(--space-3);}
.chat-cloudflare-fields p {margin-block: 0;}
.chat-cloudflare-actions {display: flex; flex-wrap: wrap; gap: var(--space-2);}
.chat-cloudflare-actions button {min-height: 40px;}
.chat-cloudflare-fields #chat-cloudflare-status:empty {display: none;}
.containers-page {display: grid; gap: var(--space-4); min-height: 100%; align-content: start;}
.secrets-privacy-note {padding: var(--space-3); border-left: 3px solid var(--green); background: var(--snow); color: var(--slate);}
.secrets-toolbar {display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--space-2);}
.secrets-search-label {grid-column: 1 / -1;}
.secrets-editor,.secrets-card,.secrets-empty-state {padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow);}
.secrets-editor {display: grid; gap: var(--space-3);}
.secrets-editor h2,.secrets-card h2,.secrets-card p {margin: 0;}
.secrets-editor form {display: grid; gap: var(--space-2);}
.secrets-value-row,.secrets-form-actions,.secrets-card-actions {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);}
.secrets-value-row input {min-width: 0; flex: 1 1 16rem;}
.secrets-form-actions {margin-top: var(--space-2);}
.secrets-list {display: grid; gap: var(--space-2);}
.secrets-card {display: grid; gap: var(--space-2); overflow-wrap: anywhere;}
.secrets-card-username,.secrets-card-notes {white-space: pre-wrap;}
.secrets-card-secret {min-width: 5rem; font-family: var(--font-mono);}
.secrets-empty-state {display: grid; align-content: center; justify-items: start; gap: var(--space-2); min-height: 10rem;}
.secrets-empty-state[hidden] {display: none;}
.containers-header,.container-session-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);}
.containers-header h1,.container-session-heading h2 {margin: 0;}
.containers-header p {margin: var(--space-2) 0 0;}
.container-layout {display: grid; min-height: min(68dvh,720px); grid-template-columns: minmax(12rem,18rem) minmax(0,1fr); gap: var(--space-4);}
.container-session-nav,.container-session-detail,.container-empty-state {min-width: 0; padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow);}
.container-session-nav h2 {margin: 0 0 var(--space-3);}
#container-session-list {display: grid; gap: var(--space-2);}
.container-session-item {display: grid; min-width: 0; gap: var(--space-1); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--slate); text-align: left; cursor: pointer;}
.container-session-item[aria-current="true"] {border-color: var(--smoke); background: var(--dark-snow);}
.container-session-item strong {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.container-session-item span {color: var(--silver);}
.container-session-detail {display: grid; grid-template-rows: auto auto minmax(20rem,1fr); gap: var(--space-3);}
.container-session-heading {align-items: center;}
.container-session-heading > div:first-child {min-width: 0;}
.container-session-heading h2 {overflow-wrap: anywhere;}
.container-session-heading p {margin: var(--space-2) 0 0;}
.container-session-actions {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);}
.container-worker-deployment a {color: var(--green); font-weight: var(--font-weight);}
.container-preview-frame {min-height: 20rem; overflow: hidden; border: 1px solid var(--smoke); border-radius: var(--radius-sm); background: white;}
#container-preview {display: block; width: 100%; height: 100%; min-height: 20rem; border: 0; background: white;}
.container-empty-state {display: grid; align-content: center; justify-items: start; gap: var(--space-2);}
.container-empty-state h2,.container-empty-state p {margin: 0;}
.container-cloudflare-settings {padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md);}
.container-cloudflare-settings summary {color: var(--slate); font-weight: var(--font-weight); cursor: pointer;}
.container-cloudflare-settings[open] summary {margin-bottom: var(--space-3);}
.containers-page #container-status:empty {display: none;}
.chat-feedback .chat-budget {margin-left: auto; color: var(--silver);}
.chat-session-usage {color: var(--silver);}
.chat-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.workspace {
  position: relative; display: grid; width: 100%; min-width: 0; min-height: 0; grid-column: 1; grid-row: 2;
  grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); margin: 0 auto; background: #fff;
}
.contract {
  gap: 0;
}
.contract > #contract-heading {
  margin: 0;
}
.contract-product-description {
  display: grid; width: 100%; gap: var(--space-2);
  margin: 0; color: var(--slate);
}

.contract-product-description p {
  margin: 0;
}
.terms {
  max-width: 100%; margin-top: 0; padding-top: 0; border-top: 0;
}
.purchase {
  margin-top: var(--space-8);
}
#purchase:disabled {
  cursor: pointer;
}
.terms h1,.terms p {
  margin: 0;
}
.terms h2,.terms h3 {margin: 0;}
.terms > p:first-child {margin-top: var(--space-3);}
.terms p {
  margin-top: var(--space-2); color: var(--silver);
}
.terms h2 + p,.terms h3 + p {margin-top: var(--space-3);}
.terms ul {
  display: grid; gap: var(--space-2); padding-left: 1.25em; margin: var(--space-3) 0; color: var(--silver);
}
.terms .version {
  color: var(--silver);
}
@media (min-width:1025px) and (max-width:1299px) {
  .page .page-section-divider {
    width: 100vw;
    margin-left: calc(-1 * (var(--workspace-side-offset) + var(--sidebar-width) + var(--page-content-inset)));
  }
}
.pane {
  position: relative; display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0;
  grid-column: 1; grid-row: 1; overflow: hidden;
}
.main {
  position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow-x: auto; overflow-y: auto;
  overscroll-behavior-x: auto; overscroll-behavior-y: contain; margin: 0;
  padding: var(--content-top-inset) 0 var(--content-bottom-inset);
}
#main[data-active-page="chat"] {overflow: hidden; padding-bottom: var(--space-3);}
.page {
  display: grid; width: min(var(--content-width),100%);
  min-width: 0; align-content: start; grid-template-columns: minmax(0,1fr); gap: var(--block-space);
  padding-bottom: 0; margin: 0 auto; text-align: left;
}
.page-intro {
  margin: 0; color: var(--silver);
}
.heading h1 {
  margin: 0;
}
.heading .page-intro {
  max-width: 52ch; padding-bottom: 2px;
}
.page > :first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}
.page > :first-child > :first-child {padding-block-start: 0;}
.reports-monthly {display: grid; gap: var(--space-4);}
.reports-section h2,.reports-monthly h2,.reports-previous h3,.reports-latest h3 {margin: 0;}
.reports-section {display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--smoke);}
.reports-monthly {padding-top: var(--space-4); border-top: 1px solid var(--smoke);}
.reports-latest {display: grid; gap: var(--space-3); padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow);}
.reports-latest[hidden] {display: none;}
.reports-latest-label,.reports-latest-summary {margin: 0; color: var(--silver);}
.reports-latest-label {font-weight: var(--font-weight);}
.reports-previous {display: grid; gap: var(--space-2);}
.reports-list {display: grid; grid-template-columns: minmax(0,1fr); gap: 0;}
.reports-archive-item {display: block; padding-block: var(--space-3); border-bottom: var(--divider-line); color: var(--slate);}
.report-shell {
  box-sizing: border-box; width: min(100%,777px); min-height: 100dvh; overflow-y: auto; margin: 0 auto;
  padding: var(--space-8) var(--page-content-inset);
}
.report-back {display: inline-block; margin-bottom: var(--space-6); color: var(--slate);}
.workers-grid {display: grid; grid-template-columns: minmax(0,1fr); gap: 0;}
.workers-section {display: grid; min-width: 0; align-content: start; gap: var(--space-3); padding: var(--space-4) 0; border: 0; border-top: var(--divider-line); border-radius: 0;}
.workers-section h2,.workers-section h3,.workers-run h4 {margin: 0;}
.workers-service-name {min-width: 0; overflow-wrap: anywhere;}
.workers-service-status {width: fit-content; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--smoke); color: var(--silver); white-space: nowrap;}
.workers-service-status[data-status="operational"] {background: var(--green); color: var(--slate);}
.provider-status-list {display: grid; min-width: 0; gap: 0;}
.provider-status-row {display: grid; grid-template-columns: minmax(0,1fr) max-content; align-items: start; gap: var(--space-2) var(--space-3); min-width: 0; padding: var(--space-4) 0; border-bottom: var(--divider-line);}
.provider-status-row h3,.provider-status-label,.provider-status-description {margin: 0;}
.provider-status-label {width: fit-content; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--smoke); color: var(--slate);}
.provider-status-label[data-status="operational"],.provider-component-status[data-status="operational"] {background: var(--green); color: var(--black);}
.provider-status-row a {grid-column: 1 / -1; width: fit-content;}
.provider-status-details {display: grid; grid-column: 1 / -1; gap: var(--space-2); min-width: 0;}
.provider-component-details ul {display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding-left: var(--space-5);}
.provider-component-status {display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--smoke); color: var(--slate);}
.workers-cron-schedule {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0;} .workers-cron-schedule code {color: var(--slate);}
.workers-job-list,.workers-run-list {display: grid; min-width: 0; grid-template-columns: minmax(0,1fr); gap: 0;}
.workers-job,.workers-run {min-width: 0; padding: var(--space-3) 0; border: 0; border-bottom: var(--divider-line); border-radius: 0;}
.workers-run {display: grid; gap: var(--space-1);}.workers-run p {margin: 0;}.workers-run[data-status="failed"] {color: var(--orange);}
.report-panel {
  padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-lg);
  background: var(--snow);
}
.report-panel h1 {margin: var(--space-2) 0 var(--space-4);}
.report-data {margin: var(--space-6) 0; border-top: var(--divider-line);}
.report-row {display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--divider-line);}
.report-row dd {margin: 0; color: var(--black); font-variant-numeric: tabular-nums; text-align: right;}
.report-steps {display: grid; gap: var(--space-3); padding-left: 1.5em; margin: var(--space-4) 0 var(--space-6);}
.page.contract {
  gap: 0;
}
.page.agent {
  height: auto; min-height: 0; gap: 0;
}
.agent-workspace {
  display: grid; width: min(100%,1080px); grid-template-columns: minmax(0,1fr); align-items: stretch;
  gap: var(--space-6); margin-inline: auto;
}
.agent-list-heading h2 {margin: 0; font-weight: var(--font-weight);}
.agent-list-panel {display: grid; min-width: 0; gap: var(--space-3);}
.agent-list-heading {display: grid; gap: var(--space-1);} .agent-list-heading .panel-help,.agent-list-detail .panel-help {margin: 0;}
.agent-list {display: grid; min-width: 0; gap: var(--space-2);}
.agent-list-card {display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--smoke); border-radius: var(--radius-sm); background: var(--snow);}
.agent-list-detail {display: grid; min-width: 0; gap: var(--space-1);}
.agent-list-detail strong {overflow-wrap: anywhere; font-weight: var(--font-weight);} .agent-list-card > .button {flex: none;}
.agent-list-empty {padding: var(--space-3) var(--space-4); margin: 0; border: 1px solid var(--smoke); border-radius: var(--radius-sm); color: var(--silver);}
.agent-part.agent-context {
  gap: var(--space-4); padding-bottom: 0;
}
.agent-part {
  display: grid; min-width: 0; align-content: start; gap: var(--space-2);
}
.context-editor {
  width: 100%; min-height: 184px; height: auto; overflow-y: hidden; padding: var(--space-6); resize: none;
  border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--snow);
}
.context-instruction-field {
  position: relative; padding-bottom: var(--divider-space); margin-bottom: 0;
  border-bottom: var(--divider-line);
}
.agent-context-footer {
  display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.agent-context-footer .footnote {
  margin: 0;
}
.context-instruction-field .context-editor {
  display: block;
}
.context-input {
  display: grid; width: 100%; min-height: 0; align-content: start; grid-template-rows: auto auto;
  overflow: hidden; border: 1px solid var(--smoke); border-radius: var(--radius-md);
  background: var(--dark-snow);
}
.context-input-footer {
  display: flex; min-height: 56px; align-items: center;
}
.context-input-hints {
  display: grid; flex: 1; min-width: 0; align-content: center; gap: var(--space-2);
}
.context-picker.context-upload-bar {
  display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-5) var(--space-6); border: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md); background: transparent; color: var(--slate);
  cursor: pointer;
}
.context-input .context-file-hint,.context-input .context-storage-feedback {
  margin: 0;
}
.context-input .context-storage-feedback {
  display: block;
}
.context-storage-feedback > .context-storage-count {
  display: inline; font-variant-numeric: tabular-nums;
}
.context-storage-feedback > .context-file-limit {
  display: inline; font-variant-numeric: normal;
}
.context-files {
  display: grid; min-height: 0; grid-template-columns: minmax(0,1fr); align-content: start; gap: 0;
  overflow: visible; padding: var(--space-3) 0 0;
}
.context-file {
  display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: var(--space-4); padding-block: var(--list-row-padding); border-bottom: var(--divider-line);
}
.context-file-detail {
  display: flex; min-width: 0; align-items: center; gap: var(--space-2);
}
.context-file-preview {
  display: grid; width: 36px; aspect-ratio: 1; flex: none; place-items: center; overflow: hidden;
  border: 1px solid var(--smoke); border-radius: var(--radius-sm); color: var(--silver);
}
.context-file-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.context-file-metadata {
  display: flex; min-width: 0; align-items: center; gap: var(--space-2);
}
.context-file-name {
  min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.context-file-metadata .panel-help {
  margin: 0;
}
.context-file > .button {
  min-height: 32px; padding: 0 var(--space-2);
}
.page.agent {
  min-height: 0;
}
.agent-workspace {
  width: 100%; gap: var(--space-2); margin: 0;
}
.agent-storage-section {
  order: 3; display: grid; gap: var(--space-1); color: var(--silver);
}
.agent-storage-section h3 {
  margin: 0; color: var(--slate); font-weight: var(--font-weight);
}
.agent-session {
  min-width: 0; margin: 0;
}
.agent-composer {
  position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr);
  gap: var(--space-2); padding: var(--card-padding); margin: 0;
  border: 1px solid var(--smoke); border-radius: var(--radius-sm); background: var(--snow);
  box-shadow: none;
}
.agent-save-guidance {
  margin: 0; color: var(--silver);
}
.agent-composer .context-input {
  order: 0; min-width: 0;
}
.agent-composer .agent-controls {
  order: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(10rem,0.55fr);
  align-items: end; gap: var(--space-3); width: 100%; margin-top: var(--space-2);
}
.agent-composer .agent-workspace-control {
  order: 2; display: grid; min-width: 0; gap: var(--space-1);
}
.agent-workspace-control > label {
  color: var(--silver); font-weight: var(--font-weight);
}
.agent-workspace-control select {
  width: 100%; min-height: 40px;
}
.agent-workspace-control p {margin: 0;}
.agent-composer .agent-auto-reply {order: 3;}
.agent-storage-settings {
  display: grid; grid-template-columns: minmax(15rem,auto) minmax(0,1fr);
  align-items: center; gap: var(--space-2) var(--space-4);
}
.agent-storage-settings[hidden] {
  display: none;
}
.agent-storage-heading {
  display: grid; gap: var(--space-1);
}
.agent-storage-heading > label {
  color: var(--silver); font-weight: var(--font-weight);
}
.agent-storage-summary {
  display: grid; gap: var(--space-1);
}
.agent-storage-controls {
  display: flex; align-items: center; gap: var(--space-2);
}
.agent-storage-controls input {
  width: 10ch; min-height: 40px;
}
.agent-storage-settings p {
  margin: 0;
}
.agent-agent-control,.agent-model-control {
  display: grid; min-width: 0; gap: var(--space-1);
}
.agent-agent-control > label,.agent-model-control > label {
  color: var(--silver); font-weight: var(--font-weight);
}
.agent-agent-picker {
  display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-2);
}
.agent-agent-picker select,.agent-model-control select {
  min-width: 0; min-height: 40px;
}
.agent-composer > .context-files {order: 5;}
.agent-composer > .agent-context-footer {order: 6;}
.agent-composer > .agent-save-guidance {order: 4;}
.agent-context-actions {
  display: flex; align-items: center; gap: var(--space-2);
}
.agent-context-footer .agent-context-actions .button {
  min-width: 132px; min-height: 32px;
}
.agent .context-input {
  gap: var(--space-2); border: 0; border-radius: 0; background: transparent; overflow: visible;
}
.agent .context-editor {
  min-height: 96px; padding: var(--space-3);
  border: 1px solid var(--smoke); border-radius: var(--radius-md); background: #fff;
}
.agent-composer .context-editor {
  min-height: 96px; max-height: 36dvh; overflow-y: auto; resize: vertical;
}
.agent .context-instruction-field {
  padding: 0; border: 0;
}
.agent .context-input-footer {
  min-height: 48px; align-items: center; gap: var(--space-2);
}
.agent .context-picker.context-upload-bar {
  width: auto; min-height: 36px; justify-content: flex-start; gap: var(--space-2);
  padding: 0 var(--space-3); border: 1px solid var(--smoke); border-radius: var(--radius-md);
  background: var(--dark-snow);
}
.agent .context-input-hints {
  flex: none;
}
.agent .context-storage-feedback {
}
.agent .context-file-limit {
  display: none;
}
.agent .context-files {
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0;
}
.agent .context-file {
  width: auto; max-width: min(100%,360px); min-height: 36px; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border: 1px solid var(--smoke); border-radius: var(--radius-md);
}
.agent .context-file-detail {
  max-width: 280px;
}
.agent .context-file-preview {
  width: 28px; border-radius: var(--radius-sm);
}
.agent .context-file-metadata {
  display: grid; gap: 0;
}
.agent .context-file > .button {
  min-width: 28px; min-height: 28px; padding: 0;
}
.agent-context-footer {
  min-height: 0; padding-top: var(--space-2); border-top: var(--divider-line); justify-content: space-between;
}
.agent-context-messages {
  display: grid; min-width: 0; gap: var(--space-1);
}
.agent-context-messages p {
  margin: 0;
}
.agent-settings-status {
  max-width: 52ch; margin: 0;
}
@media (max-width:640px) {
  .agent-composer {
    gap: var(--space-2); padding: var(--card-padding);
  }
  .agent-composer .agent-controls {
    grid-template-columns: minmax(0,1fr); gap: var(--space-2);
  }
  .agent-list-card {align-items: flex-start;}
  .agent-storage-settings {
    grid-template-columns: minmax(0,1fr); gap: var(--space-2);
  }
  .agent-agent-picker {
    grid-template-columns: minmax(0,1fr);
  }
  .agent-agent-picker #agent-create {
    width: 100%;
  }
  .agent-context-footer {
    align-items: stretch; flex-direction: column;
  }
  .agent-context-actions {
    justify-content: flex-end;
  }
}
.context-file {
  display: inline-flex; width: auto; max-width: min(100%,360px); min-height: 44px;
  gap: var(--space-2); padding: var(--space-1) var(--space-2);
  border: 1px solid var(--smoke); border-radius: var(--radius-md); background: #fff;
}
.context-file-detail {
  max-width: 280px;
}
.context-file-preview {
  width: 28px; border-radius: var(--radius-sm);
}
.context-file-metadata {
  display: grid; gap: 0;
}
.context-file > .button {
  min-width: 28px; min-height: 28px; padding: 0;
}
.context-attach-label {
  color: var(--slate);
}
.context-upload-bar {
  justify-content: flex-start !important;
}
.context-input-hints {
  grid-template-columns: auto minmax(0,1fr); align-items: center; gap: var(--space-3);
}
.context-input-hints .context-storage-feedback {
  grid-column: 2;
}
.heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-4);
  margin-bottom: 0;
}
.page > .heading {
  align-items: flex-end; gap: var(--space-3) var(--space-5);
}
.layout-stack {
  display: grid; align-content: start; gap: var(--layout-gap,var(--block-space));
}
.page-navigation[hidden] {display: none;}
.page-navigation {
  display: grid; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1; align-content: start;
  row-gap: 0; overflow-y: auto; padding: var(--space-3) var(--space-2); background: transparent;
}
.page-navigation-group {
  display: grid; align-content: start; gap: 15px;
}
.page-navigation-group[hidden] {display: none;}
.page-navigation-button {
  width: fit-content; max-width: 100%; min-width: 0; justify-self: start; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--silver); line-height: 1.3125;
  text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.page-navigation-button[aria-current="page"] {color: var(--slate);}
@media (min-width:1025px) {
  .header {position: static; z-index: auto; height: 80px;}
  .header-inner {
    position: static;
    width: min(100%,calc(var(--content-width) + 2 * var(--app-frame-content-inset)));
    height: 79px; min-height: 79px; padding-inline: var(--app-frame-content-inset);
  }
  .workspace {
    --workspace-side-offset: var(--app-frame-left);
    --workspace-content-inset: var(--app-frame-content-inset);
    width: 100%; grid-template-columns: calc(var(--app-frame-left) + var(--sidebar-width)) minmax(0,1fr);
  }
  .page-navigation {
    position: absolute; z-index: 2; top: 0; bottom: 0; left: 0;
    width: calc(var(--app-frame-left) + var(--sidebar-width)); max-height: none;
    border-right: 1px solid var(--smoke); padding: 35px 0 0;
  }
  .page-navigation-group {
    gap: 15px;
    padding: 0 60px 29px calc(var(--app-frame-left) + var(--sidebar-content-inset));
    border-bottom: var(--divider-line);
  }
  .page-navigation-group + .page-navigation-group {padding-top: 29px;}
  .page-navigation-group[data-navigation-last-visible="true"] {padding-bottom: 40px; border-bottom: 0;}
  .page-navigation-button {justify-self: start;}
  .main > .page {
    width: min(
      calc(var(--content-width) - var(--sidebar-width) + var(--workspace-content-inset) + var(--page-content-inset)),
      100%
    ); padding-inline: var(--page-content-inset); margin: 0;
  }
  .pane {grid-column: 2; grid-row: 1;}
}
@media (min-width:1300px) {
  .page .page-section-divider {
    width: calc(100vw - var(--workspace-side-offset) - var(--sidebar-width));
    margin-left: calc(-1 * var(--page-content-inset));
  }
}
.page-load-status[hidden] {display: none;}
.page-load-status:not([hidden]) {
  position: fixed; z-index: 20; top: 72px; left: 50%; max-width: calc(100vw - 32px);
  padding: var(--space-2) var(--space-3); transform: translateX(-50%);
  border: 1px solid var(--smoke); border-radius: var(--radius-md);
  background: #fff; color: var(--slate);
}
@media (max-width: 840px) {
  .workers-grid {grid-template-columns: minmax(0,1fr);}
}
.page.chat-page {
  display: flex; width: min(var(--content-width),100%);
  height: 100%; min-height: 0; align-items: stretch;
  flex-direction: column; gap: 0; padding: 0; margin-inline: auto;
}
.layout-cluster {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--layout-gap,var(--space-3));
}
.layout-split {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--layout-gap,var(--space-3));
}
.section-stack {
  display: grid; align-content: start; grid-template-columns: minmax(0,1fr); gap: 0;
}
.section-stack > * {
  margin-block: 0;
}
.section-stack > section {
  padding-block-end: 0;
}
.section-stack > * >:is(.footnote,[role="status"]):empty {
  display: none;
}
.page-section-divider {
  display: block; width: 100%; height: 1px; padding: 0; margin-block: 40px 35px;
  border: 0; background: var(--smoke);
}
:root[data-theme="dark"] .page-section-divider {background: var(--steel);}
.page > .page-section-divider {
  margin-block: calc(40px - var(--block-space)) calc(35px - var(--block-space));
}
.page.contract > .page-section-divider {margin-block: 40px 35px;}
.intro {
  max-width: 680px; margin: 0; color: var(--silver);
}
.assurance-section {
  display: grid; align-content: start; gap: var(--space-3);
}
.assurance-section > h2,.assurance-section > p {
  margin: 0;
}
.assurance-intro {
  color: var(--silver);
}
.assurance-list {
  display: grid; min-width: 0; margin: 0;
}
.assurance-row {
  display: grid; grid-template-columns: minmax(0,0.65fr) minmax(0,1.35fr);
  gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--smoke);
}
.assurance-row:first-child {
  border-top: 1px solid var(--smoke);
}
.assurance-row dt {
  color: var(--slate); font-weight: var(--font-weight);
}
.assurance-row dd {
  display: grid; gap: var(--space-1); min-width: 0; margin: 0; color: var(--silver);
}
.assurance-row dd p {
  margin: 0;
}
.assurance-status {
  color: var(--slate); font-weight: var(--font-weight);
}
.assurance-state {
  color: var(--slate); font-weight: var(--font-weight);
}
.balance-available-value {
  margin: 0;
}
.balance-content {
  display: grid; width: 100%; min-width: 0; grid-template-areas:
    "topup"
    "history-divider"
    "history";
  grid-template-columns: minmax(0,1fr); align-items: start; row-gap: 0; margin-inline: auto;
}
.balance-content > .balance-topup + .page-section-divider {
  grid-area: history-divider;
}
.balance-overview {
  display: grid; width: 100%; min-width: 0; gap: var(--space-2); margin: 0 auto var(--space-5);
}
.balance-overview-heading {
  margin: 0; color: var(--slate); font-weight: var(--font-weight);
}
.balance-overview-grid {
  display: grid; grid-template-columns: minmax(0,1fr);
}
.balance-overview-item {
  display: grid; grid-template-columns: minmax(0,1fr) max-content;
  min-width: 0; min-height: 52px; align-items: center; column-gap: var(--space-3);
  padding: var(--space-3) 0; border: 0; border-bottom: var(--divider-line);
  background: transparent;
}
.balance-overview-item:first-child {
  border-top: var(--divider-line);
}
.wallet-asset-icon {
  display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center;
}
.wallet-asset-icon img,.wallet-asset-icon svg {
  display: block; width: 20px; height: 20px; object-fit: contain;
}
.balance-overview-asset {
  display: flex; min-width: 0; align-items: center; gap: var(--space-3);
}
.wallet-asset-symbol {
  min-width: 0; overflow: hidden; color: var(--silver); text-overflow: ellipsis; white-space: nowrap;
}
.wallet-asset-amount {
  justify-self: end; overflow: hidden; color: var(--black); text-align: right;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis; white-space: nowrap;
}
.wallet-balances-status {
  min-height: 1.2em; margin: 0; color: var(--silver);
}
.balance-card-divider {
  display: block; width: calc(100% + var(--card-padding) + var(--card-padding)); height: 1px; padding: 0;
  margin: var(--space-8) calc(0px - var(--card-padding));
  border: 0; background: var(--smoke);
}
.balance-available-value {
  min-height: 1.1em; color: var(--black); text-align: right;
  font-variant-numeric: tabular-nums;
}
.balance-available-value[data-balance-state="message"] {
  min-height: 0; color: var(--silver); font-variant-numeric: normal; overflow-wrap: anywhere;
}
.balance-economics {
  display: grid; gap: var(--space-3); padding-block: var(--divider-space);
  border-block: var(--divider-line);
}
.balance-economics + .balance-economics {
  border-top: 0; padding-top: 0;
}
.balance-economics h2,.balance-economics p {
  margin: 0;
}
.balance-economics-row {
  display: grid; grid-template-columns: minmax(120px,1fr) 2fr; gap: var(--space-3);
}
.page[data-page="balance"] .panel-help {
  margin-top: 0;
}
.balance-economics-row span:last-child,.balance-economics p {
  color: var(--silver);
}
.balance-panel-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
}
.balance-panel-heading h2,.balance-panel-heading p {
  margin: 0;
}
.balance-topup {
  grid-area: topup; grid-template-columns: minmax(0,1fr); align-content: start; gap: var(--space-3);
  min-width: 0; padding: 0; border: 0;
}
.balance-network-badge {
  max-width: 60%; margin: 0; color: var(--silver); text-align: right;
}
.balance-topup .topup-form {
  display: block; padding: 0;
}
.checkout-entry {
  display: grid; align-content: start; min-width: 0;
}
.topup-card-header {
  display: flex; min-height: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  width: 100%; gap: var(--space-3); margin: 0 0 var(--space-3);
}
.topup-card-header .balance-network-badge {
  max-width: none; text-align: left;
}
.topup-card-header .button {
  min-height: 36px; padding-inline: var(--space-3); border: 1px solid var(--smoke);
  background: transparent;
}
.topup-network-picker {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3); padding: 0; border: 0;
}
.topup-network-picker legend {
  width: 100%; margin-bottom: var(--space-1); color: var(--silver);
}
.topup-network-picker label {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--silver);
}
.topup-network-picker input {
  margin: 0; accent-color: var(--green);
}
.topup-network-picker .panel-help {
  flex-basis: 100%; margin: 0;
}
.topup-card {
  width: 100%; min-width: 0; box-sizing: border-box; margin-inline: auto; padding: var(--card-padding);
  border: 1px solid var(--smoke); border-radius: var(--radius-md);
  background: var(--snow);
}
.topup-payment-content {
  width: 100%;
}
@media (min-width: 1200px) {
  .topup-card {max-width: 980px;}
}
.topup-card-title {
  width: 100%;
}
.topup-card-title h2 {
  margin: 0;
}
.topup-credit-breakdown {
  max-width: 60ch; padding-top: var(--space-6); margin: 0; color: var(--slate); font-variant-numeric: tabular-nums;
}
.topup-presets {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3);
}
.topup-presets .button {
  min-width: 72px; min-height: 40px; padding-inline: var(--space-3);
  border: 1px solid var(--smoke); border-radius: var(--radius-pill);
  background: transparent; color: var(--slate);
}
.topup-payment-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch;
  gap: var(--space-5); margin-top: var(--space-3);
}
.balance-topup .topup-controls {
  display: grid; min-width: 0; margin: 0;
}
.balance-topup .topup-controls .button {
  min-width: 96px;
}
.balance-topup .topup-amount {
  position: relative; display: flex; width: 100%; max-width: none; min-height: 64px;
  align-items: center; gap: var(--space-2); padding-inline: var(--space-4);
  border: 1px solid var(--smoke); border-radius: var(--radius-md);
  background: #fff;
}
.topup-amount-currency {
  color: var(--slate); font-variant-numeric: tabular-nums;
}
.balance-topup .topup-amount input#topup-amount {
  flex: 1; width: 100%; min-width: 0; max-width: none; min-height: calc(64px - 2px);
  overflow: hidden; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  color: var(--black); text-align: left;
}
.balance-topup .topup-amount input::-webkit-credentials-auto-fill-button,
.balance-topup .topup-amount input::-webkit-contacts-auto-fill-button {
  display: none !important; visibility: hidden; pointer-events: none;
}
.balance-payment-details {
  display: grid; gap: var(--space-3); padding: var(--card-padding);
  border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow);
  color: var(--silver);
}
.balance-payment-details h3 {
  margin: 0; color: var(--slate);
}
.balance-payment-details > div {
  display: grid; gap: var(--space-2);
}
.balance-payment-details p {
  margin: 0; color: var(--silver);
}
.balance-authorizations,.balance-authorization-list,.balance-authorization-details {display: grid; min-width: 0;}
.balance-authorizations {gap: var(--space-3); margin-top: var(--space-6);}
.balance-authorizations h2,.balance-authorizations p {margin: 0;}
.balance-authorizations h2 {color: var(--slate);}
.balance-authorization-row {display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--divider-line);}
.balance-authorization-details {gap: var(--space-1); overflow-wrap: anywhere;}
.balance-authorization-details span {color: var(--silver);}
.balance-authorization-row .button {flex: none;}
.balance-contract-addresses {display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; background: transparent;}
.balance-contract-addresses > div {display: grid; grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr); gap: var(--space-2); align-items: center; padding-top: var(--space-2); border-top: var(--divider-line);}
.balance-contract-addresses dt {
  color: var(--slate); font-weight: var(--font-weight);
}
.balance-contract-addresses dd {
  min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right;
}
.balance-contract-addresses a {
  font-family: var(--font-sans);
}
.balance-status {
  min-height: 0; padding: 0; margin: 0; color: var(--silver);
}
.balance-feedback {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.balance-payment-progress {display: grid; gap: var(--space-2);}
.balance-payment-progress[hidden] {
  display: none;
}
.balance-payment-progress ol {
  display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none;
}
.balance-payment-progress li {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center;
  column-gap: var(--space-2); color: var(--silver);
}
.payment-stage-check {
  display: block; width: 1.25rem; height: 1.25rem; background: var(--dark-snow);
  -webkit-mask: var(--checkmark-mask) center / contain no-repeat;
  mask: var(--checkmark-mask) center / contain no-repeat;
}
.balance-payment-progress li[data-state="complete"] .payment-stage-check,
.balance-payment-card-steps li[data-state="complete"] .payment-stage-check {background: var(--green);}
.balance-payment-progress li[data-state="current"] {
  color: var(--slate); font-weight: var(--font-weight);
}
.balance-payment-progress li[data-state="complete"] {
  color: var(--slate); font-weight: var(--font-weight);
}
.balance-payment-progress li[data-state="failed"] {
  color: var(--slate); font-weight: var(--font-weight);
}
.balance-payment-progress li[data-state="current"] .payment-stage-check {border: 2px solid var(--smoke); border-top-color: var(--green); border-radius: 50%; background: transparent; -webkit-mask: none; mask: none;}
.balance-payment-progress p {
  margin: 0; color: var(--silver);
}
.balance-payment-progress a {
  width: fit-content;
}
.balance-payment-confirmations {
  grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.balance-payment-history {
  grid-area: history; display: grid; align-content: start; gap: var(--space-3); min-width: 0;
  padding: 0 var(--space-2); margin-top: 0;
}
.balance-payment-history h2,.balance-payment-history p {
  margin: 0;
}
.balance-payment-history h2 {
  color: var(--slate);
}
.balance-payment-history .balance-panel-heading {
  align-items: center;
}
.balance-payment-history .balance-panel-heading > .panel-help {
  color: var(--silver);
}
.balance-payment-card {display: grid; gap: var(--space-2); padding: var(--card-padding); border: 1px solid var(--smoke); border-radius: var(--radius-md); background: var(--snow);}
.balance-payment-card[hidden] {display: none;}
.balance-payment-preview-label {color: var(--silver);}
.balance-payment-card-label {margin: 0; color: var(--silver);}
.balance-payment-card .balance-economics-row {padding-block: 0;}
.balance-payment-card .balance-card-divider {margin-block: calc(var(--space-8) - var(--space-2));}
.balance-payment-card-steps {display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none;}
.balance-payment-card-steps li {display: grid; grid-template-columns: 1.25rem minmax(0,1fr); align-items: center; column-gap: var(--space-2);}
.balance-payment-card-steps li[data-state="complete"] {color: var(--slate); font-weight: var(--font-weight);}
.balance-payment-history .balance-economics-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--smoke);
}
.balance-payment-history .balance-payment-card .balance-economics-row {
  padding-block: 0; border-bottom: 0;
}
#payment-history-list {display: grid; min-height: 0; gap: var(--space-3); margin-top: 0;}
.balance-payment-info,.balance-payment-totals {
  display: grid; min-width: 0; gap: var(--space-1);
}
.balance-payment-totals {
  justify-items: end; text-align: right; font-variant-numeric: tabular-nums;
}
.balance-payment-history .balance-payment-credit {
  color: var(--silver);
}
.balance-payment-history .balance-payment-info > span {
  color: var(--silver);
}
.balance-payment-history .balance-payment-amount {
  color: var(--slate);
}
.balance-payment-history .panel-help:empty {
  display: none;
}
.usage-page {
  gap: 0;
}
.usage-page .usage-content {
  width: 100%; min-width: 0; margin-top: 0;
}
.usage-page .balance-economics,.usage-page .usage-calculator {
  width: min(100%,var(--content-width)); max-width: var(--content-width);
  min-width: 0; justify-self: start; grid-template-columns: minmax(0,1fr);
  gap: var(--space-1); padding: 0; margin: 0; border: 0;
  display: grid;
}
.usage-page .usage-calculator {row-gap: 0;}
.usage-rate-list {
  display: grid; width: 100%; max-width: var(--content-width); min-width: 0;
  grid-template-columns: minmax(0,1fr); gap: 0;
}
.usage-rate-list .balance-economics-row {
  display: grid; width: 100%; min-width: 0;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  align-items: baseline; gap: var(--space-4);
  margin: 0; padding-block: 15px;
  border-bottom: var(--divider-line); background: transparent;
}
.usage-rate-list .balance-economics-row > span {min-width: 0; overflow-wrap: anywhere;}
.usage-rate-list .balance-economics-row[data-rate-group-start="true"] {padding-top: 0;}
.usage-rate-list .balance-economics-row[data-rate-group-end="true"] {
  padding-bottom: 0; border-bottom: 0;
}
.usage-rate-list .usage-model-divider {margin-block: 40px 35px;}
.usage-rate-notes {
  display: grid; width: 100%; max-width: var(--content-width); min-width: 0; gap: var(--space-3);
}
.usage-price-divider {margin-block: 40px 35px;}
.usage-rate-list .balance-economics-row span:first-child {color: var(--slate);}
.usage-rate-list .balance-economics-row span:last-child {color: var(--silver); font-variant-numeric: tabular-nums; text-align: right;}
.usage-rate-notes p {margin: 0; color: var(--silver);}
.usage-estimate-details {
  display: grid; max-width: 1200px; gap: var(--space-3);
  padding-top: 0;
}
.usage-estimate-details h3 {margin: 0;}
.usage-rate-notes ul {display: grid; gap: var(--space-2); margin: 0; padding-left: 1.25rem; color: var(--silver);}
.usage-rate-status {min-height: 1.4em;}
.usage-calculator-grid {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 0;
}
.usage-calculator-grid label,.usage-calculator-grid .usage-model-field {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(12ch, min(30%,18rem));
  align-items: center; gap: var(--space-3); padding-block: var(--space-2);
  border-bottom: 1px solid var(--smoke); color: var(--slate);
}
.usage-calculator-grid .usage-model-field > span {min-width: 0;}
.usage-calculator-grid label:first-child {padding-block: var(--space-2);}
.usage-calculator-grid label:first-child > span {position: relative; top: -1px;}
.usage-calculator-grid .usage-number-input,.usage-calculator-grid select {
  width: 100%;
}
.usage-calculator-grid .usage-number-input {
  min-width: 0; min-height: var(--field-height); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--smoke); border-radius: var(--radius-sm);
  background: var(--snow); color: var(--slate); cursor: text; user-select: text;
  white-space: nowrap; overflow: hidden;
}
.transactions-filter-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(10ch,18ch); align-items: center;
  gap: var(--space-2) var(--space-4);
}
.usage-example-presets {
  display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6);
}
.usage-calculator .section-heading .panel-help {margin-top: var(--space-3);}
.usage-example-presets .button {
  border: 0; border-radius: var(--radius-pill); background: var(--snow);
}
.usage-example-presets .button[aria-pressed="true"] {
  background: var(--extra-dark-snow);
}
.usage-presets-divider {
  display: block; width: 100%; height: 1px; padding: 0; margin: 25px 0 0;
  border: 0; background: var(--smoke);
}
.usage-estimate-divider {
  display: block; width: 100%; height: 1px; padding: 0;
  margin-block: 0 15px;
  border: 0; background: var(--smoke);
}
.usage-calculator > .usage-calculator-summary-divider {
  margin-block: 40px 35px;
}
.usage-calculator > #usage-calculator-error:empty {display: none;}
.usage-estimate-breakdown {
  display: grid; gap: 0; margin: 0;
}
.usage-estimate-breakdown > div {
  display: grid; grid-template-columns: minmax(0,1fr) max-content;
  align-items: baseline; gap: var(--space-4); padding-block: 15px;
  border-bottom: 1px solid var(--smoke);
}
.usage-estimate-breakdown > div:last-child {border-bottom: 0;}
.usage-estimate-breakdown dt {min-width: 0;}
.usage-estimate-breakdown dd {
  margin: 0; color: var(--silver); text-align: right; font-variant-numeric: tabular-nums;
}
.usage-estimate-totals {
  display: grid; width: 100%; gap: var(--space-2);
}
.usage-estimate-totals > div {
  display: flex; justify-content: space-between; gap: var(--space-3);
}
.usage-estimate-value {display: inline-flex; align-items: baseline; gap: var(--space-2);} .usage-estimate-opening-fee {color: var(--silver); font-weight: var(--font-weight);}
.usage-calculator > .footnote:last-child {margin-top: 0;}
.transactions-page {
  gap: var(--space-3);
}
.transactions-page .transactions-controls {
  display: grid; gap: var(--space-4);
}
.transactions-filter-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3) var(--space-4);
}
.transactions-filter-grid label {
  display: grid; gap: var(--space-1); color: var(--silver);
}
.transaction-list-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
}
#transaction-auto-approval-status:empty {
  display: none;
}
#transaction-status:empty {
  display: none;
}
.transactions-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.list-load-sentinel {
  min-height: 1px;
}
.access-page {
  gap: var(--space-5);
}
.access-page > .heading {
  align-items: flex-start; flex-direction: column; gap: var(--space-1);
}
.cli-guide-page > .heading {
  align-items: flex-start; flex-direction: column; gap: var(--space-1);
}
.access-content {
  display: grid; gap: var(--space-8); width: 100%;
}
.access-content.section-stack {
  gap: 0;
}
.access-section {
  display: grid; gap: var(--space-5); width: 100%; min-width: 0;
}
.access-section > [role="status"]:empty:not(#access-signin-hint) {
  display: none;
}
.access-section.section-stack {
  gap: 0;
}
.access-grants {
  display: grid; gap: var(--space-2);
}
.access-grants h3,.access-section p {
  margin: 0;
}
.access-grants .panel-help {
  max-width: 68ch;
}
.access-create-form {
  display: grid; gap: var(--space-4); max-width: 56rem;
}
.access-create-form > .button {
  justify-self: start; min-height: 40px;
}
.access-create-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.access-create-actions > .button {
  min-height: 40px;
}
.access-page .api-token-list {
  width: 100%; margin-top: var(--space-3);
}
.access-page .api-token-list:empty {
  display: none;
}
.api-permission-list {
  display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-2) var(--space-4); border: 0; margin: 0; padding: 0;
}
.api-permission-list legend {
  grid-column: 1 / -1; margin-bottom: var(--space-2);
}
.api-permission-option {
  display: grid; width: 100%; max-width: none; grid-template-columns: auto minmax(0,1fr);
  align-items: start; gap: var(--space-3); min-height: 40px; cursor: pointer;
}
.api-permission-option span {
  min-width: 0;
}
.api-permission-option > span {
  display: grid; gap: var(--space-1);
}
.api-permission-details {
  color: var(--silver);
}
.api-permission-option input:disabled {
  opacity: 1; cursor: default;
}
.access-generated {
  display: grid; width: 100%; max-width: 56rem; gap: var(--space-2);
}
.access-generated .api-token-created {
  justify-items: stretch; margin-top: 0; padding-block: var(--space-4);
  border-top: var(--divider-line);
}
.access-generated h3 {
  margin: 0;
}
.access-generated .button {
  justify-self: start;
}
.access-generated input {
  width: 100%; max-width: none;
}
.passkeys-cli-section {
  gap: var(--space-4);
}
.passkeys-cli-section > h2,
.passkeys-cli-section > h3,
.passkeys-cli-section > p {
  margin: 0;
}
.passkeys-cli-command {
  max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap;
}
.code-block {
  display: block; min-width: 0; box-sizing: border-box; padding: var(--card-padding);
  border: var(--divider-line); border-radius: var(--radius-md);
  background: var(--dark-snow); color: var(--slate);
}
.api-actions-table-wrap {
  width: 100%; max-width: 100%; min-width: 0;
}
.api-actions-table {
  width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; text-align: left;
}
.api-actions-table th:nth-child(1) { width: 22%; }
.api-actions-table th:nth-child(2) { width: 28%; }
.api-actions-table th:nth-child(3) { width: 20%; }
.api-actions-table th:nth-child(4) { width: 30%; }
.api-actions-table th,
.api-actions-table td {
  overflow-wrap: anywhere;
}
.api-actions-table th,.api-actions-table td {
  padding: var(--space-3); border-bottom: var(--divider-line); vertical-align: top;
}
.api-actions-table th {
  font-weight: var(--font-weight);
}
.api-actions-table td code {
  white-space: normal; overflow-wrap: anywhere;
}
.api-actions-table td::before {
  display: none;
}
@media (max-width:640px) {
  .api-actions-table,
  .api-actions-table tbody {
    display: block;
  }
  .api-actions-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .api-actions-table tbody {
    display: grid; gap: var(--space-3);
  }
  .api-actions-table tr {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--space-3); padding: var(--space-3) 0;
    border-bottom: var(--divider-line);
  }
  .api-actions-table th,
  .api-actions-table td {
    min-width: 0; padding: 0; border: 0;
  }
  .api-actions-table th[scope="row"] {
    grid-column: 1 / -1;
  }
  .api-actions-table td::before {
    display: block; margin-bottom: var(--space-1);
    color: var(--silver); font-weight: var(--font-weight);
    content: attr(data-label);
  }
}
.api-token-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; min-width: 0; padding: var(--card-padding); border: 1px solid var(--smoke);
  border-radius: var(--radius-md); background: var(--snow);
}
.api-token-row > .button {
  width: auto; justify-self: end; white-space: nowrap;
}
.api-token-details {
  display: grid; min-width: 0; gap: var(--space-1);
}
.api-token-heading {
  display: flex; align-items: baseline; gap: var(--space-2);
}
.api-token-metadata {
  margin: 0; overflow-wrap: anywhere; color: var(--silver);
}
.api-token-list {
  display: grid; margin-top: var(--space-5);
}
.api-token-list {
  gap: var(--space-3); max-width: none;
}
.api-token-row p {
  margin-block: var(--space-1) 0; overflow-wrap: anywhere;
}
.api-token-connection {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-2);
}
.api-token-created {
  display: grid; justify-items: start; gap: var(--space-3); margin-top: var(--space-4);
}
.notification-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.status-section > .notification-actions {
  margin-inline: 0;
  padding-inline: 0;
}
.transactions-page .usage-activity {
  gap: var(--space-3); padding-block: 0; border: 0;
}
.status-group {
  padding-top: 0;
}
.status-group > h2 {
  margin: 0 0 var(--space-2);
}
.status-group > .panel-help {
  margin: var(--space-2) 0;
}
.status-section {
  padding-block: var(--space-4);
}
.status-content > .status-section {
  padding-block: 0;
}
.status-mailbox-key,
.status-mailbox-key-action {
  display: grid; min-width: 0; grid-template-columns: minmax(0,1fr);
}
.status-mailbox-key > h2,
.status-mailbox-key-action > h3 {
  color: var(--slate);
}
.status-section.status-mailbox-key > .panel-help,
.status-mailbox-key-action > .panel-help {
  margin: 0 0 var(--space-3);
  color: var(--silver);
}
.status-mailbox-key-action > .button {
  justify-self: start;
}

.status-group > section + section {
  border-top: var(--divider-line);
}
.status-section :is(h2,h3) {
  margin: 0 0 var(--space-3);
}
.system-value {
  margin: 0; color: var(--slate);
}
.system-detail-list,
.system-compatibility-list {
  display: grid;
}
.system-detail-row,
.system-compatibility-row {
  display: grid; width: 100%; min-width: 0;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  align-items: baseline; gap: var(--space-4);
  margin: 0; padding-block: 15px;
  border-bottom: var(--divider-line); background: transparent;
}
.system-detail-row > *,
.system-compatibility-row > * {
  min-width: 0; overflow-wrap: anywhere;
}
.system-detail-row:first-child,
.system-compatibility-row[data-rate-group-start="true"] {
  padding-top: 0;
}
.system-detail-row:last-child,
.system-compatibility-row[data-rate-group-end="true"] {
  padding-bottom: 0; border-bottom: 0;
}
.system-compatibility-name {
  min-width: 0; overflow-wrap: anywhere;
}
.system-compatibility-state {
  min-width: 0;
  color: var(--silver); font-variant-numeric: tabular-nums; text-align: right;
  overflow-wrap: anywhere;
}
.system-detail-row > :last-child {
  color: var(--silver); text-align: right;
}
.system-compatibility-row[data-state="ready"] .system-compatibility-state {
  color: var(--slate);
}
.status-section > .panel-help {
  margin: var(--space-3) 0;
}
.status-section > .button,
.status-section > .notification-actions,
.status-mailbox-key-action > .button {
  margin-top: 0;
}
.status-section > .system-compatibility-list + .notification-actions {
  margin-top: var(--space-4);
}
.system-theme-options {
  margin-top: 0;
}
:root[data-theme="dark"] .system-theme-options .button,
:root[data-theme="dark"] .usage-example-presets .button {
  border: 0; background: var(--steel); color: var(--slate);
}
:root[data-theme="dark"] :is(button, .button):not(.is-signed-in) {border-color: var(--dark-smoke);}
:root[data-theme="dark"] .system-theme-options .button[aria-pressed="true"],
:root[data-theme="dark"] .usage-example-presets .button[aria-pressed="true"] {
  background: var(--extra-dark-snow);
}
.notification-address-list {
  display: grid; margin-top: var(--space-3); border-top: var(--divider-line);
}
.notification-address-row {
  display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: var(--space-3);
  border-bottom: var(--divider-line);
}
.notification-address-example {
  color: var(--silver);
}
.notification-address-example .notification-address-toggle {
  color: var(--silver);
}
.notification-address-name {
  min-width: 0; overflow-wrap: anywhere;
}
.notification-address-row .button {
  flex: none; margin-top: 0; padding-inline: var(--space-3);
}
.notification-address-placeholder {
  box-sizing: border-box; flex: none; min-width: 46px; padding-inline: var(--space-3);
  text-align: center;
}
.notification-address-status {
  flex-basis: 100%; margin: 0;
}
.status-summary {
  margin: 0;
}
.status-summary[data-status="degraded"],.status-component-state[data-status="degraded"],
.status-summary[data-status="unknown"] {
  color: var(--silver);
}
.status-component-list {
  display: grid; grid-template-columns: minmax(0,1fr);
}
.status-component {
  display: flex; min-width: 0; min-height: 56px; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3); border-bottom: var(--divider-line);
}
.status-component-name {
  min-width: 0; overflow-wrap: anywhere;
}
.status-component-state {
  color: var(--silver); white-space: nowrap;
}
.finance-month {
  padding-top: var(--space-3);
}
.finance-month h4 {
  margin: 0 0 var(--space-1);
}
.finance-month .status-component:last-child {
  border-bottom: 0;
}
.status-note {
  padding-top: var(--space-4);
}
.status-note h3 {
  margin: 0 0 var(--space-2);
}
.status-note .panel-help {
  margin: 0;
}
.status-history {
  padding-top: var(--space-4);
}
.status-history h3 {
  margin: 0 0 var(--space-3);
}
.status-history-grid {
  display: grid; grid-template-columns: repeat(30,minmax(0,1fr)); gap: 4px; padding: 0; margin: 0;
  list-style: none;
}
.status-history-day {
  aspect-ratio: 1; border-radius: 2px; background: var(--smoke);
}
.status-history-day[data-status="operational"] {
  background: var(--green);
}
.status-history-day[data-status="degraded"] {
  background: var(--steel);
}
.status-history .panel-help {
  margin: var(--space-3) 0 0;
}
.usage-activity-list {
  width: 100%; min-width: 0; min-height: 0;
}
.usage-transaction-list {
  display: grid; width: 100%; gap: var(--space-3); padding: 0; margin: 0; list-style: none;
}
.usage-transaction {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: var(--space-3); padding: var(--card-padding); border: 1px solid var(--smoke);
  border-radius: var(--radius-md); background: var(--snow);
}
.usage-transaction-details {
  display: grid; grid-template-columns: max-content auto; align-items: baseline; gap: 0 var(--space-3);
  min-width: 0;
}
.usage-transaction-details time {
  color: var(--silver);
}
.usage-transaction-amount {
  flex: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.example-label {
  color: var(--silver); font-weight: var(--font-weight);
}
.example-surface button:disabled {
  cursor: pointer;
}
.example-surface .example-control {
  opacity: 1; cursor: pointer;
}
.usage-transaction-example .usage-transaction-details {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.usage-transaction-example .panel-help {margin: 0;} .usage-transaction-reference {overflow-wrap: anywhere; color: var(--silver);}
.mail-empty {
  justify-self: stretch; padding-block: var(--space-4); margin: 0;
  color: var(--silver); text-align: left;
}
.inbox-page-header {
  display: grid; min-width: 0; align-items: start; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: var(--divider-line);
}
.inbox-page-header h1 {
  margin: 0; color: var(--slate);
}
.inbox-header-controls {
  display: grid; min-width: 0; grid-template-areas: "search search" "compose refresh" "settings settings";
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2);
}
.inbox-header-controls #inbox-search {grid-area: search;}
.inbox-header-controls #compose-email {grid-area: compose;}
.inbox-header-controls #inbox-refresh {grid-area: refresh;}
.inbox-header-controls #inbox-settings-open {grid-area: settings;}
.inbox-header-controls .button {width: 100%;}
.compose-email-dialog {
  width: min(560px,calc(100vw - 40px)); max-width: 100%;
  max-height: min(90dvh,760px); padding: var(--card-padding); border: 1px solid var(--smoke);
  border-radius: var(--radius-lg); background: #fff; color: var(--slate);
  box-shadow: 0 16px 48px rgb(31 45 61 / 18%);
}
.compose-email-dialog::backdrop {
  background: rgb(31 45 61 / 42%);
}
.compose-email-form {
  display: grid; gap: var(--space-3);
}
.compose-email-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.compose-email-heading h2 {
  margin: 0;
}
.compose-email-form label {
  color: var(--slate);
}
.compose-email-form textarea {
  min-height: 180px; resize: vertical;
}
.compose-email-form .form-actions {
  display: flex; justify-content: flex-end; gap: var(--space-3);
}
.compose-email-form .footnote {
  min-height: 1.4em; margin: 0;
}
.inbox-message-list {
  display: grid; width: 100%; min-width: 0;
}
.mail-list-row {
  display: grid; width: 100%; min-width: 0; grid-template-columns: 10px minmax(0,1fr);
  align-items: center; gap: var(--space-3); padding: var(--space-4) 0;
  border: 0; border-bottom: var(--divider-line); border-radius: 0;
  background: transparent; color: var(--slate); text-align: left; cursor: pointer;
}
.mail-list-example {
  cursor: pointer;
}
.inbox-example-open-message {
  display: grid; max-width: 78ch; gap: var(--space-3); padding-block: var(--space-4);
  border-top: var(--divider-line);
}
.inbox-example-open-message[hidden] {display: none;}
.inbox-example-open-message p {margin: 0;}
.inbox-example-message-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2);
}
.inbox-example-message-heading {display: grid; gap: var(--space-1);}
.inbox-example-message-heading h3 {margin: 0;}
.inbox-example-message-heading p {color: var(--silver);}
.mail-list-unread {
  width: 7px; height: 7px; border-radius: 50%; background: transparent;
}
.mail-list-row.is-unread .mail-list-unread {
  background: var(--slate);
}
.mail-list-content {
  display: grid; min-width: 0; gap: 2px;
}
.mail-list-heading {
  display: flex; min-width: 0; align-items: center; justify-content: space-between;
  gap: var(--space-2); color: var(--silver);
}
.mail-list-sender,.mail-list-date,.mail-list-subject,.mail-list-preview {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-list-sender {
  color: var(--slate);
}
.mail-list-date {
  flex: none; font-variant-numeric: tabular-nums;
}
.mail-list-subject {
  font-weight: var(--font-weight);
}
.mail-list-row.is-unread .mail-list-subject,
.mail-list-row.is-unread .mail-list-sender {
  font-weight: var(--font-weight);
}
.mail-list-preview {
  color: var(--silver);
}
.mail-list-saved {
  flex: none; color: var(--silver);
}
.inbox-load-older {
  justify-self: start;
}
.inbox-export {
  display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  min-height: 0; padding-block: var(--space-3);
}
.inbox-export .button {
  min-height: 36px;
}
.inbox-search {
  display: flex; width: min(100%,260px); min-height: 40px; align-items: center; padding-block: var(--space-2);
  text-align: left;
}

.inbox-search::-webkit-search-decoration,.inbox-search::-webkit-search-cancel-button,.inbox-search::-webkit-search-results-button,.inbox-search::-webkit-search-results-decoration {
  display: none; -webkit-appearance: none;
}
.inbox-content {
  display: grid; min-width: 0; align-content: start; gap: var(--space-3);
}
.inbox-settings-view {
  min-width: 0;
}
.inbox-settings-header {
  display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: var(--divider-line);
}
.inbox-settings-header h1 {margin: 0;}
.inbox-settings-section {
  display: grid; min-width: 0; align-content: start; gap: var(--space-3);
  padding-block: var(--space-4); border-bottom: var(--divider-line);
}
.inbox-settings-section h2,
.inbox-settings-section p {margin: 0;}
.inbox-settings-section > .button {justify-self: start;}
.inbox-protection {
  display: grid; min-width: 0; gap: var(--space-3); padding-block: var(--space-4);
  border-bottom: var(--divider-line);
}
.inbox-protection h2,.inbox-protection p {
  margin: 0;
}
.mail-rule-form {
  display: grid; min-width: 0; grid-template-columns: minmax(160px,1fr) minmax(140px,1fr) minmax(180px,1.4fr) auto;
  align-items: end; gap: var(--space-3);
}
.mail-rule-form select,.mail-rule-form input {
  width: 100%; min-width: 0; min-height: var(--field-height);
}
.mail-rule-form > :nth-child(1) {grid-column: 1; grid-row: 1;}
.mail-rule-form > :nth-child(2) {grid-column: 1; grid-row: 2;}
.mail-rule-form > :nth-child(3) {grid-column: 2; grid-row: 1;}
.mail-rule-form > :nth-child(4) {grid-column: 2; grid-row: 2;}
.mail-rule-form > :nth-child(5) {grid-column: 3; grid-row: 1;}
.mail-rule-form > :nth-child(6) {grid-column: 3; grid-row: 2;}
.mail-rule-form > :nth-child(7) {grid-column: 4; grid-row: 2;}
.mail-rule-list {
  display: grid; gap: var(--space-2); padding: 0; margin: 0; list-style: none;
}
.mail-rule-list li {
  display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-block: var(--space-2); border-bottom: var(--divider-line);
}
.mail-rule-list li span {
  min-width: 0; overflow-wrap: anywhere;
}
.inbox-messages {
  display: grid; min-width: 0; align-content: start;
}
.inbox-message-empty {
  display: grid; min-height: 240px; place-items: center; padding: var(--space-5);
  margin: 0; border: 1px solid var(--smoke); border-radius: var(--radius-md);
  color: var(--silver); text-align: center;
}
.message-detail-content {
  display: grid; min-width: 0; gap: var(--space-4);
}
#main[data-active-page="inbox"],
#main[data-active-page="message"] {
  display: grid; grid-template-columns: minmax(280px,38%) minmax(0,1fr);
  align-content: start; align-items: start; gap: var(--space-5);
}
#main[data-active-page="inbox"] .page[data-page="inbox"],
#main[data-active-page="message"] .page[data-page="inbox"] {
  grid-column: 1; width: 100%; max-width: none; margin: 0;
}
#main[data-active-page="inbox"] .page[data-page="message"],
#main[data-active-page="message"] .page[data-page="message"] {
  grid-column: 2; width: 100%; max-width: none; margin: 0;
}
#main[data-inbox-view="settings"] {grid-template-columns: minmax(0,1fr);}
#main[data-inbox-view="settings"] .page[data-page="inbox"] {grid-column: 1;}
#main[data-inbox-view="settings"] .page[data-page="message"] {display: none;}
.unread-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--slate);
}
.empty-state {
  display: grid; min-height: 96px; place-items: center; padding: var(--space-3); margin: 0;
  border: 1px solid var(--smoke); border-radius: var(--radius-sm); color: var(--silver); text-align: center;
}
.page[data-page="addresses"] .empty-state {
  display: block; min-height: 1.4em; padding: 0; border: 0; border-radius: 0; text-align: left;
}
.footnote {
  margin: 0; color: var(--silver);
}
.settings-form {
  display: flex; width: 100%; flex-direction: column; gap: var(--block-space);
}
.setting-block {
  display: grid; gap: var(--label-gap); width: 100%; min-width: 0; margin: 0;
  padding: 0 0 var(--divider-space); border: 0; border-bottom: var(--divider-line);
}
.setting-block legend,.list h2 {
  padding: 0; color: var(--slate); text-align: left;
}
.setting-help {
  margin: 0; color: var(--silver);
}
.address-input {
  width: 100%; min-height: var(--field-height);
}
.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: 0;
}
label:not(.sr-only):not(.context-picker):not(.search-field) {
  display: grid; justify-items: start; gap: var(--label-gap);
}
.address-input {
  display: flex; width: min(100%,460px); min-height: var(--field-height); min-width: 0; align-items: center;
  justify-content: flex-start; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--smoke); border-radius: var(--radius-sm); background: var(--snow);
}
.address-input input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.address-input textarea,.address-input [contenteditable] {
  display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; min-height: 0; margin: 0;
  padding: 0 var(--space-4); border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--slate); overflow: hidden;
  resize: none; text-align: left;
}
.address-input span {
  display: flex; min-height: 0; flex: none; align-self: stretch; align-items: center; padding-inline: var(--space-4);
  border-left: 1px solid var(--smoke); color: var(--silver); white-space: nowrap;
}
.address-input textarea[aria-invalid="true"] {
  color: var(--silver);
}
.list {
  width: 100%; margin-top: 0;
}
.list h2 {
  margin: 0 0 var(--space-3); text-align: left;
}
.address-page {
  gap: var(--space-6);
}
.address-section {
  display: grid; gap: var(--space-3); padding: 0; border: 0; background: transparent;
}
.address-section + .address-section {
  padding-top: var(--space-6); border-top: var(--divider-line);
}
.section-heading h2 {
  margin: 0;
}
.section-heading .panel-help {
  margin-top: var(--space-1);
}
.address-create-form {
  display: flex; min-width: 0; align-items: center; gap: var(--space-3);
}
.address-create-form > input,.address-create-form .address-input {
  width: min(100%,460px); min-width: 0; min-height: var(--field-height);
}
.address-create-form .address-input {
  width: min(100%,460px); margin-inline-start: 0;
}
.address-create-form > input {
  padding-inline: var(--space-3); border: 1px solid var(--smoke); border-radius: var(--radius-sm);
  background: var(--snow); color: var(--slate);
}
.address-create-form .button {
  flex: none;
}
.addresses-list {
  display: grid; gap: var(--space-3); padding: 0;
}
.address-card {
  display: grid; grid-template-columns: minmax(0,1fr) auto; min-width: 0; align-items: start;
  gap: var(--space-3); padding: var(--card-padding); border: 1px solid var(--smoke);
  border-radius: var(--radius-md); background: var(--snow);
}
.address-card-identity {
  display: grid; min-width: 0; gap: var(--space-1); text-align: left;
  grid-column: 1;
}
.address-card .address-storage-details {
  grid-column: 1 / -1; margin-top: calc(0px - var(--space-2)); margin-bottom: 0;
}
.address-storage-control {
  display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: end; gap: var(--space-2);
}
.address-storage-control label {
  display: grid; gap: var(--space-1); color: var(--slate);
}
.address-storage-control input {
  width: 8ch;
}
.address-storage-status {
  flex-basis: 100%; margin: 0;
}
.address-settings-help { margin: var(--space-2) 0 0; }
.address-card-actions {
  display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-start; gap: var(--space-2);
}
.address-burn-action {
  justify-content: flex-start; padding-inline: 0; border: 0; border-radius: 0; background: transparent;
}
.address-section .empty-state {
  min-height: 1.4em;
}
.address-section > #address-status:empty,.address-section > #custom-domain-status:empty {
  display: none;
}
.custom-domain-record {
  display: grid; grid-template-columns: 64px minmax(0,1fr); gap: var(--space-2) var(--space-3); margin: 0;
  text-align: left;
}
.custom-domain-record dt {
  color: var(--silver);
}
.custom-domain-record dd {
  min-width: 0; margin: 0;
}
.custom-domain-record code {
  overflow-wrap: anywhere;
}
.custom-domain-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.custom-domain-list {
  display: grid; gap: 0;
}
.custom-domain-list:empty,
.custom-domain-list[hidden] {
  display: none;
}
.custom-domain-row {
  display: grid; gap: var(--space-3); padding-block: var(--divider-space); border-top: var(--divider-line);
}
.custom-domain-row-heading,.custom-domain-proof-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.custom-domain-state {
  color: var(--silver);
}
.custom-domain-state[data-status="verified"] {
  color: var(--slate);
}
.custom-domain-proof {
  display: grid; gap: var(--space-2);
}
.custom-domain-proof code {
  display: block; padding: var(--space-3); border: 1px solid var(--smoke); border-radius: var(--radius-sm);
  overflow-wrap: anywhere; user-select: all;
}
.relay-preview {
  display: grid; min-width: 0; gap: var(--space-4);
}
.relay-preview h3,.relay-preview p {
  margin: 0;
}
.relay-preview-steps {
  display: grid; gap: var(--space-2); padding-left: var(--space-6); margin: 0;
}
.relay-preview-steps li {
  padding-left: var(--space-1);
}
.relay-source-details {
  display: grid; gap: var(--space-3); min-width: 0;
}
.relay-source-details h3 {
  margin: 0;
}
.relay-preview-code {
  max-width: 100%; margin: 0; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
}
.relay-preview-code code {
  font: inherit;
}
.alias-address {
  min-width: 0; overflow-wrap: anywhere; color: var(--slate); text-align: left;
}
.usage {
  width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); --layout-gap: var(--space-8);
  padding-block: var(--space-4); border-block: var(--divider-line);
}
.usage-panel {
  display: grid; min-width: 0; align-content: start; gap: var(--space-1); padding: 0; text-align: left;
}
.value {
  margin: 0; color: var(--slate); font-variant-numeric: tabular-nums;
}
.panel-help {
  margin: var(--space-2) 0 0; color: var(--silver); text-overflow: ellipsis; white-space: normal;
}
.activity {
  margin-top: 0;
}
.message-meta {
  display: grid; gap: var(--space-1); margin: var(--space-4) 0; color: var(--silver);
}
.message-encryption-status {
  color: var(--slate);
  font-weight: 600;
}
.message-plaintext {
  width: 100%; padding: var(--divider-space) 0; border-top: var(--divider-line); margin: 0;
  color: var(--slate); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
}
.message-decryption-error,.mailbox-key-status {
  margin: 0; color: var(--silver); overflow-wrap: anywhere;
}
.local-mail-stager {
  display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--divider-line);
}
.local-mail-stager summary {
  width: fit-content; cursor: pointer;
}
.local-mail-stager-form {
  display: grid; max-width: 36rem; gap: var(--space-2);
}
.local-mail-stager-form input,.local-mail-stager-form textarea {
  width: 100%; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--smoke);
  border-radius: var(--radius-sm); color: var(--slate); background: var(--paper); font: inherit;
}
.local-mail-stager-form textarea {
  min-height: 6rem; resize: vertical;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  clip-path: inset(50%);
}
@media (max-width:1024px) {
  :root {
    --page-gutter: 30px;
    --page-content-inset: var(--page-gutter);
  }
  .page-shell {
    grid-template-columns: minmax(0,1fr);
  }
  .page-rail {
    display: none;
  }
  .notice-stack,.storage-notice,.app {
    grid-column: 1;
  }
  .workspace {
    width: 100%; grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr);
  }
  .app {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
  }
  .header {
    grid-column: 1; grid-row: 1;
  }
  .app::before,.app::after {
    visibility: hidden;
  }
  .storage-notice-inner {
    width: 100%; min-height: 50px; padding-inline: 0;
  }
  .storage-notice-inner > p {
    display: none;
  }
  .api-permission-option {
    white-space: normal;
  }
  .api-permission-list {
    grid-template-columns: minmax(0,1fr);
  }
  .header-inner {
    position: relative; display: flex; width: 100%; min-height: 0; padding: 0; margin: 0;
  }
  .storage-notice-inner {
    align-items: center; flex-wrap: wrap; gap: 0 var(--space-5); padding-block: 0;
  }
  .storage-notice-actions {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 30px;
    padding-inline: var(--page-gutter);
  }
  .storage-notice-actions button {
    display: inline-flex; height: 50px; min-height: 50px; align-items: center;
  }
  .storage-notice-actions #storage-notice-clear {
    width: auto; padding-inline: 0; text-align: left;
  }
  .storage-notice-actions #storage-notice-dismiss {
    width: auto; padding-inline: 0; text-align: right;
  }
  .header-actions {
    gap: var(--space-2);
  }
  .header-actions {margin-left: auto;}
  .header {height: auto;}
  .workspace {
    display: grid; width: 100%; grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr); margin: 0;
  }
  .header {border-bottom: 0;}
  .header-top {
    position: relative; display: grid; width: 100%; min-width: 0;
    grid-template-columns: minmax(0,1fr) max-content; grid-template-rows: 80px; gap: 0;
  }
  .header-top::before {
    position: absolute; z-index: 1; top: 79px; right: 0; left: 0;
    border-top: var(--divider-line); content: ""; pointer-events: none;
  }
  .header-brand {grid-column: 1; grid-row: 1; padding-inline: var(--page-gutter);}
  .header-actions {display: contents;}
  .header-actions .sr-only {display: none;}
  .header-actions .header-account {
    display: none; height: 80px; justify-content: flex-start;
    padding-inline: var(--page-gutter); border-bottom: var(--divider-line);
  }
  .header-actions .mobile-menu-toggle {
    display: inline-flex; grid-column: 2; grid-row: 1; height: 38px; min-height: 38px;
    align-self: center; justify-self: end; padding-inline: 18px; margin-right: var(--page-gutter);
    border: 1px solid var(--smoke); background: #fff; color: var(--slate);
  }
  html[data-mobile-menu-open="true"] .header-actions .mobile-menu-toggle {
    border-color: var(--dark-smoke); background: var(--dark-snow); color: var(--silver);
  }
  html[data-mobile-menu-open="true"] .page-navigation > .header-account {
    display: flex;
  }
  .brand-mark-icon {width: 30px; height: 30px;}
  .brand-home {min-height: 38px;}
  .brand-name {display: inline-flex;}
  .page-navigation {
    display: none; width: 100%; height: 100%; min-height: 0; grid-column: 1; grid-row: 1;
    align-content: start; gap: 0; overflow-x: hidden; overflow-y: auto; padding: 0;
    background: transparent;
  }
  html[data-mobile-menu-open="true"] .page-navigation {
    display: grid;
  }
  html[data-mobile-menu-open="true"] .pane {
    display: none;
  }
  .page-navigation-group {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: start;
    align-items: flex-start; justify-content: flex-start;
    gap: 30px; padding: 30px 60px;
    border-right: 0; border-bottom: var(--divider-line);
  }
  .page-navigation-group:first-child {padding-top: 30px;}
  .page-navigation-group + .page-navigation-group {padding-left: 60px;}
  .page-navigation-group[data-navigation-last-visible="true"] {border-bottom: 0;}
  .page-navigation-button {width: fit-content; max-width: 100%; white-space: nowrap;}
  .page-navigation > .header-account {
    display: flex; height: 80px; align-items: center; justify-content: flex-start;
    padding-inline: var(--page-gutter); border-bottom: var(--divider-line);
    white-space: nowrap;
  }
  .page-navigation > .header-account > .button {
    border: 1px solid var(--smoke); background: #fff;
  }
  :root[data-theme="dark"] .page-navigation > .header-account > .button {
    border-color: var(--dark-smoke); background: var(--snow);
  }
  :root[data-theme="dark"] .header-actions .mobile-menu-toggle, :root[data-theme="dark"] html[data-mobile-menu-open="true"] .header-actions .mobile-menu-toggle {border-color: var(--dark-smoke);}
  .system-detail-row,
  .system-compatibility-row {
    grid-template-columns: minmax(0,1fr); gap: var(--space-3);
  }
  .system-compatibility-state,
  .system-detail-row > :last-child {
    width: 100%; text-align: left;
  }
  .pane {height: 100%; grid-column: 1; grid-row: 2;}
  .main {
    width: 100%; height: 100%; min-height: 0;
    padding: var(--content-top-inset) var(--page-gutter) calc(var(--content-bottom-inset) + env(safe-area-inset-bottom,0px));
  }
  #main[data-active-page="chat"] {padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom,0px));}
  .page {
    width: 100%; padding-inline: 0; margin: 0;
  }
  .page .page-section-divider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .page.chat-page {
    width: min(var(--content-width),100%); margin-inline: auto;
  }
  .page.agent {
    min-height: 0;
  }
  .address-section {
    padding: 0;
  }
  .address-create-form {
    align-items: stretch; flex-direction: column;
  }
  .address-create-form > input,.address-create-form .address-input {
    width: 100%;
  }
  .address-create-form .address-input {
    margin-inline-start: 0;
  }
  .address-card {
    align-items: flex-start;
  }
  .context-files {
    grid-template-columns: minmax(0,1fr);
  }
  .heading {
    align-items: center; justify-content: flex-start;
  }
  .heading > .button {
    min-height: 36px; padding: 0 var(--space-3);
  }
  .header-account {gap: var(--space-2);}
  .page[data-page="inbox"] .inbox-page-header {
    display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--space-3);
  }
  .page[data-page="inbox"] .inbox-header-controls {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-content: stretch;
  }
  #main[data-active-page="inbox"],
  #main[data-active-page="message"] {
    display: block;
  }
  #main[data-active-page="inbox"] .page[data-page="message"],
  #main[data-active-page="message"] .page[data-page="inbox"] {
    display: none;
  }
  #main[data-active-page="message"] .page[data-page="message"] {
    display: grid;
  }
  #main[data-inbox-view="settings"] .page[data-page="message"] {display: none;}
  .mail-rule-form {
    grid-template-columns: minmax(0,1fr);
  }
  .mail-rule-form > * {
    grid-column: 1;
    grid-row: auto;
  }
  .page[data-page="inbox"] #inbox-settings-open {
    grid-column: 1 / -1; justify-self: stretch;
  }
  .page[data-page="inbox"] .inbox-search {
    width: 100%; min-width: 0;
  }
  .usage {
    grid-template-columns: 1fr;
  }
  .balance-topup .topup-form {
    grid-template-columns: minmax(0,1fr);
  }
  .balance-topup .topup-controls {
    grid-template-columns: minmax(0,1fr);
    justify-items: start;
  }
  .balance-economics-row {
    grid-template-columns: minmax(0,1fr); gap: 0;
  }
  .balance-payment-history .balance-economics-row {
    gap: var(--space-2);
  }
  .balance-payment-totals {
    justify-items: start; text-align: left;
  }
  .usage-rate-list .balance-economics-row {
    grid-template-columns: minmax(0,1fr); gap: var(--space-3);
  }
  .usage-rate-list .balance-economics-row span:last-child {text-align: left;}
  .balance-content {
    grid-template-areas: "topup" "history-divider" "history" "status";
    grid-template-columns: minmax(0,1fr); row-gap: 0;
  }
  .topup-card-header {
    align-items: flex-start;
  }
  .topup-card {
    width: 100%; padding: var(--card-padding);
  }
  .usage-calculator-grid,.transactions-filter-grid {
    grid-template-columns: minmax(0,1fr); gap: var(--space-1);
  }
  .usage-transaction-details {
    grid-template-columns: minmax(0,1fr);
  }
  .agent-context-footer {
    align-items: flex-start; flex-direction: column;
  }
  .agent-context-actions {
    width: 100%;
  }
  .agent-context-actions .button {
    flex: 1;
  }
  .context-input-hints {
    grid-template-columns: minmax(0,1fr);
  }
  .context-input-hints .context-storage-feedback {
    grid-column: 1;
  }
}
@media (max-width:480px) {
  .header-top {min-height: 0;}
  .header-actions {width: auto; justify-content: flex-end;}
}
@media (max-width:600px) {
  .assurance-row {
    grid-template-columns: minmax(0,1fr); gap: var(--space-1);
  }
}
@media (max-width:1024px) and (pointer:coarse) and (hover:none) {
  :root::after {
    position: fixed; z-index: 100; right: 0; bottom: 0; left: 0;
    height: env(safe-area-inset-bottom,0px); background: #fff;
    content: ""; pointer-events: auto; user-select: none;
  }
  :root[data-theme="dark"]::after {background: var(--snow);}
  .page-shell {background: var(--snow);}
  .storage-notice {
    position: relative; margin-top: env(safe-area-inset-top,0px); border-radius: 0;
  }
  .storage-notice::before {display: none;}
  .app {padding-top: 0; padding-bottom: 0;}
  #main {padding-bottom: calc(var(--content-bottom-inset) + env(safe-area-inset-bottom,0px));}
  #main[data-active-page="chat"] {padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom,0px));}
  html[data-storage-notice-dismissed] .app {
    padding-top: env(safe-area-inset-top,0px);
  }
  :root[data-storage-notice-dismissed] .header {
    border-radius: 12px 12px 0 0;
  }
}
@media (min-width:1025px) and (max-height:850px) {
  .page:not(.contract) {
    gap: var(--space-3);
  }
  .agent-composer {
    gap: 2px;
  }
  .agent-composer .context-editor {
    min-height: 64px;
  }
  .agent .context-input-footer {
    min-height: 36px;
  }
}
@media (max-width:420px) {
  .chat-composer-toolbar {grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)) auto;}
  .chat-controls-open,.chat-form .button-primary {min-height: 40px; padding-inline: var(--space-2);}
  .chat-composer-toolbar select {min-height: 40px;}
  .chat-form textarea {min-height: 40px; padding-inline: var(--space-2);}
  #chat-form .chat-decision-controls textarea {min-height: 5rem; height: 5rem;}
  .chat-decision-controls,.chat-decision-criteria {grid-template-columns: minmax(0,1fr);}
  .chat-decision-controls textarea,.chat-decision-criteria textarea,
  .chat-decision-controls select {grid-column: 1;}
  .chat-decision-controls .panel-help {grid-column: 1;}
  .chat-panel[data-prestart="true"] .chat-form textarea {
    height: 120px; min-height: 120px; max-height: 120px; padding: var(--space-2);
  }
  .chat-form {grid-template-columns: auto minmax(0,1fr) auto; gap: var(--space-1); padding: var(--space-1);}
  .header-account {gap: var(--space-2);}
  .chat-dialog-controls {grid-template-columns: minmax(0,1fr); gap: var(--space-1);}
}
.connect-shell {
  width: min(100% - 2rem,38rem); margin: clamp(2rem,10vh,6rem) auto;
}
.connect-brand {
  display: inline-flex; align-items: center; gap: 0.65rem; margin-bottom: 1.5rem; color: var(--slate);
  font-weight: var(--font-weight); text-decoration: none;
}
.connect-panel {
  display: grid; gap: 1rem; padding: clamp(1.25rem,4vw,2rem); border: var(--divider-line);
  border-radius: var(--radius-lg); background: var(--snow);
}
.connect-panel h1,.connect-panel p {
  margin: 0;
}
.connect-details {
  display: grid; gap: 0; margin: 0;
}
.connect-details > div {
  display: grid; grid-template-columns: minmax(7rem,0.35fr) minmax(0,1fr); gap: 1rem; padding-block: 0.8rem;
  border-bottom: var(--divider-line);
}
.connect-details dt {
  color: var(--silver);
}
.connect-details dd {
  margin: 0; overflow-wrap: anywhere;
}
.connect-panel label {
  font-weight: var(--font-weight);
}
.connect-panel input {
  width: 100%; min-height: 44px;
}
.connect-message:empty {
  display: none;
}
.connect-message {
  color: var(--silver);
}
.connect-footer {
  margin: 1rem 0; color: var(--silver);
}
@media (max-width:480px) {
  .connect-details > div {
    grid-template-columns: 1fr; gap: 0.25rem;
  }
}