/* Client platform. Visual language taken from the Figma "Sleek CRM Dashboard": white frame, a big rounded pale panel, a white table card,
   a pale-blue header band, one strong blue. The tab column is on the RIGHT (RTL). Fonts: Noto Sans Hebrew (text), Poppins (numbers). Icons: Phosphor masks. */
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-hebrew-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 700; font-display: swap; src: url("fonts/noto-sans-hebrew-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 800; font-display: swap; src: url("fonts/noto-sans-hebrew-800.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 900; font-display: swap; src: url("fonts/noto-sans-hebrew-900.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 900; font-display: swap; src: url("fonts/poppins-900.woff2") format("woff2"); }

:root {
  --sky: #186cff;          /* the screen blue, darkened a hair from #2474ff so white on it passes 4.5:1 (4.54) */
  --frame: #ffffff;        /* outer frame (Figma white) */
  --panel: #f2f5fa;        /* big rounded panel (Figma Brand/Tertiary) */
  --main: #2f69f4;         /* Figma Brand/Primary; also CRM main colour (settings circle 1) */
  --crm-bg: #ffffff;       /* table card (settings circle 2) */
  --ink: #171725;          /* Figma Text/Primary */
  --mute: #747589;         /* Figma grey #9899aa darkened to pass 4.5:1 for small text */
  --title: #101828;        /* Figma Gray/900 */
  --line: #e3e9f5;
  --btn-line: #dfe6fb;
  --crm-ink: #171725; --crm-mute: #747589; --crm-line: #e3e9f5;
  --ok: #138a4a; --bad: #c0392b; --hot: #d32f2f; --warm: #2f69f4;
}
body.dark {
  --frame: #0b1020; --panel: #121a30; --hdr: #1f3366; --ink: #e8eefb; --mute: #a3b1cc; --title: #f2f5ff; --line: #25344f; --btn-line: #2b3d63;
  --crm-bg: #0b0f18; --crm-ink: #e8eefb; --crm-mute: #a3b1cc; --crm-line: #25344f;
}
* { box-sizing: border-box; }
html { background: var(--frame); }
body { --hdr: color-mix(in srgb, var(--sky) 27%, #fff); --tint: color-mix(in srgb, var(--sky) 8%, #fff); --tint2: color-mix(in srgb, var(--sky) 5%, #fff); --tint-line: color-mix(in srgb, var(--sky) 14%, transparent); margin: 0; min-height: 100vh; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; font-size: 15px; color: var(--ink); background: var(--frame); -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; direction: rtl; text-align: right; }
input[type=password] { direction: ltr; text-align: left; }
.n { font-family: "Poppins", sans-serif; font-weight: 700; }
:focus-visible { outline: 3px solid var(--main); outline-offset: 2px; }
[hidden] { display: none !important; }

/* icons */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic--out { --i: url(icons/ph-sign-out-bold.svg); } .ic--list { --i: url(icons/ph-list-bold.svg); } .ic--plus { --i: url(icons/ph-plus-bold.svg); }
.ic--pen { --i: url(icons/ph-pencil-simple-bold.svg); } .ic--trash { --i: url(icons/ph-trash-bold.svg); } .ic--fire { --i: url(icons/ph-fire-bold.svg); }
.ic--q { --i: url(icons/ph-question-bold.svg); } .ic--wa { --i: url(icons/ph-whatsapp-logo-fill.svg); } .ic--x { --i: url(icons/ph-x-bold.svg); }
.ic--copy { --i: url(icons/ph-copy-bold.svg); }
.ic--search { --i: url(icons/ph-magnifying-glass-bold.svg); }
.ic--crm { --i: url(icons/ph-users-three-bold.svg); } .ic--script { --i: url(icons/ph-scroll-bold.svg); } .ic--market { --i: url(icons/ph-megaphone-bold.svg); }
.ic--auto { --i: url(icons/ph-lightning-bold.svg); } .ic--articles { --i: url(icons/ph-article-bold.svg); } .ic--backup { --i: url(icons/ph-cloud-arrow-down-bold.svg); }
.ic--stats { --i: url(icons/ph-chart-bar-bold.svg); } .ic--tasks { --i: url(icons/ph-check-square-bold.svg); } .ic--settings { --i: url(icons/ph-gear-bold.svg); }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 26px; border: 0; border-radius: 12px; background: var(--main); color: #fff; font-weight: 800; font-size: 16px; }
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--main); box-shadow: inset 0 0 0 1.5px var(--main); }
.btn--out { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.35px #fff; min-height: 38px; padding: 6px 14px; font-size: 15px; font-weight: 700; border-radius: 8px; }
.btn--out:hover { background: rgba(255, 255, 255, .16); filter: none; }
.dlg .btn--out, .clist .btn--out { color: var(--main); box-shadow: inset 0 0 0 1.35px var(--main); }
.link { background: none; border: 0; color: var(--main); text-decoration: underline; font-size: 16px; padding: 10px 0; }
label { display: block; font-weight: 700; margin-bottom: 8px; }
input[type=text], input[type=tel], input[type=search], input[type=password] { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: #171725; font-size: 17px; }

/* login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px 16px 56px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 40%, #d0eaff 0%, #e8f5ff 30%, #f0f9ff 60%, #fff 100%); }
.login[hidden] { display: none; }
.lg-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-card { position: relative; z-index: 1; width: 100%; max-width: 1300px; display: flex; align-items: stretch; padding: 100px 96px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(0, 112, 243, .09); border-radius: 28px; box-shadow: 0 2px 6px rgba(0, 30, 100, .06), 0 10px 28px rgba(0, 60, 180, .11), 0 28px 64px rgba(0, 50, 160, .18), 0 64px 110px rgba(0, 30, 130, .13), 0 0 0 1px rgba(255, 255, 255, .75) inset; }
.lg-text { flex: 1.2; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 40px; }
.lg-text h1, .lg-sub { background: linear-gradient(135deg, #0058d6 0%, #0070f3 45%, #38a1ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lg-text h1 { font-size: clamp(2.1rem, 3vw, 2.8rem); font-weight: 900; line-height: 1.18; margin: 0 0 20px; }
.lg-sub { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.7; margin: 0; }
.lg-div { width: 3px; flex-shrink: 0; align-self: center; height: 240px; margin: 0 48px; border-radius: 99px; transform: translateX(64px); background: linear-gradient(to bottom, transparent 0%, rgba(0, 100, 240, .38) 15%, rgba(0, 112, 243, .65) 50%, rgba(0, 100, 240, .38) 85%, transparent 100%); }
.lg-form { flex: .8; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.lg-field { display: flex; flex-direction: column; gap: 8px; }
.lg-field label { font-size: 1rem; color: #4a7cc7; letter-spacing: .03em; margin: 0; }
.lg-field input { width: 100%; padding: 18px; font: 400 1.1rem "Noto Sans Hebrew", sans-serif; color: #1a2540; text-align: right; background: #fff; border: 1.5px solid rgba(0, 112, 243, .45); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.lg-field input::placeholder { color: #6b7f9e; opacity: 1; direction: rtl; }
.lg-field input:focus { border-color: #0070f3; box-shadow: 0 0 0 3px rgba(0, 112, 243, .12); background: rgba(255, 255, 255, .9); }
.lg-err { margin: 0; min-height: 0; padding: 11px 14px; font-size: .9rem; color: #dc2626; background: rgba(220, 38, 38, .07); border: 1px solid rgba(220, 38, 38, .15); border-radius: 8px; }
.lg-err:empty { display: none; }
.lg-btn { width: 100%; padding: 18px 24px; font: 900 1.45rem "Noto Sans Hebrew", sans-serif; letter-spacing: .02em; color: #fff; cursor: pointer; border: none; border-radius: 12px; background: linear-gradient(135deg, #0052cc 0%, #0070f3 50%, #2d8eff 100%); box-shadow: 0 4px 20px rgba(0, 112, 243, .38), 0 1px 3px rgba(0, 50, 200, .2); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, filter .22s ease; }
.lg-btn:hover { transform: translateY(-2px) scale(1.012); box-shadow: 0 8px 32px rgba(0, 112, 243, .52), 0 2px 8px rgba(0, 50, 200, .25); filter: brightness(1.08); }
.lg-btn:active { transform: none; filter: brightness(.97); }
.lg-legal { text-align: center; font-size: 17px; line-height: 1.6; color: #1a2540; margin: 0; }
.lg-legal a { color: #1a2540; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(26, 37, 64, .35); }
.lg-legal a:hover, .lg-a11y a:hover { color: #0070f3; }
.lg-a11y { position: absolute; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; white-space: nowrap; }
.lg-a11y a { font-size: 17px; color: #1a2540; text-decoration: none; }
@media (max-width: 680px) {
  .lg-card { max-width: 448px; flex-direction: column; gap: 32px; padding: 56px 24px; }
  .lg-text { padding-left: 0; }
  .lg-text h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .lg-div { width: 100%; height: 3px; margin: 0; transform: none; background: linear-gradient(to right, transparent, rgba(0, 112, 243, .25) 20%, rgba(0, 112, 243, .25) 80%, transparent); }
}
@media (max-width: 400px) { .lg-card { padding: 48px 16px; } }
.login__err { color: var(--bad); min-height: 24px; margin: 8px 0 12px; font-weight: 700; }

/* shell: the column is on the right (start side in RTL), the panel fills the rest */
.app { display: flex; min-height: 100vh; }
.side { position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 248px; flex: none; background: var(--frame); padding: 40px 28px 24px; display: flex; flex-direction: column; z-index: 30; overflow-y: auto; }
.logo { width: 88px; height: 88px; border-radius: 34px; background: var(--main); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 40px; }
.side__name { color: var(--sky); font-weight: 800; font-size: 19px; margin: 0 0 34px; padding-inline-start: 16px; text-align: right; line-height: 1.3; }
.side__nav { display: flex; flex-direction: column; gap: 12px; }
.tab { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--sky); font-weight: 500; font-size: 15px; text-align: right; line-height: 1.25; }
.tab:hover { background: #edf3ff; }
.tab[aria-current=page] { background: var(--main); color: #fff; font-weight: 700; }
.side__out { margin-top: auto; padding: 16px; display: flex; align-items: center; gap: 14px; border: 0; background: none; color: var(--sky); font-size: 15px; }
.main { flex: 1 1 auto; min-width: 0; margin: 0; background: var(--sky); border-radius: 0; min-height: 100vh; padding: 36px clamp(18px, 3vw, 40px) 40px; }
body.dark .main { background: var(--panel); }
.bar { display: none; }
.view { width: min(100%, 1480px); margin-inline: auto; }
.scrim { display: none; }

/* lobby */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hello { font-weight: 800; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; color: #fff; }
.page-h { font-weight: 800; font-size: 28px; color: #fff; margin-bottom: 18px; }
.tools { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.ftabs { display: flex; gap: 26px; }
.ftabs button { background: none; border: 0; padding: 10px 2px; color: #fff; font-weight: 500; font-size: 15px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ftabs button[aria-selected=true] { color: #fff; font-weight: 800; border-bottom-color: #fff; }
.sbox { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--sky); background: #fff; border-radius: 12px; padding: 8px 14px; height: 46px; }
.sbox input { border: 0; background: transparent; height: 30px; width: 190px; padding: 0; font-size: 15px; color: var(--sky); }
.sbox input::placeholder { color: var(--sky); opacity: .8; }
.sbox input:focus-visible { outline: none; }
.sbox:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--sky); background: #fff; border-radius: 12px; padding: 8px 14px; height: 46px; font-size: 14px; font-weight: 700; }
.live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.live.off::before { background: var(--bad); }
.pline { height: 1px; background: rgba(255, 255, 255, .35); margin: 0 0 22px; }
.card { background: var(--crm-bg); color: var(--crm-ink); border-radius: 24px; overflow: hidden; }
.empty { padding: 56px 24px; text-align: center; color: var(--crm-mute); font-size: 17px; }

table.crm { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.crm th { text-align: right; font-weight: 800; font-size: 15px; color: var(--ink); background: var(--hdr); padding: 11px 12px; vertical-align: middle; height: 37px; }
body.dark .crm th { color: #e8eefb; }
.crm td { padding: 14px 12px; border-top: 1px solid var(--crm-line); vertical-align: middle; text-align: right; overflow-wrap: anywhere; }
.crm tr.fresh td { animation: fresh 8s ease-out; }
@keyframes fresh { 0%, 70% { background: color-mix(in srgb, var(--main) 12%, transparent); } 100% { background: transparent; } }
.thin { display: block; white-space: nowrap; color: var(--crm-mute); font-size: 13px; margin-top: 3px; font-weight: 500; }
.dt { color: var(--sky); display: block; font-weight: 700; font-size: 15px; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 14px; }
.av { width: 45px; height: 45px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #171725; }
.nm { color: var(--sky); font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: break-word; word-break: normal; min-width: 0; }
.serial { font-family: "Noto Sans Hebrew", sans-serif; font-weight: 800; font-size: 14.5px; color: var(--main); display: block; margin-bottom: 3px; }
.contact a { color: var(--sky); text-decoration: none; font-family: "Poppins", sans-serif; font-weight: 600; direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.contact a.mail { white-space: normal; overflow-wrap: anywhere; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 600; font-size: 14px; color: var(--sky); }
.contact .wa { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 12px; color: var(--ok); font-weight: 700; font-family: "Noto Sans Hebrew", sans-serif; font-size: 14px; }
.temp { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.temp .ic { width: 20px; height: 20px; }
.temp--hot { color: var(--hot); } .temp--warm { color: var(--warm); }
.qa-link { background: none; border: 0; padding: 0; color: #1a56db; text-decoration: underline; font-weight: 700; font-size: 15px; }
body.dark .qa-link { color: #7fb0ff; }
.dash { color: var(--crm-mute); }
.crm textarea { width: 100%; min-height: 52px; resize: vertical; border: 1px solid var(--crm-line); border-radius: 8px; padding: 8px 10px; background: transparent; color: var(--crm-ink); font-size: 14.5px; line-height: 1.5; }
.crm textarea:focus { border-color: var(--main); outline: none; }
.saved { display: block; min-height: 16px; font-size: 13px; margin-top: 3px; color: var(--ok); }
.th-in { display: flex; align-items: center; gap: 8px; }
.th-in span { flex: 1 1 auto; }
.colbtn { background: rgba(47, 105, 244, .12); border: 0; color: var(--main); width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; padding: 0; }
.colbtn .ic { width: 14px; height: 14px; }
.colbtn:hover { background: rgba(47, 105, 244, .24); }
.st { font: inherit; font-weight: 700; font-size: 15px; max-width: 100%; padding: 4px 0; border: 0; background: transparent; cursor: pointer; color: var(--main); }
.st[data-st=followup] { color: #b3470a; } .st[data-st=won] { color: #0d7a3f; } .st[data-st=lost] { color: #b3261e; }
.st option { color: #171725; background: #fff; font-weight: 600; }
.crm td.k-act { padding-inline: 8px; text-align: center; }
.detail-btn { background: transparent; border: 1px solid var(--btn-line); border-radius: 6px; padding: 8px 18px; color: var(--crm-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.detail-btn:hover { background: color-mix(in srgb, var(--main) 8%, transparent); }
.detail-btn .mob { display: none; }

/* placeholder tabs */
.soon { padding: 56px 28px; text-align: center; }
.soon h2 { font-weight: 800; font-size: 26px; margin-bottom: 10px; }
.soon p { color: var(--crm-mute); font-size: 17px; }

/* dialogs */
.dlg { border: 0; border-radius: 24px; padding: 0; width: min(92vw, 560px); background: #fff; color: var(--ink); box-shadow: 0 30px 80px -20px rgba(47, 105, 244, .45); }
.dlg::backdrop { background: rgba(47, 105, 244, .35); backdrop-filter: blur(4px); }
.dlg__in { padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; }
.dlg h2 { font-weight: 800; font-size: 24px; color: var(--title); }
.dlg__who { color: var(--mute); margin-bottom: 12px; }
.dlg__row { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.qa { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 16px; max-height: 56vh; overflow-y: auto; }
.qa b { display: block; font-weight: 700; color: var(--mute); font-size: 14px; margin-bottom: 4px; }
.qa p { font-size: 16px; line-height: 1.5; background: var(--panel); color: var(--ink); border-radius: 10px; padding: 12px 14px; }
.dlg textarea { width: 100%; min-height: 90px; resize: vertical; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.5; }
.dlg--lead { width: min(94vw, 640px); }
.lbody { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 18px; max-height: 62vh; overflow-y: auto; }
.ld b { display: block; font-weight: 700; color: var(--mute); font-size: 14px; margin-bottom: 6px; }
.dlg .contact a { color: var(--sky); }
.dlg .contact a.wa { color: var(--ok); }
.dlg .contact a.mail { color: var(--sky); }
.dlg .st { border: 1.5px solid currentColor; border-radius: 8px; padding: 8px 12px; }
.toast { position: fixed; bottom: 24px; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 90vw; background: var(--main); color: #fff; padding: 14px 22px; border-radius: 12px; font-weight: 700; z-index: 90; }

/* narrower screens: the tab column becomes a drawer and the table becomes cards */
@media (max-width: 900px) {
  .bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 10px 14px; background: var(--frame); }
  .bar__burger { width: 46px; height: 46px; border: 0; border-radius: 10px; background: var(--panel); color: var(--main); display: grid; place-items: center; }
  .bar__title { font-weight: 800; font-size: 18px; color: var(--title); }
  .side { position: fixed; top: 0; bottom: 0; right: 0; height: 100%; width: min(84vw, 300px); transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 60px -20px rgba(47, 105, 244, .35); }
  body.menu .side { transform: none; }
  body.menu .scrim { display: block; position: fixed; inset: 0; background: rgba(47, 105, 244, .3); z-index: 25; }
  .app { display: block; }
  .main { padding: 20px 14px 36px; min-height: 0; }
  .hello { font-size: 25px; }
  .top { margin-bottom: 16px; }
  .sbox input { width: 150px; }
}
  table.crm, .crm tbody, .crm tr, .crm td { display: block; width: 100%; }
  .crm thead { display: none; }
  .card.table-card { background: transparent; overflow: visible; }
  .crm tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
  .crm tr.lead { display: flex; flex-direction: column; background: var(--crm-bg); color: var(--crm-ink); border-radius: 18px; padding: 6px 0; cursor: pointer; box-shadow: 0 14px 30px -22px rgba(10, 40, 120, .6); transition: transform .15s; }
  .crm tr.lead:hover { transform: translateY(-2px); }
  .crm td { border: 0; padding: 13px 0; margin-inline: 18px; width: auto; }
  .crm td + td { border-top: 1px solid var(--tint-line); }
  .crm td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; font-size: 13px; color: var(--crm-mute); margin-bottom: 4px; }
  .crm td.k-email, .crm td.k-quiz, .crm td.k-notes, .crm td.k-cust { display: none; }
  .crm tr.nophone td.k-email { display: block; }
  .crm td.c-head { padding-top: 16px; padding-bottom: 13px; }
  .crm td.c-head .serial { display: block; }
  .crm td.c-head .dt, .crm td.c-head .thin { display: inline; margin-inline-end: 10px; }
  .crm td.c-head::before { content: none; }
  .crm td.k-act { margin-top: auto; padding-top: 18px; padding-bottom: 20px; text-align: center; }
  .detail-btn { border: 0; padding: 0; color: #1a56db; text-decoration: underline; font-size: 15px; }
  .detail-btn .desk { display: none; } .detail-btn .mob { display: inline; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.clist { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.clist b { font-weight: 700; color: var(--mute); font-size: 14px; }
.crow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.crow span { flex: 1 1 auto; font-weight: 700; }

.crow2 { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.cbtn { background: none; border: 0; padding: 4px; border-radius: 6px; color: var(--sky); display: inline-grid; place-items: center; flex: none; }
.cbtn .ic { width: 18px; height: 18px; }
.cbtn:hover { background: color-mix(in srgb, var(--sky) 12%, transparent); }
.srcl { font-weight: 600; }
.srcl--paid { color: var(--sky); } .srcl--org { color: var(--hot); }

.wai { display: inline-block; width: 20px; height: 20px; flex: none; background: url(icons/whatsapp-color.svg) center / contain no-repeat; }

/* sales script tab */
.scr-top { padding: 22px 24px; margin-bottom: 16px; }
.scr-top label { margin-bottom: 8px; color: var(--ink); }
.scr-sel { width: 100%; max-width: 520px; height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; color: var(--sky); font-weight: 700; font-size: 16px; }
.scr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.scr-card { background: var(--tint); border-radius: 14px; padding: 14px 16px; }
.scr-card b, .scr-lead b { display: block; color: var(--sky); font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.scr-card p { font-size: 16px; line-height: 1.5; color: var(--ink); }
.scr-note { color: var(--mute); }
.scr-step { margin-bottom: 12px; }
.scr-step summary { cursor: pointer; padding: 18px 24px; font-weight: 800; font-size: 17px; color: var(--sky); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.scr-step summary::-webkit-details-marker { display: none; }
.scr-step summary::after { content: "+"; font-weight: 700; font-size: 22px; line-height: 1; }
.scr-step[open] summary::after { content: "-"; }
.scr-body { padding: 0 24px 22px; border-top: 1px solid var(--tint-line); }
.scr-body p, .scr-body li { font-size: 15.5px; line-height: 1.75; color: var(--ink); margin-top: 10px; }
.scr-body ul, .scr-body ol { padding-inline-start: 22px; list-style: revert; }
.scr-body h4 { margin-top: 18px; font-size: 16px; color: var(--sky); }
.scr-body b { font-weight: 800; }
.scr-lead { background: var(--tint); border-inline-start: 4px solid var(--sky); border-radius: 12px; padding: 12px 16px; margin-top: 16px; }
.scr-lead p { margin-top: 6px; }
.scr-lead span { font-weight: 700; color: var(--mute); }
.scr-body p.callout { background: var(--tint); border-inline-start: 4px solid var(--sky); border-radius: 10px; padding: 10px 16px; margin-top: 8px; font-size: 16px; }
.scr-body p.callout:first-of-type { margin-top: 18px; }

/* marketing tab */
.ic--copy { --i: url(icons/ph-copy-bold.svg); }
.mk { padding: 26px 28px; margin-bottom: 18px; }
.mk h2 { font-weight: 800; font-size: 22px; color: var(--title); margin-bottom: 14px; }
.mk h3 { font-weight: 800; font-size: 17px; color: var(--sky); margin-bottom: 8px; }
.mk p { line-height: 1.7; margin-top: 8px; }
.mk-sub { color: var(--mute); }
.mk-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.mk-check { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--tint-line); margin: 0; font-weight: 400; cursor: pointer; }
.mk-check:first-child { border-top: 0; }
.mk-check input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--sky); flex: none; }
.mk-check b { font-weight: 800; color: var(--sky); }
.mk-hex, .mk-quote { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--tint); border-radius: 12px; padding: 8px 14px; font-weight: 700; }
.mk-sw { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.mk-code { position: relative; background: var(--tint2); border-radius: 16px; padding: 20px 20px 22px; }
.mk-num { position: absolute; top: 14px; inset-inline-start: 16px; color: var(--sky); font-size: 22px; }
.mk-code h3 { padding-inline-start: 34px; }
.mk-how b { color: var(--sky); } .mk-no b { color: var(--bad); } .mk-yes b { color: var(--ok); }
.mk-tabs { margin: 6px 0 16px; flex-wrap: wrap; }
.mk-tabs button { color: var(--mute); } .mk-tabs button[aria-selected=true] { color: var(--sky); border-bottom-color: var(--sky); }
.mk-tag { display: inline-block; background: var(--tint); color: var(--sky); font-weight: 700; border-radius: 8px; padding: 2px 10px; }
.mk-outline { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; }
.mk-part { display: flex; gap: 14px; background: var(--tint2); border-radius: 12px; padding: 10px 14px; }
.mk-part p { margin: 0; flex: 1 1 auto; }
.mk-time { color: var(--sky); white-space: nowrap; font-size: 14px; padding-top: 3px; }
.mk-soon { color: var(--mute); font-weight: 700; }
.mk-steps { padding-inline-start: 22px; list-style: decimal; line-height: 1.9; }
.mk-copy { min-height: 42px; padding: 6px 16px; font-size: 15px; }

/* automation tab */
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.au-head h2 { margin-bottom: 0; }
.au-sw { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--sky); cursor: pointer; }
.au-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-knob { width: 48px; height: 28px; border-radius: 999px; background: #c9d6ee; position: relative; transition: background .15s; flex: none; }
.au-knob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; }
.au-sw input:checked + .au-knob { background: var(--sky); }
.au-sw input:checked + .au-knob::after { inset-inline-start: 23px; }
.au-sw input:focus-visible + .au-knob { outline: 3px solid var(--sky); outline-offset: 2px; }
.au-ta { width: 100%; min-height: 130px; margin-top: 14px; resize: vertical; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.6; color: var(--ink); background: #fff; }
.au-ta:focus { border-color: var(--sky); outline: none; }
.au-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.au-chip { background: var(--tint); color: var(--sky); border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
.au-chip:hover { background: #dfe9ff; }
.au-link { margin-top: 16px; }
.au-link label { font-size: 14px; color: var(--mute); }
.au-link input { height: 46px; }
.au-prev { margin-top: 18px; }
.au-prev b { display: block; color: var(--mute); font-size: 14px; margin-bottom: 8px; }
.au-bubble { background: #dcf8c6; color: #14306f; border-radius: 14px 14px 14px 4px; padding: 12px 16px; line-height: 1.6; max-width: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }

.au-box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tint-line); }
.au-name { color: var(--sky); font-weight: 800; margin-bottom: 0; }
.au-reset { margin-inline-start: auto; background: none; border: 0; color: var(--bad); text-decoration: underline; font-weight: 700; font-size: 14px; padding: 8px 4px; }
.au-ta { white-space: pre-wrap; }

.au-sw--view { cursor: default; pointer-events: none; }
.au-sw--view .au-knob { opacity: .9; }

/* articles tab */
.art-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 10px 0 14px; }
.art-f label { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.art-f input, .art-f textarea, .art-ed input, .art-body, .art-prompt { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 16px; line-height: 1.6; background: #fff; color: var(--ink); }
.art-f textarea { min-height: 80px; }
.art-f input, .art-ed input { height: 48px; padding-block: 0; }
.art-prompt { min-height: 190px; margin-bottom: 12px; background: var(--tint2); }
.art-body { min-height: 260px; margin-top: 12px; resize: vertical; }
.art-lab { display: block; margin: 18px 0 8px; color: var(--mute); font-size: 14px; font-weight: 700; }
.art-prev { border-radius: 18px; overflow: hidden; border: 1px solid var(--tint-line); }
.art-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.art-list { display: flex; flex-direction: column; }
.art-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tint-line); }
.art-row:first-child { border-top: 0; }
.art-open { flex: 1 1 auto; text-align: right; background: none; border: 0; padding: 0; font-weight: 700; font-size: 16px; color: var(--sky); }
.art-st { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.art-st--draft { background: var(--tint); color: var(--sky); } .art-st--ready { background: #e3f6ea; color: #0d7a3f; }

/* backup tab */
.bk-info { display: flex; flex-direction: column; margin: 6px 0 18px; }
.bk-row { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--tint-line); }
.bk-row:first-child { border-top: 0; }
.bk-row b { width: 120px; color: var(--mute); font-weight: 700; }
a.btn { text-decoration: none; }

.art-auto-h { font-weight: 800; color: var(--sky); margin-top: 6px; }
.art-auto { background: var(--tint2); border-radius: 14px; padding: 6px 16px; margin: 8px 0 14px; }
.art-autoitem { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--tint-line); }
.art-autoitem:first-child { border-top: 0; }
.art-autoitem b { color: var(--mute); font-size: 13px; font-weight: 700; }
.art-hint { margin: 0; }
.art-prevwrap { margin-top: 18px; }
.art-empty { color: var(--mute); padding: 30px 16px; text-align: center; background: var(--tint2); margin: 0; }
.art-edit-hint { text-align: center; color: var(--mute); font-size: 13px; background: #f8fafc; margin: 0; padding: 0 0 14px; }
.art .art-in { outline: none; }
.art .art-in:focus { box-shadow: 0 0 0 3px rgba(24, 108, 255, .18); border-radius: 8px; }
.art-load { padding: 46px 20px; text-align: center; background: var(--tint2); color: var(--sky); font-weight: 800; }
.art-load-bar { display: block; height: 6px; width: min(320px, 70%); margin: 16px auto 0; border-radius: 999px; background: rgba(24, 108, 255, .15); position: relative; overflow: hidden; }
.art-load-bar::after { content: ""; position: absolute; inset-block: 0; width: 40%; border-radius: 999px; background: var(--sky); animation: artload 1s ease-in-out infinite; }
@keyframes artload { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }
.mk-copy:disabled { opacity: .5; cursor: not-allowed; }

.art-f--wide { margin-top: 10px; }
.art-f--wide label { color: var(--ink); font-weight: 800; font-size: 16px; }
.art-chips-lab { color: var(--mute); font-size: 14px; font-weight: 700; align-self: center; }
.art-copybig { min-height: 54px; padding: 12px 30px; font-size: 18px; }
.art-copybig:disabled { background: #c9d6ee; color: #fff; cursor: not-allowed; }
.art-copybig--on { box-shadow: 0 10px 24px -10px rgba(24, 108, 255, .7); }
.art-view { padding: 8px 0; }
.art-prompt[hidden] { display: none; }
.art-prompt { margin-top: 14px; }

.art-pub { min-height: 54px; padding: 12px 34px; font-size: 18px; }
.art-pub--done, .art-pub:disabled { background: #c9d6ee; color: #fff; cursor: default; }
.art-pub--done { background: #0d7a3f; }
.art-live { margin-top: 18px; background: #e8f6ee; border-radius: 14px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.art-live b { color: #0d7a3f; }
.art-live a { color: var(--sky); font-weight: 700; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.art-live p { flex-basis: 100%; margin: 0; }

.art-color { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.art-circle { display: inline-flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; position: relative; }
.art-circle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.art-dot { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--line); flex: none; }
.art-circle b { color: var(--sky); font-weight: 800; }
.art-circle:focus-within .art-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sky); }

.ic--globe { --i: url(icons/ph-globe-bold.svg); }
.art-lk { display: inline-flex; align-items: center; gap: 8px; color: var(--sky); font-weight: 800; font-size: 14px; text-decoration: none; background: var(--tint); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
.art-lk:hover { background: #dfe9ff; }
.art-lk .ic { width: 18px; height: 18px; }

/* settings tab */
.st-tabs { margin-bottom: 0; }
.st-box { margin-top: 6px; }
.st-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--tint-line); }
.st-row .mk-sub { margin: 0; }
.mk h2 + .st-row { border-top: 0; }
.pc-list { display: flex; flex-direction: column; margin-top: 6px; }
.pc-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--tint-line); font-weight: 700; }
.pc-row:first-child { border-top: 0; }
.pc-v { flex: none; display: block; shape-rendering: geometricPrecision; }

.ic--phone { --i: url(icons/ph-phone-bold.svg); }
.btn.st-wa { margin-top: 28px; justify-content: center; text-align: center; gap: 12px; }
.btn.st-wa .ic { width: 22px; height: 22px; }

.pc-o { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px #c3cde2; }
.pc-row--off { color: var(--mute); font-weight: 400; }

.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; }
.ic--dl { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E"); }

.pf-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; color: #fff; }
.pf-month { min-width: 150px; text-align: center; font-weight: 800; font-size: 19px; }
.pf-arr { width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--main); font-size: 24px; line-height: 1; cursor: pointer; }
.pf-arr:disabled { opacity: .45; cursor: default; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.pf-card { text-align: center; padding: 24px 12px; }
.pf-num { font-size: 36px; color: var(--main); line-height: 1.1; }
.pf-lab { margin-top: 6px; font-weight: 700; color: var(--mute); }
.pf-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.pf-row:first-of-type { border-top: 0; }
.pf-empty { padding: 24px; text-align: center; }
@media (max-width: 640px) { .pf-row { grid-template-columns: 1fr 1fr; } .pf-row b { grid-column: 1 / -1; } .pf-num { font-size: 30px; } }

.pf-src { padding: 22px; }
.pf-src h2 { margin: 0 0 14px; font-size: 26px; font-weight: 900; color: var(--main); text-align: center; }
.pf-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-bottom: 18px; }
.pf-link { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pf-url { flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px; background: var(--panel); border-radius: 10px; overflow-wrap: anywhere; color: var(--ink); text-align: left; }
.pf-link .btn { flex: none; width: auto; }
@media (max-width: 640px) { .pf-src { grid-column: 1 / -1; } }