/* Native V2 Account screen (js/account.js). Prefix ac-. Controls (.wk-*) come from kit.css, .ct-busy/.ct-lbl/.ct-loading from contacts.css. */
.ac { position: absolute; inset: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f1f1f1; font-size: 14px; color: var(--ink); overflow: hidden; }
.ac.off { visibility: hidden; pointer-events: none; }
.ac .ct-loading { grid-column: 1 / -1; }
.ac-tabs { background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 16px; align-content: start; min-height: 0; overflow-y: auto; }
.ac-tab { display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; text-align: start; cursor: pointer; }
.ac-tab .wk-i { color: gray; }
.ac-tab:hover { background: #f5f5f5; } .ac-tab.on { background: #f1f1f1; color: var(--deep); } .ac-tab.on .wk-i { color: var(--deep); }
.ac-classic { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 8px 10px; text-align: start; }
.ac-classic:hover { color: var(--deep); }
.ac[data-layout="narrow"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.ac[data-layout="narrow"] .ac-tabs { flex-direction: row; background: none; padding: 12px 16px 0; gap: 12px; overflow-x: auto; overflow-y: hidden; align-items: center; }
.ac[data-layout="narrow"] .ac-tab { border: 1px solid #cfcfcf; border-radius: 16px; padding: 4px 14px; gap: 8px; background: #fff; white-space: nowrap; }
.ac[data-layout="narrow"] .ac-tab.on { background: #dfe9e2; border-color: var(--green); }
.ac[data-layout="narrow"] .ac-classic { margin: 0 0 0 auto; white-space: nowrap; }
.ac-main { min-width: 0; min-height: 0; overflow: auto; padding: 16px; position: relative; }
.ac[data-layout="narrow"] .ac-main { padding: 12px 8px 8px; }
.ac-pane { display: grid; gap: 16px; align-content: start; max-width: 860px; margin: 0 auto; }
.ac-planroot { min-height: 100%; } .ac-planroot[hidden] { display: none; }
.ac-airoot[hidden] { display: none; }
.ac-card { background: #fff; border-radius: 14px; padding: 20px; min-width: 0; }
.ac-stack { display: grid; gap: 14px; align-content: start; }
.ac-hr { border: 0; border-top: 1px solid #e3e3e3; width: 100%; margin: 0; }
.ac-h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ac-muted { color: gray; margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ac-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac[data-layout="narrow"] .ac-two { grid-template-columns: 1fr; }
.ac-f { min-width: 0; } .ac-f > span { font-weight: 500; }
.ac .wk-field { background: #f5f7fb; border-color: #f5f7fb; } .ac select.wk-field { border-color: #cfe5c8; background: #fff; }
.ac-help { color: var(--muted); font-size: 11.5px; }
.ac-err { font-size: 13px; }
.ac-save, .ac-toggle, .ac-signup, .ac-gen { justify-self: start; }
/* profile */
.ac-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ac-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 600; flex: none; }
.ac-whotext { display: grid; min-width: 0; } .ac-whotext > * { overflow-wrap: anywhere; } .ac-whotext small { color: var(--muted); }
.ac-whoname { font-size: 17px; font-weight: 600; }
.ac-pwrow { display: flex; gap: 6px; align-items: center; } .ac-pwrow .wk-field { flex: 1; min-width: 0; }
/* meta */
.ac-kv { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 18px; font-size: 13.5px; }
.ac-kv dt { color: var(--muted); } .ac-kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-weight: 500; }
.ac[data-layout="narrow"] .ac-kv { grid-template-columns: 1fr; gap: 2px; } .ac[data-layout="narrow"] .ac-kv dd { margin-bottom: 8px; }
.ac-secret { display: inline-flex; align-items: center; gap: 6px; } .ac-secret.set { color: #1f6f35; } .ac-secret.unset { color: gray; }
.ac-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ac-btn { border: 1px solid var(--green); border-radius: 18px; padding: 8px 16px; font-size: 13px; color: var(--deep); background: #fff; }
.ac-btn:hover { background: #dfe9e2; } .ac-btn:disabled { opacity: .5; cursor: progress; }
.ac-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-dialog .wk-mbody { gap: 14px; }
.ac-regout { border-radius: 10px; padding: 12px; display: grid; gap: 8px; overflow-wrap: anywhere; }
.ac-regout.ok { background: #e7f4ea; } .ac-regout.bad { background: #fdecea; }
.ac-pre { margin: 0; max-height: 220px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; background: rgba(255, 255, 255, .6); border-radius: 8px; padding: 8px; }
/* qr */
.ac-genrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.ac[data-layout="narrow"] .ac-genrow { grid-template-columns: 1fr; } .ac-qrform[hidden] { display: none; }
.ac-instlist { display: grid; gap: 14px; }
.ac-inst { background: #fff; border-radius: 14px; padding: 18px; display: grid; gap: 12px; min-width: 0; }
.ac-insthead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ac-instdot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: gray; color: #fff; flex: none; }
.ac-inst[data-state="connected"] .ac-instdot { background: #2e7d32; } .ac-inst[data-state="waiting"] .ac-instdot { background: orange; }
.ac-instinfo { display: grid; gap: 2px; min-width: 0; flex: 1; justify-items: start; } .ac-instinfo > * { overflow-wrap: anywhere; max-width: 100%; }
.ac-insttitle { font-size: 16px; font-weight: 600; }
.ac-num { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: gray; cursor: copy; text-align: start; } .ac-num:hover { text-decoration: underline; }
.ac-mono { font-family: ui-monospace, Menlo, monospace; color: #0288d1; }
.ac-badge { display: inline-block; font-size: 13px; font-weight: 600; color: gray; } .ac-badge.waiting { color: #ed6c02; } .ac-badge.connected { color: #2e7d32; }
.ac-del { color: #d32f2f; }
.ac-qrbox { display: grid; place-items: center; padding: 16px; border-radius: 12px; background: #f5f7fb; }
.ac-qr { width: 250px; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; background: #fff; }
.ac-empty { text-align: center; padding: 16px; }
.ac .wk-hint { background: #eaf3fb; }
/* switch */
.ac-switchlbl { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.ac-switchlbl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ac-switchlbl i { position: absolute; inset: 0; border-radius: 11px; background: #b9b9b9; transition: background .15s; }
.ac-switchlbl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ac-switchlbl input:checked + i { background: var(--green); } .ac-switchlbl input:checked + i::after { transform: translateX(18px); }
.ac-switchlbl input:disabled { cursor: progress; } .ac-switchlbl input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; }
[dir="rtl"] .ac-switchlbl i::after { left: auto; right: 2px; } [dir="rtl"] .ac-switchlbl input:checked + i::after { transform: translateX(-18px); }
[dir="rtl"] .ac-classic { text-align: end; }
.ac .wk-toast, .ac .wk-modal .wk-toast { z-index: 2000; }
/* warm whatsapp */
.ac-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-segbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #cfcfcf; border-radius: 18px; background: #fff; color: gray; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ac-segbtn .wk-i { color: gray; } .ac-segbtn.on { background: #dfe9e2; border-color: var(--green); color: var(--ink); } .ac-segbtn.on .wk-i { color: var(--deep); }
.ac-warmbody { min-width: 0; }
.ac-warmlist { display: grid; gap: 10px; max-height: 60vh; overflow: auto; align-content: start; }
.ac-wmsg { display: flex; align-items: flex-start; gap: 8px; background: #f5f7fb; border-radius: 14px; padding: 10px 12px; min-width: 0; }
.ac-wtext { margin: 0; flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.ac-wdel { color: #d32f2f; flex: none; }
.ac-wform { display: flex; gap: 8px; align-items: center; } .ac-winput { flex: 1; min-width: 0; }
.ac-wsend { padding: 0 14px; } .ac-wsend:disabled { opacity: .5; }
.ac-wrow { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.ac-wlabel { font-size: 16px; font-weight: 600; }
.ac-winst { display: flex; align-items: center; gap: 14px; background: #f5f7fb; border-radius: 14px; padding: 14px; min-width: 0; }
.ac-wicon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: orangered; color: #fff; flex: none; }
.ac-wnum { color: gray; }
/* rest api */
.ac-keyrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ac-keybox { flex: 1; min-width: 0; background: #f5f7fb; border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.ac-keybox.empty { font-style: italic; color: gray; }
.ac-genkey { justify-self: start; }
.ac-h3 { margin: 0; font-size: 14px; font-weight: 600; } .ac-doctype .ac-h3 { text-transform: uppercase; margin-bottom: 8px; }
.ac-okh { color: #2e7d32; } .ac-badh { color: #d32f2f; }
.ac-endpoint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ac-chips { display: inline-flex; gap: 6px; } .ac-url { font-family: ui-monospace, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; direction: ltr; min-width: 0; }
.ac-chip { display: inline-block; border: 1px solid #cfcfcf; border-radius: 12px; padding: 1px 8px; font-size: 12px; white-space: nowrap; } .ac-chip.req { background: #fdecea; border-color: #f5b5ae; color: #b3261e; }
.ac-tablewrap { background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow-x: auto; }
.ac-doctable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-doctable th { text-align: start; font-weight: 600; } .ac-doctable th, .ac-doctable td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; overflow-wrap: anywhere; }
.ac-doctable tr:last-child td { border-bottom: 0; }
.ac-mono2 { font-family: ui-monospace, Menlo, monospace; direction: ltr; unicode-bidi: plaintext; } .ac-ex { color: #666; }
.ac-types { display: grid; gap: 18px; }
.ac-code { margin: 0; padding: 14px; border-radius: 12px; background: #f6f8fa; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.5; overflow-x: auto; max-width: 100%; direction: ltr; text-align: left; white-space: pre; }
.ac-resp.bad { color: #b3261e; }
.ac[data-layout="narrow"] .ac-doctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ac[data-layout="narrow"] .ac-doctable, .ac[data-layout="narrow"] .ac-doctable tbody, .ac[data-layout="narrow"] .ac-doctable tr, .ac[data-layout="narrow"] .ac-doctable td { display: block; width: 100%; }
.ac[data-layout="narrow"] .ac-doctable tr { padding: 6px 0; border-bottom: 1px solid #e3e3e3; } .ac[data-layout="narrow"] .ac-doctable tr:last-child { border-bottom: 0; }
.ac[data-layout="narrow"] .ac-doctable td { border: 0; padding: 3px 10px; }
.ac[data-layout="narrow"] .ac-doctable td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11.5px; }
.ac[data-layout="narrow"] .ac-card { padding: 14px; }
.ac-doctable th { text-transform: none; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; } .ac-doctable td:first-child { white-space: nowrap; overflow-wrap: normal; }
.ac[data-layout="narrow"] .ac-doctable th { white-space: normal; } .ac[data-layout="narrow"] .ac-doctable td:first-child { white-space: normal; overflow-wrap: anywhere; }

/* "Connect Multiple Assets" on a plan without Facebook / Instagram */
.ac-btn.locked { border-style: dashed; color: var(--wk-text-2, #5b6b64); background: #f7f9f8; }
.ac-btn.locked .ac-lock { margin-inline-start: 8px; padding: 1px 8px; border-radius: 10px; background: var(--wk-selected, #e8f6ee); color: var(--green, #1f9d55); font-size: 11px; font-weight: 600; }
.ac-multinote { margin-top: 10px; font-size: 12.5px; }
.ac-multinote a { color: var(--green, #1f9d55); font-weight: 600; }

/* A finished connection step: solid green with a tick (still clickable to connect again) */
.ac-btn.ac-done { background: var(--green, #1f9d55); border-color: var(--green, #1f9d55); color: #fff; }
.ac-btn.ac-done:hover { filter: brightness(.95); }