@import url("/brand.css");
@import url("/dashboard/language-picker.css");

:root {
  --sidebar-width: 248px;
  --content-width: 1040px;
  --content-wide: 1160px;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  min-width: 320px;
  background: var(--page);
  /* 預留捲動條溝槽：內容高度跨過一頁的瞬間不再因捲動條出現/消失而整頁橫移 */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang TC", system-ui,
    sans-serif;
  font-size: var(--text-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: Explicit hidden state must win over layout rules and capability-gated navigation. */
  display: none !important;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
fieldset {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.2;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 690;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 680;
}

h3,
h4 {
  margin-bottom: 0;
  font-size: var(--text-section);
  font-weight: 680;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
.button-link {
  min-height: var(--control-height);
  white-space: nowrap; /* 按鈕文字絕不折行——空間不夠時由外層 flex 換列 */
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

button:hover:not(:disabled),
.button-link:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  text-decoration: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

button.secondary,
.button-link.secondary {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface);
}

button.secondary:hover:not(:disabled),
.button-link.secondary:hover {
  border-color: var(--muted-strong);
  background: var(--surface-subtle);
}

button.danger {
  color: var(--on-danger);
  border-color: var(--danger);
  background: var(--danger);
}

button.danger:hover:not(:disabled) {
  border-color: var(--danger-hover);
  background: var(--danger-hover);
}

button.ghost,
button.text-button,
button.icon-button,
button.nav-button {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--link);
  background: transparent;
}

button.ghost:hover:not(:disabled),
button.text-button:hover:not(:disabled),
button.icon-button:hover:not(:disabled),
button.nav-button:hover:not(:disabled) {
  border-color: transparent;
  color: var(--ink);
  background: transparent;
  text-decoration: underline;
}

button.text-button {
  font-weight: 600;
}

button.icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  color: var(--muted-strong);
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}

button.icon-button:hover:not(:disabled) {
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 450;
  line-height: 1.5;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
}

input,
select {
  min-height: var(--control-height);
  padding: 10px 16px;
}

textarea {
  min-height: 112px;
  padding: 12px 16px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--link);
}

label {
  display: grid;
  gap: var(--field-label-gap);
  color: var(--muted-strong);
  font-size: var(--text-label);
  font-weight: 550;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 8px;
  color: var(--muted-strong);
  font-size: var(--text-label);
  font-weight: 550;
}

code {
  border-radius: 4px;
  color: var(--ink);
  background: var(--surface-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.muted,
.help-text,
.field-help,
.section-note,
.settings-description,
.dialog-note,
.form-note {
  color: var(--muted);
}

/* Supporting copy stays readable; weight and spacing distinguish it from labels. */
.field-help {
  margin: var(--field-help-gap) 0 0;
  font-size: var(--text-help);
  font-weight: 450;
  line-height: 1.6;
}
label > .field-help,
.form-stack > .field-help {
  margin: 0;
}
label > .summary-label {
  margin: 0;
  font-size: var(--text-label);
  font-weight: inherit;
}
.form-stack > .form-actions {
  padding-top: calc(var(--form-action-gap) - var(--form-field-gap));
}
.settings-section > .field-help + .form-stack {
  margin-top: var(--form-field-gap);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.spread {
  justify-content: space-between;
}

.brand {
  color: var(--ink);
  font-size: 23px;
  font-weight: 780;
  line-height: 1;
}

.brand:hover {
  text-decoration: none;
}

.brand span,
.brand b {
  color: var(--link);
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: 700;
  text-transform: uppercase;
}

.msg {
  min-height: 0;
  margin: 10px 0 0;
  font-size: 14px;
}

.msg:empty {
  display: none;
}

.msg.error {
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.msg.ok {
  padding: 10px 12px;
  border-left: 3px solid var(--success);
  color: var(--success);
  background: var(--success-soft);
}

.empty {
  margin: 0;
  padding: 36px 18px;
  color: var(--muted);
  text-align: center;
}

/* 空狀態＋主 CTA：訊息與按鈕成組置中（訊息用 .empty 的排版慣例） */
.empty-state {
  display: grid;
  padding: 44px 18px 48px;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.badge,
.pill,
.pilot-dot {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: var(--surface-subtle);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.badge.active,
.badge.ok,
.pill.ok {
  border-color: var(--border-strong);
  color: var(--success);
  background: var(--success-soft);
}

.badge.paused,
.pill.hold,
.status-unknown {
  border-color: var(--warning);
  color: var(--warning);
  background: var(--warning-soft);
}

.badge.revoked,
.badge.suspended,
.pill.rev {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}

.pill.neutral {
  color: var(--muted-strong);
}

/* Authentication */
.auth-layout {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 18px;
  background: var(--page);
}

.auth-main {
  width: min(100%, 430px);
}

.auth-brand {
  display: inline-block;
  margin-bottom: 54px;
}

.beta-acknowledgement {
  margin-bottom: 20px;
}

.auth-copy {
  margin-bottom: 28px;
}

.auth-copy h1 {
  margin-bottom: 10px;
  font-size: 34px;
}

.auth-copy > p:last-child {
  margin-bottom: 0;
  color: var(--muted-strong);
  font-size: 16px;
}

.auth-form-wrap {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.form-stack {
  display: grid;
  gap: var(--form-field-gap);
}

.button-block {
  width: 100%;
}

/* Google 登入起手鈕（按了才載入 GIS）：外觀對齊 GIS 官方 outline/large 鈕——白底、細框、G 標＋置中字、滿寬；
   載入後在原位換成官方 iframe 鈕時視覺連續。之前是一顆自動寬度的灰色 secondary，孤零零卡在滿寬的分隔線上方
   （負責人截圖 2026-09-06）。 */
.gsi-start {
  position: relative; /* G 標靠左緣、字置中——與 GIS 官方鈕同版位，換鈕時不跳 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 40px;
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface);
  font-weight: 600;
}

.gsi-start:hover:not(:disabled) {
  border-color: var(--muted-strong);
  background: var(--surface-subtle);
}

.gsi-start .gsi-logo {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

/* GIS 官方鈕（iframe，固定像素寬）置中；尚未畫出前不佔高度 */
#gsi-button {
  display: flex;
  justify-content: center;
}

#gsi-button:empty {
  display: none;
}

/* v0.3.27 同意列（地區補填門）：checkbox 曾無樣式——孤立浮在文字上方置中（截圖實錘）。
   與 OAuth consent 的同意列同款：同行、上緣對齊、勾選框不縮 */
.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.checkbox-line input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  /* 全域 input{min-height:42px;padding:8px} 會壓過 height（min-height 優先於 height，
     與選擇器權重無關）——v0.3.27 首修因此只對了一半，這裡歸零才真正 18px 對齊 */
  min-height: 0;
  padding: 0;
  margin: 1px 0 0;
}

.form-note,
.auth-assurance {
  margin: 14px 0 0;
  font-size: var(--text-help);
}

/* 補填門的出口列：目前登入的帳號＋登出換一個（文字鈕跟在同一行，窄寬換行） */
.region-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  color: var(--muted);
}

.auth-assurance {
  padding-left: 13px;
  border-left: 2px solid var(--border-strong);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
}

.divider::before,
.divider::after {
  height: 1px;
  background: var(--border);
  content: "";
  flex: 1;
}

/* Dashboard shell */
.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  padding: 26px 18px 18px;
  border-right: 1px solid var(--border);
  background: var(--surface-subtle);
  flex-direction: column;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.pilot-dot {
  min-height: 20px;
  padding: 1px 7px;
  color: var(--warning);
  background: var(--warning-soft);
}

.workspace-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
}

.workspace-switch a {
  min-width: 0;
  padding: 7px 5px;
  border-radius: 5px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.workspace-switch a:hover {
  color: var(--ink);
  text-decoration: none;
}

.workspace-switch a[aria-current="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(17 28 40 / 10%);
}

.workspace-short {
  display: none;
}

.sidebar-navigation {
  display: flex;
  min-height: 0;
  margin-top: 26px;
  flex: 1;
  flex-direction: column;
}

.primary-nav > span {
  display: grid;
  gap: 4px;
}

.primary-nav a,
.sidebar-account a,
.sidebar-account .nav-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  align-items: center;
  gap: 11px;
  border-radius: 6px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 590;
  text-align: left;
}

.primary-nav a:hover,
.sidebar-account a:hover,
.sidebar-account .nav-button:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-strong);
  text-decoration: none;
}

.primary-nav a.active,
.sidebar-account a.active {
  color: var(--link);
  background: var(--accent-soft);
  font-weight: 680;
}

.nav-mark {
  display: inline-grid;
  width: 18px;
  height: 18px;
  color: currentColor;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  place-items: center;
  transform: translateY(-1px); /* 字符型 icon 墨水偏低——光學置中補償 */
}

/* 帳戶列＝身份指示：email 常駐顯示（負責人需求 2026-07-15），過長 ellipsis＋title 全文 */
.nav-account-text {
  display: grid;
  min-width: 0;
  gap: 1px;
  line-height: 1.25;
  /* email 由 /v1/me 填入才出現——先把兩行的高度佔住，否則載入回來整個帳戶列長高、
     底下的登出與語言列被往下推（2026-09-06 首屏量到的第二個位移源） */
  min-height: 32px;
}

.nav-email {
  display: block; /* 防禦：即使外層 grid 規則失效仍自成一行，不與「帳戶」擠同行 */
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 460;
  letter-spacing: 0.1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-avatar.filled {
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--link);
  font-size: 11px;
  font-weight: 750;
  transform: none; /* 圓標是自繪形狀，不需字符 icon 的光學補償 */
}

.sidebar-account {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.content {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.page {
  width: min(100%, var(--content-width));
  min-height: 100vh; /* footer 一開始就在視窗外（09-06 首載量測：calc(100vh - 84px) 讓 footer 先露臉、內容一長就被推走） */
  margin: 0 auto;
  padding: 54px 42px 72px;
}

.page-wide {
  width: min(100%, var(--content-wide));
}

.page-header {
  display: flex;
  min-height: 74px;
  margin-bottom: 34px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.page-header > div:first-child {
  min-width: 0;
}

.page-intro {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
}

.page-section {
  margin-top: 42px;
}

.section-heading {
  display: flex;
  min-height: 32px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.section-heading a {
  font-size: 14px;
  font-weight: 600;
}

/* 沒有任何視圖亮著（開機到路由決定前）時 footer 不畫——否則它先出現在內容區頂端、視圖一亮又被推到底
   （09-06 首載量測：activity／apps／developer 的 CLS 主要來源） */
.content:not(:has(> .page:not([hidden]))) > .app-footer {
  display: none;
}

.app-footer {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: 0 42px 28px;
  color: var(--muted);
  font-size: 12px;
}

.app-footer a {
  color: var(--muted);
  text-decoration: underline;
}

.app-footer a:hover {
  color: var(--text);
}

/* Wallet */
.wallet-summary.single {
  grid-template-columns: 1fr; /* 無保留中＝只剩主數字，右欄收起 */
}

.wallet-summary,
.payout-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

/* ⓘ popover 需溢出卡片；warn tile 垂直置中不碰圓角，visible 無視覺副作用 */
.wallet-summary {
  overflow: visible;
}

.wallet-primary,
.payout-primary {
  min-width: 0;
  padding: 30px;
  border-right: 1px solid var(--border);
}

.summary-label {
  margin-bottom: 6px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 650;
}

.wallet-amount {
  margin-bottom: 1px;
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  font-weight: 700;
  /* 行高定死 50px：長金額降字級（.amount-long/.amount-xlong）或「—」佔位時
     箱高恆定——高度不隨內容變＝載入前後零位移（負責人回報：換行醜＋佔位不符） */
  line-height: 50px;
  white-space: nowrap; /* hero 金額不換行——塞不下由降字級處理，極端值才回退換行 */
  overflow-wrap: anywhere;
}

.wallet-amount.amount-long {
  font-size: 36px;
}

.wallet-amount.amount-xlong {
  font-size: 28px;
}

.wallet-unit {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.summary-list {
  margin-bottom: 0;
}

.summary-list > div {
  display: grid;
  min-height: 62px;
  padding: 13px 18px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.summary-list > div:last-child {
  border-bottom: 0;
}

.summary-list dt {
  color: var(--muted-strong);
}

.summary-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.summary-list .help-text {
  display: block;
  margin-top: var(--field-help-gap);
  font-size: var(--text-help);
  font-weight: 450;
}

.wallet-breakdown {
  align-self: center;
}

/* 金流四格固定 2×2：auto-fit 換列時「first-child 去左 padding」只作用第一格，
   第二列（已撥付）縮排 16px 不對齊（負責人截圖）——改所有格等 padding、奇數格分隔線 */
.payout-summary .metric-grid {
  align-self: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payout-summary .metric-grid > div,
.payout-summary .metric-grid > div:first-child {
  padding-left: 16px;
  border-right: 0;
}

.payout-summary .metric-grid > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.wallet-breakdown > div.warn {
  background: var(--warning-soft);
}

/* Activity */
.activity-feed {
  border-top: 1px solid var(--border);
}

.act {
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.act-main {
  display: grid;
  min-height: 76px;
  padding: 14px 2px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 24px;
}

.act-title,
.act-amt {
  color: var(--ink);
  font-weight: 650;
}

.act-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.act-amt,
.act-bal {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.act-amt.credit {
  color: var(--success);
}

.act-amt.debit {
  color: var(--ink);
}

.act-amt.mut,
.act-sub,
.act-bal {
  color: var(--muted);
}

.act-sub,
.act-bal {
  font-size: 12px;
}

.act-detail {
  display: none;
  margin: 0 0 14px 28px;
  padding: 12px 14px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-subtle);
}

.act.open .act-detail {
  display: block;
}

/* 手指游標只給主列——開關就是它；展開層是可選取複製的內容，留預設游標（文字上是 I 型） */
.act-main:has(.chev-btn) {
  cursor: pointer;
}

.chev-btn {
  width: 20px;
  color: var(--muted);
  flex: 0 0 20px;
}

.chev-btn:hover:not(:disabled) {
  text-decoration: none;
}

.prow {
  display: flex;
  padding: 4px 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.ref {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.load-more {
  margin-top: 18px;
}

details > summary {
  color: var(--link);
  font-weight: 620;
  cursor: pointer;
}

/* Object list and authorizations */
/* 空狀態：字收起但位置保留（載入前後高度一致——收起整列會把下面往上拉 24px） */
.list-header.is-empty {
  visibility: hidden;
}

.list-header {
  display: grid;
  padding: 0 15px 8px;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.3fr) minmax(72px, auto) 20px;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  text-transform: uppercase;
}

.object-list {
  border-top: 1px solid var(--border);
}

.object-row,
.connection {
  border-bottom: 1px solid var(--border);
}

/* 欄序（2026-07-16 改版）：App 名｜本月用量（主欄）｜狀態｜箭頭——用量是變動資訊
   （要看的），狀態多半恆為「使用中」（例外才重要），故用量佔主欄 */
.connection > summary {
  display: grid;
  min-height: 76px;
  padding: 13px 15px;
  align-items: center;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.3fr) minmax(72px, auto) 20px;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}

.connection > summary::-webkit-details-marker {
  display: none;
}

.connection > summary::after {
  color: var(--muted);
  font-size: 17px;
  content: "›";
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.connection[open] > summary::after {
  transform: rotate(-90deg);
}

.connection > summary:hover {
  background: var(--surface-subtle);
}

.object-name {
  display: grid;
  min-width: 0;
  gap: 2px;
}

/* 收合列的 scope 人話＝輔助資訊：單行截斷（行動版另有兩行 clamp），別跟用量搶注意 */
.connection > summary .object-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-name b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-name small,
.object-value small {
  color: var(--muted);
}

.object-value {
  min-width: 0;
  color: var(--muted-strong);
  font-size: 13px;
}

.connection-body {
  padding: 0 15px 24px;
}

.connection-section {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}

.connection-section:first-child {
  border-top-color: var(--border-strong);
}

.connection-section h3 {
  margin-bottom: 12px;
}

.connection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.danger-zone p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.muted-list .object-row {
  display: grid;
  min-height: 66px;
  padding: 12px 15px;
  align-items: center;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 16px;
}

/* ── 用量顯示（2026-07-16 改版：本月＝C 位） ───────────────────── */

/* 收合列的用量欄：金額列＋mini meter */
.usage-cell {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.usage-cell .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.usage-cell .usage-amount b {
  color: var(--ink);
}

.remaining-warn {
  color: var(--warning);
  font-weight: 600;
}

.remaining-over {
  color: var(--danger);
  font-weight: 600;
}

/* 展開後的本月 hero */
.usage-hero-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.usage-hero-amount {
  color: var(--ink);
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.usage-remaining {
  margin-left: auto;
  color: var(--muted-strong);
  font-size: 13px;
}

.usage-remaining b {
  color: var(--ink);
}

.usage-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  flex-wrap: wrap;
}

.usage-meta .held-note {
  color: var(--warning);
}

/* 今天／單次的次級小卡（每月為唯一主決定——顯示層級一致） */
.usage-tiles {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.usage-tile {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-subtle);
}

.usage-tile .tile-label {
  color: var(--muted);
  font-size: 12px;
}

.usage-tile .tile-value {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
}

.usage-tile .tile-value small {
  color: var(--muted);
}

.usage-tile .meter {
  height: 4px;
  margin-top: 6px;
}

/* 存取狀態列：狀態 chip＋ⓘ 靠左、動作靠右（狀態值常駐，解釋收 ⓘ） */
.access-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.access-row .connection-actions {
  margin: 0 0 0 auto;
}

/* 收款帳戶狀態行：chip＋補充字詞＋ⓘ 同列 */
#connect-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 調整上限：掌控感主動作——按鈕常駐，表單就地展開 */
.budget-adjust {
  margin-top: 14px;
}

.budget-adjust > form {
  margin-top: 12px;
}

.meter {
  display: flex;
  height: 7px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--surface-strong);
}

.meter.mini {
  height: 5px;
  margin-top: 0;
}

.meter span {
  display: block;
  min-width: 0;
}

.seg-spent {
  background: var(--accent);
}

.seg-held {
  background: #d09b2c;
}

.meter.hot .seg-spent,
.meter.hot .seg-held {
  background: #b57b0b;
}

.meter.full .seg-spent,
.meter.full .seg-held {
  background: var(--danger);
}

.budget-form {
  display: grid;
  gap: var(--form-field-gap);
  margin-top: var(--form-field-gap);
}

.budget-form > .row {
  display: grid;
  align-items: end;
  /* auto-fit：塞不下 130px 欄位時整欄換列——固定 3 欄的 px 下限在窄容器必溢出（跑版防線） */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.budget-form > button {
  justify-self: start;
}

.connection details:not(.connection),
.app-settings,
.settings-disclosure {
  margin-top: 14px;
}

/* Developer console */
.setup-guide {
  margin-bottom: 34px;
  padding-bottom: 12px;
}

.onboard-steps {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.onboard-steps li {
  position: relative;
  display: grid;
  min-width: 0;
  padding-right: 18px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 9px;
  color: var(--muted);
}

/* 桌面版不畫連接線：z-index:-1 的橫線在不同瀏覽器的 stacking 行為不一致
   （Chromium 整條沉到頁面背景後隱形；Safari 於進頁動畫期間浮出貫穿文字——
   負責人兩度回報）。編號圓圈已足以表達順序；行動版直向線幾何上不會穿字，保留。 */

.onboard-steps li > span {
  display: grid;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--page);
  font-size: 12px;
  font-weight: 700;
  place-items: center;
  grid-row: 1 / 3;
}

.onboard-steps b {
  color: var(--muted-strong);
  font-size: 13px;
}

.onboard-steps small {
  padding-right: 6px;
  font-size: 11px;
  line-height: 1.35;
}

.onboard-steps li.done > span {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.onboard-steps li.done > span::before {
  content: "✓";
}

.onboard-steps li.done > span {
  font-size: 0;
}

.onboard-steps li.done > span::before {
  font-size: 12px;
}

.onboard-steps li.next > span {
  border: 2px solid var(--accent);
  color: var(--link);
}

/* 步驟行動連結：只在「目前這步」顯示——回答「接下來要幹嘛」而不把四步都變按鈕牆。
   用 visibility（非 display）：四步永遠保留這一行的高度——載入前後與換步時佔位
   完全一致，不推擠下方（負責人回報：載入前後佔位不一樣） */
.onboard-steps .step-action {
  display: inline-block;
  visibility: hidden;
  min-height: 0;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-size: 11.5px;
  font-weight: 640;
  text-align: left;
  grid-column: 2;
  justify-self: start;
}

.onboard-steps li.next .step-action {
  visibility: visible;
}

.onboard-steps .step-action:hover:not(:disabled) {
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
}

.onboard-steps li.next b {
  color: var(--ink);
}

.task-sheet {
  margin-bottom: 30px;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}

.task-sheet-head,
.dialog-head {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.task-sheet-head h2,
.dialog-head h2 {
  font-size: 24px;
}

.form-actions,
.dialog-actions,
.row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* 按鈕 nowrap 後，空間不夠由這裡換列 */
  justify-content: flex-end;
}

.result-box {
  padding: 12px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
}

.developer-workspace {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.dev-context-bar {
  display: flex;
  min-height: 82px;
  padding: 17px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.app-selector {
  display: grid;
  width: min(100%, 360px);
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 10px;
}

.app-selector label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.app-selector select {
  font-weight: 650;
}

.dev-subnav {
  display: flex;
  overflow-x: auto;
  padding: 0 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  gap: 22px;
}

.dev-subnav button {
  min-height: 48px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted-strong);
  background: transparent;
  white-space: nowrap;
}

.dev-subnav button:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}

.dev-subnav button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* 手機「更多」（IA 重構 2026-07-19）：≤720px 收 App 收費／設定，桌面隱藏此入口 */
.subnav-more-wrap {
  position: relative;
  display: none;
}

.dev-subnav .subnav-more.on {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.subnav-sheet {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.dev-subnav .subnav-sheet button {
  min-height: 0;
  padding: 11px 15px;
  border: 0;
  text-align: left;
  white-space: nowrap;
}

.dev-subnav .subnav-sheet button:hover {
  background: var(--surface-subtle);
}

@media (max-width: 720px) {
  .dev-subnav [data-mobile-hide] {
    display: none;
  }

  .subnav-more-wrap {
    display: inline-block;
  }
}

/* 目標卡（設定與整合 · IA 重構）：選中＝accent 邊框；內文降級不與標題搶 */
.goal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}

.goal-card {
  display: grid;
  flex: 1 1 220px;
  gap: 4px;
  padding: 13px 15px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 480;
  line-height: 1.55;
  text-align: left;
  white-space: normal; /* 覆蓋全域 button nowrap——說明文字要能折行 */
  cursor: pointer;
}

/* 覆蓋全域 button:hover 的實心深綠（選卡不是動作鈕）：hover 只加深邊框 */
.goal-card:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

.goal-card[aria-pressed="true"],
.goal-card[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.goal-card .muted {
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
}

.fix-card {
  border-left: 3px solid var(--warning);
}

/* 「這條路目前關閉」的告示（負責人回饋 2026-07-26：灰色小字看不見——
   影響到錢的限制必須是擋在眼前的一塊，不是註腳）。用於：App 收費、收款與提領。 */
/* UX Step 1（顧問 P2-04）：「未開放」不是錯誤——改中性資訊色；紅色只留阻斷錯誤與危險操作。
   仍是擋在內容最上方的一塊（負責人 2026-07-26 的「灰色小字看不見」原則不變）。 */
.closed-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: 8px;
  color: var(--info);
  background: var(--info-soft);
}

.closed-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.closed-banner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.closed-banner p + p {
  margin-top: 6px;
}

/* 關閉期間的欄位：看得到自己設過什麼，但一眼就知道不能動 */
.field-locked {
  color: var(--muted);
}

.field-locked input,
.field-locked select {
  border-style: dashed;
  border-color: var(--border);
  color: var(--muted);
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-subtle),
    var(--surface-subtle) 6px,
    var(--surface-strong) 6px,
    var(--surface-strong) 12px
  );
  cursor: not-allowed;
}

.field-locked .lock-tag {
  margin-left: 6px;
  color: var(--danger);
  font-weight: 600;
}

.dev-panel {
  min-height: 300px;
  padding: 26px 20px 30px;
}

/* 面板內節奏：h1–h4 全域 margin 歸零、節奏由容器給——dev-panel 原本沒給，
   區塊標題會貼死上一區的內容（近接原則：區塊間距 >> 區塊內間距） */
.dev-panel h3 {
  margin: 0 0 12px;
}

/* 區塊分隔線＋大上距（負責人回饋 2026-07-19：行距太小、每項擠在一起）——
   讓「公開資料／OAuth 資訊／…」讀起來是一節一節，不是一面牆 */
.dev-panel h3:not(:first-of-type) {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.dev-panel .connection-actions {
  margin-top: 16px;
}

.dev-panel .form-stack {
  gap: var(--form-field-gap);
}

.panel-header {
  display: flex;
  margin-bottom: 22px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.panel-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.overview-grid {
  display: grid;
  /* 兩欄都要可收縮（minmax(0,…)）——右欄 230px 硬下限在 1024px 視窗會把值擠出卡片 */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 28px;
}

.settings-list,
.app-meta {
  border-top: 1px solid var(--border);
}

.settings-list > div,
.app-meta > span,
.app-meta-row {
  display: grid;
  min-height: 58px;
  padding: 11px 2px;
  align-items: center;
  /* 值欄可收縮——長值（client_id 等）由 dd 的 overflow-wrap 換行，不撐出卡片 */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 18px;
  border-bottom: 1px solid var(--border);
}

.app-meta > span {
  display: flex;
  justify-content: space-between;
}

.settings-list dt,
.app-meta-row dt {
  color: var(--muted);
}

.settings-list dd,
.app-meta-row dd {
  min-width: 0;
  margin: 0;
  font-weight: 620;
  text-align: right;
  overflow-wrap: anywhere; /* client_id 等長字串換行，不撐出卡片 */
}

.integration-key {
  display: flex;
  min-width: 0;
  padding: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.integration-key code {
  min-width: 0;
  background: transparent;
}

.copy-btn {
  flex: 0 0 auto;
  font-size: 12px;
}

.dev-help {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted-strong);
  background: var(--surface-subtle);
}

.dev-help p:last-child {
  margin-bottom: 0;
}

.kpi-row,
.usage-kpis,
.metric-grid {
  display: grid;
  /* auto-fit：寬度不夠時整格換列——金額永遠不會被擠到溢出/換行（跑版系統性防線） */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.stat-tile,
.metric-grid > div {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}

.stat-tile:first-child,
.metric-grid > div:first-child {
  padding-left: 0;
}

.stat-tile:last-child,
.metric-grid > div:last-child {
  border-right: 0;
}

.stat-label,
.metric-grid dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stat-value,
.metric-grid dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 680;
  overflow-wrap: anywhere; /* 金額塞不下時換行，不得溢進鄰格 */
}

.stat-value.stat-attn {
  color: var(--danger);
}

.stat-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* 統計長條圖（無函式庫）：柱高由 JS 走 CSSOM 設定。dataviz 慣例：
   y 軸 0/中/頂三條乾淨刻度（hairline 實線、退位色）、x 軸首尾＋抽樣標籤、
   逐柱 hover tooltip（hit 目標＝整欄高）、範圍列一列在圖上方 */
.range-bar {
  position: relative; /* 自訂日期 popover 的錨定基準 */
  display: flex;
  margin: 14px 0 4px;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.range-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-wrap: wrap;
}

.range-btn {
  min-height: 30px;
  padding: 3px 12px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 600;
}

.range-btn:last-child {
  border-right: 0;
}

/* :hover:not(:disabled) 拉高 specificity——否則被全域 button:hover 的 accent 深底蓋掉（深字配深底） */
.range-btn:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--ink);
}

.range-btn.on,
.range-btn.on:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--accent-soft);
  color: var(--link);
}

/* 自訂日期 popover：錨定浮層、不佔文檔流——in-flow 展開會把整頁往下推（layout shift） */
.range-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  display: flex;
  max-width: calc(100vw - 32px);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-dialog);
}

.range-pop input[type="date"] {
  width: auto;
  min-height: 30px;
  padding: 2px 8px;
  font-size: 12.5px;
}

.range-pop button {
  min-height: 30px;
  padding: 3px 12px;
  font-size: 12.5px;
}

.chart-duo {
  display: grid;
  margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 24px;
}

.bar-chart {
  min-width: 0;
  margin: 0;
}

.bar-chart .chart-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.bar-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 8px;
}

.bar-ylabels {
  display: flex;
  height: 110px;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1;
}

.bar-plotarea {
  position: relative;
  height: 110px;
  border-bottom: 1px solid var(--border-strong);
}

.bar-gridline {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid var(--border);
}

.bar-gridline.top {
  top: 0;
}

.bar-gridline.mid {
  top: 50%;
}

.bar-plot {
  position: relative;
  display: grid;
  height: 100%;
  padding: 0 2px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}

.bar-col {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: flex-end;
  justify-content: center;
}

.bar-col .bar {
  width: 100%;
  max-width: 24px; /* dataviz：柱不填滿 slot，留白歸空氣 */
  border-radius: 4px 4px 0 0; /* 資料端圓角、基線端直角 */
  background: var(--accent);
  opacity: 0.8;
}

.bar-col.hover .bar,
.bar-col:hover .bar {
  opacity: 1;
}

.bar-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 5;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--page);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.bar-tip-value {
  font-size: 12.5px;
  font-weight: 700;
}

.bar-tip-row,
.bar-tip-label {
  opacity: 0.75;
}

.bar-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
}

.chart-loading {
  opacity: 0.55;
  transition: opacity 0.15s;
}

.chart-empty {
  margin: 6px 0 0;
  font-size: 12px;
}

/* Shared router owns cancellable page and panel entry motion. */

/* ⓘ 收合說明（負責人裁決 2026-07-15：資訊性法務句退出常駐版面） */
.info-btn {
  display: inline-flex;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin-left: 6px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

/* :hover:not(:disabled)＝壓過全域 button:hover 的 accent 深底（同 .range-btn 的陷阱） */
.info-btn:hover:not(:disabled) {
  border-color: var(--muted);
  background: var(--surface-subtle);
  color: var(--ink);
}

.info-btn[aria-expanded="true"] {
  border-color: var(--muted);
  background: var(--surface-strong);
  color: var(--ink);
}

/* ⓘ 說明＝錨定 popover（同自訂日期）：不佔文檔流、展開不推擠下方內容 */
.info-wrap {
  position: relative;
  display: inline-block;
  /* 與同行文字垂直置中（負責人 2026-07-19：ⓘ 全站偏低 2.5–3px）——
     middle＋1.5px 光學補償：各處實測中心差收斂到 ±0.5px 內 */
  vertical-align: middle;
  top: -1.5px;
}

.info-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: block;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-popover);
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-dialog);
}

/* skeleton 載入畫面（負責人裁決 2026-07-15：內容載入一律骨架、不用 spinner/文字）
   ——佔位形狀近似最終內容：到位不跳動、感知更快 */
.chart-skeleton,
.sk-line,
.sk-block {
  background: linear-gradient(
    100deg,
    var(--surface-subtle) 30%,
    var(--surface-strong) 50%,
    var(--surface-subtle) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-sheen 1.4s linear infinite;
}

.chart-skeleton {
  height: 156px; /* ＝.bar-chart 實際高度（title 26＋frame 110＋ticks 20）——換入時零位移 */
  border-radius: 8px;
}

.sk-row {
  display: flex;
  min-height: 58px; /* ＝ .settings-list > div 的列高（09-06 量測：64 vs 58 每列差 6px，換入即跳） */
  padding: 10px 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.sk-row:last-child {
  border-bottom: 0;
}

/* 變體：列高對齊各清單的真實列（widgets.js skeletonList 第二參數） */
.sk-row.act {
  min-height: 77px; /* .act-main 76 + 底線 */
}

.sk-row.card {
  min-height: 112px; /* 連接卡（名稱＋徽章＋範圍列） */
}

.sk-row.app {
  min-height: 92px; /* App 清單列（名稱＋徽章列＋按鈕） */
}

/* 範圍列由 JS 建立（rangeBar）——先佔高，圖表不會在它出現時往下跳 46px（09-06 首載量測） */
#spend-range {
  min-height: 46px;
}

.sk-left {
  display: grid;
  flex: 1;
  gap: 8px;
}

.sk-line {
  display: inline-block;
  height: 12px;
  border-radius: 6px;
}

.sk-line.sub {
  height: 10px;
  opacity: 0.65;
}

.sk-line.w-40 {
  width: 40%;
}

.sk-line.w-25 {
  width: 25%;
}

.sk-line.w-fixed {
  width: 72px;
  flex: none;
}

.sk-block {
  border-radius: 8px;
}

/* 工作區 skeleton：標題＋分頁列＋4 內容列 ≈ 467px（換入零位移） */
.sk-workspace .sk-title {
  width: 30%;
  height: 26px;
  margin: 6px 0 18px;
}

.sk-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.sk-tabs .sk-tab {
  width: 76px;
  height: 34px;
  border-radius: 8px;
}

.sk-workspace .sk-row {
  min-height: 86px;
}

@keyframes skeleton-sheen {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -80% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-skeleton,
  .sk-line,
  .sk-block {
    animation: none;
  }
}

.table-wrap,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  margin-top: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  height: 48px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  text-transform: uppercase;
}

td.num,
th.num,
.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

tr.expandable {
  cursor: pointer;
}

tr.expandable:hover td {
  background: var(--surface-subtle);
}

tr.detail td {
  height: auto;
  padding: 14px 20px 18px;
  background: var(--surface-subtle);
}

.diag-line {
  display: grid;
  padding: 3px 0;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  font-size: 12px;
}

/* Payouts */
.payout-summary {
  grid-template-columns: minmax(280px, 0.9fr) minmax(400px, 1.1fr);
}

.payout-action {
  display: grid;
  margin-top: 22px;
  justify-items: start;
  gap: 7px;
}

.metric-grid {
  align-content: center;
  padding: 24px 14px;
}

.settings-row {
  display: flex;
  min-height: 84px;
  padding: 16px 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.settings-row p {
  margin-bottom: 0;
}

.settings-title {
  font-weight: 650;
}

.settings-description {
  margin-top: 4px;
  font-size: var(--text-help);
}

/* 提領紀錄＝表格語意：欄軌道定義在容器、所有列 subgrid 共用同一組軌道——
 * 跨列對齊（auto 欄以全部列的內容取寬）＋可收縮（minmax(0,…) 吸收長字串）。 */
#payout-history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1.4fr);
  column-gap: 16px;
}

.payout-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  min-height: 68px;
  padding: 11px 2px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

/* 舊瀏覽器 fallback：純 fr 軌道（同寬容器下各列解出同寬＝仍對齊，僅內容自適應較差） */
@supports not (grid-template-columns: subgrid) {
  .payout-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 0.65fr) minmax(0, 1.4fr);
    column-gap: 16px;
  }
}

.payout-row .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  text-align: right;
}

.notice {
  display: grid;
  margin-top: 34px;
  padding: 14px 16px;
  border-left: 3px solid #c89b30;
  color: var(--muted-strong);
  background: var(--warning-soft);
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  font-size: 13px;
}

.notice p {
  margin-bottom: 0;
}

/* Account */
.account-section + .account-section {
  margin-top: 44px;
}

.settings-disclosure {
  margin-top: 0;
  padding: 15px 2px;
  border-bottom: 1px solid var(--border);
}

.settings-disclosure > summary {
  font-weight: 650;
}

.compact-form {
  max-width: 500px;
  margin: 18px 0 4px;
}

.section-note {
  margin: 10px 0 0;
  font-size: var(--text-help);
}

.session-line {
  flex-wrap: nowrap;
}

.session-line > div:first-child {
  min-width: 0;
}

.session-line .badge {
  margin-left: 8px; /* 「目前裝置」徽章與裝置名間距（原本貼字；負責人回報） */
  vertical-align: 2px;
}

.session-line > div:last-child {
  text-align: right;
}

/* Dialogs */
dialog {
  width: min(calc(100% - 32px), 520px);
  max-height: calc(100vh - 40px);
  padding: 24px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

dialog::backdrop {
  background: rgb(17 28 40 / 48%);
}

/* 對話框進場（§11.1：不瞬間彈出）——短、輕、不擋操作 */
dialog[open] {
  animation: dialog-in 0.15s ease-out;
}

dialog[open]::backdrop {
  animation: backdrop-in 0.15s ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop {
    animation: none;
  }
}

.confirm-dialog h2 {
  margin-bottom: 12px;
  font-size: 24px;
}

.confirm-dialog .dialog-actions,
.task-dialog .dialog-actions {
  margin-top: 22px;
  justify-content: flex-end;
}

.check-list {
  margin: 0;
  border-top: 1px solid var(--border);
}

.check-list > div {
  display: grid;
  min-height: 44px;
  padding: 9px 0;
  align-items: center;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.check-list dt {
  color: var(--muted);
}

.check-list dd {
  margin: 0;
  text-align: right;
}

.amount-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.amount-chips button {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface);
}

.amount-chips button:hover,
.amount-chips button.selected {
  border-color: var(--accent);
  color: var(--link);
  background: var(--accent-soft);
}

.dialog-note {
  margin: var(--field-help-gap) 0 0;
  font-size: var(--text-help);
}

/* Checkout receipt */
.pay-page {
  min-height: 100vh;
  background: var(--page);
}

.pay-wrap {
  width: min(100%, 650px);
  margin: 0 auto;
  padding: 40px 20px 72px;
}

.pay-wrap > .brand {
  display: inline-block;
  margin-bottom: 38px;
}

.pay-receipt {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.pay-receipt-header {
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--border);
}

.pay-receipt-body {
  padding: 24px 28px 28px;
}

.pay-steps {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.pay-steps li {
  position: relative;
  padding-top: 13px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.pay-steps li::before {
  position: absolute;
  top: 0;
  right: 2px;
  left: 2px;
  height: 4px;
  background: var(--surface-strong);
  content: "";
}

.pay-steps li.on {
  color: var(--link);
}

.pay-steps li.on::before {
  background: var(--accent);
}

.big-ok {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--success);
  font-size: 22px;
  font-weight: 700;
  place-items: center;
}

.pay-status {
  margin: 0 0 20px;
  font-size: 15px;
}

.pay-review {
  margin-bottom: 24px;
  border-top: 1px solid var(--border);
}

.pay-review > div,
.pay-review:not(.review-grid) {
  border-bottom: 1px solid var(--border);
}

.pay-review dt,
.pay-review dd {
  min-height: 48px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.pay-review dt {
  float: left;
  width: 38%;
  clear: left;
  color: var(--muted);
}

.pay-review dd {
  margin-left: 38%;
  text-align: right;
}

.pay-balance-block {
  margin: 24px 0;
  padding: 16px;
  background: var(--surface-subtle);
}

.pay-balance {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 700;
}

.pay-facts {
  color: var(--muted);
  font-size: var(--text-help);
  line-height: 1.65;
}

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }

  button,
  .connection > summary::after {
    transition: none;
  }
}

/* 901–1030px：側欄 248px 下內容欄不足 .payout-summary 兩欄的最小 680px（280＋400），
   第二欄的金流四格會被 overflow:hidden 裁掉（佈局矩陣掃描抓到）——payout 提早堆疊；
   wallet-summary 最小 540px 塞得下，維持 900px 斷點不動 */
@media (max-width: 1030px) {
  .payout-summary {
    grid-template-columns: 1fr;
  }

  .payout-primary {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 900px) {
  .page {
    padding-right: 28px;
    padding-left: 28px;
  }

  /* 721–900px：側欄仍佔 248px，App 列固定欄最小寬 514px 塞不下——沿用堆疊式列 */
  .list-header {
    display: none;
  }

  .connection > summary {
    min-height: 0;
    padding: 15px 3px;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "name status arrow"
      "usage usage usage";
    gap: 10px;
  }

  .connection > summary .object-name {
    grid-area: name;
  }

  .connection > summary .object-name small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .connection > summary .badge {
    grid-area: status;
  }

  /* 用量欄整列滿版（usage-cell 自帶金額列＋meter 的縱向結構，不再壓成單行 flex） */
  .connection > summary .object-value {
    grid-area: usage;
  }

  .connection > summary::after {
    grid-area: arrow;
  }

  .wallet-summary {
    grid-template-columns: 1fr;
  }

  .wallet-primary {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  #payout-history {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .payout-row .payout-reference {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 14px;
  }

  .sidebar {
    position: fixed;
    inset: 0 0 auto;
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }

  .sidebar-brand-row {
    padding: 0;
  }

  .pilot-dot {
    display: none;
  }

  .workspace-switch {
    width: 130px;
    margin: 0 0 0 auto;
  }

  .workspace-name {
    display: none;
  }

  .workspace-short {
    display: inline;
  }

  .sidebar-navigation {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: calc(64px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0 6px env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: rgb(255 255 255 / 97%);
    flex-direction: row;
  }

  .primary-nav {
    min-width: 0;
    flex: 1;
  }

  .primary-nav > span {
    height: 64px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .primary-nav a,
  .sidebar-account a {
    display: grid;
    min-width: 0;
    min-height: 64px;
    padding: 7px 3px 5px;
    border-radius: 0;
    align-content: center;
    justify-items: center;
    gap: 2px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }

  .primary-nav a.active,
  .sidebar-account a.active {
    box-shadow: inset 0 2px var(--accent);
    background: transparent;
  }

  .nav-mark {
    font-size: 17px;
  }

  /* tabbar 格子放不下 email——只留字首圓標＋「帳戶」label */
  .nav-email {
    display: none;
  }

  .nav-avatar.filled {
    font-size: 12px;
  }

  .sidebar-account {
    display: block;
    width: 64px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sidebar-account .nav-button {
    display: none;
  }

  .content {
    margin-left: 0;
    padding-top: 60px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .page {
    min-height: calc(100vh - 60px); /* 60px＝.content 的頂列留白；同桌面：footer 一開始就在視窗外 */
    padding: 28px 17px 52px;
  }

  .page-header {
    min-height: 0;
    margin-bottom: 26px;
    align-items: center;
  }

  .page-header h1 {
    font-size: 26px;
  }

  .page-header .page-intro {
    font-size: 13px;
  }

  .page-header > button {
    flex: 0 0 auto;
  }

  .app-footer {
    padding: 0 17px 24px;
  }

  .wallet-primary,
  .payout-primary {
    padding: 23px 20px;
  }

  .wallet-amount {
    font-size: 38px;
  }

  .act-main {
    gap: 4px 12px;
  }

  .act-sub {
    white-space: normal; /* 收據細節（模型/tokens/費率）換行呈現，不用 ellipsis 藏掉 */
  }

  .connection-body {
    padding: 0 3px 20px;
  }

  .danger-zone,
  .settings-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .budget-form > .row {
    grid-template-columns: 1fr;
  }

  .onboard-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .onboard-steps li {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  /* 行動版直排：圓圈到圓圈的直向連接線（在文字左側欄，幾何上不會穿字） */
  .onboard-steps li::after {
    position: absolute;
    z-index: -1;
    top: 26px;
    bottom: -14px;
    left: 13px;
    width: 1px;
    background: var(--border-strong);
    content: "";
  }

  .onboard-steps li:last-child::after {
    display: none;
  }

  .dev-context-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-selector {
    width: 100%;
  }

  .dev-subnav {
    gap: 18px;
  }

  .dev-panel {
    padding: 22px 15px 26px;
  }

  .kpi-row,
  .usage-kpis,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-tile,
  .metric-grid > div {
    padding: 12px;
    border-bottom: 1px solid var(--border);
  }

  .stat-tile:nth-child(2),
  .metric-grid > div:nth-child(2) {
    border-right: 0;
  }

  .stat-tile:nth-last-child(-n + 2),
  .metric-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  tr.expandable {
    display: grid;
    padding: 10px 0;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
  }

  tr.expandable td {
    display: grid;
    height: auto;
    min-height: 42px;
    min-width: 0;
    padding: 6px 8px;
    border: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    text-align: right;
    overflow-wrap: anywhere; /* 六位小數金額在 360px 半寬格塞不下時換行，不得被裁 */
  }

  tr.expandable td::before {
    color: var(--muted);
    content: attr(data-label);
    text-align: left;
  }

  tr.detail td {
    display: block;
  }

  .diag-line {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  #payout-history {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payout-row {
    padding: 14px 2px;
  }

  .payout-row .amount {
    text-align: right;
  }

  .payout-row .payout-reference {
    grid-column: 1 / -1;
  }

  .notice {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .settings-list > div,
  .app-meta > span,
  .app-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .settings-list dd,
  .app-meta-row dd {
    text-align: left;
  }

  .session-line {
    align-items: flex-start;
  }

  .session-line > div:last-child {
    font-size: 11px;
  }

  dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    padding: 20px;
  }

  .amount-chips {
    grid-template-columns: 1fr 1fr;
  }

  .pay-wrap {
    padding: 26px 14px 52px;
  }

  .pay-receipt-header,
  .pay-receipt-body {
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 430px) {
  .page-header {
    align-items: flex-start;
  }

  .page-header > button {
    min-height: 38px;
    padding: 0 11px;
    font-size: 13px;
  }

  .act-title {
    font-size: 13px;
  }

  .act-sub,
  .act-bal {
    font-size: 11px;
  }

  .form-actions,
  .dialog-actions,
  .row-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .form-actions button,
  .dialog-actions button,
  .row-actions button {
    width: 100%;
  }
}

/* ═ 跑版系統性防線（2026-07-14）：所有值類節點一律可收縮＋長值換行 ═
 * 任何 dt/dd、stat 值、金額欄——寬度不夠時換行，絕不溢進鄰格或視窗外。 */
dd,
.stat-value,
.object-value,
.wallet-amount,
.summary-list dd,
.payout-reference,
.settings-row .settings-description {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 錢包 breakdown 的帳目關係行（保留中>0 才出現）：整列單欄、說明句自成一格 */
.wallet-breakdown > .breakdown-explain {
  grid-template-columns: 1fr;
}

.breakdown-note {
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}

/* 展開層的收據細節行（模型/tokens/費率——自主層副行移入） */
.act-receipt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Console 改版（顧問審查裁決 2026-07-17）：引導式註冊＋開始整合＋設定 ── */

/* 兩步式註冊的步驟指示（IA 重構 2026-07-19）：步 1 可點回；步 2 由「下一步」推進 */
.devreg-steps {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.devreg-steps span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  cursor: default;
}

.devreg-steps span[data-step="1"] {
  cursor: pointer;
}

.devreg-steps b {
  display: inline-flex;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--border-strong);
  color: var(--surface);
  font-size: 12px;
}

.devreg-steps span.on {
  color: var(--ink);
  font-weight: 650;
}

.devreg-steps span.on b {
  background: var(--accent);
}

.devreg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cb-field {
  border: 0;
  padding: 0;
  margin: 14px 0 0;
}

.cb-field legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 2px;
}

.env-chips {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
}

.env-chip {
  font: inherit;
  font-size: var(--text-help);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.env-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  color: var(--ink);
}

.env-chip[aria-pressed="true"],
.env-chip[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--link);
}

.uri-add {
  display: flex;
  gap: 8px;
  margin: 6px 0;
}

.uri-add input {
  flex: 1;
  min-width: 0;
}

.uri-list {
  margin: 4px 0;
}

.uri-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  min-width: 0;
}

.uri-row code {
  flex: 1;
  min-width: 0;
  font-size: var(--text-help);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  white-space: nowrap;
}

.uri-env {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  min-width: 34px;
}

.uri-remove {
  min-width: 44px;
  font: inherit;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.uri-remove:hover:not(:disabled) {
  border-color: transparent;
  color: var(--danger);
  background: var(--danger-soft);
}

.consent-preview {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-subtle);
  padding: 14px 16px;
}

.cp-brand {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

.cp-brand b {
  color: var(--link);
}

.cp-app {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.cp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--link);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

.cp-line {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0;
}

/* 設定四區（顧問 §9.3）：每區標題＋說明＋右上「已儲存／有未儲存變更」pill；各區獨立儲存 */
.settings-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.settings-section:first-of-type {
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}

.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-section-head h3 {
  margin: 0;
}

.settings-section h4 {
  margin: 20px 0 4px;
  font-size: 14px;
  font-weight: 650;
}

.save-state {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.save-state.saved {
  background: var(--success-soft);
  color: var(--success);
}

.save-state.dirty {
  background: var(--warning-soft);
  color: var(--warning);
}

.settings-section.settings-danger {
  border-top-color: #e9b8b8;
}

.settings-section.settings-danger h3 {
  color: var(--danger);
}

.oauth-tech {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.oauth-tech summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* 步驟即導航（density 提案 2026-07-19）：手風琴——一次展開一步，程式碼住進步 3 */
.steps-acc {
  display: grid;
  gap: 10px;
  margin: 18px 0 16px;
}

.acc-step {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.dev-panel .acc-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 620;
  text-align: left;
  white-space: normal;
}

.dev-panel .acc-head:hover:not(:disabled) {
  border-color: transparent;
  background: var(--surface-subtle);
  color: var(--ink);
}

.acc-label {
  flex: 1;
  min-width: 0;
}

.acc-body {
  display: none;
  padding: 12px 16px 14px 48px;
  border-top: 1px solid var(--border);
}

.acc-step.open .acc-body {
  display: block;
}

.acc-line {
  margin: 0 0 6px;
  font-size: 13px;
}

/* 編號步驟（2026-07-19）：編號不承諾可勾；狀態只掛在追蹤得到的步（pill） */
.step-num {
  display: inline-flex;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 650;
}

.step-num.done {
  background: var(--accent);
  color: var(--on-accent);
}

.step-pill {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.step-pill.done {
  background: var(--accent-soft);
  color: var(--link);
}

.step-pill.todo {
  background: var(--warning-soft);
  color: var(--warning);
}

.step-pill.info {
  background: var(--surface-strong);
  color: var(--muted-strong);
}

.testmode-line {
  margin-top: 16px;
  font-size: 13px;
}

.next-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.next-card h3 {
  margin: 0 0 4px;
}

.next-card p {
  margin: 0 0 10px;
}

.recipe-box {
  margin: 18px 0;
}

.recipe-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.recipe-tabs button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.recipe-tabs button:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  color: var(--ink);
}

.recipe-tabs button[aria-selected="true"],
.recipe-tabs button[aria-selected="true"]:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--link);
}

.code-block {
  margin: 0 0 8px;
  background: #202327;
  color: #f2f4f7;
  border-radius: var(--radius-control);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

.testmode-box {
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 16px;
}

@media (max-width: 46rem) {
  .devreg-grid {
    grid-template-columns: 1fr;
  }

  .integrate-steps small {
    margin-left: 0;
    white-space: normal;
  }
}

@media (max-width: 46rem) {
  /* 審查二輪 #8：請求明細行動版——單欄、標籤:值成對右對齊，可掃讀（原兩欄
   * 會把模型/時間/六位小數金額拆成碎片） */
  .usage-table tr.expandable {
    padding: 8px 0;
    grid-template-columns: 1fr;
  }

  .usage-table tr.expandable td {
    display: flex;
    min-height: 26px;
    padding: 3px 8px;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .usage-table tr.expandable td::before {
    flex-shrink: 0;
  }

  .usage-table tr.expandable td.num {
    font-variant-numeric: tabular-nums;
  }
}

/* code-block 的內層 code 蓋掉全域 code 樣式（白底/深字在深色塊裡＝負責人回饋的醜白框） */
.code-block code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}

/* Code remains legible on a stable deep editing surface in either theme. */
.cb-kw {
  color: #8cc8ff;
}

.cb-str {
  color: #e6c78a;
}

.cb-cm {
  color: #b5a697;
  font-style: italic;
}

/* ── 側欄收合（負責人需求 2026-07-17；桌面限定——行動版本就是 tabbar） ── */
.sidebar-toggle {
  min-height: 26px;
  width: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.sidebar-toggle:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

@media (min-width: 721px) {
  .sidebar {
    transition:
      width 0.18s ease,
      padding 0.18s ease;
  }

  .content {
    transition: margin-left 0.18s ease;
  }

  /* 收合＝68px 圖示欄：文字以 font-size:0 隱藏（連結內是裸文字節點），
   * 圖示 .nav-mark 還原字級；語意由 title tooltip＋aria 承接 */
  .app-shell.sidebar-collapsed {
    --sidebar-width: 68px;
  }

  .app-shell.sidebar-collapsed .sidebar {
    padding: 26px 10px 14px;
  }

  .app-shell.sidebar-collapsed .sidebar-brand-row {
    justify-content: center;
  }

  .app-shell.sidebar-collapsed .brand,
  .app-shell.sidebar-collapsed .pilot-dot {
    display: none;
  }

  .app-shell.sidebar-collapsed .workspace-switch {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .app-shell.sidebar-collapsed .workspace-name {
    display: none;
  }

  .app-shell.sidebar-collapsed .workspace-short {
    display: inline;
  }

  .app-shell.sidebar-collapsed .primary-nav a,
  .app-shell.sidebar-collapsed .nav-button {
    font-size: 0;
    justify-content: center;
    gap: 0;
  }

  .app-shell.sidebar-collapsed .primary-nav a .nav-mark,
  .app-shell.sidebar-collapsed .nav-button .nav-mark {
    font-size: 15px;
    margin: 0;
  }

  .app-shell.sidebar-collapsed .nav-account-text {
    display: none;
  }

  .app-shell.sidebar-collapsed .sidebar-account a {
    justify-content: center;
  }

  .app-shell.sidebar-collapsed .sidebar-account .lang-select {
    justify-content: center;
    padding: 0;
  }

  .app-shell.sidebar-collapsed .sidebar-account .lang-select select {
    position: absolute;
    inset: 0;
    opacity: 0;
    padding: 0;
  }

  .app-shell.sidebar-collapsed .sidebar-account .lang-select-caret {
    display: none;
  }
}

@media (max-width: 720px) {
  .sidebar-toggle {
    display: none;
  }

  /* 行動版底部欄放不下語言控制——帳戶頁的「語言」列是行動版唯一入口 */
  .sidebar-account .lang-select {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .content {
    transition: none;
  }
}

@media (max-width: 46rem) {
  /* 註冊對話框窄版：consent 預覽移到表單上方（負責人回饋：在最下面看不到即時更新） */
  .devreg-grid .consent-preview {
    order: -1;
  }
}

/* 程式碼區塊的右上角複製鈕（IDE 慣例；負責人回饋 2026-07-17） */
.code-wrap {
  position: relative;
}

.code-wrap .code-block {
  padding-right: 48px; /* 首行不鑽到按鈕下面 */
}

.code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 7px;
  background: rgb(255 255 255 / 6%);
  color: #dbe3ea;
  font-size: 13px;
  line-height: 1;
  place-items: center;
}

.code-copy:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

/* SVG 版 nav icon（負責人回饋 2026-07-17：字符 icon 難懂）——線條圖示、繼承文字色 */
.nav-mark svg {
  display: block;
}

.nav-mark:has(svg) {
  transform: none; /* 光學補償只適用字符 icon；SVG 天生置中 */
}

/* 收合側欄的 hover/focus 飛出標籤（負責人回饋：只有 icon 太難認；
 * 原生 title 延遲慢——自製即時 tooltip，語意同步給鍵盤 focus） */
@media (min-width: 721px) {
  /* 只作用於側欄內的項目——[data-tip] 不加 .sidebar 範圍會誤傷頁面上其他帶
   * data-tip 的元素（實例：複製鈕被 position:relative 蓋掉 absolute、掉到區塊下方；
   * 負責人以 DevTools 抓到 2026-07-17） */
  .app-shell.sidebar-collapsed .sidebar [data-tip] {
    position: relative;
  }

  .app-shell.sidebar-collapsed .sidebar [data-tip]:hover::after,
  .app-shell.sidebar-collapsed .sidebar [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 40;
    top: 50%;
    left: calc(100% + 12px);
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--ink);
    color: var(--page);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
    box-shadow: 0 4px 14px rgb(17 28 40 / 25%);
    pointer-events: none;
  }
}

/* 複製鈕文字標籤（負責人回饋：光一個怪按鈕＋打勾不知其意）——
 * hover＝「複製」、成功後 1.5s 常駐「已複製」；標籤出現在按鈕左側（不出血右緣） */
.code-copy:hover::after,
.code-copy.copied::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 5;
  top: 50%;
  right: calc(100% + 8px);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--page);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 概覽・最近請求迷你清單（tiles 之下的內容——完整明細在「請求」分頁） */
.ov-recent {
  margin-top: 22px;
}

.ov-recent-head {
  margin-bottom: 4px;
}

.ov-recent-head h3 {
  margin: 0;
}

.ov-recent-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.ov-recent-row:last-child {
  border-bottom: 0;
}

.ov-recent-row .muted {
  flex: none;
  font-size: 12.5px;
}

.ov-recent-row span:nth-child(2) {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-recent-row .num {
  margin-left: auto;
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* 維護模式橫幅（批 L-1）：頁首常駐、蓋過捲動——維護中不該讓人捲很久才知道 */
#maintenance-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--warning-soft);
  color: var(--warning);
  border-bottom: 1px solid #e8c98a;
  font-size: 14px;
  text-align: center;
}

/* 語言切換(v0.4.82 語言層):兩顆文字鈕,現用語系粗體;側欄裡沿用 nav-button 形 */
.lang-switch {
  display: flex;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 0.9em;
}
.lang-switch button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
}
.lang-switch button[aria-current="true"] {
  font-weight: 700;
  opacity: 1;
  border-color: currentColor;
}
/* 全域 button:hover 的實心深綠底會把這兩顆透明文字鈕變成深綠底深字（09-06 `pnpm verify hover` 抓到）：
   hover 只把不透明度拉滿＋淡底；現用語系保留 currentColor 邊框 */
.lang-switch button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--surface-subtle);
  color: inherit;
  opacity: 1;
}
.lang-switch button[aria-current="true"]:hover:not(:disabled) {
  border-color: currentColor;
}
/* 語言 select（顧問 P1-10，2026-09-04）：側欄帳戶區一顆 globe＋目前語言名，帳戶頁同款 inline。
   原生 select 去皮、字色跟列；caret 自畫（select 本身 appearance:none 各瀏覽器箭頭不一） */
.lang-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 590;
  cursor: pointer;
}

.lang-select:hover {
  background: var(--nav-hover, rgba(0, 0, 0, 0.04));
}

.lang-select select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 18px 0 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lang-select select:focus-visible {
  outline: 2px solid var(--focus, #0b5fcc);
  outline-offset: 2px;
  border-radius: 4px;
}

.lang-select-caret {
  position: absolute;
  right: 12px;
  pointer-events: none;
  font-size: 12px;
  opacity: 0.7;
}

.sidebar-account .lang-select {
  margin-top: 2px;
}

/* 帳戶頁：右側一顆有框的 select（跟表單控制同形） */
.lang-select-inline {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--page, #fff);
  font-weight: 500;
}

.lang-select-inline select {
  padding-right: 16px;
}

.lang-select-inline .lang-select-caret {
  right: 10px;
}

.settings-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-row-main .muted {
  font-size: 13px;
}

/* ═══ UX Step 1（2026-09-04）：開發者 Console 首次流程 ═══════════════════════ */

/* 頁首麵包屑（顧問 P1-06：H1＝App 名；Apps／切換器在上一行） */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.crumbs a {
  color: var(--link);
}

.crumb-sep {
  color: var(--border-strong);
}

.crumb-here {
  color: var(--muted-strong);
  font-weight: 600;
}

.crumb-select {
  min-height: 32px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 650;
}

/* 空狀態＝入口頁（顧問 §5.1） */
.dev-empty h2 {
  margin: 0;
  font-size: 22px;
}

.dev-empty p {
  max-width: 520px;
}

.dev-empty .text-link {
  color: var(--link);
  font-size: 14px;
}

/* App 清單（IA-001） */
.app-list {
  display: grid;
}

.app-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.app-list-row:last-child {
  border-bottom: 0;
}

.app-list-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.app-list-name {
  padding: 0;
  font-size: 16px;
  font-weight: 650;
  text-align: left;
}

.app-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

/* 串接狀態欄位：先佔字再補真值（developer.js）——寬度固定為最長狀態，補上時不改行、列不長高（09-06 首載量測） */
.app-list-setup {
  display: inline-block;
  min-width: 9.5em;
}

.app-list-setup:empty {
  display: none;
}

/* 狀態列（顧問 P1-07：App 狀態與串接狀態分開） */
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* 建立流程（全頁三畫面＋rail） */
.console-shell .task-sheet.create-flow {
  width: min(100%, 760px);
  margin: clamp(24px, 5svh, 56px) auto 32px;
  padding: clamp(24px, 3.5vw, 40px);
}
.create-flow .task-sheet-head {
  margin-bottom: var(--form-section-gap);
}

.setup {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.create-main,
.setup-main {
  max-width: 720px;
}

.create-main .q,
.cb-field legend.q {
  display: block;
  margin-bottom: 0;
  font-size: var(--text-label);
  font-weight: 550;
  line-height: 1.5;
}

.create-main .form-actions {
  justify-content: flex-start;
}

.create-main .form-actions #devreg-next,
.create-main .form-actions #devreg-submit {
  margin-left: auto;
}

/* 建立流程 v2：畫面 2「貼給 AI」 */
.prompt-block {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-help);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}

.prompt-block:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.handoff-screen {
  gap: 12px;
}

.handoff-screen > p {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.handoff-screen h3 {
  margin: 4px 0 6px;
  font-size: 20px;
}

.handoff-screen .eyebrow.ok {
  color: var(--link);
}

.handoff-actions {
  justify-content: flex-start;
  flex-direction: row; /* 窄窗也按 DOM 順序呈現：先複製，再前往進度。 */
}

.handoff-screen button {
  white-space: normal;
  overflow-wrap: anywhere;
  padding-block: 10px;
  line-height: 1.35;
}

.handoff-exits {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Setup 分頁的四步狀態清單（點任一步＝開精靈到那一步） */
.setup-status {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.status-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* :hover:not(:disabled) 拉高 specificity——否則被全域 button:hover 的深綠底蓋掉（09-06 負責人：深綠底黑字讀不到） */
.status-btn:hover:not(:disabled) {
  background: var(--surface-subtle);
  color: var(--ink);
}

/* 還沒輪到的步（reachableStep）：不可點、不變色；文字保持可讀（不用全域 disabled 的 0.48 透明度） */
.status-btn:disabled {
  cursor: default;
  opacity: 1;
  color: var(--muted);
}

.status-btn small.st-locked {
  color: var(--muted);
}

.status-btn .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-strong);
  flex: none;
}

.setup-status li[data-state="done"] .num {
  border-color: var(--accent);
  color: var(--link);
}

.setup-status li[aria-current="step"] .num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.status-btn small {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.status-btn small.st-needs_action,
.status-btn small.st-failed {
  color: var(--danger);
}

.status-btn small.st-done {
  color: var(--link);
}

/* 滿版設定精靈（v2；比照 Firebase 建立資料庫：× 在左上、直式步驟編號、當前步展開） */
.wizard {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  background: var(--page);
  padding: 20px 16px 72px;
}

body.wizard-open {
  overflow: hidden;
}

.wizard-inner {
  max-width: 900px;
  margin: 0 auto;
}

.wizard-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 8px 0 32px;
}

.wizard-head h1 {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.wizard-head h1:focus {
  outline: none;
}

.wizard-close {
  flex: none;
  margin-top: 4px;
}

.wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-step {
  position: relative;
  padding: 0 0 26px 56px;
}

.wizard-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.wizard-step:last-child::before {
  display: none;
}

.wizard-num {
  position: absolute;
  left: 0;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted-strong);
}

.wizard-step[data-state="done"] .wizard-num {
  border-color: var(--accent);
  color: var(--link);
}

.wizard-step[aria-current="step"] .wizard-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.wizard-step[data-state="failed"] .wizard-num {
  border-color: var(--danger);
  color: var(--danger);
}

.wizard-headbtn {
  display: block;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 標題鈕沒有自己的 hover 規則時會吃到全域 button:hover 的深綠底（深綠底黑字）：hover 只加底線 */
.wizard-headbtn:hover:not(:disabled) {
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
}

.wizard-headbtn:disabled {
  cursor: default;
  opacity: 1;
}

.wizard-step[data-locked="true"] .wizard-label {
  color: var(--muted);
}

.wizard-step[data-locked="true"] .wizard-num {
  border-style: dashed;
  color: var(--muted);
}

.wizard-label {
  display: block;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
}

.wizard-step:not([aria-current="step"]) .wizard-label {
  color: var(--muted-strong);
}

.wizard-label small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-help);
  font-weight: 500;
  color: var(--muted);
}

.wizard-body {
  margin-top: 10px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  max-width: 780px;
}

.wizard-body .setup-step-body > .muted:first-child {
  margin-top: 0;
}

.wizard-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.env-block {
  display: grid;
  gap: var(--field-label-gap);
  margin-bottom: 10px;
}

.env-block > :is(.summary-label, .env-chips, .field-help) {
  margin: 0;
}

@media (max-width: 720px) {
  .wizard {
    padding: 12px 12px 56px;
  }

  .wizard-head h1 {
    font-size: 22px;
  }

  .wizard-step {
    padding-left: 46px;
  }

  .wizard-num {
    width: 32px;
    height: 32px;
  }

  .wizard-step::before {
    left: 15px;
  }

  .wizard-body {
    padding: 14px;
  }
}

.setup-step-body h3 {
  margin: 0 0 12px;
  font-size: 20px;
}

.setup-step-body h4 {
  margin: var(--form-field-gap) 0 var(--field-label-gap);
  font-size: var(--text-label);
}

.setup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.handoff-card {
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.handoff-card.primary {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.handoff-card .handoff-title {
  display: block;
  font-size: 15.5px;
}

.handoff-card > p.muted {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.handoff-card.primary .setup-actions {
  margin-top: 14px;
}

.handoff-card.manual > summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.handoff-card.manual > summary::-webkit-details-marker {
  display: none;
}

.handoff-card.manual > summary .muted {
  font-size: 13px;
}

.handoff-card.manual > summary::before {
  content: "▸";
  float: right;
  color: var(--muted);
}

.handoff-card.manual[open] > summary::before {
  content: "▾";
}

.manual-body {
  margin-top: 8px;
}

/* 驗證檢查清單 */
.checks {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.check-mark {
  display: grid;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  place-items: center;
}

.check[data-state="ok"] .check-mark,
.check[data-state="prior"] .check-mark {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
}

.check[data-state="fail"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.check[data-state="fail"] .check-mark {
  border-color: var(--danger);
  color: var(--on-accent);
  background: var(--danger);
}

.check[data-state="running"] .check-mark {
  border-color: var(--info);
  color: var(--info);
}

.check-text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.check-detail {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.done-summary .receipt-line code {
  overflow-wrap: anywhere;
}

/* 中寬度（側欄 248px 之下主欄不足 600px）：rail 改橫排在上、內容單欄 */
@media (max-width: 1030px) {
  .create-grid,
  .setup {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .setup-rail-wrap {
    position: static;
  }

  .setup-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .rail-item,
  .rail-btn {
    padding: 6px 8px;
  }
}

@media (max-width: 720px) {
  .setup-compact {
    display: block;
  }

  .setup-rail {
    display: none;
  }

  .app-list-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══ UX Step 2（2026-09-04）：零資料狀態、錢包側、儲值視窗 ═══════════════════ */

/* 清單類空狀態（活動／已連接 App／請求）：標題＋一句話＋單一下一步 */
.feed-empty {
  padding: 40px 18px 44px;
}

.feed-empty h3 {
  margin: 0;
  font-size: 18px;
}

.feed-empty p {
  max-width: 520px;
  margin: 0;
}

.feed-empty .setup-actions {
  justify-content: center;
  margin-top: 4px;
}

.feed-empty .text-link {
  color: var(--link);
  font-size: 14px;
}

/* 錢包 $0 的「要先做什麼」卡 */
.wallet-next {
  margin: 0 0 30px;
}

.wallet-next h3 {
  margin: 0 0 6px;
}

.wallet-next .setup-actions {
  margin-top: 12px;
}

.wallet-next .text-link {
  color: var(--link);
  font-size: 14px;
}

/* 金額一律等寬數字（顧問 §9.4） */
.wallet-amount,
.stat-value,
.usage-amount,
.tile-value,
.num,
.check-list dd,
.pay-balance {
  font-variant-numeric: tabular-nums;
}

/* 請求表：請求 ID 欄 */
.usage-table td.rid code {
  font-size: 12px;
}

/* 儲值視窗：桌面加寬到 680px、兩步、主 CTA 固定底部（顧問 P1-09） */
.topup-dialog {
  width: min(calc(100% - 32px), 680px);
  padding-bottom: 0;
}

.topup-stepline {
  margin: 0 0 14px;
  color: var(--muted-strong);
  font-size: var(--text-help);
  font-weight: 650;
}

.topup-live {
  min-height: 20px;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 英文標籤較長：兩欄依內容分配，右欄數字仍右對齊 */
.topup-dialog .check-list > div {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.topup-terms {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 12px;
}

.topup-terms summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-help);
  font-weight: 600;
}

.topup-terms .empty,
.topup-dialog #topup-mode-note {
  padding: 10px 0 6px;
  text-align: left;
}

.topup-dialog .topup-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 18px -24px 0;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.topup-dialog .dialog-note {
  margin: 0 -24px;
  padding: 0 24px 16px;
  background: var(--surface);
}

@media (max-width: 720px) {
  .feed-empty .setup-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-empty .setup-actions button {
    width: 100%;
  }
}

/* C2 setup session（2026-09-04）：交給 AI 卡底下的 CLI 連線狀態列（等待＝脈動點；已連線＝綠點） */
.cli-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: var(--text-help);
  color: var(--muted);
}

.cli-status.connected {
  color: var(--success);
}

.cli-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

.cli-dot.pulse {
  background: var(--warning);
}

/* 顧問 P1-01（2026-09-04）：消費者預設不顯示開發者切換器。放檔尾＋加權選擇器，
   贏過上面所有 display（基本／行動版 media／收合側欄 .app-shell.sidebar-collapsed 的覆寫） */
.workspace-switch[hidden],
.app-shell.sidebar-collapsed .workspace-switch[hidden] {
  display: none;
}

/* 活動頁儲值列展開層：「查看訂單狀態」連結（顧問 §9.5：儲值列給付款方式＋訂單參考號） */
.act-detail .act-order-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

/* 精靈驗證步「接下來」（登入通了、第一筆請求未結算）：兩條路＋先回概覽 */
.setup-next {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.setup-next h4 {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
}
.setup-next-way {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.setup-next-way code.cmd {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* 精靈驗證步的專用錯誤畫面（顧問 §13.2：發生什麼 → 原因 → 觀測值 → 修正） */
.verify-error {
  margin: 0.75rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--danger-soft);
}
.verify-error h4 {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
}
.verify-error .observed > span {
  display: block;
  margin-bottom: 0.2rem;
}
.verify-error .observed code {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
}
.cli-status .cli-failed {
  color: var(--danger, #b42318);
}

/* ── 無障礙一輪（顧問 A11Y-001／P2-02；axe-core WCAG 2.1 AA，`pnpm verify a11y`）── */
/* tablist 只放 tab：「更多」鈕是兄弟節點；display: contents 讓分頁仍是同一列的 flex 項目 */
.dev-subnav .dev-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
/* 可橫向捲動的程式碼區塊要能聚焦（鍵盤使用者才捲得動）；聚焦有可見外框 */
.code-block:focus-visible,
.prompt-block:focus-visible,
pre[tabindex]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
/* 單行 code（callback 網址、client id）：換行而不是藏在橫向捲動裡 */
.uri-row code,
.settings-section code {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: visible;
}

/* 0121：美國地址區塊（補填門與帳戶頁共用）——跟 .form-stack 一樣直排；提示字放上面 */
.us-address {
  display: grid;
  gap: var(--form-field-gap);
}

.us-address .form-note {
  margin: 0;
}

/* Shared-credit shell. Open content, quiet evidence, glass navigation and actions. */
.console-shell .sidebar {
  position: relative;
  inset: auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: auto;
  min-height: 90px;
  padding: 16px clamp(20px, 4vw, 64px);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--page);
}
.console-shell.sidebar-collapsed .sidebar {
  padding: 16px clamp(20px, 4vw, 64px);
}
.console-shell .sidebar-brand-row {
  grid-column: 1;
  grid-row: 1;
  padding: 0;
  gap: 12px;
  justify-content: flex-start;
}
.console-shell .sidebar-brand-row .brand {
  display: inline-flex;
  align-items: center;
  font-size: 29px;
  font-weight: 520;
  letter-spacing: -1.8px;
}
.console-shell .brand > span:not(.brand-symbol),
.console-shell .sidebar-toggle {
  display: none;
}
.console-shell .pilot-dot {
  display: inline;
  font-size: 10px;
}
.console-shell .developer-header-context {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 200px;
}
.console-shell:not([data-workspace="developer"]) .developer-header-context,
.console-shell .developer-header-context:empty {
  display: none;
}
.console-shell .sidebar-navigation {
  display: contents;
}
.console-shell .primary-nav {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  min-width: 0;
}
.console-shell .primary-nav > span {
  display: flex;
  align-items: center;
  gap: 22px;
  height: auto;
}
.console-shell .primary-nav a {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 8px 0;
  border-radius: 0;
  gap: 0;
  font-size: 14px;
  font-weight: 450;
  white-space: nowrap;
  color: var(--muted);
  transition:
    color 160ms ease,
    box-shadow 200ms var(--motion-ease);
}
.console-shell .primary-nav a .nav-mark {
  display: none;
}
.console-shell .primary-nav a:hover {
  background: transparent;
  color: var(--ink);
}
.console-shell .primary-nav a.active {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 -2px var(--accent);
}
.console-shell .workspace-switch {
  grid-row: 1;
  grid-column: 4;
  width: auto;
  margin: 0;
  padding: 3px;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: transparent;
}
.console-shell .workspace-switch a {
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: nowrap;
}
.console-shell .workspace-switch a[aria-current="true"] {
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: none;
}
.console-shell .workspace-name {
  display: inline;
}
.console-shell .workspace-short {
  display: none;
}
.console-shell .sidebar-account {
  grid-row: 1;
  grid-column: 5;
  display: flex;
  width: auto;
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  border-left: 1px solid var(--border);
  align-items: center;
  gap: 5px;
}
.console-shell .sidebar-account > a {
  display: flex;
  width: auto;
  min-height: 44px;
  padding: 4px;
  gap: 8px;
  border-radius: var(--radius-control);
  text-align: left;
}
.console-shell .sidebar-account > a:hover {
  background: var(--surface-subtle);
}
.console-shell .nav-account-text {
  display: grid;
  font-size: 12px;
}
.console-shell .nav-email {
  display: block;
  max-width: 132px;
  font-size: 10px;
}
.console-shell .sidebar-account [hidden] {
  display: none;
}
.console-shell .sidebar [data-tip]::after {
  display: none;
}
.console-shell .content {
  margin-left: 0;
  padding: 0;
  min-height: calc(100vh - 90px);
}
.console-shell .page {
  min-height: calc(100vh - 90px);
  padding: 42px 48px 64px;
}
.console-shell .page-header {
  margin-bottom: 30px;
}
.console-shell h1 {
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 520;
  letter-spacing: -1.2px;
  line-height: 1.3;
}
.console-shell .eyebrow {
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.console-shell h2 {
  font-weight: 550;
}
.console-shell button,
.console-shell .button-link,
.wizard button,
dialog button {
  border-radius: var(--radius-control);
  font-weight: 550;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.console-shell :is(input, textarea, select),
.wizard :is(input, textarea, select),
dialog :is(input, textarea, select) {
  border-radius: var(--radius-control);
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}
.console-shell :is(button, a, summary, input, textarea, select):focus-visible,
.wizard :is(button, a, summary, input, textarea, select):focus-visible,
dialog :is(button, a, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
.console-shell .header-tools {
  position: relative;
}
.console-shell .header-tools > summary {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 44px;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  list-style: none;
}
.console-shell .header-tools > summary::-webkit-details-marker {
  display: none;
}
.console-shell .header-tools > summary:hover,
.console-shell .header-tools[open] > summary {
  background: var(--surface-subtle);
  color: var(--ink);
}
.console-shell .header-tools-popup {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: 186px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
.console-shell .header-tools .nav-button,
.console-shell .header-tools .lang-select {
  display: flex;
  justify-content: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
  gap: 10px;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.console-shell .header-tools .nav-button:hover {
  background: var(--surface-subtle);
}
.console-shell .header-tools .lang-select select {
  position: static;
  opacity: 1;
  padding-right: 18px;
  color: var(--ink);
}
.console-shell .header-tools .lang-select-caret {
  display: inline;
}
.developer-app-picker {
  position: relative;
}
button.app-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-strong);
  font-size: 15px;
}
button.app-picker-trigger:hover:not(:disabled),
button.app-picker-trigger[aria-expanded="true"] {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: transparent;
}
.app-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-picker-popup {
  position: absolute;
  z-index: 65;
  top: calc(100% + 10px);
  left: 0;
  width: min(280px, calc(100vw - 40px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-popover);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
button.app-picker-item {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}
button.app-picker-item:hover:not(:disabled),
button.app-picker-item:focus-visible {
  background: var(--surface-subtle);
  color: var(--ink);
}
button.app-picker-item[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--ink);
}
.app-picker-check {
  margin-left: auto;
  color: var(--link);
}
.app-picker-popup hr {
  margin: 7px 8px;
  border: 0;
  border-top: 1px solid var(--border);
}

/* App identity remains available without competing with the next task. */
.console-shell #view-developer:has(.dev-app) > .page-header {
  min-height: 0;
  margin-bottom: 16px;
}
.console-shell #view-developer:has(.dev-app) > .page-header > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 8px;
}
.console-shell #view-developer:has(.dev-app) > .page-header .eyebrow {
  order: 1;
  flex-basis: auto;
  margin: 0 0 0 8px;
  font-size: var(--text-meta);
}
.console-shell #view-developer:has(.dev-app) #dev-title {
  font-size: 24px;
  letter-spacing: -0.6px;
}
.console-shell #view-developer:has(.dev-app) .crumbs {
  margin: 0;
}

/* One prominent task; system evidence stays in a quieter continuous band. */
.console-shell .developer-workspace {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.console-shell .dev-context-bar {
  min-height: 32px;
  padding: 0 0 12px;
}
.console-shell .dev-subnav {
  padding: 0;
  border-top: 0;
  border-bottom-color: var(--border);
}
.console-shell .dev-subnav button {
  border-radius: 0;
}
.console-shell .dev-subnav button[aria-selected="true"] {
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  font-weight: 550;
}
.console-shell .dev-panel {
  padding: 20px 0;
}
.console-shell .agent-setup {
  max-width: none;
  margin: 0;
}
.agent-focus {
  max-width: 760px;
  padding: 38px 0 0;
}
.agent-title {
  max-width: 720px;
  font-size: clamp(31px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.3;
  text-wrap: balance;
  white-space: pre-line;
}
.console-shell h2.agent-title {
  font-weight: 500;
}
.agent-description {
  max-width: 36em;
  margin: 20px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.8;
}
.agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 30px;
}
.console-shell .agent-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 48px;
  padding: 12px 20px;
  white-space: normal;
  line-height: 1.5;
}
.agent-primary-arrow {
  font-size: 22px;
  line-height: 1;
  transition: transform 180ms var(--motion-ease);
}
.agent-actions > button:hover:not(:disabled) .agent-primary-arrow {
  transform: translate(2px, -2px);
}
.handoff-copy-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--success);
  font-size: 13px;
}
.agent-tools {
  margin-top: 42px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.agent-tools > summary,
.agent-resources details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  gap: 20px;
  font-size: 13px;
  font-weight: 450;
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease;
}
.agent-tools > summary::-webkit-details-marker,
.agent-resources details > summary::-webkit-details-marker {
  display: none;
}
.agent-tools > summary::after,
.agent-resources details > summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  transition: transform 180ms var(--motion-ease);
}
.agent-tools[open] > summary::after,
.agent-resources details[open] > summary::after {
  transform: rotate(45deg);
}
.agent-tools > summary:hover,
.agent-resources details > summary:hover {
  color: var(--link);
}
.agent-resource-body {
  padding: 4px 0 24px;
}
.agent-resources details {
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.console-shell .agent-manual {
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 13px;
}
.agent-resources .prompt-block {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-control);
  border-left: 2px solid var(--accent);
}
.agent-record {
  font-size: 13px;
}
.agent-record .cli-status {
  align-items: flex-start;
  margin: 0 0 12px;
  line-height: 1.8;
}
.agent-record .agent-error-code {
  overflow-wrap: anywhere;
}
.agent-evidence-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
  margin-top: 30px;
  padding: 22px 30px 24px;
  background: var(--credit-band);
  color: var(--credit-band-text);
  border-radius: var(--radius-surface);
}
.agent-evidence-heading {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 8px;
  color: var(--credit-band-muted);
  font-size: 12px;
}
.agent-evidence-heading > :last-child {
  overflow-wrap: anywhere;
  text-align: right;
}
.agent-status {
  margin: 0;
  font-size: 21px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--credit-band-text);
}
.console-shell .agent-evidence-band .text-button {
  min-height: 44px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 450;
  color: var(--credit-band-muted);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.console-shell .agent-evidence-band .text-button:hover:not(:disabled) {
  color: var(--credit-band-text);
  background: transparent;
}
.console-shell .agent-evidence-band :is(button, a):focus-visible {
  outline-color: var(--credit-band-text);
}

/* Balances are a shared source, never per-App allocations. Holds retain their own label. */
.console-shell .wallet-summary,
.console-shell .wallet-summary.single {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 32px;
  padding: 28px 34px;
  border: 0;
  border-radius: var(--radius-surface);
  background: var(--credit-band);
  color: var(--credit-band-text);
}
.console-shell .wallet-primary {
  padding: 0;
  border: 0;
}
.console-shell .wallet-shared-label {
  margin: 0 0 20px;
  color: var(--credit-band-muted);
  font-size: 12px;
}
.console-shell .wallet-summary .summary-label {
  color: var(--credit-band-muted);
  font-size: 13px;
  font-weight: 450;
}
.console-shell .wallet-amount {
  margin: 0 0 8px;
  min-height: 86px;
  font-family: inherit;
  font-weight: 400;
  line-height: 86px;
  letter-spacing: -0.045em;
}
.console-shell .wallet-amount:not(.amount-long):not(.amount-xlong) {
  font-size: clamp(48px, 6vw, 76px);
}
.console-shell .wallet-unit {
  color: var(--credit-band-muted);
}
.console-shell .wallet-summary .info-btn {
  color: var(--credit-band-text);
  border-color: var(--credit-band-muted);
}
.console-shell .wallet-summary .info-btn:hover {
  background: transparent;
}
.console-shell .wallet-summary #topup-open {
  min-height: 46px;
  padding: 12px 20px;
  color: var(--credit-band-text);
  border-color: var(--credit-band-muted);
  background: transparent;
  font-size: 14px;
  font-weight: 450;
}
.console-shell .wallet-summary #topup-open:hover:not(:disabled) {
  background: color-mix(in srgb, var(--credit-band-text) 9%, transparent);
  border-color: var(--credit-band-text);
}
.console-shell .wallet-summary :is(button, a):focus-visible {
  outline-color: var(--credit-band-text);
}
.console-shell .wallet-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--credit-band-muted);
}
.console-shell .wallet-breakdown > div {
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
}
.console-shell .wallet-breakdown dt,
.console-shell .wallet-breakdown .breakdown-note {
  color: var(--credit-band-muted);
  font-size: 12px;
}
.console-shell .wallet-breakdown dd {
  color: var(--credit-band-text);
  font-size: 14px;
  font-weight: 450;
}
.console-shell .wallet-breakdown .breakdown-note {
  font-size: 12px;
}
.console-shell .wallet-breakdown .help-text {
  color: var(--credit-band-muted);
}
.console-shell .wallet-breakdown .breakdown-explain {
  justify-self: end;
  max-width: 32em;
}
.console-shell .page-wallet > .page-header {
  min-height: 0;
}
.console-shell .page-wallet > .page-header h1 {
  font-size: 28px;
}

/* Open lists and ruled sections preserve the same hierarchy in dense workflows. */
.console-shell .app-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.console-shell .app-list-row {
  padding: 24px 4px;
  transition: background 160ms ease;
}
.console-shell .app-list-row:hover {
  background: var(--surface-subtle);
}
.console-shell .app-list-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.console-shell .section-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.console-shell .section-heading:has(+ .activity-feed) {
  border-bottom: 0;
  padding-bottom: 0;
}
.console-shell .section-heading h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.console-shell :is(.task-sheet, .next-card, .payout-summary, .goal-card) {
  border-radius: var(--radius-panel);
  box-shadow: none;
}
.console-shell .settings-section {
  border-color: var(--border);
}
.console-shell .connection-body {
  background: transparent;
}
.console-shell .prompt-block {
  border-radius: var(--radius-control);
  padding: 20px;
}
.console-shell .app-tabs {
  gap: 24px;
}
.console-shell .chart-section {
  border-radius: 0;
}
.console-shell .range-btn {
  border-radius: var(--radius-control);
}
.console-shell .badge {
  font-weight: 500;
}
.wizard :is(.wizard-body, .code-block, .next-card, .setup-next, .verify-error, .testmode-box) {
  border-radius: var(--radius-control);
}
dialog {
  border-radius: var(--radius-surface);
}
dialog::backdrop {
  background: rgb(35 27 23 / 46%);
}

@media (max-width: 1180px) {
  .console-shell .sidebar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px 20px;
    min-height: 136px;
  }
  .console-shell .developer-header-context {
    grid-column: 2;
    grid-row: 1;
  }
  .console-shell .sidebar-account {
    grid-column: 3;
    grid-row: 1;
  }
  .console-shell .primary-nav {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-self: start;
  }
  .console-shell .workspace-switch {
    grid-column: 3;
    grid-row: 2;
  }
}
@media (max-width: 720px) {
  .console-shell .sidebar,
  .console-shell.sidebar-collapsed .sidebar {
    padding: 14px 18px 10px;
    gap: 10px;
  }
  .console-shell .sidebar-brand-row .brand {
    font-size: 25px;
    letter-spacing: -1.4px;
  }
  .console-shell .pilot-dot {
    display: none;
  }
  .console-shell .primary-nav {
    grid-column: 1 / 4;
    grid-row: 3;
    justify-self: stretch;
  }
  .console-shell .primary-nav > span {
    gap: 24px;
    overflow-x: auto;
  }
  .console-shell .primary-nav a {
    font-size: 13px;
  }
  .console-shell .developer-header-context {
    grid-column: 1 / 3;
    grid-row: 2;
    max-width: 220px;
  }
  .console-shell .workspace-switch {
    grid-column: 3;
    grid-row: 2;
  }
  .console-shell .workspace-name {
    display: none;
  }
  .console-shell .workspace-short {
    display: inline;
  }
  .console-shell .sidebar-account {
    grid-column: 2 / 4;
    justify-self: end;
    padding-left: 8px;
  }
  .console-shell .nav-account-text > span:first-child {
    display: none;
  }
  .console-shell .nav-account-text {
    min-height: 0;
  }
  .console-shell .nav-email {
    max-width: 115px;
    font-size: 10px;
  }
  .console-shell .page {
    padding: 28px 24px 52px;
  }
  .console-shell .page-header {
    margin-bottom: 24px;
  }
  .console-shell .header-tools-popup {
    right: 0;
  }
  .agent-focus {
    padding-top: 24px;
  }
  .agent-title {
    font-size: clamp(30px, 7.8vw, 38px);
  }
  .agent-description {
    font-size: 15px;
    margin-top: 18px;
  }
  .agent-actions {
    gap: 14px;
    margin-top: 26px;
  }
  .agent-tools {
    margin-top: 32px;
  }
  .agent-evidence-band {
    padding: 20px 24px;
    gap: 6px 20px;
    margin-top: 24px;
  }
  .agent-status {
    font-size: 18px;
  }
  .console-shell .wallet-summary,
  .console-shell .wallet-summary.single {
    gap: 20px;
    padding: 24px;
  }
  .console-shell .wallet-amount {
    min-height: 66px;
    line-height: 66px;
  }
  .console-shell .wallet-breakdown {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 4px;
  }
  .console-shell .wallet-breakdown .breakdown-explain {
    justify-self: start;
  }
}
@media (max-width: 480px) {
  .console-shell .wallet-summary,
  .console-shell .wallet-summary.single {
    grid-template-columns: minmax(0, 1fr);
  }
  .console-shell .wallet-summary #topup-open {
    justify-self: start;
  }
  .console-shell .wallet-breakdown {
    grid-column: 1;
  }
}
@media (max-width: 380px) {
  .console-shell .page {
    padding-right: 18px;
    padding-left: 18px;
  }
  .agent-evidence-band {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 18px;
    padding-left: 18px;
  }
  .agent-evidence-band .text-button {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .console-shell *,
  .console-shell *::before,
  .console-shell *::after,
  .wizard *,
  dialog * {
    /* biome-ignore lint/complexity/noImportantStyles: Accessibility preference must override every shared component transition. */
    transition: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: Accessibility preference must override every shared component animation. */
    animation: none !important;
  }
}

/* Compact control optics and the shared-credit content hierarchy. */
.console-shell .sidebar {
  min-height: 104px;
  background: color-mix(in srgb, var(--page) 94%, transparent);
}
.console-shell .sidebar-brand-row .brand {
  gap: 12px;
  font-weight: 650;
  letter-spacing: -1.4px;
}
.brand .brand-symbol img {
  height: 30px;
}
.brand-symbol svg {
  width: 21px;
  height: 21px;
}
.console-shell .page {
  padding-top: 46px;
}
.console-shell .primary-nav > span {
  gap: 4px;
}
.console-shell .primary-nav a {
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
}
.console-shell .primary-nav a .nav-mark {
  display: inline-flex;
}
.console-shell .primary-nav a.active {
  color: var(--link);
  box-shadow: none;
}
.console-shell .primary-nav .liquid-has-selection a.active {
  color: var(--on-accent);
}
.console-shell .workspace-switch {
  border-radius: 999px;
  border-color: transparent;
  background: var(--surface-subtle);
}
.console-shell .workspace-switch a {
  border-radius: 999px;
}
.console-shell .workspace-switch a[aria-current="true"] {
  background: var(--surface);
  box-shadow: 0 2px 5px rgb(14 52 92 / 5%);
}
.console-shell .app-picker-trigger {
  min-height: 48px;
  padding: 10px 18px;
  color: var(--ink);
  border-radius: 999px;
}
.console-shell .app-picker-trigger.liquid-surface,
.console-shell .app-picker-popup.liquid-surface,
.console-shell .app-picker-trigger.liquid-surface:hover,
.console-shell .app-picker-trigger.liquid-surface[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
}
.console-shell .app-picker-popup.liquid-surface {
  box-shadow: none;
}
.console-shell .app-picker-check {
  color: var(--link);
}
.console-shell .dev-subnav {
  align-items: center;
  gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 0;
}
.console-shell .dev-tabs {
  gap: 4px;
  padding: 5px;
}
.console-shell .dev-tabs > button {
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.console-shell .dev-subnav button[aria-selected="true"] {
  border: 0;
  background: var(--accent-soft);
  color: var(--link);
}
.console-shell .dev-tabs.liquid-has-selection > button[aria-selected="true"] {
  background: transparent;
  color: var(--on-accent);
}
.console-shell .agent-focus {
  padding-top: 38px;
}
.console-shell h2.agent-title {
  max-width: 760px;
  font-size: clamp(34px, 4.7vw, 58px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.045em;
}
.agent-title-accent {
  display: block;
  color: var(--link);
}
.agent-description {
  max-width: 36em;
  margin-top: 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
}
.console-shell .agent-actions > button {
  justify-content: center;
  min-height: 58px;
  padding: 14px 26px;
  gap: 12px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
}
.agent-action-icon {
  flex: none;
  width: 22px;
  height: 22px;
}
.console-shell .agent-actions > button.liquid-surface,
.console-shell .wallet-summary #topup-open.liquid-surface,
.console-shell #wallet-next-topup.liquid-surface {
  border-color: transparent;
  background: transparent;
  color: var(--on-accent);
}
.console-shell .agent-actions > button.liquid-surface:hover:not(:disabled),
.console-shell .wallet-summary #topup-open.liquid-surface:hover:not(:disabled),
.console-shell #wallet-next-topup.liquid-surface:hover:not(:disabled) {
  background: transparent;
  --liquid-body: color-mix(in srgb, var(--accent-hover) var(--glass-tint), transparent);
}
.agent-tools {
  max-width: 760px;
  margin-top: 30px;
  border-top: 0;
}
.agent-evidence-band {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}
.agent-status {
  font-size: 16px;
  font-weight: 550;
}
.agent-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--muted);
}
.agent-status[data-state="waiting"]::before {
  background: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-soft);
}
.agent-status[data-state="failed"]::before {
  background: var(--danger);
}
.agent-status[data-state="done"]::before {
  background: var(--success);
}
.console-shell .wallet-summary,
.console-shell .wallet-summary.single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding: 24px 0 30px;
  background: transparent;
  border-radius: 0;
}
.console-shell .wallet-amount {
  font-weight: 600;
  letter-spacing: -0.055em;
}
.console-shell .wallet-summary #topup-open {
  margin-top: 20px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}
.console-shell .wallet-breakdown {
  width: 100%;
  border-color: var(--border);
}
.console-shell .wallet-summary :is(button, a):focus-visible {
  outline-color: var(--link);
}
.auth-main {
  border-radius: var(--radius-surface);
}
.auth-copy h1 {
  letter-spacing: -0.04em;
  font-weight: 650;
}
.auth-main .button-block {
  border-radius: 999px;
  min-height: 50px;
}
dialog::backdrop {
  backdrop-filter: blur(8px);
}
@media (max-width: 1180px) {
  .console-shell .sidebar {
    gap: 14px 18px;
  }
  .console-shell .primary-nav a {
    padding-inline: 12px;
  }
}
@media (max-width: 720px) {
  .console-shell .sidebar {
    min-height: 0;
  }
  .console-shell .page {
    padding: 26px 20px 48px;
  }
  .console-shell .brand .brand-symbol img {
    height: 26px;
  }
  .console-shell .sidebar-brand-row .brand {
    gap: 9px;
  }
  .console-shell .primary-nav a {
    gap: 6px;
    padding: 10px 12px;
  }
  .console-shell .agent-focus {
    padding-top: 24px;
  }
  .console-shell h2.agent-title {
    font-size: clamp(30px, 8.5vw, 42px);
  }
  .agent-description {
    font-size: 16px;
  }
  .console-shell .agent-actions > button {
    min-height: 56px;
  }
  .agent-evidence-band {
    padding: 18px;
  }
  .console-shell .dev-tabs > button {
    padding-inline: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog::backdrop {
    backdrop-filter: none;
  }
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

@media (forced-colors: active) {
  .console-shell .agent-actions > button.liquid-surface,
  .console-shell .wallet-summary #topup-open.liquid-surface,
  .console-shell #wallet-next-topup.liquid-surface,
  .console-shell .app-picker-trigger.liquid-surface {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .console-shell .dev-tabs.liquid-has-selection > button[aria-selected="true"],
  .console-shell .primary-nav .liquid-has-selection a.active {
    color: HighlightText;
    background: Highlight;
  }
}

/* Every console page shares the floating header's reading edge. The mask also
 * intercepts content hidden above it, while header menus remain in the layer above. */
html:has(.console-shell:not([hidden])) {
  scroll-padding-top: var(--console-header-end, 160px);
}
.console-shell:not([hidden])::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 29;
  height: calc(var(--console-header-end, 160px) + 24px);
  background: linear-gradient(
    to bottom,
    var(--page) 0,
    var(--page) var(--console-header-end, 160px),
    transparent 100%
  );
}
@media (max-width: 720px) {
  html:has(.console-shell:not([hidden])) {
    scroll-padding-top: 0;
  }
  .console-shell:not([hidden])::before {
    display: none;
  }
}
@media (forced-colors: active) {
  .console-shell:not([hidden])::before {
    height: var(--console-header-end, 160px);
    background: Canvas;
  }
}

/* One material system across the shell, grouped content and floating controls.
 * Large surfaces use a quiet CSS blur; only compact controls get refraction maps.
 * Information stays opaque and financial/permission states keep semantic colors. */
body,
.auth-layout {
  background:
    radial-gradient(ellipse 72vw 48rem at 94% -8rem, var(--canvas-light), transparent 72%),
    radial-gradient(ellipse 60vw 48rem at -12% 42rem, var(--canvas-shade), transparent 75%),
    var(--page);
  background-repeat: no-repeat;
}
.console-shell .sidebar,
.console-shell.sidebar-collapsed .sidebar {
  position: sticky;
  top: 16px;
  width: calc(100% - 32px);
  min-height: 88px;
  margin: 16px 16px 0;
  padding: 14px clamp(18px, 2.8vw, 40px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: var(--glass-bar-bg);
  box-shadow: var(--glass-inset), var(--glass-elevation);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
}
.console-shell .sidebar-account {
  border-left: 0;
  padding-left: 0;
  gap: 8px;
}
.console-shell .sidebar-account > a,
.console-shell .header-tools > summary {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
}
.console-shell .sidebar-account > a {
  padding: 8px 12px;
}
.console-shell .header-tools > summary {
  width: 42px;
  min-height: 42px;
}
.console-shell .header-tools > summary:hover,
.console-shell .header-tools[open] > summary,
.console-shell .sidebar-account > a:hover {
  background: var(--glass-input-bg);
}
.console-shell .page {
  max-width: 1184px;
  padding: 38px clamp(24px, 3.5vw, 48px) 64px;
}
.console-shell .page-header {
  margin-bottom: 28px;
}
.console-shell .page-section,
.console-shell .account-section + .account-section {
  margin-top: 24px;
}
.console-shell
  :is(.page-section, .wallet-summary, .payout-summary, .task-sheet, .next-card, .settings-section),
.console-shell :is(.app-list, .activity-feed-full, .connection),
.auth-form-wrap,
.auth-card,
.pay-receipt,
.wizard-body,
dialog {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-surface);
  background: var(--glass-panel-wash), var(--glass-panel-bg);
  box-shadow: var(--glass-inset), var(--glass-elevation);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
}
.console-shell :is(.page-section, .task-sheet, .settings-section) {
  padding: 24px 28px;
}
.console-shell .page-section .page-section {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The card owns its edge; each interactive row owns the content gutter. */
.console-shell .activity-feed-full {
  padding: 4px 24px;
}
.console-shell :is(.app-list, #apps-box) {
  --list-gutter: 24px;
  --list-corner: calc(var(--radius-surface) - 1px);
  padding: 0;
}
.console-shell .app-list-row {
  padding: 22px var(--list-gutter);
}
.console-shell #apps-box > .connection > summary {
  padding: 18px var(--list-gutter);
}
.console-shell #apps-box > .connection > .connection-body {
  padding-inline: var(--list-gutter);
}
/* Each authorization is a complete surface, including its expanded controls.
 * The space between cards marks the end of one App and the start of the next. */
.console-shell #apps-box {
  display: grid;
  gap: 16px;
  border: 0;
}
.console-shell #apps-box > .connection > summary {
  border-radius: var(--list-corner);
}
.console-shell #apps-box > .connection[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--glass-input-bg);
}
.console-shell #apps-box > :is(.empty-state, .skeleton) {
  padding: 24px var(--list-gutter);
}
.connection-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--glass-line);
  padding-top: 16px;
}
.connection-collapse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  text-align: left;
}
.connection-collapse > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.connection-collapse > .ui-icon {
  flex: none;
  transform: rotate(180deg);
}
.console-shell #view-apps > .list-header {
  padding-inline: 25px;
}
/* Independent paint layers leave keyboard outlines and expanded controls unclipped. */
.console-shell :is(.connection > summary, .app-list-row) {
  position: relative;
  isolation: isolate;
}
.console-shell .connection > summary {
  border-radius: var(--radius-control);
}
.console-shell .connection > summary:hover,
.console-shell .app-list-row:hover {
  background: transparent;
}
.console-shell :is(.connection > summary, .app-list-row)::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-input-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.console-shell .connection > summary:is(:hover, :focus-visible)::before,
.console-shell .app-list-row:is(:hover, :has(:focus-visible))::before {
  opacity: 1;
}
.console-shell .app-list-row {
  border-radius: 0;
}
.console-shell .app-list > .app-list-row::before,
.console-shell #apps-box > .connection > summary::before {
  inset: 0;
}
.console-shell .app-list-row:first-child {
  border-top-left-radius: var(--list-corner);
  border-top-right-radius: var(--list-corner);
}
.console-shell .app-list-row:last-child {
  border-bottom-left-radius: var(--list-corner);
  border-bottom-right-radius: var(--list-corner);
}
.console-shell :is(.app-list-row, .act, .connection, .object-row) {
  border-color: var(--glass-line);
}
.console-shell .app-list-row {
  position: relative;
  border-bottom: 0;
}
.console-shell .app-list-row::after {
  content: "";
  position: absolute;
  inset: auto var(--list-gutter) 0;
  height: 1px;
  background: var(--glass-line);
  pointer-events: none;
}
.console-shell .app-list-row:last-child::after {
  content: none;
}
.console-shell :is(.app-list-row, .act, .object-row):last-child {
  border-bottom: 0;
}
.console-shell .section-heading {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
.console-shell .section-heading h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.console-shell :is(.settings-list, .app-meta, .activity-feed) {
  border-top: 0;
}
.console-shell :is(.settings-list > div, .app-meta > span, .app-meta-row) {
  border-bottom-color: var(--glass-line);
}
.console-shell :is(.settings-list > div, .app-meta > span, .app-meta-row):last-child {
  border-bottom: 0;
}
.console-shell .settings-list dd {
  font-weight: 550;
}
.console-shell .account-section .msg:empty {
  margin: 0;
}
.console-shell .settings-section + .settings-section {
  margin-top: 20px;
}
.console-shell .settings-section > .settings-heading {
  border-bottom: 0;
}
.console-shell .settings-danger {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-edge));
}
.console-shell .wallet-summary,
.console-shell .wallet-summary.single {
  padding: 30px 32px;
  background:
    radial-gradient(ellipse at 100% 0%, var(--canvas-light), transparent 68%), var(--glass-panel-bg);
  border-radius: 32px;
}
.console-shell .wallet-summary #topup-open {
  margin-top: 18px;
}
.console-shell .wallet-breakdown {
  border-color: var(--glass-line);
}
.console-shell .wallet-next {
  margin-top: 20px;
  padding: 24px 28px;
}
.console-shell .wallet-summary .info-pop {
  color: var(--ink);
}
.console-shell .agent-evidence-band {
  padding: 22px 26px;
}
.console-shell .dev-panel[data-panel="requests"] {
  padding-top: 24px;
}
.console-shell .table-wrap {
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--glass-panel-wash), var(--glass-panel-bg);
}
.console-shell .table-wrap th {
  background: var(--glass-input-bg);
}
.console-shell .table-wrap :is(th, td) {
  border-color: var(--glass-line);
}
.console-shell .connection-body {
  padding-bottom: 24px;
}
.console-shell .workspace-switch,
.console-shell .range-seg {
  padding: 4px;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  overflow: visible;
}
.console-shell .workspace-switch a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.console-shell .range-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 500;
}
.console-shell .range-btn:hover:not(:disabled) {
  background: var(--glass-input-bg);
  color: var(--ink);
}
.console-shell .workspace-switch a[aria-current="true"],
.console-shell .range-btn.on,
.console-shell .range-btn.on:hover:not(:disabled) {
  background: var(--glass-neutral-selection);
  color: var(--selection-ink);
  box-shadow: inset 0 0 0 1px var(--selection-border);
}
.console-shell .workspace-switch.liquid-has-selection a[aria-current="true"],
.console-shell .range-seg.liquid-has-selection .range-btn.on {
  background: transparent;
  box-shadow: none;
  color: var(--selection-ink);
}
.console-shell :is(.workspace-switch, .range-seg) .liquid-selection {
  --liquid-body: var(--glass-neutral-selection);
  box-shadow:
    inset 0 0 0 1px var(--selection-border),
    0 2px 6px rgb(9 70 140 / 10%);
}
.console-shell :is(.workspace-switch, .range-seg) .liquid-selection::after {
  opacity: 0.32;
}
.console-shell :is(.workspace-switch, .range-seg).liquid-nav::after {
  opacity: 0.18;
}
.console-shell .primary-nav > span.liquid-nav {
  padding: 5px;
}
.console-shell .primary-nav .liquid-has-selection a.active {
  background: transparent;
}
.console-shell .header-tools-popup,
.console-shell .app-picker-popup,
.range-pop,
.info-pop {
  border-radius: var(--radius-popover);
  border: 1px solid var(--glass-edge);
  background: var(--glass-popover-bg);
  box-shadow: var(--glass-inset), var(--shadow-dialog);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
}
.console-shell .header-tools-popup {
  width: 224px;
  padding: 8px;
}
.console-shell .header-tools-popup.liquid-surface,
.console-shell .app-picker-popup.liquid-surface,
.range-pop.liquid-surface,
.info-pop.liquid-surface {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.range-pop {
  padding: 14px;
  gap: 10px;
}
.info-pop {
  padding: 14px 16px;
  line-height: 1.65;
}
.console-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
.auth-form-wrap :is(input:not([type="checkbox"]):not([type="radio"]), select),
.wizard :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
dialog :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background: var(--glass-input-bg);
  border-color: var(--glass-line);
  box-shadow:
    inset 0 1px 2px rgb(0 20 40 / 3%),
    0 1px 0 var(--glass-edge);
}
.console-shell :is(input, textarea, select):focus,
.auth-form-wrap :is(input, select):focus,
dialog :is(input, textarea, select):focus {
  border-color: var(--link);
}
.console-shell button.secondary,
.console-shell .button-link.secondary,
dialog button.secondary,
.wizard button.secondary {
  border-color: var(--glass-edge);
  background: var(--glass-input-bg);
  box-shadow:
    var(--glass-inset),
    0 2px 5px rgb(0 20 40 / 4%);
}
.console-shell button.secondary:hover:not(:disabled),
dialog button.secondary:hover:not(:disabled),
.wizard button.secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}
button.liquid-button,
button.liquid-button:hover:not(:disabled) {
  color: var(--on-accent);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.auth-form-wrap {
  padding: 28px;
}
.auth-brand {
  margin-bottom: 36px;
}
.wizard {
  background: radial-gradient(ellipse at 100% 0, var(--canvas-light), transparent 55%), var(--page);
}
.wizard-body {
  padding: 28px;
}
dialog {
  background: var(--glass-popover-bg);
}
.console-shell .app-footer {
  border-top: 0;
  opacity: 0.85;
}
@media (max-width: 1180px) {
  .console-shell .sidebar,
  .console-shell.sidebar-collapsed .sidebar {
    gap: 14px;
  }
}
@media (max-width: 720px) {
  .console-shell .sidebar,
  .console-shell.sidebar-collapsed .sidebar {
    position: relative;
    top: auto;
    width: calc(100% - 20px);
    margin: 10px 10px 0;
    padding: 12px;
    border-radius: 24px;
    gap: 12px 8px;
    min-height: 0;
  }
  .console-shell .sidebar-account {
    gap: 5px;
  }
  .console-shell .sidebar-account > a {
    padding: 5px 8px;
  }
  .console-shell .nav-email {
    max-width: 90px;
  }
  .console-shell .primary-nav > span {
    justify-content: center;
    gap: 2px;
    overflow: visible;
  }
  .console-shell .primary-nav a {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 12px;
  }
  .console-shell .primary-nav a .nav-mark {
    width: 16px;
  }
  .console-shell .workspace-switch a {
    min-height: 34px;
    padding: 7px 10px;
  }
  .console-shell .page {
    padding: 28px 16px 48px;
  }
  .console-shell :is(.page-section, .task-sheet, .next-card, .settings-section),
  .console-shell .wallet-summary,
  .console-shell .wallet-summary.single {
    padding: 20px;
    border-radius: 24px;
  }
  .console-shell :is(.app-list, .activity-feed-full, .connection) {
    border-radius: 24px;
  }
  .console-shell .activity-feed-full {
    padding: 4px 18px;
  }
  .console-shell #apps-box {
    gap: 12px;
  }
  .console-shell :is(.app-list, #apps-box) {
    --list-gutter: 18px;
    --list-corner: 23px;
  }
  .console-shell .range-seg {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
  }
  .console-shell .range-btn {
    flex: 1 1 auto;
    padding: 8px 9px;
    font-size: 12px;
  }
  .console-shell .section-heading {
    gap: 10px;
    flex-wrap: wrap;
  }
  .console-shell .section-heading h2 {
    font-size: 17px;
  }
  .console-shell .agent-evidence-band {
    padding: 18px 20px;
  }
  .console-shell .account-section .settings-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-block: 14px;
  }
  .console-shell .account-section .settings-list dd {
    text-align: left;
  }
  .auth-form-wrap,
  .wizard-body {
    padding: 22px;
  }
}
/* Shared workspace rhythm, compact handoff, and readable source preview. */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
[data-icon-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ui-icon-slot {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
}
.ui-icon-slot > .ui-icon {
  width: 100%;
  height: 100%;
}
.console-shell :where(button:has(> .ui-icon)),
.console-shell [data-ui-icon] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.console-shell .dev-tabs > button .ui-icon {
  width: 18px;
  height: 18px;
}
.chev > .ui-icon {
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}
[aria-expanded="true"] > .chev > .ui-icon {
  transform: rotate(90deg);
}
.info-btn.info-symbol {
  border: 0;
  padding: 2px;
  font-style: normal;
}
.info-symbol .ui-icon {
  width: 18px;
  height: 18px;
}
.console-shell .page {
  padding-top: 28px;
}
.console-shell .page-header {
  margin-bottom: 24px;
}
.console-shell .dev-context-bar {
  min-height: 28px;
  padding-bottom: 8px;
}
.console-shell .dev-subnav {
  padding-bottom: 8px;
}
.console-shell .dev-panel {
  padding-top: 20px;
}
.console-shell .agent-focus {
  max-width: 800px;
  padding-top: 4px;
}
/* Three equal breathing spaces: before the message, before actions, after actions.
   Optional content follows the actions without redistributing the first screen. */
.console-shell .agent-focus {
  padding-bottom: var(--agent-stage-gap, 24px);
}
.agent-intro {
  padding-block: var(--agent-stage-gap, 24px);
}
.agent-handoff {
  min-height: 112px;
}
.console-shell .agent-handoff .agent-actions {
  margin-top: 0;
}
.console-shell h2.agent-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.console-shell .agent-description {
  max-width: 100%;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
}
/* A handoff result belongs to its action, not to a second competing card. */
.console-shell .agent-evidence-band {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--muted-strong);
}
.agent-state-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 22px;
  color: var(--link);
}
.agent-state-icon > .ui-icon {
  width: 18px;
  height: 18px;
}
.agent-evidence-copy {
  min-width: 0;
}
.console-shell .agent-evidence-heading {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.console-shell .agent-evidence-heading > :last-child {
  text-align: left;
}
.console-shell .agent-status {
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}
.agent-setup[data-agent-state="failed"] .agent-status {
  color: var(--danger);
}
.console-shell .agent-status::before {
  display: none;
}
.agent-status-detail {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.agent-setup[data-agent-state="failed"] .agent-state-icon {
  color: var(--danger);
}
.agent-setup[data-agent-state="waiting"] .agent-state-icon {
  color: var(--warning);
}
.console-shell .agent-actions {
  gap: 8px 12px;
  margin-top: 24px;
}
.console-shell .agent-actions > .agent-primary {
  min-width: 194px;
  min-height: 50px;
  padding: 12px 22px;
  font-size: 16px;
}
.console-shell .agent-actions > .text-button {
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.console-shell .agent-actions > .text-button:is(:hover, [aria-expanded="true"]) {
  background: var(--glass-input-bg);
  color: var(--ink);
}
.agent-actions > .text-button > .ui-icon:last-child {
  width: 12px;
  height: 12px;
  transition: transform 180ms ease;
}
.agent-actions > .text-button[aria-expanded="true"] > .ui-icon:last-child {
  transform: rotate(180deg);
}
.handoff-copy-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.agent-prompt {
  margin-top: 8px;
}
.console-shell :is(.agent-raw-prompt, .agent-record) > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: var(--control-height);
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}
.console-shell :is(.agent-raw-prompt, .agent-record) > summary::-webkit-details-marker {
  display: none;
}
.console-shell :is(.agent-raw-prompt, .agent-record) > summary:hover {
  background: var(--glass-input-bg);
  color: var(--ink);
}
.agent-record > summary > .ui-icon:last-child {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}
.agent-record[open] > summary > .ui-icon:last-child {
  transform: rotate(180deg);
}
.agent-prompt-body {
  margin-top: 8px;
  padding: 24px 28px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  background: var(--glass-input-bg);
}
.agent-preview-note {
  margin: 0 0 20px;
}
.markdown-body {
  max-width: 72ch;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.console-shell .markdown-body :is(h3, h4, h5, h6) {
  margin: 1.6em 0 0.6em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.console-shell .markdown-body > :first-child {
  margin-top: 0;
}
.markdown-body p {
  margin: 0.8em 0;
}
.markdown-body :is(ol, ul) {
  padding-inline-start: 1.5em;
  margin: 0.8em 0;
}
.markdown-body li {
  padding-left: 0.25em;
  margin: 0.6em 0;
}
.markdown-body li::marker {
  color: var(--link);
  font-weight: 600;
}
.markdown-body strong {
  font-weight: 650;
}
.markdown-body code {
  font-size: 0.87em;
  background: var(--glass-input-bg);
  border-radius: 6px;
  padding: 2px 5px;
}
.markdown-body pre {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-control);
  background: var(--surface);
  overflow-x: auto;
  line-height: 1.65;
}
.markdown-body pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}
.markdown-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-raw-prompt {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-line);
}
.agent-raw-prompt .prompt-block {
  margin-top: 10px;
  font-size: var(--text-help);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.console-shell .handoff-guide-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.console-shell .agent-tools {
  max-width: 800px;
  margin-top: 12px;
  padding: 14px 18px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-control);
  background: var(--glass-input-bg);
}
.agent-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px 24px;
  max-width: 800px;
  margin-top: 4px;
  padding-top: 0;
}
.console-shell .agent-secondary-actions > .agent-manual {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--control-height);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted-strong);
}
.agent-record {
  flex: 1 1 200px;
  margin: 0;
}
.agent-record-body {
  padding: 8px 10px 12px;
}
@media (max-width: 720px) {
  .console-shell .page {
    padding-top: 20px;
  }
  .console-shell .page-header {
    margin-bottom: 18px;
  }
  .console-shell .dev-panel {
    padding-top: 14px;
  }
  .console-shell .agent-focus {
    padding-top: 0;
  }
  .console-shell h2.agent-title {
    font-size: 26px;
  }
  .console-shell .agent-description {
    font-size: 14px;
    margin-top: 8px;
  }
  .console-shell .agent-evidence-band {
    margin: 12px 0 0;
    padding: 0;
    gap: 9px;
  }
  .console-shell .agent-actions {
    margin-top: 16px;
  }
  .console-shell .agent-actions > .agent-primary {
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
  }
  .console-shell .agent-actions {
    gap: 4px;
  }
  .console-shell .agent-actions > .text-button {
    padding: 10px 8px;
  }
  .agent-tools-handle > .agent-tools-label,
  .agent-tools-handle > .ui-icon:last-child {
    display: none;
  }
  .console-shell .agent-actions > .agent-tools-handle {
    width: 44px;
  }
  .agent-tools-handle > .ui-icon:first-child {
    width: 18px;
    height: 18px;
  }
  .agent-prompt-body {
    padding: 18px;
  }
  .agent-secondary-actions {
    margin-top: 4px;
    gap: 4px 12px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .console-shell .sidebar,
  .console-shell.sidebar-collapsed .sidebar,
  .console-shell
    :is(
      .page-section,
      .wallet-summary,
      .payout-summary,
      .task-sheet,
      .next-card,
      .settings-section,
      .app-list,
      .activity-feed-full,
      .connection,
      .agent-evidence-band
    ),
  .auth-form-wrap,
  .auth-card,
  .pay-receipt,
  .wizard-body,
  dialog {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  body,
  .auth-layout,
  .wizard {
    background: Canvas;
  }
  .console-shell .sidebar,
  .console-shell.sidebar-collapsed .sidebar,
  .console-shell
    :is(
      .page-section,
      .wallet-summary,
      .payout-summary,
      .task-sheet,
      .next-card,
      .settings-section,
      .app-list,
      .activity-feed-full,
      .connection,
      .agent-evidence-band
    ),
  .auth-form-wrap,
  .auth-card,
  .pay-receipt,
  .wizard-body,
  dialog {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .console-shell .header-tools-popup.liquid-surface,
  .console-shell .app-picker-popup.liquid-surface,
  .range-pop.liquid-surface,
  .info-pop.liquid-surface {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .console-shell .range-seg.liquid-has-selection .range-btn.on,
  .console-shell .workspace-switch.liquid-has-selection a[aria-current="true"] {
    color: HighlightText;
    background: Highlight;
  }
  button.liquid-button,
  button.liquid-button:hover:not(:disabled) {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
}
.pay-wrap > .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

:is(.form-note, .help-text, .section-note, .settings-description, .dialog-note) {
  line-height: 1.6;
}
.form-actions > button,
.dialog-actions > button {
  min-height: var(--control-height);
  font-size: var(--text-body);
}
.budget-form > .row,
.budget-form > details > .row {
  display: grid;
  align-items: end;
  gap: var(--form-field-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.budget-form > details > .row {
  margin-top: var(--field-label-gap);
}
.budget-form > details > summary {
  min-height: 44px;
  padding: 10px 0;
}
.settings-section-head + .field-help {
  margin-top: var(--field-help-gap);
}

/* Secondary actions remain reachable at the same readable scale as form copy. */
.form-stack button.text-button,
.compact-form button.text-button,
button.copy-btn {
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--text-help);
  line-height: 1.5;
}
.uri-add > button {
  min-height: var(--control-height);
}
.topup-terms > summary {
  min-height: 44px;
  padding: 10px 4px;
}

/* Selection is signalled by a tinted surface and an edge, not just a white glint. */
.console-shell button.app-picker-item[aria-checked="true"],
.env-chip[aria-pressed="true"],
.recipe-tabs button[aria-selected="true"],
.amount-chips button.selected {
  color: var(--selection-ink);
  background: var(--glass-neutral-selection);
  box-shadow: inset 0 0 0 1px var(--selection-border);
}
@media (prefers-reduced-transparency: reduce) {
  .console-shell :is(.workspace-switch, .range-seg) .liquid-selection {
    --liquid-body: var(--selection-solid);
  }
  .console-shell button.app-picker-item[aria-checked="true"],
  .env-chip[aria-pressed="true"],
  .recipe-tabs button[aria-selected="true"],
  .amount-chips button.selected {
    background: var(--selection-solid);
  }
}
@media (forced-colors: active) {
  .console-shell button.app-picker-item[aria-checked="true"],
  .env-chip[aria-pressed="true"],
  .recipe-tabs button[aria-selected="true"],
  .amount-chips button.selected {
    background: Highlight;
    color: HighlightText;
  }
}