/* Umum and Koneksi on the settings kit (scripts/settings.js): Notion's name and icon form with ClickUp's avatar menu
   for the tile, Linear's integration rows with their "● Connected ⌄" menu, the inbox quota at the head of the inboxes'
   card as Framer's seat line. */

/* ---------- Koneksi ---------- */
.st-koneksi .st-section + .st-section { margin-top: 32px; }
.st-count { align-self: center; color: var(--st-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-row-mark .provider-brand-logo { width: 20px; height: 20px; fill: currentColor; }
.st-row-mark .provider-brand-whatsapp { color: #25d366; }
.st-row-mark .provider-brand-meta { color: #0081fb; }
.st-row-mark .channel-mark { width: 20px; height: 20px; }
.st-row.is-off .st-row-mark { opacity: .55; }
.st-row.is-off .st-row-copy > strong { color: var(--st-muted); }
/* The state as Linear's Connected dropdown: the dot and the word, the chevron, one quiet control. */
.st-state-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 10px; border: 1px solid #dde2e9; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.st-state-btn:hover, .st-state-btn[aria-expanded="true"] { border-color: #c9d1dc; background: var(--st-soft); }
.st-state-btn:focus-visible { outline: 3px solid rgba(47, 98, 164, .3); outline-offset: 2px; }
.st-state-btn > .icon { width: 14px; height: 14px; fill: none; stroke: var(--st-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-state-btn.is-failed { border-color: #f0cfcf; background: #fdf6f5; }
.st-ask { display: block; margin-top: 2px; color: var(--st-amber); font-size: 12px; font-style: normal; font-weight: 600; }
.st-row-copy .is-stale { color: var(--st-amber); }
/* A platform's card opens with its name and Tambah akun, on the soft ground. */
.st-card-head { min-height: 56px; background: var(--st-ground); }
.st-card-head + div > .st-row:first-child::before, .st-card-head + div > :first-child + .st-row::before { display: none; }
.st-card-head .st-row-mark { width: 30px; height: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--st-line); }
.st-card-head .st-row-copy > strong { font-size: 13px; }
/* The inbox quota at the head of the inboxes' card, on the soft ground: what it is, what the plan includes and what is
   extra, what each extra inbox costs; full, the notice's amber, with Ubah kuota kotak masuk at its right. */
.st-quota { min-height: 0; padding: 14px 20px; border-bottom: 1px solid var(--st-rule); background: var(--st-ground); }
.st-quota .st-row-copy { gap: 2px; }
.st-quota .st-row-copy > strong { font-size: 13px; }
.st-quota .st-row-copy > .st-quota-price { color: var(--st-ink); font-variant-numeric: tabular-nums; }
.st-quota.is-full { background: #fdf7ea; }
.st-quota.is-full .st-row-copy > strong { color: #6d4a0c; }
.st-quota + [data-platform-rows] > .st-row:first-child::before { display: none; }
/* Notices inside a card: a refusal the platform's window met. */
.st-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--st-rule); background: #fdf7ea; color: #6d4a0c; font-size: 12.5px; line-height: 1.5; }
.st-notice:first-child { border-top: 0; }
.st-notice b { font-weight: 650; }
.st-notice small { display: block; color: #8a6420; font-size: 12px; }
.st-notice.is-warn { background: #fdf3f2; color: var(--st-red-ink); }
.st-notice:focus { outline: none; }
.st-koneksi .lacak-empty { padding: 26px 20px; }
.st-flow { width: min(100%, 1180px); padding-top: 24px; }

/* ---------- Umum ---------- */
.st-label { color: var(--st-ink); font-size: 12.5px; font-weight: 600; }
.st-tile-field { justify-items: start; }
.st-tile-button { display: grid; width: 56px; height: 56px; place-items: center; padding: 0; border: 1px solid var(--st-line); border-radius: 14px; background: #fff; cursor: pointer; transition: box-shadow var(--m-hover) ease, border-color var(--m-hover) ease; }
.st-tile-button:hover, .st-tile-button[aria-expanded="true"] { border-color: #c9d1dc; box-shadow: 0 0 0 3px #1729440d; }
.st-tile-button:focus-visible { outline: 3px solid rgba(47, 98, 164, .3); outline-offset: 2px; }
.st-tile-button:disabled { cursor: default; box-shadow: none; }
.st-tile-button > .biz-tile { width: 54px; height: 54px; border-radius: 13px; box-shadow: none; font-size: 16px; }
.st-tile-button > .biz-tile.is-three { font-size: 14px; }
.st-form-card > .st-field + .st-tile-field { margin-top: 18px; }
/* The tile's menu: its short text and Unggah logo (ClickUp's avatar menu). */
.st-tile-menu-body { display: grid; gap: 12px; padding: 14px; }
.inbox-menu.st-menu.is-sheet .st-tile-menu-body { padding: 4px 18px 22px; }
.st-tile-menu .st-input { text-transform: none; letter-spacing: .02em; }
.st-upload { width: 100%; }
/* ✕ Hapus logo: GitHub's quiet ✕ Remove, the muted words and their mark, under Unggah logo. */
.st-remove { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 30px; padding: 0 8px 0 4px; border: 0; border-radius: 7px; background: transparent; color: var(--st-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.st-remove:hover { background: var(--st-soft); color: var(--st-red-ink); }
.st-remove:focus-visible { outline: 3px solid rgba(47, 98, 164, .3); outline-offset: 2px; }
.st-remove .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .st-count { flex-basis: 100%; }
  .st-notice { flex-wrap: wrap; padding: 12px 16px; }
}