/* Task-focused cabinet and model controls, shared by both colour themes. */
.app-frame .welcome-row { border: 1px solid var(--ui-line); border-radius: 18px; background: linear-gradient(115deg, var(--ui-raised), var(--ui-panel)); }
.app-frame .welcome-row h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.app-frame .metric-card { min-height: 130px; }
.app-frame .metric-card small a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.dashboard-shortcuts { margin: 0 0 22px; }
.dashboard-shortcuts .quick-start-panel { padding: 0; border: 0; background: none; }
.dashboard-shortcuts .panel-title { display: none; }
.app-frame .dashboard-shortcuts .quick-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.app-frame .dashboard-shortcuts .quick-action-grid > a { margin: 0; min-height: 92px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); padding: 18px; }
.app-frame .dashboard-shortcuts .quick-action-grid > a:hover { border-color: var(--ui-accent); background: var(--ui-raised); }
.app-frame .dashboard-onboarding { margin: 0 0 24px; }
.dashboard-setup-done > summary { display: flex; align-items: center; gap: 8px; list-style: none; color: var(--ui-good); font-size: 13px; cursor: pointer; padding: 10px 0; min-height: 44px; }
.dashboard-setup-done > summary::-webkit-details-marker { display: none; }
.dashboard-setup-done > summary::after { content: "⌄"; }
.dashboard-setup-done > summary svg { vertical-align: middle; margin: 0 5px; }
.app-frame .dashboard-onboarding .readiness-panel { padding: 24px; border-color: var(--ui-line); }
.app-frame .dashboard-onboarding ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app-frame .dashboard-onboarding li { border: 0; align-items: flex-start; padding-bottom: 0; }
.app-frame .dashboard-onboarding li a { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; min-height: 40px; border-radius: 9px; background: var(--ui-raised); }
.app-frame .dashboard-chart-only { grid-template-columns: minmax(0, 1fr); margin-bottom: 22px; }
.dashboard-balance-details { margin: 22px 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); overflow: hidden; }
.dashboard-balance-details > summary { padding: 20px 24px; cursor: pointer; color: var(--ui-text); font-size: 14px; font-weight: 600; }
.app-frame .dashboard-balance-details .refined-balance { border: 0; margin: 0; border-top: 1px solid var(--ui-line); border-radius: 0; }
.dashboard-help { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 22px 0; color: var(--ui-muted); font-size: 13px; }
.dashboard-help > div { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.dashboard-help strong, .dashboard-help small { display: block; line-height: 1.7; }
.dashboard-help strong { color: var(--ui-text); }
.dashboard-help a { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-accent); min-height: 44px; }
.app-frame .cc-search { grid-template-columns: minmax(210px, 2fr) repeat(4, minmax(115px, 1fr)) auto; }
.app-frame .cc-model-card { display: flex; flex-direction: column; gap: 16px; }
.app-frame .cc-model-card > :is(.cc-model-header, .cc-model-kind, .cc-prices, .cc-card-foot) { margin: 0; }
.cc-model-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-top: 1px solid var(--ui-line); padding-top: 16px; margin-top: auto; }
.cc-model-actions > a { color: var(--ui-accent); display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 13px; }
.model-promo-banner { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--ui-good); background: color-mix(in srgb, var(--ui-good) 7%, var(--ui-panel)); border-radius: 10px; }
.model-promo-badge { flex-shrink: 0; color: var(--ui-good); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.model-promo-banner > div { min-width: 0; }
.model-promo-banner strong { display: block; color: var(--ui-text); font-size: 13px; overflow-wrap: anywhere; }
.model-promo-banner small { display: block; font-size: 11px; color: var(--ui-muted); margin-top: 5px; line-height: 1.5; }
.model-promo-banner[data-promotion-state="inactive"] { border-color: var(--ui-line); background: var(--ui-raised); }
.model-promo-banner[data-promotion-state="inactive"] .model-promo-badge { color: var(--ui-muted); }
:is(.cc-prices dd, .cc-image-price strong, .model-economics strong) del { display: block; color: var(--ui-muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.wallet-model del { display: block; color: var(--ui-muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.wallet-model .model-promo-banner { margin: 16px 0; }
.wallet-promo-tabs { margin: 18px 0; }
.model-catalog-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 16px; }
.model-catalog-intro h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.03em; }
.model-catalog-intro p, .model-catalog-intro > span { margin: 0; color: var(--ui-muted); font-size: 13px; line-height: 1.6; }
.model-catalog-intro > span { white-space: nowrap; }
:root .model-sale-card { padding: 24px; gap: 14px; box-shadow: var(--ui-shadow); }
:root .model-sale-card header { padding-bottom: 0; }
.model-id-line { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; }
.model-id-line code { flex: 1; min-width: 0; color: var(--ui-muted); font-size: 11px; overflow-wrap: anywhere; }
.model-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 6px 10px; background: var(--ui-raised); color: var(--ui-muted); cursor: pointer; }
:root .model-sale-card .model-economics { margin: 4px 0; border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; }
:root .model-sale-card .model-economics > div { padding: 12px; }
:root .model-sale-card .model-price-editor { margin-top: 0; }
:root .model-sale-card .model-price-editor summary { padding: 13px 16px; min-height: 44px; }
.model-price-editor summary svg { vertical-align: middle; margin-right: 5px; }
.model-price-editor > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.model-price-editor > summary::-webkit-details-marker { display: none; }
.model-price-editor > summary::before { content: ""; flex: none; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; }
.model-price-editor[open] > summary::before { transform: rotate(90deg); }
.model-price-editor > summary svg { display: inline-block; flex: none; margin: 0; }
.model-promotion-editor .promotion-title, .promotion-preview, .promotion-explanation { grid-column: 1 / -1; }
.promotion-preview { display: block; padding: 14px; background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 9px; color: var(--ui-good); font-size: 13px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.promotion-explanation { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.7; }
.model-promotion-editor label small { font-size: 11px; font-weight: 400; color: var(--ui-muted); }
.model-promotion-editor input { min-width: 0; }
:is(.model-copy, .model-price-editor summary, .dashboard-balance-details summary):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.credit-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; grid-column: 1 / -1; padding: 18px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-raised); }
.credit-preview > div { min-width: 0; }
.credit-preview span { display: block; color: var(--ui-muted); font-size: 12px; margin-bottom: 8px; }
.credit-preview strong { display: block; font-size: 22px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ui-text); }
.credit-preview > div:first-child strong { color: var(--ui-accent); }
.credit-preview :is(p, small) { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
.credit-preview p:empty { display: none; }
/* Model identity and card geometry stay the same for token and wallet customers,
   and for the operator; management controls are the admin's extra content. */
:root :is(.cc-model-card, .wallet-model, .admin-row.pricing.model-sale-card) { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; min-width: 0; margin: 0; padding: 20px; gap: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); box-shadow: var(--ui-shadow); }
:root :is(.cc-model-grid, .wallet-models) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 16px; }
:root .model-sale-grid > .table-scroll { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; gap: 16px; }
:root .admin-row.pricing.model-sale-card.problem { border-color: var(--ui-danger); }
:root :is(.cc-model-header, .model-sale-identity) { display: flex; align-items: center; min-height: 52px; gap: 12px; margin: 0; }
:root :is(.cc-model-header, .model-sale-identity) > div { min-width: 0; flex: 1; }
:root :is(.cc-model-header, .model-sale-identity) h3 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 650; letter-spacing: -.02em; color: var(--ui-text); overflow-wrap: anywhere; }
:root :is(.cc-brand-logo, .model-sale-logo) { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #dde4ef; border-radius: 12px; background: #fff; color: #334b64; }
:root :is(.cc-brand-logo, .model-sale-logo) img { width: 32px; height: 32px; object-fit: contain; }
:root :is(.cc-model-header, .model-sale-identity) :is(.cc-brand-logo, .model-sale-logo) img { padding: 0; border-radius: 0; background: transparent; box-sizing: border-box; filter: none; }
:root :is(.cc-model-header, .model-sale-identity) .cc-brand-name { display: block; color: var(--ui-muted); font-size: 11px; line-height: 1.5; margin: 0 0 3px; }
:root :is(.cc-model-card, .wallet-model, .model-sale-card) .model-promo-banner { margin: 0; min-height: 70px; box-sizing: border-box; }
:root .wallet-model :is(p, dl, .wallet-estimate) { margin: 0; }
:root .wallet-model .wallet-estimate { font-size: 22px; }
:root .wallet-model .cc-prices { border-top: 1px solid var(--ui-line); padding-top: 12px; }
:root .wallet-model .cc-prices > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
:root .wallet-model .cc-prices dt { color: var(--ui-muted); font-size: 13px; }
:root .wallet-model .cc-prices dd { margin: 0; font-size: 17px; font-weight: 600; text-align: right; color: var(--ui-text); }
:root .wallet-model .cc-prices small { display: block; font-size: 11px; }
:root .wallet-model .wallet-price { font-size: 17px !important; font-weight: 600; color: var(--ui-text); border-top: 1px solid var(--ui-line); padding-top: 12px; line-height: 1.6; }
:root .model-sale-card > footer { margin-top: auto; }
:root .model-sale-card > header { padding: 0; }
.app-frame .app-menu { color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-panel); }
html .app-frame .cc-search .cc-search-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { border: 0; box-shadow: none; background: transparent; padding: 0; height: auto; min-height: 0; }
.app-frame .cc-price-help > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.app-frame .cc-price-help > summary::-webkit-details-marker { display: none; }
.app-frame .cc-price-help > summary::after { content: "⌄"; }
@media (max-width: 1250px) {
  .app-frame .cc-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-frame .cc-search .cc-search-field { grid-column: span 2; }
}
@media (max-width: 760px) {
  .app-frame .dashboard-shortcuts .quick-action-grid, .app-frame .dashboard-onboarding ol { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .app-frame .dashboard-shortcuts .quick-action-grid > a { min-height: 76px; }
  .app-frame .cc-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-frame .cc-search .button { grid-column: 1 / -1; }
  .app-frame .cc-filter-row { flex-direction: column; align-items: stretch; }
  .app-frame .cc-segments { flex-wrap: wrap; }
  .model-catalog-intro { align-items: flex-start; }
  :root .model-sale-card { padding: 18px; }
  :root .model-promotion-editor .model-sale-form { grid-template-columns: minmax(0, 1fr); }
  .dashboard-help > div { width: 100%; }
  :root :is(.cc-model-card, .wallet-model, .admin-row.pricing.model-sale-card) { padding: 18px; }
  :root :is(.cc-model-grid, .wallet-models) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .credit-preview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .credit-preview > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .credit-preview span { margin: 0; }
  .credit-preview strong { font-size: 18px; text-align: right; }
}
