/**
 * Developed by Mohammad Rameez Imdad (Rameez Scripts)
 * WhatsApp: https://wa.me/923435347417 (For Custom Projects)
 * YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!)
 */
/* same order as the PHP template pages: icons + table base, then the template's own stylesheet (css/tpl.css,
   copied as is, re-copy to update). everything below is extension-only and wins over both without specificity fights */
@layer vendor, base, tpl;
@import url("../fa/css/all.min.css") layer(vendor);
@import url("tpl.css") layer(tpl);

/* tokens the template has no name for */
:root { --hover-bg: #eef2f7; }
body.dark-mode { --hover-bg: #262626; color-scheme: dark; }

/* element defaults sit under the template, so its sidebar links, buttons and badges keep their own colours */
@layer base {
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 14px; line-height: 1.45; }
  ::selection { background: rgba(var(--navy-accent-rgb), .22); }
  input, textarea { caret-color: var(--navy-accent); }
  * { scrollbar-width: thin; scrollbar-color: var(--input-border) transparent; }
  a { color: var(--accent-ink); }
  code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; padding: 1px 5px; border-radius: var(--r-chip); background: var(--hover-bg); }
  :focus-visible { outline: 2px solid var(--navy-accent); outline-offset: 2px; }
}
[hidden] { display: none !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.sub { display: block; font-size: 12.5px; color: var(--text-muted); }
.clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint { font-size: 12.5px; color: var(--text-muted); }
.ok-ic { color: var(--success); } .bad-ic { color: var(--danger); }
.ok-note { color: color-mix(in srgb, var(--success) 80%, var(--text-primary)); }
.warn-note { color: color-mix(in srgb, var(--warning) 55%, var(--text-primary)); font-size: 13px; }


/* shell: template sidebar + page head, only what the extension adds */
.sb-search { position: relative; }
.sb-find input { min-width: 0; }
.sb-results { position: absolute; left: 8px; right: 8px; top: calc(100% - 4px); z-index: 40; max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-color); border-radius: var(--sb-r); background: var(--bg-card); color: var(--text-primary); box-shadow: 0 10px 28px var(--shadow-hover); }
.sb-results button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: none; border-radius: var(--sb-r); background: none; text-align: left; cursor: pointer; }
.sb-results button:hover, .sb-results button.hi { background: var(--sb-hover, var(--hover-bg)); }
.sb-results b { font-size: 13.5px; color: var(--text-primary); }
.sb-results small { font-size: 12px; color: var(--text-muted); }
.sb-results p { padding: 10px; font-size: 13px; color: var(--text-muted); }
.sidebar.collapsed .sb-results { display: none; }
.sb-ver { text-align: left; }
.sb-ver .sb-avatar { border-radius: 50%; object-fit: cover; }
.head-txt h1 { display: flex; align-items: center; gap: 10px; }
.head-txt h1 #pageStatus:empty { display: none; }
.head-txt h1 .pill { font-size: 12px; }
.header-right { display: flex; align-items: center; gap: 6px; }
.notification-bell-wrapper { position: relative; }
.conn-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--sb-r); background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.bot-switch { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; border: 1px solid var(--border-color); border-radius: var(--sb-r); font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.bot-switch:has(.toggle:checked) { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 9%, var(--bg-card)); color: var(--success-ink); }
.bot-switch .toggle:checked { background: var(--success); }
.bot-switch .toggle, .set-ctrl .toggle, .toggle-row .toggle, .qr-act .toggle { width: 44px; min-width: 44px; max-width: 44px; height: 24px; flex: 0 0 44px; padding: 0; }
.nav-btn { position: relative; width: 38px; height: 38px; flex: 0 0 38px; border: none; background: transparent; border-radius: var(--sb-r); color: var(--text-secondary); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s; }
.nav-btn:hover { background: rgba(var(--navy-accent-rgb), .09); color: var(--accent-ink); }
.nav-btn.del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }

/* language: busy while a language loads; right-to-left: the sidebar moves right, the save bar follows */
body.lang-busy { cursor: progress; }
body.lang-busy .main-content { opacity: .75; transition: opacity .15s; }
[dir="rtl"] .head-crumbs .crumb-sep { transform: scaleX(-1); }
[dir="rtl"] .savebar { left: 0; right: var(--sb-w); }
[dir="rtl"] body:has(.sidebar.collapsed) .savebar { left: 0; right: var(--sb-mini); }

/* page tabs (RSTabs) */
.rs-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--sb-r); overflow-x: auto; scrollbar-width: none; }
.rs-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: none; border-radius: var(--sb-r); background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.rs-tab:hover { background: rgba(var(--navy-accent-rgb), .07); color: var(--text-primary); }
.rs-tab.active { background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); }
.rs-tab i { font-size: 14px; }
.rs-tab-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-secondary); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.rs-tab.active .rs-tab-n { background: var(--navy-accent); color: var(--on-accent); }
.view { width: 100%; display: flex; flex-direction: column; gap: 16px; }

/* settings cards = template setup panels (ui-panel): head with icon tile, then a hairline switch list */
.set-group.ui-panel { margin: 0; min-width: 0; }
/* blocks built for an unpadded card: the panel pads now, lists + bars run edge to edge like table rows */
.set-group.ui-panel > :is(.tiles, .hchecks, .hnote, .qr-tools, .pipeline, .lic-fail, .mcp-why, .gs-steps, .steps, .flow, .faq, .guide, .contact, .lic-btns, .lic-tiles, .composer, .tb-table, p, ul) { padding-left: 0; padding-right: 0; }
.set-group.ui-panel > :is(.qr-list, .tb-bar) { margin-left: -20px; margin-right: -20px; }
.set-group.ui-panel > :last-child:not(.set-row) { padding-bottom: 0; margin-bottom: 0; }
.set-group.ui-panel > .qr-list:last-child { margin-bottom: -20px; }
.set-head p { max-width: 80ch; }
.set-head h3 { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.set-group > .set-head:last-child { margin-bottom: 0; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 10px 32px; padding: 12px 14px; min-height: 60px; border: 1px solid var(--border-color); border-top-width: 0; transition: background-color .2s; }
:not(.set-row) + .set-row, .set-row:first-child { border-top-width: 1px; border-top-left-radius: var(--r-ctrl); border-top-right-radius: var(--r-ctrl); }
.set-row:not(:has(+ .set-row)) { border-bottom-left-radius: var(--r-ctrl); border-bottom-right-radius: var(--r-ctrl); }
.set-row + :not(.set-row) { margin-top: 16px; }
.set-row:hover { background: rgba(var(--navy-accent-rgb), .04); }
.set-row.wide { grid-template-columns: minmax(0, 1fr); }
.set-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-label b { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; flex-wrap: wrap; }
.set-row.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { background: rgba(var(--navy-accent-rgb), .14); } 100% { background: transparent; } }
.set-label span { font-size: 12.5px; color: var(--text-muted); }
.set-ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.set-ctrl > input:not(.toggle), .set-ctrl > .pwd, .set-ctrl > .unit, .set-ctrl > textarea { flex: 1; }
.set-ctrl .sep { color: var(--text-muted); font-size: 13px; }
/* info tip: hover, keyboard focus or tap */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--text-muted); font-size: 12.5px; cursor: help; vertical-align: middle; }
.tip:hover, .tip:focus-visible { color: var(--navy-accent); }
.tip::after { content: attr(data-tip); position: absolute; left: -8px; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, 72vw); padding: 8px 11px; border-radius: var(--r-ctrl); background: var(--navy-dark); color: #fff; font: 400 12.5px/1.45 -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left; letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 60; pointer-events: none; }
.tip:hover::after, .tip:focus::after { opacity: 1; visibility: visible; transform: none; }


/* inputs: template field look (hairline, 40px, accent ring) */
.field { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: var(--r-ctrl); background: var(--input-bg); color: var(--text-primary); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
textarea.field { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea.field.tall { min-height: 260px; }
.field::placeholder { color: var(--text-muted); opacity: 1; }
.field:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(var(--navy-accent-rgb), .2); }
.field.bad { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.pwd { position: relative; display: flex; min-width: 0; }
.pwd .field { padding-right: 44px; }
/* saved keys: masked, never shown again; Replace to type a new one */
.pwd-mask { display: none; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 4px 4px 12px; border: 1px solid var(--input-border); border-radius: var(--r-ctrl); background: var(--hover-bg); }
.pwd-mask i.fa-lock { color: var(--success); }
.pwd-mask code { flex: 1; min-width: 0; background: none; padding: 0; color: var(--text-primary); font-size: 13.5px; letter-spacing: .5px; }
.pwd.masked > .field, .pwd.masked > button[data-eye] { display: none; }
.pwd.masked > .pwd-mask { display: flex; }
.pwd-keep { display: none; margin-top: 6px; }
.pwd.replacing { flex-wrap: wrap; }
.pwd.replacing > .pwd-keep { display: inline-flex; }
.pwd > button[data-eye] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.unit { position: relative; display: flex; min-width: 0; max-width: 160px; margin-left: auto; }
.unit .field { padding-right: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; }
.set-ctrl input[type=time].field { max-width: 140px; }
.prefix { display: flex; min-width: 0; }
.prefix span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--input-border); border-right: none; border-radius: var(--r-ctrl) 0 0 var(--r-ctrl); background: var(--hover-bg); color: var(--text-muted); font-weight: 700; }
.prefix .field { border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* any language: each line takes the direction of its own text (Urdu, Arabic right to left) */
.field:not([type=number]):not([type=url]):not([type=password]), .bubble, .tl .tx p, .item p, .din, .qr-text, .qr-ex span, .sample, .wrow small, .ord-card .kv b { unicode-bidi: plaintext; text-align: start; }

.toggle-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.toggle-row .txt { flex: 1; min-width: 0; }
.toggle-row .txt b { display: block; font-size: 14px; }

/* buttons: template .btn-primary / -secondary / -danger / -sm, sized for rows */
.btn { min-height: 40px; padding: 8px 18px; white-space: nowrap; border: 1px solid transparent; }
.btn:hover:not(:disabled) { transform: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 12.5px; }
.btn.icon { width: 40px; padding: 0; flex: 0 0 40px; }
.btn.btn-sm.icon { width: 32px; flex-basis: 32px; }
.btn.del:hover:not(:disabled) { background: var(--danger); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--r-ctrl); color: inherit; background: rgba(255,255,255,.12); cursor: pointer; }
.icon-btn:hover { background: rgba(255,255,255,.22); }

/* AdminLTE dashboard */
/* info boxes: the template gives corners only, so the layout lives here (Soft look: tinted icon tile) */
.info-box { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 84px; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 1px 3px var(--shadow-color); }
.info-box-icon { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--sb-r); font-size: 20px; --ibc: var(--accent-ink); background: color-mix(in srgb, var(--ibc) 12%, transparent); color: var(--ibc); }
.info-box-icon.bg-navy { --ibc: var(--navy-primary); }
.info-box-icon.bg-success { --ibc: var(--success-ink); }
.info-box-icon.bg-danger { --ibc: var(--danger-ink); }
body.dark-mode .info-box-icon.bg-navy { --ibc: var(--accent-ink); }
.info-box-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info-box-text { display: flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-box-number { font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.info-box-number small { font-size: 13px; color: var(--text-muted); font-weight: 600; }
/* template cards keep their look; spacing comes from the view's gap */
.view :is(.lte-card, .lte-kpi-grid, .info-box, .ui-panel) { margin-bottom: 0; }
.list-kpis .small-box .inner h3 small { font-size: 15px; font-weight: 700; opacity: .85; }
.list-kpis:empty { display: none; }
.info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ib-bar { height: 5px; border-radius: 3px; background: var(--border-light); overflow: hidden; margin-top: 2px; }
.ib-bar i { display: block; height: 100%; width: 0; background: var(--success); transition: width .3s; }
.ib-bar.warn i { background: var(--warning); }
.ib-bar.bad i { background: var(--danger); }
.ib-note { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lte-card-tools [data-collapse] { width: 32px; height: 32px; border: none; background: none; color: var(--text-muted); border-radius: var(--r-ctrl); cursor: pointer; }
.lte-card-tools [data-collapse]:hover { background: var(--hover-bg); color: var(--navy-accent); }
.lte-card.collapsed .lte-card-body { display: none; }
.lte-card.collapsed .lte-card-header { border-bottom: none; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.chipset { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-ctrl); background: var(--hover-bg); overflow-x: auto; scrollbar-width: none; }
.chipset button { min-height: 30px; padding: 4px 10px; border: none; border-radius: var(--r-ctrl); background: transparent; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.chipset button.active { background: var(--navy-accent); color: var(--on-accent); }

.nr-row { background: color-mix(in srgb, var(--warning) 8%, var(--bg-card)); }

/* drafts waiting for my Send */
.drafts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.drafts:empty { display: none; }
.drow { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-panel); background: rgba(var(--navy-accent-rgb), .05); border: 1px solid rgba(var(--navy-accent-rgb), .25); }
.dhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dhead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhead time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.din { font-size: 13px; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.din i { width: 16px; color: var(--text-muted); font-size: 11px; }
.dtext { min-height: 76px; font-size: 14px; }
.drow .btn-row .btn { flex: 0 0 auto; }

/* waiting rows + timeline */
.waiting { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.waiting:empty { display: none; }
.wrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--warning) 10%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.wrow .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--warning); color: #1f1400; display: flex; align-items: center; justify-content: center; }
.wrow b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow small { display: block; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { list-style: none; display: flex; flex-direction: column; }
.tl { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.tl:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--border-color); }
.tl .mk { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--bg-card); border: 2px dashed var(--input-border); color: var(--text-muted); }
.tl.sent .mk { background: var(--success); border: none; color: #fff; }
.tl.human .mk { background: var(--warning); border: none; color: #1f1400; }
.tl.error .mk { background: var(--danger); border: none; color: #fff; }
.tl.stop .mk { background: var(--hover-bg); border: none; color: var(--text-secondary); }
.tl .tx { min-width: 0; padding-top: 4px; }
.tl .tx b { font-weight: 600; }
.tl .tx .qr-pill { margin-left: 6px; vertical-align: 1px; }
.tl .meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tl .tx p { margin-top: 4px; font-size: 13px; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.tl .tx p i { width: 16px; color: var(--text-muted); font-size: 11px; }

/* checklist + next best action + glance */
.checks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 32px; }
.checks li > i { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--success); color: #fff; }
.checks li.no > i { background: var(--warning); color: #1f1400; }
.checks li button { margin-left: auto; }
.nba-card { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); color: #fff; }
.nba-card .lte-card-header { border-bottom-color: rgba(255,255,255,.12); }
.nba-card .lte-card-title, .nba-card .lte-card-title i, .nba-card .lte-card-tools [data-collapse] { color: #fff; }
.nba-card .lte-card-tools [data-collapse]:hover { background: rgba(255,255,255,.12); }
.nba { display: flex; flex-direction: column; gap: 12px; }
.nba small { display: none; }
.nba h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.nba .btn-row .btn { flex: 0 0 auto; }
.nba .btn { background: #fff; color: var(--navy-primary); }
.nba .btn.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.nba .btn.btn-secondary:hover { background: rgba(255,255,255,.1); }
.kvs { display: flex; flex-direction: column; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border-light); font-size: 13.5px; }
.kv:first-child { border-top: none; }
.kv span { color: var(--text-muted); }
.kv b { text-align: right; word-break: break-word; }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-chip); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; background: color-mix(in srgb, var(--success) 70%, #000); }
.tag.warn { background: var(--warning); color: #1f1400; }
.tag.bad { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-chip); font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap; }
.pill.dot-l::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-sent { --c: color-mix(in srgb, var(--success) 85%, var(--text-primary)); } .c-human { --c: var(--navy-accent); } .c-skip { --c: var(--text-muted); } .c-error { --c: var(--danger); }
.c-new { --c: color-mix(in srgb, var(--warning) 55%, var(--text-primary)); }

/* engine tiles */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border-color); border-radius: var(--r-panel); cursor: pointer; transition: border-color .15s, background .15s; min-height: 112px; }
.tile:hover { border-color: color-mix(in srgb, var(--navy-accent) 45%, var(--border-color)); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile .ic { width: 36px; height: 36px; border-radius: var(--r-ctrl); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .1); }
.tile b { font-size: 14px; }
.tile small { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.tile small.ok { color: color-mix(in srgb, var(--success) 80%, var(--text-primary)); }
.tile .chk { position: absolute; top: 12px; right: 12px; color: var(--navy-accent); opacity: 0; transition: opacity .15s; }
.tile:has(input:checked) { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .06); box-shadow: inset 0 0 0 1px var(--navy-accent); }
.tile:has(input:checked) .chk { opacity: 1; }
.tile:has(input:checked) .ic { background: var(--navy-accent); color: var(--on-accent); }
.tile:has(input:focus-visible) { outline: 2px solid var(--navy-accent); outline-offset: 2px; }

/* business + preset tiles */
.biz-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.biz-tiles .tile { min-height: 96px; }
.presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
button.tile { background: transparent; color: inherit; font: inherit; text-align: left; }
.tile.on { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .06); box-shadow: inset 0 0 0 1px var(--navy-accent); }
.tile.on .chk { opacity: 1; }
.tile.on .ic { background: var(--navy-accent); color: var(--on-accent); }
.tile.custom { cursor: default; opacity: .55; }
.tile.custom.on { opacity: 1; }
.tile small.nums { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; }

/* setup wizard */
.wiz-steps { display: flex; gap: 6px; list-style: none; margin-right: auto; margin-left: 16px; overflow-x: auto; scrollbar-width: none; }
.wiz-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.wiz-steps span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); font-size: 12px; }
.wiz-steps li.on { background: var(--navy-accent); color: var(--on-accent); }
.wiz-steps li.on span { color: var(--navy-accent); }
.wiz-steps li.done span { background: var(--success); color: #fff; }
#wizDlg .dlg-head h2 { flex: 0 0 auto; }
.grow { flex: 1; }
.wiz-h { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.wiz-h i { color: var(--navy-accent); }
.fill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.fill-bar .hint { flex: 1 1 220px; min-width: 0; }
.fill-btns { flex: 0 0 auto; }
.fill-btns .btn { flex: 0 0 auto; }
@media (max-width: 600px) { .fill-bar .btn { flex: 1 1 auto; } .fill-btns { width: 100%; } .fill-btns .btn:first-child { flex: 1 1 auto; } }
.dlg-form .tiles { padding: 0; }
.wiz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.key-row { display: flex; gap: 8px; }
.key-row .pwd { flex: 1; }
.key-msg { font-size: 13px; color: var(--text-muted); }
.key-msg.ok { color: color-mix(in srgb, var(--success) 80%, var(--text-primary)); font-weight: 600; }
.key-msg.bad { color: var(--danger); font-weight: 600; }
.wiz-on { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--r-panel); }
.dlg-preview .sample { margin: 0; }
.tl-fix { margin-top: 6px; }

.consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-panel); background: rgba(var(--navy-accent-rgb), .06); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy-accent); flex: 0 0 18px; }

/* welcome tour */
.tour .dlg-box { height: auto; }
.tour-body { padding: 30px 26px 16px; text-align: center; }
.tour-ico { width: 74px; height: 74px; margin: 0 auto; border-radius: var(--r-panel); background: linear-gradient(135deg, var(--navy-accent), var(--navy-light)); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.tour-body h3 { font-size: 20px; color: var(--text-primary); margin: 14px 0 8px; }
.tour-body p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.tour-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.tour-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--border-color); cursor: pointer; transition: all .2s; }
.tour-dots button.on { background: var(--navy-accent); width: 20px; border-radius: 5px; }
.tour .dlg-foot { border-top: none; padding-top: 4px; }

/* budget */
.daybars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 8px; border-bottom: 1px solid var(--border-color); }
.daybars span { flex: 1; min-width: 4px; max-width: 28px; border-radius: 3px 3px 0 0; background: rgba(var(--navy-accent-rgb), .4); transition: height .3s; }
.daybars span.today { background: var(--navy-accent); }
.daybars span.zero { background: var(--border-color); }
.dayaxis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
#bUnpriced { margin-top: 10px; }
.cur-code { max-width: 90px; text-transform: uppercase; }

/* health */
.hchecks { padding: 0 20px 8px; gap: 0; }
.hchecks li { display: grid; grid-template-columns: 24px 190px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-light); }
.hchecks li:first-child { border-top: none; }
.hchecks .hl { font-weight: 600; }
.hchecks .hv { min-width: 0; font-size: 13.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.hchecks li button { margin-left: 0; }
.hnote { padding: 0 20px 16px; }

/* privacy page */
body.doc { padding: 24px 16px 48px; }
.doc main { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.doc header { display: flex; align-items: center; gap: 14px; }
.doc header img { width: 48px; height: 48px; border-radius: 50%; }
.doc h1 { font-size: 24px; }
.doc .set-group { padding: 4px 0 8px; }
.doc .set-group > p, .doc .set-group > ul { padding: 0 20px 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.doc .set-group > ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.doc .set-group > ul li { position: relative; padding-left: 16px; }
.doc .set-group > ul li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--navy-accent); }

/* mini segmented radio */
.seg-mini { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-ctrl); background: var(--hover-bg); }
.seg-mini label { position: relative; cursor: pointer; }
.seg-mini input { position: absolute; opacity: 0; pointer-events: none; }
.seg-mini span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--r-ctrl); font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: background .15s, color .15s; }
.seg-mini input:checked + span { background: var(--bg-card); color: var(--navy-accent); box-shadow: 0 1px 3px var(--shadow-color); }
.seg-mini input:focus-visible + span { outline: 2px solid var(--navy-accent); outline-offset: 1px; }

/* searchable dropdown */
.sd-host { flex: 1; min-width: 0; }
.searchable-dropdown { position: relative; }
.sd-trigger { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border: 2px solid var(--input-border); border-radius: var(--r-ctrl); background: var(--input-bg); color: var(--text-primary); font-size: 15px; text-align: left; cursor: pointer; transition: all .3s; }
.searchable-dropdown.open .sd-trigger, .sd-trigger:focus-visible { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .15); }
.sd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-label small, .sd-item small { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.sd-label.sd-placeholder { color: var(--text-muted); }
.sd-arrow { font-size: 11px; color: var(--text-muted); transition: transform .2s; }
.sd-arrow.open { transform: rotate(180deg); }
.sd-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 300px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-panel); box-shadow: 0 10px 28px rgba(0,0,0,.16); overflow: hidden; }
.sd-search { width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border-light); background: transparent; font-size: 16px; outline: none; }
.sd-list { max-height: 244px; overflow-y: auto; padding: 4px; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-ctrl); font-size: 13.5px; cursor: pointer; }
.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sd-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item .sd-main small { margin: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item em { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-secondary); white-space: nowrap; }
.sd-check { flex: 0 0 14px; font-size: 12px; color: var(--navy-accent); visibility: hidden; }
.sd-item:hover, .sd-item.hi { background: var(--hover-bg); }
.sd-item.selected { background: rgba(var(--navy-accent-rgb), .08); }
.sd-item.selected b { color: var(--navy-accent); }
.sd-item.selected .sd-check { visibility: visible; }
.sd-empty { padding: 12px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* lists */
.list { display: flex; flex-direction: column; }
.item { padding: 10px 0; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item:first-child { border-top: none; padding-top: 0; }
.item .head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.item p { font-size: 12px; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.item p i { width: 14px; color: var(--text-muted); }
.set-row .list { width: 100%; }
.empty { padding: 20px 8px; text-align: center; color: var(--text-muted); font-size: 13px; list-style: none; }
.empty > i { display: block; font-size: 24px; margin-bottom: 8px; color: var(--input-border); }
.empty b { display: block; color: var(--text-secondary); margin-bottom: 2px; }
.empty .btn { margin-top: 12px; }
.empty-acts { justify-content: center; }
.empty-acts .btn { flex: 0 0 auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: 0 0 8px; }
.dot.ok { background: var(--success); } .dot.bad { background: var(--danger); } .dot.wait { background: var(--warning); }
.conn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }

/* quick replies */
.qr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-secondary); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.qr-tools { display: flex; align-items: center; gap: 10px; padding: 0 20px 16px; }
.search { position: relative; flex: 1; min-width: 0; }
.search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; }
.search .field { padding-left: 36px; }
.qr-tools .btn-row { flex-wrap: nowrap; }
.qr-tools .btn-row .btn { flex: 0 0 auto; }
.qr-list { display: flex; flex-direction: column; }
.qr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--border-light); }
.qr-item.off .qr-main { opacity: .55; }
.qr-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qr-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.qr-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .1); padding: 2px 8px; border-radius: var(--r-chip); }
.qr-when { font-size: 13px; color: var(--text-muted); }
.qr-text { font-size: 13.5px; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.qr-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.qr-meta i { margin-right: 4px; }
.qr-meta .learned { color: var(--navy-accent); }
.qr-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.qr-ex span { font-size: 12px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.qr-item.pickable { grid-template-columns: 22px minmax(0, 1fr) auto; }
.qr-pick, .qr-all input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--navy-accent); cursor: pointer; }
.qr-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.qr-bulk { border-top: 0; padding-top: 0; }
@media (max-width: 768px) { .qr-item.pickable { grid-template-columns: 22px minmax(0, 1fr); } .qr-item.pickable .qr-act { grid-column: 2; justify-content: flex-start; } }
.qr-act .toggle { margin-right: 6px; }
.qr-list > .empty { border-top: 1px solid var(--border-light); padding: 32px 20px; }
.qr-pill { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--navy-accent); }

/* status pipeline (chevrons) */
.pipeline { display: flex; gap: 4px; padding: 0 20px 14px; overflow-x: auto; }
.pipeline button { flex: 1 0 auto; min-height: 44px; padding: 8px 26px 8px 28px; border: none; background: var(--hover-bg); color: var(--text-secondary); font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); transition: background .15s, color .15s; }
.pipeline button:first-child { padding-left: 18px; border-radius: var(--r-ctrl) 0 0 var(--r-ctrl); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.pipeline button:last-child { padding-right: 18px; border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.pipeline button:hover { background: color-mix(in srgb, var(--navy-accent) 12%, var(--hover-bg)); }
.pipeline button.active { background: var(--navy-accent); color: var(--on-accent); }
.pipeline b { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-chip); background: rgba(0,0,0,.08); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pipeline button.active b { background: rgba(255,255,255,.25); }

/* bulk bar + table */
.tb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--border-light); }
.tb-bar > span { margin-right: auto; font-size: 13px; color: var(--text-secondary); }
.tb-table { padding: 0 8px 8px; min-width: 0; }
/* identity cell, value pills, coloured row actions — theme tokens only */
.tb-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-ava { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .3px; background: var(--navy-accent); }
.tb-ava.t1 { background: var(--navy-light); } .tb-ava.t2 { background: color-mix(in srgb, var(--navy-accent) 60%, var(--success)); } .tb-ava.t3 { background: color-mix(in srgb, var(--navy-accent) 55%, var(--navy-primary)); }
.tb-uid { min-width: 0; line-height: 1.3; }
.tb-uid b { display: block; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-uid small { display: block; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-chip); font-size: 11.5px; font-weight: 700; margin: 2px 4px 2px 0; }
.tb-pill.role { background: color-mix(in srgb, var(--navy-accent) 14%, transparent); color: var(--navy-accent); }
.tb-pill.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 75%, var(--text-primary)); }
.tb-pill.off { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.tb-pill.zero { background: var(--bg-primary); color: var(--text-muted); font-weight: 600; }
.tb-no { color: var(--navy-accent); }
.tb-money { color: color-mix(in srgb, var(--success) 70%, var(--text-primary)); }
.tabulator-row .nav-btn.ic-view { color: var(--navy-accent); }
.tabulator-row .nav-btn.ic-edit { color: color-mix(in srgb, var(--warning) 70%, var(--text-primary)); }
.tabulator-row .nav-btn.ic-go { color: color-mix(in srgb, var(--success) 80%, var(--text-primary)); }
.tabulator-row .nav-btn.ic-view:hover { background: color-mix(in srgb, var(--navy-accent) 12%, transparent); }
.tabulator-row .nav-btn.ic-edit:hover { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.tabulator-row .nav-btn.ic-go:hover { background: color-mix(in srgb, var(--success) 13%, transparent); }
.tabulator-row .nav-btn.ic-msg { color: #1da851; }
.tabulator-row .nav-btn.ic-msg:hover { background: color-mix(in srgb, #25D366 14%, transparent); }
.tabulator-row .nav-btn.ic-del { color: var(--danger-ink); }
.tabulator-row .nav-btn.ic-del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
body.dark-mode .tabulator-row .nav-btn.ic-msg { color: #4fd17f; }
.tabulator-row .tabulator-cell .nav-btn { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }

/* drop zone + files */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px; border: 2px dashed color-mix(in srgb, var(--navy-accent) 40%, var(--border-color)); border-radius: var(--r-panel); background: rgba(var(--navy-accent-rgb), .04); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.drop:hover, .drop.over { background: rgba(var(--navy-accent-rgb), .1); border-color: var(--navy-accent); }
.drop:focus-within { outline: 2px solid var(--navy-accent); outline-offset: 2px; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop > i { font-size: 24px; color: var(--navy-accent); }
.drop b { font-size: 14px; }
.drop b em { font-style: normal; color: var(--navy-accent); }
.drop span { font-size: 12px; color: var(--text-muted); }
.drop-err { font-size: 12.5px; color: var(--danger); }
.files { display: flex; flex-direction: column; gap: 8px; }
.files:empty { display: none; }
.file { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: var(--bg-card); }
.file .th { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-ctrl); display: flex; align-items: center; justify-content: center; background: rgba(var(--navy-accent-rgb), .1); color: var(--navy-accent); font-size: 18px; object-fit: cover; }
.file div { flex: 1; min-width: 0; }
.file b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file small { font-size: 12px; color: var(--text-muted); }
.att { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-end; max-width: 85%; justify-content: flex-end; }
.att span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-ctrl); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att span i { color: var(--navy-accent); }

/* dialogs */
.dlg { margin: auto; padding: 0; border: none; background: transparent; color: var(--text-primary); width: 90vw; height: 90vh; max-width: none; max-height: none; }
.dlg::backdrop { background: rgba(0, 0, 0, .6); }
body.dark-mode .dlg::backdrop { background: rgba(0, 0, 0, .8); }
.dlg[open] { animation: dlg-in .18s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } }
.dlg-box { height: 100%; display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--sb-r); box-shadow: 0 4px 24px var(--shadow-hover); overflow: hidden; }
.dlg-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 14px 16px 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
.dlg-head h2 { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlg-head h2 > i { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 15px; }
.dlg-head .nav-btn { color: var(--text-muted); font-size: 18px; }
.dlg-head .nav-btn:hover { color: var(--text-primary); background: rgba(var(--navy-accent-rgb), .08); }
.dlg-tabs { display: none; }
.dlg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
.dlg-form { overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.fg { display: flex; flex-direction: column; gap: 6px; }
.fg label { font-size: 14px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.fg label i { color: var(--accent-ink); width: 14px; text-align: center; }
.dlg-preview { overflow-y: auto; padding: 20px 24px; background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; }
.dlg-preview h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.dlg-preview h3 + * { margin-bottom: 12px; }
.wa-phone { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--navy-accent) 5%, var(--bg-card)); border: 1px solid var(--border-color); min-height: 160px; }
.wa-phone .bubble { max-width: 85%; }
.wa-phone .bubble.ghost { color: var(--text-muted); font-style: italic; }
.need { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.need li { display: flex; gap: 8px; align-items: baseline; color: var(--text-secondary); }
.need li i { width: 14px; color: var(--warning); }
.need li.done i { color: var(--success); }
.dlg-foot { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-color); }
.dlg-foot .btn { min-width: 120px; justify-content: center; }
.dlg.sm { width: 30vw; min-width: min(400px, 92vw); height: auto; min-height: 30vh; max-height: 90vh; } /* small popups (confirm, one question, tour): centred, 30% wide + tall */
.dlg.sm[open] { display: flex; }
.dlg.sm .dlg-box { flex: 1; height: auto; }
.dlg.sm .dlg-box > :not(.dlg-head):not(.dlg-foot) { flex: 1; overflow-y: auto; }
.dlg-msg { padding: 20px 24px; color: var(--text-secondary); }
.dlg.sm .dlg-head h2 > i { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* order popup */
.ord-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ord-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ord-card { border: 1px solid var(--border-color); border-radius: var(--r-panel); overflow: hidden; min-width: 0; }
.ord-card h4 { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; background: color-mix(in srgb, var(--navy-accent) 6%, var(--bg-card)); color: var(--text-secondary); }
.ord-card h4 i { color: var(--navy-accent); }
.ord-card > :not(h4) { margin: 0 14px; }
.ord-card > :last-child { margin-bottom: 12px; }
.ord-card .sub, .ord-card > p { padding-top: 10px; }
.ord-card .kv:first-of-type { border-top: none; }
.ord-items { width: calc(100% - 28px); border-collapse: collapse; font-size: 13.5px; margin-top: 6px !important; }
.ord-items th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.ord-items td { padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.ord-items .num, .ord-items th:not(:first-child) { text-align: right; }
.ord-items tfoot td { font-weight: 700; border-bottom: none; padding-top: 10px; }
.ord-acts { display: flex; flex-direction: column; gap: 8px; }
/* bookings */
.ord-cards.one { grid-template-columns: minmax(0, 1fr); }
.bk-off { margin: 0 20px 14px; padding: 10px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.bk-off i { color: color-mix(in srgb, var(--warning) 70%, var(--text-primary)); }
.day-chips, .slot-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chips .chip, .slot-pick .slot { min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: var(--r-chip); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.day-chips .chip.on, .slot-pick .slot.on { background: var(--navy-accent); border-color: var(--navy-accent); color: var(--on-accent); }
.slot-pick { margin-bottom: 8px; }
.need { margin-top: 8px; }
.ord-acts .btn { justify-content: flex-start; }

/* knowledge + customers pages */
.tb-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; }
.tb-link:hover { color: var(--navy-accent); }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.35; font-size: 13px; }
.nav-btn .dim { opacity: .35; }
.switch-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.switch-row small { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.biz-tiles .tile { min-height: 96px; }
.tb-bar .search { flex: 1 1 220px; }
.dlg-msg .fg { padding: 0; }
@media (max-width: 768px) { .biz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* licence: status hero, banner (dashboard + popup), activate row */
.lic-hero { display: flex; align-items: center; gap: 16px; padding: 20px; margin-bottom: 20px; border-radius: var(--r-panel); background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--c, var(--navy-accent)) 35%, var(--border-color)); --c: var(--navy-accent); }
.lic-hero.ok { --c: var(--success); }
.lic-hero.warn { --c: var(--warning); }
.lic-hero.bad { --c: var(--danger); }
.lic-ic { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r-ctrl); background: var(--c); color: #fff; font-size: 20px; }
.lic-hero.warn .lic-ic { color: #1f1400; }
.lic-hero > div > b { display: block; font-size: 18px; color: var(--text-primary); }
.lic-hero > div > span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 14px; }
.lic-act { display: flex; gap: 10px; width: 100%; }
.lic-act .field { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .5px; text-transform: uppercase; }
.lic-fail { padding: 0 20px 16px; color: color-mix(in srgb, var(--danger) 80%, var(--text-primary)); }
.lic-val { justify-content: flex-end; text-align: right; color: var(--text-primary); }
.lic-val code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; }
.lic-btns { padding: 16px 20px 20px; flex-wrap: wrap; }
.lic-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px; border-radius: var(--r-panel);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--bg-card)); --c: var(--warning); }
.lic-banner.bad { --c: var(--danger); }
.lic-banner > i { color: color-mix(in srgb, var(--c) 75%, var(--text-primary)); font-size: 18px; }
.lic-banner > div { flex: 1; min-width: 0; }
.lic-banner b { display: block; color: var(--text-primary); }
.lic-banner span { display: block; font-size: 13px; color: var(--text-secondary); }
.lic-pop { padding: 0; }
.lic-pop .lic-banner { margin: 0; }
.lic-pop .lic-banner { flex-wrap: wrap; }
.lic-pop .lic-banner > div { flex: 1 1 60%; }
.lic-lock .btn-row { justify-content: center; }
.lic-buy .btn { justify-self: end; }
/* plan cards: raised top panel (price box, line, dark pill), light ticks under it */
.lic-plans-group { --pl-line: color-mix(in srgb, var(--text-primary) 8%, transparent); padding: 28px 8px 20px; background: transparent; box-shadow: none; }
.lic-plans-head { max-width: 1080px; margin: 0 auto 28px; text-align: center; }
.lic-plans-head h2 { margin: 0 0 8px; color: var(--text-primary); font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.lic-plans-head p { margin: 0; color: var(--text-secondary); font-size: 14.5px; }
.lic-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.lic-plan-trial .lic-plan-hero { background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); }
.lic-plan-trial .lic-plan-badge { background: var(--success); color: #fff; }
.lic-plan-btn i { margin-right: 8px; }
button.lic-plan-btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; }
.lic-plan { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 30px; background: var(--bg-card); box-shadow: 0 1px 2px var(--shadow-color), 0 24px 48px -30px var(--shadow-hover); }
.lic-plan-top { display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: var(--bg-card); box-shadow: 0 0 0 1px var(--pl-line), 0 14px 28px -18px var(--shadow-hover); }
.lic-plan-hero { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 136px; padding: 14px 16px 16px; border-radius: 18px; background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card)); }
.lic-plan.hot .lic-plan-hero { background: linear-gradient(135deg, rgba(var(--navy-accent-rgb), .20), rgba(var(--navy-accent-rgb), .07)); }
.lic-plan-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lic-plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; }
.lic-plan-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--navy-accent); color: var(--on-accent); font-size: 11.5px; font-style: normal; font-weight: 700; }
.lic-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--text-primary); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.lic-price small { margin-right: 2px; color: var(--text-secondary); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.lic-per { color: var(--text-primary); font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.lic-plan-sub { min-height: 38px; margin: 14px 8px 16px; color: var(--text-primary); font-size: 14px; line-height: 1.4; }
.lic-plan-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 88%, var(--bg-card)), var(--text-primary)); color: var(--bg-card); font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px -8px rgba(0,0,0,.5); touch-action: manipulation; transition: transform .2s, filter .2s; }
.lic-plan-btn:hover { transform: translateY(-1px); filter: brightness(1.15); color: var(--bg-card); }
.lic-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 14px; flex: 1; margin: 0; padding: 22px 16px 14px; }
.lic-plan-feats li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-primary); font-size: 14px; line-height: 1.4; }
.lic-plan-feats i { margin-top: 3px; color: var(--text-muted); font-size: 11px; text-align: center; }
.lic-pay-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 10px 10px; }
.lic-pay { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--pl-line); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.lic-pay span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-pay:hover { border-color: rgba(var(--navy-accent-rgb), .5); background: rgba(var(--navy-accent-rgb), .06); color: var(--text-primary); }
.lic-pay i { flex: none; color: var(--navy-accent); font-size: 12px; }
.lic-plan-note { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 1080px; margin: 22px auto 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; text-align: center; }
.lic-plan-note > i { flex: none; color: var(--navy-accent); }
.lic-plan-note b { color: var(--text-primary); }
/* order + screening forms, send-a-message dialog */
.of-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.of-grid:empty { display: none; }
.of-items { display: flex; flex-direction: column; gap: 8px; }
.of-item { display: grid; grid-template-columns: minmax(0, 1fr) 84px 120px 38px; gap: 8px; align-items: center; }
.of-add { align-self: flex-start; margin-top: 4px; }
.of-type, .sf-status { max-width: 420px; }
.msg-to { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); }
.msg-to > i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--sb-r); background: color-mix(in srgb, #25D366 16%, transparent); color: #1da851; font-size: 18px; }
.msg-to span { display: flex; flex-direction: column; min-width: 0; }
.msg-to b { color: var(--text-primary); }
.msg-to small { color: var(--text-muted); font-size: 12.5px; }
.scr-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scr-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: var(--bg-card); color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.scr-mode i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .1); color: var(--accent-ink); font-size: 15px; }
.scr-mode b { color: var(--text-primary); font-size: 14px; }
.scr-mode small { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.scr-mode:hover { border-color: rgba(var(--navy-accent-rgb), .55); }
.scr-mode.on { border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(var(--navy-accent-rgb), .22); }
.scr-mode.on i { background: var(--navy-accent); color: var(--on-accent); }
.scr-row { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); }
.scr-row-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--navy-accent) 5%, var(--bg-secondary)); border-bottom: 1px solid var(--border-color); }
.scr-row-h b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; color: var(--text-secondary); }
.scr-row .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 13px; }
.scr-row .kv + .kv { border-top: 1px solid var(--border-light); }
.scr-row .kv span { color: var(--text-muted); text-transform: capitalize; }
.scr-row .kv b { color: var(--text-primary); text-align: right; }
.scr-row .kv b.sub { color: var(--text-muted); font-weight: 400; font-style: italic; }
@media (max-width: 768px) {
  .of-grid, .scr-modes { grid-template-columns: minmax(0, 1fr); }
  .of-item { grid-template-columns: minmax(0, 1fr) 70px 38px; }
  .of-item [data-i=price] { grid-column: 1 / 3; grid-row: 2; }
}

/* setup pages (orders, booking, reply rules): hero card, settings cards left, sticky live preview right. template language:
   hairline panels, tinted icon tiles, preset chips, segmented picks */
.bk-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-panel); box-shadow: 0 1px 3px var(--shadow-color); }
.bk-hero > div { flex: 1; min-width: 0; }
.bk-hero h2 { margin: 0; color: var(--text-primary); font-size: 20px; font-weight: 700; }
.bk-hero p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.bk-hero-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 19px; }
.bk-switch, .bk-state { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 8px 0 14px; border: 1px solid var(--border-color); border-radius: var(--sb-r); font-weight: 700; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.bk-switch:has(.toggle:checked) { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 9%, var(--bg-card)); color: var(--success-ink); }
.bk-switch .toggle:checked { background: var(--success); }
.bk-state { padding: 0 14px; cursor: default; background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); }
.bk-state i { color: var(--accent-ink); }
.bk-switch .toggle, .bk-inline .toggle, .rc-grp .toggle { width: 44px; min-width: 44px; max-width: 44px; flex: 0 0 44px; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.bk-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bk-side { position: sticky; top: 0; min-width: 0; }
.bk-card { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-panel); box-shadow: 0 1px 3px var(--shadow-color); transition: opacity .2s; }
.bk-paused .bk-main .bk-card { opacity: .6; }
.bk-card-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.bk-card-h h3 { margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 700; }
.bk-card-h p { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.bk-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 14px; }
.bk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-field > label, .bk-lbl label, .bk-tile > label, .bk-inline label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.bk-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-field small, .bk-tile small { color: var(--text-muted); font-size: 12.5px; }
.bk-count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-chip); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; }
.bk-setup textarea.field { min-height: 96px; line-height: 1.5; }
.bk-short { max-width: 160px; }
.bk-pres, .bk-tags, .bk-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-pre { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; text-transform: capitalize; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.bk-pre i { font-size: 10px; color: var(--text-muted); }
.bk-pre:hover:not(:disabled) { border-color: var(--navy-accent); color: var(--accent-ink); }
.bk-pre.on { background: var(--navy-accent); border-color: var(--navy-accent); color: var(--on-accent); }
.bk-pre.on i { color: inherit; }
.bk-pre:disabled { cursor: default; opacity: .75; }
[data-seg-for="orderCur"] .bk-pre { text-transform: none; }
.bk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 10px; border: 1px solid rgba(var(--navy-accent-rgb), .28); border-radius: var(--r-chip); background: rgba(var(--navy-accent-rgb), .08); color: var(--text-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-chip > i { color: var(--accent-ink); font-size: 11px; }
.bk-chip button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--text-muted); cursor: pointer; }
.bk-chip button:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.bk-days.day-chips { gap: 6px; }
.bk-days .chip { min-width: 52px; min-height: 38px; border-radius: var(--r-ctrl); font-weight: 700; }
.bk-hours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-hours .field { width: auto; flex: 1 1 140px; min-width: 0; }
.bk-hours > span { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.bk-add .btn { flex: none; }
.bk-breaks { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bk-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: color-mix(in srgb, var(--navy-accent) 3%, var(--bg-secondary)); }
.bk-tile .unit { margin: auto 0 0; max-width: none; }
.bk-big { font-size: 15px; color: var(--text-primary); }
.bk-tile .btn-row .btn { flex: 1 1 auto; }
.bk-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); }
.bk-seg button { flex: 1; min-height: 32px; padding: 0 6px; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.bk-seg button:hover { color: var(--text-primary); background: rgba(var(--navy-accent-rgb), .08); }
.bk-seg button.on { background: var(--bg-card); color: var(--accent-ink); box-shadow: 0 1px 3px var(--shadow-color); }
.bk-step { display: flex; align-items: center; gap: 8px; }
.bk-step .field { text-align: center; font-size: 17px; font-weight: 700; }
.bk-step button { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.bk-step button:hover { border-color: var(--navy-accent); color: var(--accent-ink); }
.bk-tag { min-height: 28px; padding: 0 10px; border: 1px dashed var(--border-color); border-radius: var(--r-chip); background: transparent; color: var(--text-secondary); font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.bk-tag:hover { border-style: solid; border-color: var(--navy-accent); color: var(--accent-ink); }
.bk-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); transition: background-color .2s; }
.bk-inline:hover { background: rgba(var(--navy-accent-rgb), .04); }
.bk-inline > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-inline.nr-row { background: color-mix(in srgb, var(--warning) 8%, var(--bg-card)); }
.bk-dim { display: flex; flex-direction: column; gap: 16px; transition: opacity .2s; }
.bk-dim.off { opacity: .5; }
.bk-preview { gap: 12px; }
.bk-preview h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--text-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.bk-preview h4 .fa-whatsapp { color: #25D366; }
.bk-sum, .rc-out { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); }
.bk-sum li, .rc-out li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; font-size: 13px; color: var(--text-secondary); }
.bk-sum li + li, .rc-out li + li { border-top: 1px solid var(--border-light); }
.bk-sum li > i, .rc-out li > i { width: 16px; margin-top: 2px; text-align: center; color: var(--accent-ink); }
.bk-sum li b, .rc-out li b { color: var(--text-primary); }
.bk-sum li.warn { background: color-mix(in srgb, var(--warning) 9%, transparent); }
.bk-sum li.warn > i { color: var(--warning-ink); }
.rc-out li.ok > i { color: var(--success-ink); }
.rc-out li.no > i { color: var(--danger-ink); }
.rc-out li.rc-end.ok { background: color-mix(in srgb, var(--success) 9%, transparent); }
.rc-out li.rc-end.no { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.rc-out li.rc-note { font-size: 12px; color: var(--text-muted); }
.rc-out li.rc-note > i { color: var(--text-muted); }
.rc-form { display: flex; flex-direction: column; gap: 8px; }
.rc-days button { font-size: 12px; }
.rc-grp { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.bk-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: color-mix(in srgb, #25D366 5%, var(--bg-secondary)); }
.bk-chat .bubble { max-width: 88%; font-size: 13px; }
.bk-chat .bubble.out { align-self: flex-end; }
.bk-free { display: flex; flex-direction: column; gap: 8px; }
.bk-fday { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); }
.bk-fday b { color: var(--text-primary); font-size: 13px; }
.bk-fday > div { display: flex; flex-wrap: wrap; gap: 5px; }
.bk-fday span, .bk-fday em { padding: 3px 8px; border-radius: var(--r-chip); background: rgba(var(--navy-accent-rgb), .08); color: var(--accent-ink); font-size: 12px; font-style: normal; font-weight: 700; }
.bk-fday em { color: var(--text-muted); background: var(--hover-bg); }
.bk-bubble { align-self: flex-start; max-width: 100%; padding: 10px 12px; border-radius: var(--r-ctrl); background: color-mix(in srgb, #25D366 14%, var(--bg-card)); color: var(--text-primary); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .bk-layout { grid-template-columns: minmax(0, 1fr); } .bk-side { position: static; } }
@media (max-width: 768px) {
  .bk-hero { flex-wrap: wrap; padding: 14px; }
  .bk-hero > div { flex-basis: calc(100% - 60px); }
  .bk-switch, .bk-state { margin-left: auto; }
  .bk-card { padding: 14px; }
  .bk-tiles { grid-template-columns: minmax(0, 1fr); }
  .bk-hours .field { flex: 1 1 120px; }
  .bk-add .btn { width: 100%; }
  .bk-inline { align-items: flex-start; }
}

/* Guide: one video */
.guide-video { padding-bottom: 20px; }
.vid-wrap { position: relative; margin: 6px 20px 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 20px 40px -26px var(--shadow-hover); }
.vid-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-alt { display: inline-flex; align-items: center; gap: 8px; margin: 14px 20px 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.vid-alt .fa-youtube { color: #FF0000; }
@media (max-width: 768px) { .vid-wrap { margin: 4px 12px 0; border-radius: 14px; } .vid-alt { margin: 12px 12px 0; } }

/* Orders setup: tell the AI what to collect */
.ai-ask { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); }
.ai-ask:focus-within { border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(var(--navy-accent-rgb), .2); }
.ai-ask-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 14px; }
.ai-ask .field { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 38px; padding: 0 6px; }
.ai-ask .field:focus { outline: none; box-shadow: none; }
.ai-ask .btn { flex: none; }
.ai-mic { flex: none; }
.ai-mic.rec { background: var(--danger); color: #fff; animation: rec-pulse 1s ease-in-out infinite; }
.ai-out { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chips span { padding: 5px 12px; border-radius: var(--r-chip); background: var(--hover-bg); color: var(--text-primary); font-size: 13px; font-weight: 600; }
@media (max-width: 768px) { .ai-ask { flex-wrap: wrap; } .ai-ask .field { flex-basis: calc(100% - 96px); } .ai-ask .btn { width: 100%; } }

/* License page: every section in the pricing card language (big rounded card, soft long shadow, tinted inner box, pill controls) */
.view[data-view="license"] { --lc-line: color-mix(in srgb, var(--text-primary) 8%, transparent); --lc-shadow: 0 1px 2px var(--shadow-color), 0 24px 48px -30px var(--shadow-hover); }
.lic-hero { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--c, var(--navy-accent)) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--c, var(--navy-accent)) 8%, var(--bg-card)); box-shadow: var(--lc-shadow); }
.lic-ic { border-radius: 14px; }
.lic-act .field { min-height: 48px; padding: 0 18px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-card)); font-size: 15px; }
.lic-act .btn, .lic-btns .btn:not(.btn-secondary):not(.btn-danger) { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 88%, var(--bg-card)), var(--text-primary)); color: var(--bg-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px -8px rgba(0,0,0,.5); }
.lic-act .btn:hover, .lic-btns .btn:not(.btn-secondary):not(.btn-danger):hover { filter: brightness(1.15); color: var(--bg-card); }
.lic-btns .btn { min-height: 44px; border-radius: 999px; }
.lic-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 22px; }
.lic-tile { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-card)); }
.lic-tile > div { min-width: 0; }
.lic-tile b { display: block; color: var(--text-primary); font-size: 14.5px; line-height: 1.3; }
.lic-tile span:not(.lic-tile-ic) { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.lic-tile-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg-card); color: var(--navy-accent); font-size: 15px; box-shadow: 0 0 0 1px var(--lc-line); }
.lic-feats .lic-tile-ic { background: var(--navy-accent); color: var(--on-accent); box-shadow: none; }
@media (max-width: 768px) { .lic-tiles { grid-template-columns: minmax(0, 1fr); padding: 6px 14px 16px; gap: 10px; } }
@media (max-width: 768px) {
}
/* Google sign-in + own Sheet */
.g-card { --g-blue: #4285F4; --g-green: #0F9D58; --pl-line: color-mix(in srgb, var(--text-primary) 10%, transparent); padding: 24px; }
.g-out, .g-in { display: grid; gap: 12px; }
.g-out { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
.g-out .g-head { grid-column: 1; }
.g-out .g-btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.g-out .g-note { grid-column: 1; padding-left: 62px; }
.g-head { display: flex; align-items: center; gap: 14px; }
.g-mark { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--g-blue) 12%, var(--bg-card)); color: var(--g-blue); font-size: 22px; }
.g-head h2 { margin: 0; color: var(--text-primary); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.g-head p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; justify-self: start; min-height: 48px; padding: 0 26px; border: 1px solid var(--pl-line); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px -12px var(--shadow-hover); touch-action: manipulation; transition: background .2s, border-color .2s; }
.g-btn i { color: var(--g-blue); font-size: 17px; }
.g-btn:hover { border-color: color-mix(in srgb, var(--g-blue) 45%, transparent); background: color-mix(in srgb, var(--g-blue) 5%, var(--bg-card)); }
.g-btn:disabled { opacity: .7; cursor: wait; }
.g-note { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-muted); font-size: 12.5px; }
.g-note i { color: var(--g-green); }
.g-acct { display: flex; align-items: center; gap: 12px; min-width: 0; }
.g-acct > div { flex: 1; min-width: 0; }
.g-acct b, .g-sheet b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 15px; }
.g-acct span:not(.g-avatar), .g-sheet span:not(.g-sheet-ic) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.g-avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy-accent); color: var(--on-accent); font-size: 18px; font-weight: 700; }
.g-sheet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--g-green) 28%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--g-green) 6%, var(--bg-card)); }
.g-sheet > div:not(.g-sheet-btns) { flex: 1; min-width: 0; }
.g-sheet-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--g-green); color: #fff; font-size: 18px; }
.g-sheet-btns { display: flex; gap: 8px; flex: none; }
.g-err { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 8%, var(--bg-card)); color: color-mix(in srgb, var(--danger) 80%, var(--text-primary)); font-size: 13px; }
@media (max-width: 768px) {
  .g-card { padding: 18px 16px; }
  .g-out { grid-template-columns: minmax(0, 1fr); }
  .g-out .g-btn { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .g-out .g-note { padding-left: 0; }
  .g-sheet { flex-wrap: wrap; }
  .g-sheet-btns { width: 100%; }
  .g-sheet-btns > * { flex: 1; justify-content: center; }
}
/* help block, same card language */
.lic-help { --pl-line: color-mix(in srgb, var(--text-primary) 9%, transparent); padding: 24px; }
.lic-help-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lic-help-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--navy-accent) 12%, var(--bg-card)); color: var(--navy-accent); font-size: 18px; }
.lic-help-head h2 { margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.lic-help-head p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13.5px; }
.lic-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lic-help-card { --c: var(--navy-accent); display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 10px 16px 10px 10px; border: 1px solid var(--pl-line); border-radius: 18px; background: color-mix(in srgb, var(--c) 5%, var(--bg-card)); color: var(--text-primary); text-decoration: none; transition: border-color .2s, transform .2s, background .2s; }
.lic-help-card.wa { --c: #25D366; }
.lic-help-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--bg-card)); color: var(--text-primary); }
.lic-help-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--c); color: #fff; font-size: 20px; }
.lic-help-card.wa .lic-help-mark { color: #06301F; font-size: 22px; }
.lic-help-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lic-help-txt small { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.lic-help-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.lic-help-go { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--pl-line); font-size: 12.5px; font-weight: 600; }
.lic-help-go i { font-size: 11px; color: var(--c); }
@media (max-width: 768px) { .lic-help { padding: 18px 16px; } .lic-help-grid { grid-template-columns: minmax(0, 1fr); } }
.sheet-box { display: flex; flex-direction: column; gap: 10px; }
.sheet-box:empty { display: none; }
.sheet-box .about-table-wrapper { margin: 0; max-height: 320px; overflow: auto; }
.sheet-box .about-roles-table td { padding: 8px 12px; color: var(--text-primary); }
.sheet-box .about-roles-table td:first-child { white-space: normal; }
.sheet-h { font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.plain.sheet-warns li::before { background: var(--warning); }
.plain.sheet-steps { list-style: decimal; padding-left: 20px; }
.plain.sheet-steps li { padding-left: 4px; }
.plain.sheet-steps li::before { content: none; }
@media (max-width: 1050px) { .lic-plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; } .lic-plan-sub { min-height: 0; } }
@media (max-width: 768px) { .lic-act { flex-direction: column; } .lic-hero { align-items: flex-start; } .lic-plans-group { padding: 20px 0 14px; } .lic-plans-head { margin-bottom: 20px; } .lic-plan-grid { gap: 16px; } .lic-plan { border-radius: 26px; } .lic-price { font-size: 30px; } }

/* software lock: no page but License while the key is not active */
body.lic-locked .view:not([data-view="license"]) { display: none !important; }
body.lic-locked :is(.sidebar, .sidebar-overlay, .mobile-bottom-nav, .hdr-more-btn) { display: none !important; }
body.lic-locked :is(.header-right, .head-btns, #saveBar, #pageStatus) { display: none !important; }
.lic-lock { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 64px 24px; margin-bottom: 20px; border-radius: var(--r-panel); background: var(--bg-card); border: 1px solid var(--border-color); }
.lic-lock-ic { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; background: var(--danger); }
.lic-lock h2 { font-size: 22px; color: var(--text-primary); }
.lic-lock p { max-width: 520px; color: var(--text-secondary); }
body.popup.lic-locked .pop-body > :not(#licCard, #gPop) { display: none !important; }
.g-pop { display: grid; gap: 10px; }
.g-pop-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-pop-row + .g-pop-row { padding-top: 10px; border-top: 1px solid var(--border-light); }
.g-pop-row > div { flex: 1; min-width: 0; }
.g-pop-row b { display: block; color: var(--text-primary); font-size: 13px; }
.g-pop-row span:not(.g-pop-ic):not(.g-pop-ok) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.g-pop-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, #4285F4 13%, var(--bg-card)); color: #4285F4; font-size: 16px; }
.g-pop-ic.off { background: var(--hover-bg); color: var(--text-muted); }
.g-pop-ic.sheet { background: #0F9D58; color: #fff; }
.g-pop-ic.sheet.bad { background: var(--danger); }
.g-pop-ok { flex: none; color: var(--success); font-size: 16px; }

/* mcp page */
.mcp-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; padding: 0 20px 20px; }
.mcp-why .plain li { font-size: 14px; }
.mcp-chat { list-style: none; display: flex; flex-direction: column; }
.mcp-chat li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border-light); font-size: 14px; }
.mcp-chat li:first-child { border-top: none; padding-top: 0; }
.mcp-chat li > i { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hover-bg); color: var(--text-secondary); font-size: 13px; }
.mcp-chat li.tool > i { background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); }
.mcp-chat li.ai > i { background: var(--navy-accent); color: var(--on-accent); }
.mcp-chat small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 2px; }
.flow.mcp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcp-result { gap: 10px; }
.mcp-result .ok-note, .mcp-result .warn-note { font-weight: 600; }
.mcp-tools { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.mcp-tools label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 4px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.mcp-tools label:hover { background: var(--hover-bg); }
.mcp-tools input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy-accent); }
.mcp-tools b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.mcp-tools small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* google sheets steps */
.gs-steps { list-style: none; padding: 0 20px 20px; display: flex; flex-direction: column; }
.gs-steps > li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.gs-steps > li:last-child { padding-bottom: 0; }
.gs-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--border-color); }
.gs-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy-accent); color: var(--on-accent); font-weight: 700; }
.gs-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 6px; }
.gs-body > b { font-size: 15px; }
.gs-body > span, .gs-clicks li { font-size: 13.5px; color: var(--text-secondary); }
.gs-body .btn-row .btn { flex: 0 0 auto; }
.gs-clicks { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: var(--r-panel); background: var(--bg-primary); }
.gs-clicks li { position: relative; padding-left: 16px; }
.gs-clicks li::before { content: "\f054"; font: var(--fa-font-solid); font-size: 9px; position: absolute; left: 0; top: 5px; color: var(--navy-accent); }
.gs-tip { font-size: 13px; padding: 10px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); color: var(--text-secondary); }
.gs-tip i.fa-circle-info { color: color-mix(in srgb, var(--warning) 60%, var(--text-primary)); margin-right: 4px; }

/* how-to + code */
.code-box { position: relative; margin: 0 20px 20px; }
.code-box .btn { position: absolute; top: 8px; right: 8px; }
.code-box pre { padding: 16px; padding-top: 48px; border-radius: var(--r-ctrl); background: var(--bg-primary); border: 1px solid var(--border-color); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; line-height: 1.55; overflow-x: auto; white-space: pre; }

/* test chat */
.chat { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.chat-log { min-height: 280px; max-height: 460px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-primary)); }
.bubble { max-width: min(78%, 520px); padding: 8px 12px; border-radius: var(--r-panel); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px var(--shadow-color); }
.bubble.in { align-self: flex-start; background: var(--bg-card); }
.bubble.out { align-self: flex-end; background: color-mix(in srgb, var(--navy-accent) 14%, var(--bg-card)); }
.bubble.err { align-self: stretch; max-width: none; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--bg-card)); }
.bubble.note { align-self: center; font-size: 12px; color: var(--text-muted); background: var(--bg-card); }
.bubble small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); text-align: right; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 20px; }
.composer .field { flex: 1 1 200px; min-width: 0; }
.att-strip { flex: 1 1 100%; }
.att-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--navy-accent) 10%, var(--bg-card)); font-size: 13px; color: var(--text-secondary); }
.att-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--r-ctrl); }
.att-chip > i { color: var(--navy-accent); padding-left: 4px; }
.att-chip .nav-btn { width: 32px; height: 32px; flex-basis: 32px; }
#testVoice.rec { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 18%, transparent); } }
.bubble .att-img { display: block; max-width: 240px; max-height: 240px; border-radius: var(--r-ctrl); margin-bottom: 6px; }
.bubble .att-voice { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
.bubble .att-voice + * , .bubble .att-img + * { margin-top: 2px; }
.bubble small.heard { text-align: start; color: var(--text-secondary); font-style: italic; }
@media (prefers-reduced-motion: reduce) { #testVoice.rec, .ai-mic.rec { animation: none; } }

/* guide */
.steps { list-style: none; counter-reset: st; padding: 0 20px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.steps li { counter-increment: st; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 16px 16px 56px; border: 1px solid var(--border-color); border-radius: var(--r-panel); }
.steps li::before { content: counter(st); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy-accent); color: var(--on-accent); font-weight: 700; font-size: 13px; }
.steps span, .flow span, .gcard p { font-size: 13px; color: var(--text-secondary); }
.steps .btn { margin-top: auto; }
.flow { list-style: none; padding: 0 20px 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.flow li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-panel); background: var(--bg-primary); }
.flow li > i { width: 32px; height: 32px; border-radius: var(--r-ctrl); display: flex; align-items: center; justify-content: center; color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .1); }
.sample { margin: 0 20px 20px; padding: 16px; border-radius: var(--r-panel); background: var(--bg-primary); border: 1px solid var(--border-color); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.faq { padding: 0 20px 12px; }
.faq details { border-top: 1px solid var(--border-light); }
.faq summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 0; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "\f054"; font: var(--fa-font-solid); font-size: 11px; color: var(--navy-accent); transition: transform .2s; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details p { padding: 0 0 14px 22px; font-size: 13.5px; color: var(--text-secondary); max-width: 80ch; }
.plain { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plain li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); }
.plain li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--navy-accent); }

/* safety guide */
.guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 20px 20px; }
.guide > div { padding: 16px; border-radius: var(--r-panel); background: var(--bg-primary); }
.guide h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: color-mix(in srgb, var(--success) 80%, var(--text-primary)); }
.guide h3.dont { color: var(--danger); }
.guide ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.guide li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); }
.guide li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }

/* about */
.about-table-wrapper { margin: 0 20px 20px; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--r-panel); }
.about-roles-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.about-roles-table th { background: var(--navy-primary); color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; white-space: nowrap; }
.about-roles-table td { padding: 10px 12px; border-top: 1px solid var(--border-color); vertical-align: top; }
.about-roles-table td:first-child { font-weight: 600; white-space: nowrap; }
.about-roles-table tr:nth-child(even) td { background: var(--bg-primary); }
.contact { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 20px; }
.contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: var(--r-ctrl); font-weight: 600; color: var(--text-primary); }
.contact a:hover { background: var(--hover-bg); }
.contact .fa-whatsapp { color: #25d366; font-size: 18px; }
.contact .fa-envelope { color: var(--navy-accent); }

/* save bar */
.savebar { position: fixed; left: var(--sb-w); right: 0; bottom: 0; z-index: 25; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-color); box-shadow: 0 -4px 16px var(--shadow-color); transform: translateY(110%); transition: transform .2s ease-out, left .2s; }
.savebar.show { transform: none; }
body:has(.sidebar.collapsed) .savebar { left: var(--sb-mini); }
.savebar > div { display: flex; align-items: center; gap: 10px; }
.savebar p { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.savebar p i { color: var(--warning); }

/* toast */
.toast { --pop-c: var(--success); position: fixed; top: 16px; right: 16px; z-index: 12500; width: min(360px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-panel); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast.err { --pop-c: var(--danger); }
.toast .rs-pop-ico { flex: 0 0 30px; width: 30px; height: 30px; font-size: 13px; }
.toast b { font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

/* popup */
body.popup { width: 380px; }
.pop-top { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 10px 0 16px; background: color-mix(in srgb, var(--navy-accent) 4%, var(--bg-secondary)); border-bottom: 1px solid var(--border-color); }
.pop-top .ttl { flex: 1; min-width: 0; }
.pop-top b { display: block; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pop-top small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.pop-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--r-panel); box-shadow: 0 1px 3px var(--shadow-color); padding: 12px 14px; }
.pop-card h2 { font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pop-card h2 i { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sb-r); background: rgba(var(--navy-accent-rgb), .12); color: var(--accent-ink); font-size: 12px; }
.pop-card .conn { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--border-light); }
.pop-card .list { max-height: 300px; overflow-y: auto; }
.mini-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mini-kpi .small-box .inner { padding: 10px 10px 8px; }
.mini-kpi .small-box .inner h3 { font-size: 20px; margin: 0; }
.mini-kpi .small-box .inner p { font-size: 11px; }
.mini-kpi .small-box .icon { font-size: 26px; top: 8px; right: 8px; }

/* narrow windows + phones */
@media (max-width: 1200px) {
  .lte-kpi-grid, .info-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .biz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps, .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide, .mcp-why { grid-template-columns: minmax(0, 1fr); }
  .flow.mcp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz-tiles, .wiz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz-steps li:not(.on) { font-size: 0; gap: 0; padding: 6px; }
  #wizDlg .dlg-head h2 { display: none; }
  .wiz-steps { margin-left: 0; }
}
@media (max-width: 768px) {
  .savebar, body:has(.sidebar.collapsed) .savebar { left: 0; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 10px 16px; }
  .header-right .conn-chip span:last-child, .bot-switch span { display: none; }
  .header-right .conn-chip { width: 42px; padding: 0; justify-content: center; border: 0; background: none; }
  .header-right .bot-switch { padding: 0 6px; border: 0; background: none; }
  .toast { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; }
}
@media (max-width: 640px) {
  .lte-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-row { grid-template-columns: minmax(0, 1fr); }
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .set-ctrl { justify-content: flex-start; }
  .set-row.inline { grid-template-columns: minmax(0, 1fr) auto; }
  .unit { margin-left: 0; max-width: none; }
  .hchecks li { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .hchecks .hv { grid-column: 2 / -1; grid-row: 2; }
  .steps, .gcards, .flow, .flow.mcp-flow { grid-template-columns: minmax(0, 1fr); }
  .qr-head { flex-direction: column; }
  .qr-tools { flex-wrap: wrap; }
  .qr-tools .search { flex: 1 0 100%; }
  .qr-tools #qrScan span { display: none; }
  .qr-item { grid-template-columns: minmax(0, 1fr); }
  .ord-cards { grid-template-columns: minmax(0, 1fr); }
  .ord-body, #wizDlg .dlg-body { display: block; overflow-y: auto; }
  .ord-body > *, #wizDlg .dlg-body > * { overflow: visible; }
  .savebar p span { display: none; }
  .dlg:not(.sm) { width: 100vw; height: 100dvh; }
  .dlg:not(.sm) .dlg-box { border-radius: 0; }
  .dlg-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
  .dlg-tabs button { flex: 1; min-height: 44px; border: none; background: none; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
  .dlg-tabs button.active { color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .08); }
  .dlg-body { grid-template-columns: minmax(0, 1fr); }
  .dlg-body [data-pane-box] { display: none; }
  .dlg-body [data-pane-box].show { display: flex; }
  .dlg-preview { border-left: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

a, a:hover, a:focus, button, button:hover, u { text-decoration: none; }