/* #region zone:finance.style.v2 — ตั้งค่า บริการประจำ tooltip และหน้าการทำงาน */
:root {
  --placeholder: #7b858a;
}
input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.settings-layout {
  display: grid;
  grid-template-columns: 184px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: var(--sp-8);
  width: 100%;
}
.settings-nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: var(--sp-2);
}
.settings-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-control);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t-label);
  font-weight: 600;
}
.settings-nav a:hover,
.settings-nav a:focus-visible {
  background: var(--hover);
  color: var(--text);
}
.settings-form,
.settings-content {
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
}
.settings-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--card-shadow);
}
.settings-section > header {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-1);
}
.settings-section > header h2 {
  font-size: var(--t-section);
}
.settings-section > header p,
.settings-subhead p,
.settings-details > p {
  color: var(--muted);
}
.settings-subsection {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.settings-subsection:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.settings-subhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.settings-subhead h3,
.danger-zone h3 {
  font-size: var(--t-body);
}
.settings-export {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.danger-zone {
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--error);
  border-radius: var(--r-inner);
  background: var(--error-soft);
}
.danger-zone p,
.danger-zone small {
  color: var(--muted);
}
.danger-zone button {
  flex: none;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
  overflow: visible;
}
.colour-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.colour-swatch {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
.colour-swatch svg {
  width: 24px;
  height: 24px;
}
.colour-swatch[aria-pressed='true'] {
  border: 2px solid var(--text);
  box-shadow: 0 0 0 3px var(--acc-ring);
}

.settings-dirty {
  position: sticky;
  z-index: var(--z-dirty);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--pop-shadow);
}
.settings-dirty > span {
  font-weight: 600;
}
.settings-dirty > div {
  display: flex;
  gap: var(--sp-2);
}
.shortcut-status {
  display: grid;
  gap: var(--sp-3);
  align-items: start;
}
.shortcut-secret {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.shortcut-secret .totp {
  margin-bottom: var(--sp-4);
}
.shortcut-secret code {
  display: block;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.shortcut-guides {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.shortcut-guides article {
  padding: 14px;
  border-radius: 14px;
  background: var(--soft);
}
.shortcut-guides article p {
  margin: var(--sp-2) 0;
}
.shortcut-guides code {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-size: var(--t-caption);
}
.capture-status-list {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.capture-status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.capture-status-list span:first-child {
  display: grid;
  gap: 2px;
}
.capture-status-list small {
  color: var(--muted);
}
.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-4);
}
.pending-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.pending-main h2 {
  margin: 5px 0;
  font-size: var(--u-text-lg);
}
.pending-main p,
.pending-expiry {
  margin: 0;
  color: var(--muted);
}
.pending-source {
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--accent);
}
.pending-amount {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 7px;
}
.pending-amount strong {
  font-size: var(--t-section);
}
.pending-expiry,
.pending-actions {
  grid-column: 1/-1;
}
.pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
@media (max-width: 520px) {
  .capture-status-list > div {
    align-items: flex-start;
  }
  .pending-card {
    grid-template-columns: 1fr;
  }
  .pending-amount {
    justify-items: start;
  }
  .pending-expiry,
  .pending-actions {
    grid-column: auto;
  }
}
.button-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel);
  text-decoration: none;
  font-weight: 600;
}
.settings-form input:not([type='hidden']) {
  width: 100%;
  height: 44px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel2);
}
.settings-form input {
  text-align: left;
}
.settings-form .field {
  display: grid;
  gap: 6px;
}
.forecast-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
}
.forecast-table .forecast-month {
  width: 14%;
}
.forecast-table .forecast-money {
  width: 18%;
}
.forecast-table .forecast-status {
  width: 14%;
}
.forecast-table th.num,
.forecast-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.forecast-table th:last-child,
.forecast-table td:last-child {
  text-align: center;
}
.forecast-note {
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: var(--t-label);
}
.field label {
  font-weight: 600;
}
.field-hint {
  display: block;
  color: var(--muted);
  font-size: var(--t-caption);
  overflow-wrap: anywhere;
}
.recurring-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.list-panel > .recurring-tabs {
  margin: 0 var(--sp-5);
}
.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4);
}
.subscription-card h2 {
  font-size: var(--t-section);
}
.subscription-amount {
  font-size: var(--t-kpi);
  font-variant-numeric: tabular-nums;
}
.subscription-card footer {
  margin-top: auto;
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.logo-tile {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--panel2);
  min-width: 0;
}
.logo-tile span {
  overflow-wrap: anywhere;
}
.logo-tile small {
  color: var(--muted);
  font-size: var(--t-caption);
}
.ui-tip {
  position: fixed;
  inset: 0 auto auto 0;
  margin: 0;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--pop-shadow);
  font-size: var(--t-caption);
  pointer-events: none;
}
.ui-tip::backdrop {
  background: transparent;
  pointer-events: none;
}
.colour-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .list-panel > .recurring-tabs {
    margin: 0 var(--sp-4);
  }
  .settings-section {
    padding: var(--sp-4);
  }
  .settings-subhead {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-export {
    flex-direction: column;
  }
  .settings-export .button-link {
    justify-content: center;
  }
  .settings-dirty {
    margin: 0 -8px;
  }
  .subscription-card footer button {
    flex: 1;
  }
}
@media (max-width: 820px) {
  .settings-layout {
    grid-template-columns: minmax(0, 760px);
    gap: var(--sp-4);
  }
  .settings-nav {
    position: sticky;
    z-index: var(--z-settings-nav);
    top: calc(var(--header-h) + 57px);
    display: flex;
    gap: var(--sp-2);
    margin: 0 calc(-1 * var(--gutter));
    padding: 8px var(--gutter);
    overflow-x: auto;
    background: var(--bg);
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar {
    display: none;
  }
  .settings-nav a {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--u-radius-pill);
    background: var(--panel);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* #endregion */

.colour-dot {
  background: none;
}

.credit-card .secondary {
  color: var(--text);
}

/* #region zone:finance.logos.tile — โลโก้ทุกอันอยู่ในกรอบเดียวกัน: ภาพบนพื้นขาว หรืออักษรย่อบนสีแบรนด์ */
.brand-logo {
  --logo-size: 44px;
  --brand: var(--accent);
  --brand-ink: var(--on-accent);
  width: var(--logo-size);
  height: var(--logo-size);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: calc(var(--logo-size) * 0.27);
  /* picture logos are frameless: no tile fill, border or shadow; monograms and tile-* rows keep their fill */
  background: transparent;
  color: var(--brand-ink);
  font-weight: 800;
  line-height: 1;
}
.brand-logo img {
  /* the mark fills a fixed box (40px at the 44px size), contained and centred, so nothing is cropped */
  width: calc(var(--logo-size) - 4px);
  height: calc(var(--logo-size) - 4px);
  object-fit: contain;
  object-position: center;
}
/* a filled tile (dark or brand colour) keeps a safe area of 17% per side so the mark never touches its rounded edge */
.brand-logo.tile-dark img,
.brand-logo.tile-brand img {
  width: calc(var(--logo-size) * 0.66);
  height: calc(var(--logo-size) * 0.66);
}
.brand-logo.fit-tile img {
  /* artwork that already carries its own background fills the whole tile */
  width: calc(var(--logo-size) - 2px);
  height: calc(var(--logo-size) - 2px);
  object-fit: cover;
}
.brand-logo.fit-zoom img {
  /* artwork drawn with a lot of empty canvas around the mark: use the whole tile so the mark itself reads */
  width: calc(var(--logo-size) - 2px);
  height: calc(var(--logo-size) - 2px);
}
.brand-logo.fit-wide img {
  /* long, thin wordmarks: nearly the full width so the lettering stays legible */
  width: calc(var(--logo-size) - 2px);
}
.brand-logo.is-mono {
  background: var(--brand);
}
.brand-logo.tile-dark {
  background: #111827;
}
.brand-logo.tile-brand {
  background: var(--brand);
}
/* dark mode: a very dark mark on the dark surface gets only a soft light backdrop */
:root[data-theme='dark'] .brand-logo.ink-dark {
  background: rgba(255, 255, 255, 0.9);
}
.brand-logo b {
  font-size: calc(var(--logo-size) * 0.34);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand-logo.is-long b {
  font-size: calc(var(--logo-size) * 0.26);
}
.brand-logo.is-glyph b {
  /* a design-system icon (cash, service) stands in for lettering: half the tile, drawn in the ink colour */
  display: grid;
  width: calc(var(--logo-size) * 0.5);
  height: calc(var(--logo-size) * 0.5);
}
.brand-logo.is-glyph svg {
  width: 100%;
  height: 100%;
}
.brand-logo.tile-brand.fit-wide img {
  /* a wordmark on a brand-colour tile keeps the same safe area on each side */
  width: calc(var(--logo-size) * 0.78);
  height: calc(var(--logo-size) * 0.5);
}
.logo-tile .brand-logo {
  --logo-size: 64px;
}
.brand-scb {
  --brand: #4e2e7f;
  --brand-ink: #fff;
}
.brand-krungsri {
  --brand: #ffd400;
  --brand-ink: #2b2600;
}
.brand-kept {
  --brand: #ffd400;
  --brand-ink: #2b2600;
}
.brand-cimb {
  --brand-ink: #fff;
  --brand: #a20b26;
}
.brand-kkp {
  --brand-ink: #fff;
  --brand: #522d79;
}
.brand-uob {
  --brand-ink: #fff;
  --brand: #0b3b72;
}
.brand-truemoney {
  --brand: #f36d23;
  --brand-ink: #1f0c00;
}
.brand-lhbank {
  --brand-ink: #fff;
  --brand: #5b8a22;
}
.brand-linebk {
  --brand: #06c755;
  --brand-ink: #032d12;
}
.brand-lazada {
  --brand-ink: #fff;
  --brand: #22205f;
}
.brand-innovestx {
  --brand-ink: #fff;
  --brand: #57358b;
}
.brand-bualuang {
  --brand-ink: #fff;
  --brand: #173f8f;
}
.brand-binanceth {
  --brand: #f3ba2f;
  --brand-ink: #1a1400;
}
.brand-bitkub {
  --brand: #14b68e;
  --brand-ink: #03251d;
}
.brand-dtac {
  --brand-ink: #fff;
  --brand: #007ac0;
}
.brand-true {
  --brand-ink: #fff;
  --brand: #e1251b;
}
.brand-firstchoice {
  --brand: #ffd400;
  --brand-ink: #2b2600;
}
.brand-grab {
  --brand: #00b14f;
  --brand-ink: #02260f;
}
.brand-ktc {
  /* KTC red, from the official logo (#cf3339) a touch deeper so white text reaches 5.6:1 */
  --brand-ink: #fff;
  --brand: #c62a32;
}
.brand-dime {
  --brand: #00c597;
  --brand-ink: #07342e;
}
.brand-ttb {
  --brand-ink: #fff;
  --brand: #063569;
}
.brand-bangkokbank {
  --brand-ink: #fff;
  --brand: #173f8f;
}
.brand-kbank {
  --brand-ink: #fff;
  --brand: #007a3d;
}
.brand-krungthai {
  --brand-ink: #fff;
  --brand: #0b7fb0;
}
.brand-gsb {
  --brand-ink: #fff;
  --brand: #c2186f;
}
.brand-ghb {
  --brand-ink: #fff;
  --brand: #b84a0c;
}
.brand-baac {
  --brand-ink: #fff;
  --brand: #007b3e;
}
.brand-finansia {
  --brand-ink: #fff;
  --brand: #1d4f91;
}
.brand-shopeepay {
  --brand-ink: #fff;
  --brand: #d93a1c;
}
.brand-lineman {
  --brand-ink: #fff;
  --brand: #04a847;
}
.brand-ais {
  --brand: #83b82c;
  --brand-ink: #123200;
}
.brand-water {
  --brand-ink: #fff;
  --brand: #007bbb;
}
.brand-electricity {
  --brand-ink: #fff;
  --brand: #672e8b;
}
.brand-line,
.brand-linepay {
  --brand: #06c755;
  --brand-ink: #032d12;
}
.brand-amazon {
  --brand: #232f3e;
  --brand-ink: #fff;
}
.brand-iqiyi {
  --brand: #00cc36;
  --brand-ink: #012a0c;
}
.brand-primevideo {
  --brand: #00a8e1;
  --brand-ink: #00222e;
}
.brand-perplexity {
  --brand: #20808d;
  --brand-ink: #fff;
}
.brand-playstation {
  --brand: #003791;
  --brand-ink: #fff;
}
.brand-viu {
  --brand: #f5a800;
  --brand-ink: #2b1d00;
}
.brand-grabpay {
  --brand: #00b14f;
  --brand-ink: #02260f;
}
.brand-standardchartered {
  --brand: #0473ea;
  --brand-ink: #fff;
}
.brand-wise {
  --brand: #9fe870;
  --brand-ink: #163300;
}
.brand-other {
  --brand: var(--accent);
  --brand-ink: var(--on-accent);
}
.brand-cash {
  --brand: var(--acc-soft);
  --brand-ink: var(--accent-text);
}
.brand-chatgpt {
  --brand-ink: #fff;
  --brand: #111;
}
.brand-spotify {
  --brand: #1db954;
  --brand-ink: #03170a;
}
.ui-option-logo.brand-logo {
  --logo-size: 28px;
  padding: 0;
  flex: 0 0 28px;
}
.ui-option-logo.brand-logo img {
  border-radius: 0;
}
/* #endregion */

/* #region zone:finance.touch — ทุก control บนจอสัมผัส/จอแคบสูงอย่างน้อย 44px และเว้นระยะอย่างน้อย 8px */
.summary-strip.positive,
.summary-strip .positive {
  color: var(--hero-pos) !important;
}
.chat-suggestions {
  gap: var(--sp-2);
}
@media (pointer: coarse), (hover: none), (max-width: 900px) {
  /* Keep the floor below v3 component rules: an ID inside :is would strengthen every branch. */
  html
    body
    :is(
      button,
      summary,
      .text-button,
      .link-button,
      .brand,
      .segmented button,
      .chat-suggestions button,
      .ui-select-option,
      .settings-nav a,
      [id='chat-send']
    ) {
    min-height: 44px;
  }
  html body :is(.chat-suggestions button, #chat-send, .totp-box) {
    min-width: 44px;
  }
}
@media (max-width: 900px) {
  body:has([data-settings-dirty]:not([hidden])) .luna-launcher {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}
/* #endregion */