/* WhatSell V2 shell: floating sidebar card, global top bar and the workspace.
 * Tokens: css/tokens.css (--wk-*). Legacy aliases below keep the older page stylesheets on the same palette. */
:root {
  --sb-w: var(--wk-sb-w); --sb-rail: var(--wk-sb-rail); --bar-h: 56px;
  --ink: var(--wk-ink); --muted: var(--wk-text-2); --line: var(--wk-border);
  --green: var(--wk-green); --deep: var(--wk-green-700); --mint: var(--wk-hover); --mint2: var(--wk-selected);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html body { font-family: var(--wk-font); color: var(--wk-text); font-size: 14px; overflow: hidden;
  background: radial-gradient(900px 420px at 88% -8%, rgba(150, 201, 62, .20), transparent 70%), linear-gradient(180deg, var(--wk-bg), var(--wk-bg-2) 100%) fixed; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--wk-green); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: calc(var(--sb-w) + 12px) minmax(0, 1fr); height: 100%; transition: grid-template-columns var(--wk-t); }
body.sb-collapsed .app { grid-template-columns: calc(var(--sb-rail) + 12px) minmax(0, 1fr); }
body.locked .app { visibility: hidden; }
.main { position: relative; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.frames { position: relative; flex: 1; min-height: 0; }
.frame { position: absolute; inset: 0 12px 12px; width: calc(100% - 24px); height: calc(100% - 12px); border: 0; border-radius: var(--wk-r-card); background: var(--wk-surface); box-shadow: var(--wk-sh-2); }
.page { position: absolute; inset: 0; overflow: auto; }
.loader { position: absolute; inset: 0 12px 12px; display: grid; place-items: center; border-radius: var(--wk-r-card); background: var(--wk-surface); color: var(--wk-text-2); font-size: 13px; transition: opacity .2s; z-index: 2; }
.loader.done { opacity: 0; pointer-events: none; }

/* ---------- sidebar (floating card) ---------- */
.side { display: flex; flex-direction: column; min-height: 0; margin: 12px 0 12px 12px; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-r-card); box-shadow: var(--wk-sh-2); overflow: hidden; z-index: 30; }
.side-top { display: flex; align-items: center; padding: 22px 20px 6px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; font-weight: 700; font-size: 25px; letter-spacing: -.6px; color: var(--wk-ink); }
.brand img { width: 42px; height: 42px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; }
.brand em { font-style: normal; color: var(--wk-green); font-weight: 600; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: none; color: var(--wk-text-2); cursor: pointer; transition: background var(--wk-t), color var(--wk-t); }
.icon-btn:hover { background: var(--wk-hover); color: var(--wk-ink); }
.icon-btn svg, .nav a svg, .foot-btn svg, .top-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nav-toggle { position: absolute; top: 4px; inset-inline-end: 12px; z-index: 2; width: 32px; height: 32px; }
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 10px; scrollbar-width: thin; }
.nav h2 { margin: 16px 8px 8px; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--wk-text-3); white-space: nowrap; }
.nav h2:first-child { margin-top: 14px; }
.nav-sep { height: 1px; margin: 10px 6px 0; background: var(--wk-border); }
.nav a { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; margin-bottom: 2px; border-radius: 14px; text-decoration: none; font-weight: 400; font-size: 14.5px; color: var(--wk-text); white-space: nowrap; transition: background var(--wk-t), color var(--wk-t); }
.nav a svg { color: var(--wk-text-2); }
.nav a:hover { background: var(--wk-hover); }
.nav a[aria-current="page"] { background: var(--wk-selected); color: var(--wk-green-700); font-weight: 500; }
.nav a[aria-current="page"] svg { color: var(--wk-green); }
.side-foot { padding: 6px 14px 14px; display: grid; gap: 2px; border-top: 1px solid var(--wk-border); }
.user-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0 6px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--wk-selected); text-align: start; cursor: pointer; transition: background var(--wk-t); }
.user-card:hover { background: #d9efdf; }
.user-card .avatar { width: 40px; height: 40px; font-size: 14px; background: var(--wk-green); }
.user-more { width: 20px; height: 20px; margin-inline-start: auto; fill: var(--wk-text-2); flex: none; }
.foot-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: none; text-align: start; cursor: pointer; color: var(--wk-text); white-space: nowrap; font-size: 14.5px; transition: background var(--wk-t); }
.foot-btn svg { color: var(--wk-text-2); }
.foot-btn:hover { background: var(--wk-hover); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--wk-ink); color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; }
.who { min-width: 0; line-height: 1.3; }
.who b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { display: block; color: var(--wk-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a .badge { margin-inline-start: auto; min-width: 26px; padding: 2px 8px; border-radius: var(--wk-r-pill); background: var(--wk-green); color: #fff; font: 600 12px/18px var(--wk-font); text-align: center; font-style: normal; }
#lang { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-transform: capitalize; }

/* collapsed rail (desktop) */
body.sb-collapsed .side-top { justify-content: center; padding: 18px 0 4px; min-height: 64px; }
body.sb-collapsed .brand { flex: none; }
body.sb-collapsed .brand img { width: 40px; height: 40px; }
body.sb-collapsed .brand span, body.sb-collapsed .nav h2, body.sb-collapsed .nav a span, body.sb-collapsed .who, body.sb-collapsed .user-more, body.sb-collapsed .foot-btn .label { display: none; }
body.sb-collapsed .nav-toggle { position: static; margin: 0 auto 4px; }
body.sb-collapsed .nav { padding: 4px 10px; }
body.sb-collapsed .nav a { justify-content: center; padding: 0; position: relative; }
body.sb-collapsed .nav a .badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 17px; }
body.sb-collapsed .foot-btn, body.sb-collapsed .user-card { justify-content: center; padding: 0; }
body.sb-collapsed .user-card { background: none; margin: 4px 0; }
body.sb-collapsed .side-foot { padding: 6px 10px 12px; }
body.sb-collapsed #langWrap { display: none; }

/* ---------- global top bar ---------- */
.topbar { display: flex; align-items: center; gap: 16px; min-height: var(--wk-top-h); padding: 14px 16px 10px 12px; flex: none; position: relative; z-index: 20; }
.burger, .bar-title { display: none; }
.gsearch { position: relative; flex: 1 1 auto; max-width: 560px; display: flex; align-items: center; }
.gsearch svg { position: absolute; inset-inline-start: 18px; width: 20px; height: 20px; stroke: var(--wk-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.gsearch input { width: 100%; height: 48px; padding: 0 20px 0 50px; border: 1px solid var(--wk-border); border-radius: var(--wk-r-pill); background: var(--wk-surface); box-shadow: var(--wk-sh-2); font: inherit; font-size: 14.5px; color: var(--wk-text); transition: border-color var(--wk-t), box-shadow var(--wk-t); }
[dir="rtl"] .gsearch input { padding: 0 50px 0 20px; }
.gsearch input::placeholder { color: var(--wk-text-3); }
.gsearch input:focus { outline: none; border-color: var(--wk-green); box-shadow: 0 0 0 3px rgba(42, 146, 69, .14); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.top-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--wk-ink); cursor: pointer; text-decoration: none; transition: background var(--wk-t); }
.top-btn:hover { background: rgba(255, 255, 255, .85); }
.top-badge { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font: 600 10.5px/18px var(--wk-font); text-align: center; font-style: normal; box-shadow: 0 0 0 2px var(--wk-bg); }
.top-user { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 6px; border-radius: var(--wk-r-pill); background: var(--wk-surface); border: 1px solid var(--wk-border); box-shadow: var(--wk-sh-2); text-decoration: none; transition: border-color var(--wk-t); }
.top-user:hover { border-color: var(--wk-border-strong); }
.top-user .avatar { width: 36px; height: 36px; background: var(--wk-green); }
.top-user svg { width: 16px; height: 16px; stroke: var(--wk-text-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-name { font-size: 13.5px; font-weight: 500; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- mobile / tablet: the sidebar is an overlay drawer ---------- */
.scrim { display: none; }
@media (max-width: 1199px) { .top-name { display: none; } .top-user { padding-inline-end: 10px; } }
@media (max-width: 899px) {
  .app, body.sb-collapsed .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; margin: 0; border-radius: 0 var(--wk-r-card) var(--wk-r-card) 0; width: min(320px, 88vw); transform: translateX(-104%); transition: transform .2s ease; box-shadow: none; }
  [dir="rtl"] .side { inset: 0 0 0 auto; transform: translateX(104%); border-radius: var(--wk-r-card) 0 0 var(--wk-r-card); }
  body.drawer-open .side { transform: none; box-shadow: 4px 0 28px rgba(20, 40, 25, .22); }
  body.drawer-open .scrim { display: block; position: fixed; inset: 0; background: rgba(20, 30, 20, .4); z-index: 25; }
  .topbar { min-height: var(--bar-h); padding: 8px 10px; gap: 8px; background: var(--wk-surface); border-bottom: 1px solid var(--wk-border); }
  .burger { display: grid; }
  .bar-title { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .gsearch { display: none; }
  .top-actions { gap: 2px; }
  .top-btn { width: 40px; height: 40px; }
  .top-user { border: 0; box-shadow: none; background: none; padding: 0; height: 40px; }
  .frame, .loader { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  /* the rail layout never applies to the drawer */
  body.sb-collapsed .side-top { justify-content: flex-start; padding: 22px 20px 6px; }
  body.sb-collapsed .brand { flex: 1; }
  body.sb-collapsed .brand span, body.sb-collapsed .nav h2, body.sb-collapsed .nav a span, body.sb-collapsed .who, body.sb-collapsed .user-more, body.sb-collapsed .foot-btn .label { display: revert; }
  body.sb-collapsed .nav a, body.sb-collapsed .foot-btn, body.sb-collapsed .user-card { justify-content: flex-start; padding: 0 14px; }
  body.sb-collapsed .user-card { background: var(--wk-selected); padding: 10px 12px; }
  body.sb-collapsed .nav-toggle { position: absolute; }
  body.sb-collapsed #langWrap { display: flex; }
  .nav-toggle, #toggle { display: none; }
}
@media (max-width: 899px) and (min-width: 0) { .bar-title { flex: 1; } }

/* ---------- account menu / hints ---------- */
.hint { position: fixed; z-index: 40; background: var(--wk-ink); color: #fff; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; max-width: 260px; box-shadow: var(--wk-sh-pop); }

/* ---------- sign-in / sign-up ---------- */
.login { position: fixed; inset: 0; z-index: 50; display: none; overflow: auto;
  background: radial-gradient(700px 380px at 90% -5%, rgba(150, 201, 62, .26), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(42, 146, 69, .10), transparent 70%), linear-gradient(160deg, var(--wk-bg), #fff); }
body.locked .login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-hero { position: relative; margin: 16px; padding: 48px 52px; border-radius: 28px; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 24px; overflow: hidden;
  background: radial-gradient(520px 320px at 100% 0%, rgba(150, 201, 62, .55), transparent 65%), linear-gradient(155deg, var(--wk-green-600), var(--wk-green-700) 70%); }
.login-hero::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; inset-inline-end: -120px; bottom: -140px; background: rgba(255, 255, 255, .08); }
.lh-brand { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
.lh-brand img { width: 48px; height: 48px; background: #fff; border-radius: 14px; padding: 5px; }
.lh-brand em { font-style: normal; color: var(--wk-lime); font-weight: 600; }
.login-hero h2 { margin: 0; max-width: 440px; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; }
.login-hero ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 440px; }
.login-hero li { position: relative; padding-inline-start: 34px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.login-hero li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.login-forms { display: flex; align-items: center; justify-content: center; padding: 24px 16px; min-width: 0; }
.login form[hidden] { display: none; }
.login form { background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: 24px; padding: 34px; width: 100%; max-width: 430px; box-shadow: 0 2px 4px rgba(31, 60, 38, .04), 0 20px 50px rgba(31, 60, 38, .10); }
.login form img { height: 44px; margin-bottom: 16px; }
.login h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.4px; }
.login p { color: var(--wk-text-2); font-size: 13.5px; margin: 0 0 22px; }
.login label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.login input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--wk-border-strong); border-radius: var(--wk-r-input); background: var(--wk-surface-2); font: inherit; transition: border-color var(--wk-t), box-shadow var(--wk-t), background var(--wk-t); }
.login input:focus { outline: none; border-color: var(--wk-green); background: #fff; box-shadow: 0 0 0 3px rgba(42, 146, 69, .14); }
.login .go { width: 100%; padding: 13px; border: 0; border-radius: var(--wk-r-btn); background: var(--wk-green); color: #fff; font-weight: 600; font-size: 14.5px; cursor: pointer; box-shadow: 0 6px 16px rgba(42, 146, 69, .28); transition: background var(--wk-t); }
.login .go:hover { background: var(--wk-green-600); }
.login .go:disabled { opacity: .6; cursor: wait; }
.login .err { color: var(--wk-error); font-size: 13px; margin: 0 0 10px; min-height: 1.2em; }
.login .alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 16px; font-size: 12.5px; }
.login .alt a, .login .alt button { color: var(--wk-text-2); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: none; font-size: inherit; font-family: inherit; }
.login #lcreate, .login #sback { color: var(--wk-green-700); font-weight: 500; }
.login .alt a:hover, .login .alt button:hover { color: var(--wk-green-700); text-decoration: underline; }
.login .ok { color: var(--wk-green-700); font-size: 13px; margin: 0 0 10px; }
.login .ok:empty { display: none; }
.login label.chk { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.login label.chk input { width: auto; margin: 3px 0 0; accent-color: var(--wk-green); }
@media (max-width: 899px) {
  body.locked .login { display: flex; flex-direction: column; }
  .login-hero { display: none; }
  .login-forms { flex: 1; padding: 16px; }
  .login form { padding: 26px 22px; border-radius: 20px; }
}

/* ---------- pages inside the shell (links, external, 404) ---------- */
.doc { max-width: 980px; margin: 0 auto; padding: 8px 24px 48px; }
.doc h1 { margin: 0 0 6px; font-size: var(--wk-fs-2xl); font-weight: 600; letter-spacing: -.3px; }
.lead { color: var(--wk-text-2); margin: 0 0 20px; }
h2.group { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--wk-text-3); margin: 26px 0 10px; font-weight: 500; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn, .btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; min-height: 40px; text-decoration: none; font-size: 13px; cursor: pointer; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search { width: 100%; max-width: 420px; padding: 11px 16px; border: 1px solid var(--wk-border); border-radius: var(--wk-r-pill); font: inherit; margin-bottom: 4px; background: #fff; }
.link-row { display: flex; align-items: center; gap: 14px; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-r-panel); padding: 12px 16px; margin-bottom: 8px; flex-wrap: wrap; box-shadow: var(--wk-sh-1); }
.link-row .meta { flex: 1; min-width: 200px; }
.link-row b { display: block; font-size: 14px; font-weight: 500; }
.link-row small { display: block; color: var(--wk-text-2); font-size: 12px; }
.link-row code { display: block; font-size: 11.5px; color: var(--wk-green-700); margin-top: 3px; word-break: break-all; }
.empty { color: var(--wk-text-2); padding: 24px 0; }
.center { max-width: 420px; margin: 12vh auto; text-align: center; padding: 0 20px; }
.center h1 { font-size: 44px; margin: 0; color: var(--wk-green-700); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--wk-ink); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 13px; z-index: 60; box-shadow: var(--wk-sh-pop); }
@media (max-width: 899px) { .doc { padding: 18px 14px 40px; } }
@media (prefers-reduced-motion: reduce) { .app, .side { transition: none; } }
.frame.off, .loader.off { visibility: hidden; pointer-events: none; }

/* ---------- dark navy sidebar (approved design) ---------- */
.side { background: linear-gradient(180deg, var(--wk-navy-2), var(--wk-navy) 55%); border-color: var(--wk-navy-line); color: var(--wk-on-navy); box-shadow: 0 8px 28px rgba(17, 22, 54, .28); }
.brand { color: #fff; }
.brand em { color: var(--wk-lime); }
.side .icon-btn { color: var(--wk-on-navy-2); }
.side .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav h2 { color: var(--wk-on-navy-2); opacity: .8; }
.nav-sep { background: var(--wk-navy-line); }
.nav a { color: var(--wk-on-navy); height: 42px; font-size: 14px; }
.nav a svg { color: var(--wk-on-navy-2); }
.nav a:hover { background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { background: var(--wk-accent); color: #fff; font-weight: 500; box-shadow: 0 6px 16px rgba(42, 146, 69, .35); }
.nav a[aria-current="page"] svg { color: #fff; }
.nav a .badge { background: #fff; color: var(--wk-accent); }
.nav a[aria-current="page"] .badge { background: rgba(255, 255, 255, .95); color: var(--wk-accent-600); }
.side-foot { border-top-color: var(--wk-navy-line); }
.user-card { background: rgba(255, 255, 255, .07); }
.user-card:hover { background: rgba(255, 255, 255, .12); }
.user-card .who b { color: #fff; }
.user-card .who small { color: var(--wk-on-navy-2); }
.user-more { fill: var(--wk-on-navy-2); }
.foot-btn { color: var(--wk-on-navy); }
.foot-btn svg { color: var(--wk-on-navy-2); }
.foot-btn:hover { background: rgba(255, 255, 255, .07); }
#lang option { color: var(--wk-ink); }
body.sb-collapsed .user-card { background: none; }
@media (max-width: 899px) { body.sb-collapsed .user-card { background: rgba(255, 255, 255, .07); } }

/* ---------- top bar: New menu, shortcut hint ---------- */
.gsearch kbd { position: absolute; inset-inline-end: 14px; padding: 3px 9px; border: 1px solid var(--wk-border); border-radius: 8px; background: var(--wk-surface-2); color: var(--wk-text-3); font: 500 11.5px var(--wk-font); pointer-events: none; }
.menuwrap { position: relative; }
.top-new { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: var(--wk-r-btn); background: var(--wk-accent); color: #fff; font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: 0 6px 16px rgba(42, 146, 69, .32); transition: background var(--wk-t); }
.top-new:hover { background: var(--wk-accent-600); }
.top-new svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.top-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40; min-width: 190px; display: grid; padding: 6px; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-r-panel); box-shadow: var(--wk-sh-pop); }
.top-menu a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 13.5px; }
.top-menu a:hover { background: var(--wk-hover); }
@media (max-width: 1199px) { .gsearch kbd { display: none; } }
@media (max-width: 899px) { .top-new span { display: none; } .top-new { width: 40px; height: 40px; padding: 0; justify-content: center; } }
html body .login-hero h2 { color: #fff; }
.foot-btn { min-height: 40px; }
.user-card { margin: 6px 0 4px; }

/* sign-in: Admin / Owner | Agent selector (it only picks which existing sign-in endpoint is called; the server decides the role) */
.login .role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; background: var(--wk-surface-2); border: 1px solid var(--wk-border); border-radius: 14px; }
.login .role-tabs button { border: 0; border-radius: 10px; padding: 9px 8px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--wk-text-2); cursor: pointer; transition: background var(--wk-t), color var(--wk-t); }
.login .role-tabs button.on { background: var(--wk-surface); color: var(--wk-green-700); font-weight: 600; box-shadow: 0 1px 3px rgba(31, 60, 38, .14); }
.login .role-tabs button:focus-visible { outline: 2px solid var(--wk-green); outline-offset: 1px; }

/* Login upgrade */
.login-type-tabs {
  margin: 18px 0 14px;
}

.forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 12px;
}

.forgot-row button {
  color: #239447;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #777;
  font-size: 12px;
}

.login-or::before,
.login-or::after {
  content: "";
  height: 1px;
  background: #e2e2e2;
  flex: 1;
}

.google-login {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d8dce1;
  border-radius: 10px;
  background: #fff;
  color: #202124;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: .2s ease;
}

.google-login:hover {
  background: #f7f8f8;
  border-color: #bfc5ca;
}

.google-g {
  font-size: 20px;
  font-weight: 700;
  color: #4285f4;
}

.login-type-tabs button {
  flex: 1;
}


.google-login .google-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  display: block;
}

/* Google / Facebook sign-in: shown only when switched on in the Super Admin console (Social sign-in). */
.social-login[hidden], .social-login [hidden] { display: none !important; }
/* One compact row: "Continue with" then a Google and a Facebook logo button, same size and outline style. */
.social-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.social-label { font-size: 13px; font-weight: 500; color: #6b7280; }
.gsi-btn { position: relative; width: 40px; height: 40px; }
/* Drawn at once with the Google logo; Google's own button loads into .gsi-slot on top of it a moment later. */
.gsi-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #dadce0; border-radius: 4px; background: #fff; }
.gsi-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fb-login { width: 40px; height: 40px; padding: 0; border: 1px solid #dadce0; border-radius: 4px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.fb-login:hover { background: #f1f6fe; border-color: #d2e3fc; } .fb-login:disabled { opacity: .6; cursor: progress; }
.fb-login:focus-visible { outline: 2px solid #1877F2; outline-offset: 2px; }
.social-note { margin: 10px 0 0; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center; }
.social-note a { color: #239447; }
.social-err:empty { display: none; }
/* ===== WhatSell Login 2026 Redesign ===== */
body.locked .login{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(500px,.95fr);overflow:hidden;background:#f7faf8}

body.locked .login-hero{position:relative;display:flex;flex-direction:column;justify-content:center;padding:70px clamp(45px,7vw,110px);color:#fff;overflow:hidden;background:radial-gradient(circle at 80% 18%,rgba(255,255,255,.13),transparent 28%),radial-gradient(circle at 18% 82%,rgba(255,255,255,.08),transparent 25%),linear-gradient(145deg,#087b3e 0%,#07954b 48%,#075d35 100%)}

body.locked .login-hero:before,body.locked .login-hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
body.locked .login-hero:before{right:-180px;top:-150px}
body.locked .login-hero:after{left:-220px;bottom:-220px}

body.locked .lh-brand{position:absolute;z-index:2;top:38px;left:clamp(45px,7vw,110px);display:flex;align-items:center;gap:11px;font-size:25px;font-weight:700}
body.locked .lh-brand img{width:42px;height:42px;object-fit:contain}
body.locked .lh-brand em{font-style:normal;color:#bdf4ce}

body.locked .login-hero h2{position:relative;z-index:2;max-width:650px;margin:0 0 26px;font-size:clamp(34px,4vw,57px);line-height:1.08;letter-spacing:-1.7px;color:#fff}
body.locked .login-hero ul{position:relative;z-index:2;list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:580px}
body.locked .login-hero li{position:relative;padding-left:30px;font-size:16px;color:rgba(255,255,255,.91)}
body.locked .login-hero li:before{content:"✓";position:absolute;left:0;top:-2px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16);font-size:12px;font-weight:700}

body.locked .login-forms{display:flex;align-items:center;justify-content:center;padding:38px clamp(28px,5vw,80px);background:radial-gradient(circle at 90% 5%,rgba(18,160,78,.07),transparent 28%),#f8faf9}

body.locked #loginForm,body.locked #signupForm{box-sizing:border-box;width:min(100%,520px);padding:38px 42px 34px;border:1px solid #e6ebe8;border-radius:22px;background:#fff;box-shadow:0 24px 65px rgba(15,60,35,.10)}

body.locked #loginForm>img,body.locked #signupForm>img{display:block;width:64px;height:64px;object-fit:contain;margin:0 auto 14px}

body.locked #loginForm h1,body.locked #signupForm h1{margin:0 0 7px;text-align:center;font-size:27px;line-height:1.25;letter-spacing:-.5px;color:#17231c}

body.locked #lintro,body.locked #signupForm>p{text-align:center;color:#778079;margin:0 0 22px;font-size:13px;line-height:1.55}

body.locked .role-tabs{display:flex;gap:4px;padding:4px;margin:0 0 18px;border:1px solid #e4e9e6;border-radius:10px;background:#f5f7f6}
body.locked .login-type-tabs{margin-bottom:13px}
body.locked .role-tabs button{flex:1;min-height:37px;border:0;border-radius:7px;background:transparent;color:#69736d;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.18s ease}
body.locked .role-tabs button.on{background:#fff;color:#138b46;box-shadow:0 2px 7px rgba(24,70,43,.10)}

body.locked #loginForm>label,body.locked #signupForm>label:not(.chk){display:block;margin:0 0 15px;color:#303b34;font-size:13px;font-weight:600}

body.locked #loginForm input,body.locked #signupForm input[type="text"],body.locked #signupForm input[type="email"],body.locked #signupForm input[type="tel"],body.locked #signupForm input[type="password"]{box-sizing:border-box;width:100%;height:47px;margin-top:7px;padding:0 14px;border:1px solid #dfe5e1;border-radius:9px;outline:none;background:#fff;color:#17231c;font:inherit;transition:.18s ease}

body.locked #loginForm input:focus,body.locked #signupForm input:focus{border-color:#15964c;box-shadow:0 0 0 3px rgba(21,150,76,.10)}

body.locked .forgot-row{display:flex;justify-content:flex-end;margin:-5px 0 13px}
body.locked .forgot-row button{border:0;background:none;color:#158c47;font-size:12px;font-weight:600;cursor:pointer}

body.locked #loginForm .go,body.locked #signupForm .go{width:100%;min-height:48px;border:0;border-radius:9px;background:linear-gradient(135deg,#12994d,#087b3e);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(10,132,65,.18);transition:.18s ease}
body.locked #loginForm .go:hover,body.locked #signupForm .go:hover{transform:translateY(-1px);box-shadow:0 10px 23px rgba(10,132,65,.24)}

body.locked #lalt{margin-top:20px;padding-top:18px;border-top:1px solid #edf0ee;display:flex;justify-content:center;gap:7px 18px;flex-wrap:wrap}
body.locked #lalt button{border:0;background:none;color:#158c47;font:inherit;font-size:12px;font-weight:600;cursor:pointer}

body.locked .err,body.locked .ok{margin-bottom:10px;font-size:12px}

/* Google stays in the design but hidden until real OAuth credentials are configured */
body.locked #lgoogle,body.locked #googleOr{display:none}

@media(max-width:900px){
 body.locked .login{grid-template-columns:1fr}
 body.locked .login-hero{min-height:auto;padding:30px 28px 32px}
 body.locked .lh-brand{position:static;margin-bottom:22px}
 body.locked .login-hero h2{font-size:30px;margin-bottom:18px}
 body.locked .login-hero ul{display:none}
 body.locked .login-forms{padding:26px 18px 40px}
}

@media(max-width:520px){
 body.locked #loginForm,body.locked #signupForm{padding:28px 20px 25px;border-radius:17px}
 body.locked .login-hero{padding:24px 20px}
 body.locked .login-hero h2{font-size:25px}
}

/* ===== Login viewport / scrolling fix ===== */
html,body{
  min-height:100%;
}

body.locked{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:100vh;
}

body.locked .login{
  height:auto !important;
  min-height:100vh !important;
  overflow:visible !important;
  align-items:stretch;
}

body.locked .login-hero{
  min-height:100vh;
  box-sizing:border-box;
}

body.locked .login-forms{
  box-sizing:border-box;
  min-height:100vh;
  align-items:center;
  overflow:visible !important;
  padding-top:28px;
  padding-bottom:28px;
}

body.locked #loginForm,
body.locked #signupForm{
  margin:auto;
  max-height:none !important;
}

@media(max-height:800px) and (min-width:901px){
  body.locked .login-forms{
    align-items:flex-start;
  }

  body.locked #loginForm,
  body.locked #signupForm{
    margin:12px auto;
    padding-top:26px;
    padding-bottom:26px;
  }

  body.locked #loginForm>img,
  body.locked #signupForm>img{
    width:52px;
    height:52px;
    margin-bottom:8px;
  }

  body.locked #loginForm h1,
  body.locked #signupForm h1{
    font-size:24px;
  }
}

@media(max-width:900px){
  body.locked .login-hero{
    min-height:auto;
  }

  body.locked .login-forms{
    min-height:auto;
  }
}

/* =========================================================
   WHATSELL TARGET LOGIN — FINAL VISUAL OVERRIDE
   ========================================================= */

body.locked{
  margin:0!important;
  min-height:100vh!important;
  overflow:auto!important;
  background:#f5f7f6!important;
}

body.locked .login{
  width:100%!important;
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:55% 45%!important;
  background:#f5f7f6!important;
  overflow:hidden!important;
}

/* ---------- LEFT PANEL ---------- */
body.locked .login-hero{
  box-sizing:border-box!important;
  position:relative!important;
  min-height:100vh!important;
  padding:38px 48px!important;
  display:block!important;
  overflow:hidden!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 90% 7%,rgba(80,255,163,.13),transparent 28%),
    radial-gradient(circle at 5% 90%,rgba(0,255,151,.09),transparent 27%),
    linear-gradient(145deg,#043d28 0%,#075a36 50%,#073d2a 100%)!important;
}

body.locked .login-hero:before{
  content:""!important;
  position:absolute!important;
  width:500px!important;
  height:500px!important;
  border-radius:50%!important;
  right:-280px!important;
  top:-250px!important;
  border:1px solid rgba(255,255,255,.06)!important;
}

body.locked .login-hero:after{
  content:""!important;
  position:absolute!important;
  width:420px!important;
  height:420px!important;
  border-radius:50%!important;
  left:-250px!important;
  bottom:-250px!important;
  border:1px solid rgba(255,255,255,.05)!important;
}

body.locked .target-brand{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
}

body.locked .target-brand img{
  width:43px;
  height:43px;
  object-fit:contain;
}

body.locked .target-brand strong,
body.locked .card-brand strong{
  display:block;
  font-size:23px;
  line-height:1;
  color:#fff;
}

body.locked .target-brand strong span,
body.locked .card-brand strong span{
  color:#20c96b;
}

body.locked .target-brand small,
body.locked .card-brand small{
  display:block;
  margin-top:5px;
  font-size:9px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

body.locked .ai-badge{
  position:absolute;
  z-index:5;
  top:40px;
  right:42px;
  padding:7px 14px;
  border:1px solid rgba(76,239,151,.4);
  border-radius:20px;
  background:rgba(18,164,86,.18);
  color:#62e69c;
  font-size:11px;
  font-weight:700;
}

body.locked .hero-copy{
  position:relative;
  z-index:4;
  width:48%;
  margin-top:54px;
}

body.locked .hero-copy h2{
  margin:0!important;
  max-width:none!important;
  font-size:clamp(31px,3.05vw,48px)!important;
  line-height:1.04!important;
  letter-spacing:-1.8px!important;
  font-weight:750!important;
  color:#fff!important;
}

body.locked .hero-copy h2 em{
  color:#23d26f;
  font-style:normal;
}

body.locked .hero-copy>p{
  max-width:390px;
  margin:22px 0 27px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  line-height:1.7;
}

body.locked .hero-features{
  display:grid;
  gap:12px;
}

body.locked .hero-features>div{
  display:flex;
  align-items:center;
  gap:11px;
}

body.locked .hero-features>div>b{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(24,199,102,.13);
  border:1px solid rgba(54,221,128,.14);
  color:#2bd376;
  font-size:12px;
}

body.locked .hero-features span{
  display:flex;
  flex-direction:column;
}

body.locked .hero-features strong{
  color:#fff;
  font-size:11px;
  line-height:1.25;
}

body.locked .hero-features small{
  margin-top:2px;
  color:rgba(255,255,255,.45);
  font-size:8px;
}

/* ---------- CRM MOCKUP ---------- */
body.locked .crm-preview{
  position:absolute;
  z-index:3;
  width:390px;
  height:300px;
  right:32px;
  top:148px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:#f7f9f8;
  color:#24362c;
  box-shadow:0 30px 55px rgba(0,0,0,.28);
  transform:rotate(-1.5deg);
}

body.locked .preview-head{
  height:39px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  background:#fff;
  border-bottom:1px solid #e6ebe8;
}

body.locked .preview-head img{
  width:20px;
  height:20px;
}

body.locked .preview-head strong{
  font-size:9px;
}

body.locked .preview-head strong span{color:#16a45a}

body.locked .preview-head i{
  margin-left:auto;
  width:145px;
  padding:6px 9px;
  border-radius:5px;
  background:#f3f5f4;
  color:#9aa39e;
  font-size:6px;
  font-style:normal;
}

body.locked .preview-body{
  height:calc(100% - 39px);
  display:grid;
  grid-template-columns:88px 1fr;
}

body.locked .preview-body .preview-nav{
  padding:14px 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#0b3425;
}

body.locked .preview-body .preview-nav span,
body.locked .preview-body .preview-nav b{
  padding:7px 7px;
  border-radius:5px;
  color:rgba(255,255,255,.65);
  font-size:6.5px;
  font-weight:500;
}

body.locked .preview-body .preview-nav b{
  color:#fff;
  background:#129352;
}

body.locked .preview-body .preview-nav small{
  float:right;
  padding:1px 4px;
  border-radius:8px;
  background:#23c66d;
}

body.locked .preview-body section{
  padding:14px;
  background:#fff;
}

body.locked .preview-body h3{
  margin:0 0 8px;
  font-size:12px;
}

body.locked .preview-tabs{
  margin-bottom:7px;
  padding-bottom:7px;
  border-bottom:1px solid #edf0ee;
  color:#718078;
  font-size:6px;
}

body.locked .preview-tabs b{color:#16a45a}

body.locked .preview-body article{
  min-height:35px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid #f0f2f1;
}

body.locked .preview-body article>i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e2f7ea;
  color:#168d4d;
  font-size:6px;
  font-style:normal;
  font-weight:700;
}

body.locked .preview-body article span{
  display:flex;
  flex-direction:column;
}

body.locked .preview-body article strong{font-size:7px}
body.locked .preview-body article small{margin-top:2px;color:#89928d;font-size:5.5px}
body.locked .preview-body article time{margin-left:auto;color:#9ba39f;font-size:5px}

/* ---------- PHONE MOCKUP ---------- */
body.locked .phone-preview{
  position:absolute;
  z-index:6;
  right:18px;
  top:285px;
  width:150px;
  height:305px;
  box-sizing:border-box;
  padding:10px 8px;
  overflow:hidden;
  border:5px solid #10271d;
  border-radius:25px;
  background:#e8f2ed;
  color:#26372e;
  box-shadow:0 22px 40px rgba(0,0,0,.35);
  transform:rotate(4deg);
}

body.locked .phone-top{
  height:17px;
  padding:0 4px;
  display:flex;
  justify-content:space-between;
  font-size:6px;
  font-weight:700;
}

body.locked .phone-contact{
  margin:0 -8px 8px;
  padding:7px 8px;
  display:flex;
  align-items:center;
  gap:5px;
  background:#075e54;
  color:#fff;
  font-size:6px;
}

body.locked .phone-contact img{
  width:18px;
  height:18px;
  border-radius:50%;
}

body.locked .phone-contact span{
  flex:1;
  display:flex;
  flex-direction:column;
}

body.locked .phone-contact b{font-size:6px}
body.locked .phone-contact small{font-size:5px;color:#b9d8cd}

body.locked .bubble{
  max-width:105px;
  margin:8px 0;
  padding:7px;
  border-radius:7px;
  font-size:6px;
  line-height:1.4;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

body.locked .bubble small{
  display:block;
  margin-top:3px;
  text-align:right;
  color:#7e8c84;
  font-size:4.5px;
}

body.locked .bubble.incoming{background:#fff}
body.locked .bubble.outgoing{margin-left:auto;background:#d9fdd3}

body.locked .catalog{
  margin-left:auto;
  width:95px;
  padding:8px;
  border-radius:7px;
  background:#fff;
  font-size:6px;
}

body.locked .catalog b{
  display:block;
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid #e7ece9;
  text-align:center;
  color:#129352;
}

body.locked .phone-input{
  position:absolute;
  left:7px;
  right:7px;
  bottom:8px;
  padding:7px 8px;
  border-radius:15px;
  background:#fff;
  color:#a1aaa5;
  font-size:5px;
}

body.locked .phone-input b{
  float:right;
  color:#129352;
}

body.locked .channel-bar{
  position:absolute;
  z-index:8;
  right:180px;
  bottom:38px;
  display:flex;
  gap:8px;
}

body.locked .channel-bar span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#119653;
  font-size:12px;
  font-weight:700;
  box-shadow:0 5px 15px rgba(0,0,0,.18);
}

/* ---------- RIGHT AREA ---------- */
body.locked .login-forms{
  box-sizing:border-box!important;
  min-height:100vh!important;
  padding:24px 55px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(22,160,82,.06),transparent 30%),
    #f7f9f8!important;
}

body.locked #loginForm{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:430px!important;
  margin:auto!important;
  padding:31px 39px 28px!important;
  border:1px solid #e4e9e6!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 20px 55px rgba(27,67,45,.09)!important;
}

body.locked .card-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-bottom:19px;
}

body.locked .card-brand img{
  width:43px;
  height:43px;
}

body.locked .card-brand strong{
  color:#183326;
  font-size:21px;
}

body.locked .card-brand small{
  color:#829087;
  font-size:7px;
  letter-spacing:1.4px;
}

body.locked #loginForm h1{
  margin:0 0 5px!important;
  text-align:center!important;
  color:#172c21!important;
  font-size:22px!important;
  letter-spacing:-.4px!important;
}

body.locked #lintro{
  margin:0 0 18px!important;
  text-align:center!important;
  color:#89938d!important;
  font-size:9px!important;
}

/* tabs */
body.locked #loginForm .role-tabs{
  height:38px;
  box-sizing:border-box;
  margin:0 0 11px!important;
  padding:3px!important;
  display:flex!important;
  gap:3px!important;
  border:1px solid #e4e9e6!important;
  border-radius:8px!important;
  background:#f4f6f5!important;
}

body.locked #loginForm .role-tabs button{
  min-height:30px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#69756e!important;
  font-size:9px!important;
  font-weight:650!important;
}

body.locked #loginForm .role-tabs button.on{
  background:#fff!important;
  color:#148c4b!important;
  box-shadow:0 1px 5px rgba(0,0,0,.08)!important;
}

/* fields */
body.locked #loginForm>label{
  margin:0 0 11px!important;
  display:block!important;
  color:#35463d!important;
  font-size:9px!important;
  font-weight:650!important;
}

body.locked .field-wrap{
  position:relative;
  margin-top:6px;
}

body.locked .field-wrap>span{
  position:absolute;
  z-index:2;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#9aa49e;
  font-size:11px;
}

body.locked #loginForm .field-wrap input{
  box-sizing:border-box!important;
  width:100%!important;
  height:39px!important;
  margin:0!important;
  padding:0 13px 0 34px!important;
  border:1px solid #dfe5e1!important;
  border-radius:7px!important;
  outline:0!important;
  background:#fff!important;
  color:#27382f!important;
  font-size:10px!important;
}

body.locked #loginForm .field-wrap input:focus{
  border-color:#1aa15a!important;
  box-shadow:0 0 0 3px rgba(26,161,90,.08)!important;
}

body.locked .login-options{
  margin:-1px 0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

body.locked .remember{
  display:flex!important;
  align-items:center;
  gap:5px;
  margin:0!important;
  color:#707c75!important;
  font-size:8px!important;
  font-weight:500!important;
}

body.locked .remember input{
  width:11px!important;
  height:11px!important;
  margin:0!important;
  accent-color:#159653;
}

body.locked .forgot-row{
  margin:0!important;
}

body.locked .forgot-row button{
  padding:0!important;
  color:#158f4c!important;
  font-size:8px!important;
}

/* sign in */
body.locked #loginForm .go{
  width:100%!important;
  height:41px!important;
  min-height:41px!important;
  border:0!important;
  border-radius:7px!important;
  background:linear-gradient(90deg,#16974f,#0a7f42)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:700!important;
  box-shadow:0 8px 18px rgba(11,132,67,.18)!important;
}

/* Google visible in target design */
body.locked #googleOr{
  display:flex;
  align-items:center;
  gap:10px;
  margin:13px 0!important;
  color:#a1aaa5;
  font-size:7px;
}

body.locked #googleOr:before,
body.locked #googleOr:after{
  content:"";
  height:1px;
  flex:1;
  background:#e9ecea;
}

body.locked #lgoogle{
  width:100%;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dfe4e1;
  border-radius:7px;
  background:#fff;
  color:#455149;
  font-size:9px;
  font-weight:600;
}

body.locked #lalt{
  margin-top:16px!important;
  padding-top:14px!important;
  display:flex!important;
  justify-content:center!important;
  gap:16px!important;
  border-top:1px solid #edf0ee!important;
}

body.locked #lalt button{
  padding:0!important;
  color:#158f4c!important;
  font-size:7.5px!important;
  font-weight:600!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  body.locked .login{grid-template-columns:50% 50%!important}
  body.locked .hero-copy{width:58%}
  body.locked .crm-preview{width:330px;right:10px;opacity:.72}
  body.locked .phone-preview{right:8px}
}

@media(max-width:850px){
  body.locked .login{display:block!important}
  body.locked .login-hero{min-height:470px!important;padding:28px!important}
  body.locked .hero-copy{width:55%;margin-top:42px}
  body.locked .hero-copy h2{font-size:31px!important}
  body.locked .hero-features{display:none}
  body.locked .crm-preview{right:15px;top:135px;width:310px;height:245px}
  body.locked .phone-preview{display:none}
  body.locked .channel-bar{right:25px;bottom:30px}
  body.locked .login-forms{min-height:auto!important;padding:35px 18px!important}
}

@media(max-width:600px){
  body.locked .login-hero{min-height:390px!important}
  body.locked .hero-copy{width:100%;margin-top:40px}
  body.locked .hero-copy h2{font-size:29px!important}
  body.locked .hero-copy>p{max-width:310px}
  body.locked .crm-preview,
  body.locked .channel-bar{display:none}
  body.locked .ai-badge{right:20px;top:30px}
  body.locked #loginForm{padding:27px 22px!important}
}

/* ===== TARGET SCALE + COMPLETE PAGE FIX ===== */
body.locked .login{
  min-height:900px!important;
  grid-template-columns:58% 42%!important;
  overflow:visible!important;
}

body.locked .login-hero{
  min-height:900px!important;
  padding:55px 65px!important;
}

body.locked .login-forms{
  min-height:900px!important;
  padding:45px 55px!important;
  align-items:center!important;
}

/* LEFT: restore target-size typography */
body.locked .target-brand img{width:58px!important;height:58px!important}
body.locked .target-brand strong{font-size:30px!important}
body.locked .target-brand small{font-size:11px!important}

body.locked .ai-badge{
  top:58px!important;
  right:55px!important;
  padding:10px 18px!important;
  font-size:14px!important;
}

body.locked .hero-copy{
  width:52%!important;
  margin-top:65px!important;
}

body.locked .hero-copy h2{
  font-size:50px!important;
  line-height:1.05!important;
}

body.locked .hero-copy>p{
  margin-top:28px!important;
  max-width:420px!important;
  font-size:15px!important;
  line-height:1.65!important;
}

body.locked .hero-features{
  margin-top:30px!important;
  gap:17px!important;
}

body.locked .hero-features>div>b{
  width:42px!important;
  height:42px!important;
  flex-basis:42px!important;
  font-size:16px!important;
}

body.locked .hero-features strong{font-size:15px!important}
body.locked .hero-features small{font-size:11px!important}

/* LEFT: larger CRM artwork */
body.locked .crm-preview{
  width:470px!important;
  height:410px!important;
  right:30px!important;
  top:185px!important;
}

body.locked .preview-head{
  height:50px!important;
  padding:10px 14px!important;
}

body.locked .preview-head img{width:28px!important;height:28px!important}
body.locked .preview-head strong{font-size:12px!important}
body.locked .preview-head i{width:180px!important;font-size:8px!important}

body.locked .preview-body{
  height:calc(100% - 50px)!important;
  grid-template-columns:110px 1fr!important;
}

body.locked .preview-body .preview-nav span,
body.locked .preview-body .preview-nav b{
  padding:9px!important;
  font-size:9px!important;
}

body.locked .preview-body section{padding:18px!important}
body.locked .preview-body h3{font-size:17px!important}
body.locked .preview-tabs{font-size:8px!important}

body.locked .preview-body article{
  min-height:47px!important;
}

body.locked .preview-body article>i{
  width:30px!important;
  height:30px!important;
  font-size:8px!important;
}

body.locked .preview-body article strong{font-size:10px!important}
body.locked .preview-body article small{font-size:8px!important}
body.locked .preview-body article time{font-size:7px!important}

/* phone */
body.locked .phone-preview{
  width:190px!important;
  height:390px!important;
  right:20px!important;
  top:405px!important;
  border-width:6px!important;
  border-radius:31px!important;
}

body.locked .phone-top{font-size:8px!important}
body.locked .phone-contact{font-size:8px!important}
body.locked .phone-contact img{width:25px!important;height:25px!important}
body.locked .phone-contact b{font-size:8px!important}
body.locked .phone-contact small{font-size:7px!important}

body.locked .bubble{
  max-width:135px!important;
  padding:10px!important;
  font-size:8px!important;
}

body.locked .bubble small{font-size:6px!important}
body.locked .catalog{width:120px!important;font-size:8px!important}
body.locked .phone-input{padding:9px!important;font-size:7px!important}

body.locked .channel-bar{
  right:220px!important;
  bottom:55px!important;
}

body.locked .channel-bar span{
  width:40px!important;
  height:40px!important;
  font-size:16px!important;
}

/* RIGHT LOGIN CARD */
body.locked #loginForm{
  max-width:560px!important;
  padding:38px 45px 36px!important;
  border-radius:22px!important;
}

body.locked .card-brand img{
  width:58px!important;
  height:58px!important;
}

body.locked .card-brand strong{font-size:28px!important}
body.locked .card-brand small{font-size:10px!important}

body.locked #loginForm h1{
  margin-top:22px!important;
  font-size:32px!important;
}

body.locked #lintro{
  margin-bottom:25px!important;
  font-size:14px!important;
}

body.locked #loginForm .role-tabs{
  height:56px!important;
  margin-bottom:18px!important;
  padding:5px!important;
  border-radius:12px!important;
}

body.locked #loginForm .role-tabs button{
  min-height:44px!important;
  font-size:14px!important;
  border-radius:9px!important;
}

body.locked #loginForm>label{
  margin-bottom:18px!important;
  font-size:14px!important;
}

body.locked #loginForm .field-wrap input{
  height:58px!important;
  padding-left:48px!important;
  border-radius:11px!important;
  font-size:15px!important;
}

body.locked .field-wrap>span{
  left:17px!important;
  font-size:17px!important;
}

body.locked .remember{
  font-size:13px!important;
}

body.locked .remember input{
  width:17px!important;
  height:17px!important;
}

body.locked .forgot-row button{
  font-size:13px!important;
}

body.locked #loginForm .go{
  height:58px!important;
  min-height:58px!important;
  margin-top:8px!important;
  border-radius:11px!important;
  font-size:16px!important;
}

body.locked #googleOr{
  margin:18px 0!important;
  font-size:11px!important;
}

body.locked #lgoogle{
  height:55px!important;
  border-radius:11px!important;
  font-size:14px!important;
}

body.locked #lalt{
  margin-top:22px!important;
  padding-top:20px!important;
  justify-content:space-between!important;
}

body.locked #lalt button{
  font-size:12px!important;
}

/* Desktop page scrolls naturally instead of shrinking */
@media(min-width:851px){
  body.locked{
    min-width:1100px!important;
  }
}


/* ===== LOGIN FINAL LAYOUT CORRECTION ===== */

/* Full desktop layout */
body.locked{
  overflow:auto!important;
}

body.locked .login{
  min-height:760px!important;
  grid-template-columns:56% 44%!important;
}

/* LEFT */
body.locked .login-hero{
  min-height:760px!important;
  padding:38px 48px!important;
}

/* Branding */
body.locked .target-brand img{
  width:46px!important;
  height:46px!important;
}
body.locked .target-brand strong{font-size:23px!important}
body.locked .target-brand small{font-size:9px!important}

body.locked .ai-badge{
  top:40px!important;
  right:42px!important;
  padding:8px 15px!important;
  font-size:11px!important;
}

/* Text gets its own clean column */
body.locked .hero-copy{
  position:relative!important;
  z-index:20!important;
  width:43%!important;
  margin-top:48px!important;
}

body.locked .hero-copy h2{
  font-size:42px!important;
  line-height:1.06!important;
  letter-spacing:-1.5px!important;
}

body.locked .hero-copy>p{
  max-width:315px!important;
  margin:22px 0!important;
  font-size:12px!important;
  line-height:1.65!important;
}

body.locked .hero-features{
  gap:11px!important;
  margin-top:18px!important;
}

body.locked .hero-features>div>b{
  width:31px!important;
  height:31px!important;
  flex-basis:31px!important;
  font-size:11px!important;
}

body.locked .hero-features strong{font-size:10px!important}
body.locked .hero-features small{font-size:7.5px!important}

/*
 Dashboard is now ONLY in the right half of the green panel.
 It cannot sit behind headline/description.
*/
body.locked .crm-preview{
  z-index:5!important;
  width:390px!important;
  height:300px!important;
  top:175px!important;
  right:25px!important;
  transform:rotate(-1deg)!important;
}

/* Phone stays on far right/bottom */
body.locked .phone-preview{
  z-index:8!important;
  width:145px!important;
  height:300px!important;
  top:350px!important;
  right:16px!important;
  border-width:5px!important;
  border-radius:24px!important;
  transform:rotate(3deg)!important;
}

/* restore sensible preview internal scale */
body.locked .preview-head{
  height:39px!important;
  padding:7px 10px!important;
}
body.locked .preview-head img{width:20px!important;height:20px!important}
body.locked .preview-head strong{font-size:9px!important}
body.locked .preview-head i{width:145px!important;font-size:6px!important}

body.locked .preview-body{
  height:calc(100% - 39px)!important;
  grid-template-columns:88px 1fr!important;
}
body.locked .preview-body .preview-nav span,
body.locked .preview-body .preview-nav b{
  padding:7px!important;
  font-size:6.5px!important;
}
body.locked .preview-body section{padding:14px!important}
body.locked .preview-body h3{font-size:12px!important}
body.locked .preview-tabs{font-size:6px!important}
body.locked .preview-body article{min-height:35px!important}
body.locked .preview-body article>i{
  width:22px!important;
  height:22px!important;
  font-size:6px!important;
}
body.locked .preview-body article strong{font-size:7px!important}
body.locked .preview-body article small{font-size:5.5px!important}
body.locked .preview-body article time{font-size:5px!important}

body.locked .phone-top{font-size:6px!important}
body.locked .phone-contact img{width:18px!important;height:18px!important}
body.locked .phone-contact b{font-size:6px!important}
body.locked .phone-contact small{font-size:5px!important}
body.locked .bubble{
  max-width:100px!important;
  padding:7px!important;
  font-size:6px!important;
}
body.locked .bubble small{font-size:4.5px!important}
body.locked .catalog{width:90px!important;font-size:6px!important}
body.locked .phone-input{padding:7px!important;font-size:5px!important}

body.locked .channel-bar{
  z-index:20!important;
  right:170px!important;
  bottom:32px!important;
}
body.locked .channel-bar span{
  width:30px!important;
  height:30px!important;
  font-size:12px!important;
}

/* RIGHT SIDE — compact complete card like reference screenshot */
body.locked .login-forms{
  min-height:760px!important;
  padding:24px 40px!important;
  align-items:center!important;
}

body.locked #loginForm{
  width:100%!important;
  max-width:430px!important;
  padding:27px 38px 25px!important;
  border-radius:18px!important;
}

/* compact logo */
body.locked .card-brand{
  margin-bottom:13px!important;
}
body.locked .card-brand img{
  width:39px!important;
  height:39px!important;
}
body.locked .card-brand strong{
  font-size:19px!important;
}
body.locked .card-brand small{
  font-size:7px!important;
}

/* heading */
body.locked #loginForm h1{
  margin:10px 0 4px!important;
  font-size:22px!important;
}
body.locked #lintro{
  margin-bottom:15px!important;
  font-size:9px!important;
  line-height:1.4!important;
}

/* login type */
body.locked #loginForm .role-tabs{
  height:39px!important;
  margin-bottom:10px!important;
  padding:3px!important;
  border-radius:8px!important;
}
body.locked #loginForm .role-tabs button{
  min-height:31px!important;
  font-size:9px!important;
  border-radius:6px!important;
}

/* fields */
body.locked #loginForm>label{
  margin-bottom:10px!important;
  font-size:9px!important;
}

body.locked .field-wrap{
  margin-top:5px!important;
}

body.locked #loginForm .field-wrap input{
  height:39px!important;
  padding:0 12px 0 35px!important;
  border-radius:7px!important;
  font-size:10px!important;
}

body.locked .field-wrap>span{
  left:12px!important;
  font-size:10px!important;
}

/* remember / forgot */
body.locked .login-options{
  margin:0 0 10px!important;
}
body.locked .remember{font-size:8px!important}
body.locked .remember input{
  width:11px!important;
  height:11px!important;
}
body.locked .forgot-row button{font-size:8px!important}

/* errors should not create huge blank space */
body.locked #lerr:empty{
  display:none!important;
}
body.locked #lerr:not(:empty){
  margin:4px 0 8px!important;
  font-size:8px!important;
}

/* button */
body.locked #loginForm .go{
  height:40px!important;
  min-height:40px!important;
  margin-top:2px!important;
  border-radius:7px!important;
  font-size:10px!important;
}

/* OR */
body.locked #googleOr{
  margin:10px 0!important;
  font-size:7px!important;
}

/* Google */
body.locked #lgoogle{
  height:39px!important;
  border-radius:7px!important;
  font-size:9px!important;
}

/* bottom links */
body.locked #lalt{
  margin-top:13px!important;
  padding-top:12px!important;
  gap:10px!important;
}
body.locked #lalt button{
  font-size:7.5px!important;
}

/* Keep whole card visible on ordinary laptop screens */
@media(min-width:851px) and (max-height:800px){
  body.locked .login,
  body.locked .login-hero,
  body.locked .login-forms{
    min-height:700px!important;
  }

  body.locked #loginForm{
    transform:scale(.94)!important;
    transform-origin:center center!important;
  }
}


/* ===== FINAL SIZE BOOST — KEEP CURRENT LAYOUT ===== */

/* LEFT headline/content */
body.locked .hero-copy h2{
  font-size:50px!important;
}

body.locked .hero-copy>p{
  max-width:345px!important;
  font-size:14px!important;
}

body.locked .hero-features strong{
  font-size:12px!important;
}

body.locked .hero-features small{
  font-size:9px!important;
}

body.locked .hero-features>div>b{
  width:36px!important;
  height:36px!important;
  flex-basis:36px!important;
  font-size:13px!important;
}

/* Keep artwork on its own side but make it more readable */
body.locked .crm-preview{
  width:410px!important;
  height:315px!important;
  right:18px!important;
}

body.locked .phone-preview{
  width:155px!important;
  height:320px!important;
  right:10px!important;
}

/* RIGHT: make complete card significantly larger */
body.locked #loginForm{
  max-width:500px!important;
  padding:34px 42px 31px!important;
}

/* logo */
body.locked .card-brand img{
  width:48px!important;
  height:48px!important;
}

body.locked .card-brand strong{
  font-size:23px!important;
}

body.locked .card-brand small{
  font-size:8px!important;
}

/* title */
body.locked #loginForm h1{
  font-size:27px!important;
  margin-top:13px!important;
}

body.locked #lintro{
  font-size:11px!important;
  margin-bottom:18px!important;
}

/* tabs */
body.locked #loginForm .role-tabs{
  height:46px!important;
  margin-bottom:13px!important;
}

body.locked #loginForm .role-tabs button{
  min-height:38px!important;
  font-size:11px!important;
}

/* labels + fields */
body.locked #loginForm>label{
  margin-bottom:13px!important;
  font-size:11px!important;
}

body.locked #loginForm .field-wrap input{
  height:47px!important;
  padding-left:40px!important;
  font-size:13px!important;
}

body.locked .field-wrap>span{
  left:14px!important;
  font-size:13px!important;
}

/* remember + forgot */
body.locked .remember{
  font-size:10px!important;
}

body.locked .remember input{
  width:14px!important;
  height:14px!important;
}

body.locked .forgot-row button{
  font-size:10px!important;
}

/* sign in */
body.locked #loginForm .go{
  height:48px!important;
  min-height:48px!important;
  font-size:13px!important;
}

/* divider + google */
body.locked #googleOr{
  margin:13px 0!important;
  font-size:8px!important;
}

body.locked #lgoogle{
  height:46px!important;
  font-size:11px!important;
}

/* bottom links */
body.locked #lalt{
  margin-top:16px!important;
  padding-top:15px!important;
}

body.locked #lalt button{
  font-size:9px!important;
}

/* IMPORTANT: disable previous laptop auto-shrink */
@media(min-width:851px) and (max-height:800px){
  body.locked #loginForm{
    transform:none!important;
  }
}


/* ===== LOGIN NATURAL HEIGHT + GUARANTEED SCROLL FIX ===== */
/* Only while the sign-in screen shows: once signed in (or on the admin sign-in), html must keep 100% height,
   otherwise the app and its iframes collapse to the content height. */
html:has(> body.locked){
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
}

body.locked{
  height:auto!important;
  min-height:100vh!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
}

body.locked .login{
  height:auto!important;
  min-height:100vh!important;
  overflow:visible!important;
  align-items:stretch!important;
}

/* Both columns may grow naturally */
body.locked .login-hero,
body.locked .login-forms{
  height:auto!important;
  min-height:100vh!important;
}

/* Never clip anything inside right login area */
body.locked .login-forms{
  overflow:visible!important;
  box-sizing:border-box!important;
  padding-top:40px!important;
  padding-bottom:40px!important;
}

/* Keep card at normal readable size */
body.locked #loginForm{
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0 auto!important;
  flex:none!important;
}

/* If card is taller than viewport, column becomes taller,
   therefore BODY scrolls normally */
@media (min-width:851px){
  body.locked .login-forms{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
  }

  body.locked #loginForm{
    width:100%!important;
    max-width:500px!important;
  }
}

/* Short laptop screens: don't center a tall card outside viewport.
   Start from top and allow normal vertical scrolling. */
@media (min-width:851px) and (max-height:820px){
  body.locked .login,
  body.locked .login-hero,
  body.locked .login-forms{
    min-height:760px!important;
  }

  body.locked .login-forms{
    justify-content:flex-start!important;
    padding-top:30px!important;
    padding-bottom:30px!important;
  }
}

/* Mobile/tablet: natural document flow */
@media (max-width:850px){
  body.locked{
    overflow-y:auto!important;
  }

  body.locked .login{
    min-height:0!important;
    overflow:visible!important;
  }

  body.locked .login-hero,
  body.locked .login-forms{
    height:auto!important;
    overflow:visible!important;
  }

  body.locked .login-forms{
    min-height:0!important;
    padding:35px 18px!important;
  }

  body.locked #loginForm{
    max-width:500px!important;
    margin:0 auto!important;
    transform:none!important;
  }
}


/* ===== DEFINITIVE LOGIN PAGE SCROLL FIX ===== */
body.locked .login{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  height:auto!important;
  min-height:100vh!important;
  overflow:visible!important;
}

html:has(> body.locked),
body.locked{
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
}

body.locked .login-forms{
  height:auto!important;
  overflow:visible!important;
}


/* ===== READABILITY FIX — FONT SIZE ONLY ===== */

/* LEFT description */
body.locked .hero-copy>p{
  font-size:15px!important;
  line-height:1.6!important;
}

/* LEFT feature text */
body.locked .hero-features strong{
  font-size:13px!important;
  line-height:1.3!important;
}

body.locked .hero-features small{
  font-size:10px!important;
  line-height:1.35!important;
}

/* RIGHT subtitle */
body.locked #lintro{
  font-size:13px!important;
  line-height:1.45!important;
}

/* Login type + role tabs */
body.locked #loginForm .role-tabs button{
  font-size:13px!important;
}

/* Email / Password labels */
body.locked #loginForm>label{
  font-size:13px!important;
}

/* Email / Password entered text */
body.locked #loginForm .field-wrap input{
  font-size:14px!important;
}

/* Field icons */
body.locked .field-wrap>span{
  font-size:14px!important;
}

/* Remember me */
body.locked .remember{
  font-size:11px!important;
}

/* Forgot password */
body.locked .forgot-row button{
  font-size:11px!important;
}

/* Main sign-in button */
body.locked #loginForm .go{
  font-size:14px!important;
}

/* OR */
body.locked #googleOr{
  font-size:10px!important;
}

/* Google */
body.locked #lgoogle{
  font-size:13px!important;
}

/* Bottom links */
body.locked #lalt button{
  font-size:11px!important;
}

/* Error messages */
body.locked #lerr:not(:empty){
  font-size:11px!important;
}

/* CRM mockup readability */
body.locked .preview-head strong{
  font-size:10px!important;
}

body.locked .preview-head i{
  font-size:8px!important;
}

body.locked .preview-body .preview-nav span,
body.locked .preview-body .preview-nav b{
  font-size:8px!important;
}

body.locked .preview-body h3{
  font-size:14px!important;
}

body.locked .preview-tabs{
  font-size:8px!important;
}

body.locked .preview-body article strong{
  font-size:9px!important;
}

body.locked .preview-body article small{
  font-size:7px!important;
}

body.locked .preview-body article time{
  font-size:7px!important;
}

/* Phone mockup */
body.locked .phone-contact b{
  font-size:8px!important;
}

body.locked .phone-contact small{
  font-size:7px!important;
}

body.locked .bubble{
  font-size:8px!important;
}

body.locked .catalog{
  font-size:8px!important;
}


/* ===== FINAL READABILITY BOOST ===== */
body.locked .hero-copy>p{font-size:16px!important}
body.locked .hero-features strong{font-size:14px!important}
body.locked .hero-features small{font-size:11px!important}

body.locked #lintro{font-size:14px!important}
body.locked #loginForm .role-tabs button{font-size:14px!important}
body.locked #loginForm>label{font-size:14px!important}
body.locked #loginForm .field-wrap input{font-size:15px!important}
body.locked .field-wrap>span{font-size:15px!important}

body.locked .remember{font-size:12px!important}
body.locked .forgot-row button{font-size:12px!important}
body.locked #loginForm .go{font-size:15px!important}
body.locked #googleOr{font-size:11px!important}
body.locked #lgoogle{font-size:14px!important}
body.locked #lalt button{font-size:12px!important}
body.locked #lerr:not(:empty){font-size:12px!important}

/* Dashboard mockup */
body.locked .preview-head strong{font-size:11px!important}
body.locked .preview-head i{font-size:9px!important}
body.locked .preview-body .preview-nav span,
body.locked .preview-body .preview-nav b{font-size:9px!important}
body.locked .preview-body h3{font-size:15px!important}
body.locked .preview-tabs{font-size:9px!important}
body.locked .preview-body article strong{font-size:10px!important}
body.locked .preview-body article small{font-size:8px!important}
body.locked .preview-body article time{font-size:8px!important}

/* Mobile mockup */
body.locked .phone-contact b{font-size:9px!important}
body.locked .phone-contact small{font-size:8px!important}
body.locked .bubble{font-size:9px!important}
body.locked .catalog{font-size:9px!important}


/* ===== GOOGLE + HERO OVERLAP FINAL FIX ===== */

/* Google OAuth is not configured yet: remove empty/unnecessary section */
body.locked #googleOr,
body.locked #lgoogle{
  display:none!important;
}

/* Keep marketing text completely unobstructed */
body.locked .hero-copy{
  position:relative!important;
  z-index:30!important;
  width:46%!important;
}

/* Dashboard must start AFTER the text column */
body.locked .crm-preview{
  z-index:5!important;
  width:360px!important;
  height:300px!important;
  left:auto!important;
  right:18px!important;
  top:190px!important;
  transform:rotate(-1deg)!important;
}

/* Phone remains attached to dashboard area only */
body.locked .phone-preview{
  z-index:8!important;
  width:145px!important;
  height:300px!important;
  left:auto!important;
  right:8px!important;
  top:365px!important;
}

/* Give headline clean solid background zone so artwork can NEVER show behind it */
body.locked .hero-copy:before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:-20px!important;
  left:-15px!important;
  right:-20px!important;
  bottom:-15px!important;
  background:linear-gradient(
    90deg,
    rgba(4,78,48,1) 0%,
    rgba(4,78,48,.98) 72%,
    rgba(4,78,48,0) 100%
  )!important;
  pointer-events:none!important;
}

/* Bottom links now sit naturally below Sign in */
body.locked #lalt{
  margin-top:18px!important;
}


/* ===== GOOGLE RESTORE + TRUE NON-OVERLAP FIX ===== */

/* Restore Google login */
body.locked #googleOr{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:13px 0!important;
}

body.locked #lgoogle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:46px!important;
  font-size:14px!important;
}

/* LEFT TEXT: dedicated unobstructed column */
body.locked .hero-copy{
  position:relative!important;
  z-index:30!important;
  width:42%!important;
  max-width:330px!important;
}

/* Remove previous fake background workaround */
body.locked .hero-copy:before{
  display:none!important;
}

/*
 Dashboard begins well AFTER text column.
 No overlap with headline, description or feature list.
*/
body.locked .crm-preview{
  position:absolute!important;
  z-index:5!important;
  left:46%!important;
  right:auto!important;
  top:175px!important;
  width:50%!important;
  max-width:390px!important;
  height:300px!important;
  transform:rotate(-1deg)!important;
}

/* Phone stays inside artwork side */
body.locked .phone-preview{
  position:absolute!important;
  z-index:8!important;
  left:auto!important;
  right:8px!important;
  top:365px!important;
  width:145px!important;
  height:300px!important;
}

/* On narrower desktop, artwork becomes smaller instead of invading text */
@media (min-width:851px) and (max-width:1250px){
  body.locked .hero-copy{
    width:44%!important;
    max-width:300px!important;
  }

  body.locked .crm-preview{
    left:48%!important;
    width:48%!important;
    max-width:340px!important;
  }

  body.locked .phone-preview{
    width:130px!important;
    height:280px!important;
  }
}


/* ===== GOOGLE BUTTON BRANDING ===== */
body.locked #lgoogle{
  color:#3c4043!important;
  font-weight:600!important;
  background:#fff!important;
  border-color:#dadce0!important;
}

/* Existing Ⓖ ko hide karke Google multicolor G draw */
body.locked #lgoogle{
  font-size:0!important;
}

body.locked #lgoogle:before{
  content:"G"!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-right:10px!important;
  font-family:Arial,sans-serif!important;
  font-size:18px!important;
  font-weight:700!important;
  color:#4285F4!important;
}

body.locked #lgoogle:after{
  content:"Continue with Google"!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#3c4043!important;
}

body.locked #lgoogle:hover{
  background:#f8fafd!important;
  border-color:#c8d0d9!important;
}


/* ===== REAL MULTICOLOR GOOGLE G ===== */
body.locked #lgoogle:before{
  content:""!important;
  width:18px!important;
  height:18px!important;
  margin-right:10px!important;
  flex:0 0 18px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20c11.6 0 19.2-8.2 19.2-19.7 0-1.3-.1-2.7-.3-4.3z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4c-7.7 0-14.4 4.4-17.7 10.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 10-2 13.6-5.2l-6.3-5.3C29.2 35.1 26.7 36 24 36c-5.2 0-9.7-3.3-11.3-8l-6.5 5C9.5 39.5 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20H24v8h11.3c-.8 2.3-2.2 4.2-4 5.5l6.3 5.3c3.7-3.4 5.9-8.5 5.9-14.5 0-1.3-.1-2.7-.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat!important;
}


/* ===== HERO ARTWORK POSITION — NO TEXT OVERLAP ===== */

/* Keep marketing text completely clear */
body.locked .hero-copy{
  position:relative!important;
  z-index:30!important;
}

/* Move dashboard away from headline */
body.locked .crm-preview{
  left:auto!important;
  right:-45px!important;
  top:225px!important;
  width:360px!important;
  height:300px!important;
  z-index:5!important;
  transform:rotate(-1deg)!important;
}

/* Move phone together with dashboard */
body.locked .phone-preview{
  left:auto!important;
  right:-12px!important;
  top:400px!important;
  width:145px!important;
  height:300px!important;
  z-index:8!important;
}

/* Keep channel icons aligned with artwork */
body.locked .channel-bar{
  right:145px!important;
  bottom:25px!important;
}


/* ===== HERO ARTWORK FINAL SAFE POSITION ===== */

/* Dashboard: fully inside green panel */
body.locked .crm-preview{
  left:auto!important;
  right:18px!important;
  top:235px!important;
  width:315px!important;
  height:280px!important;
  z-index:5!important;
  transform:rotate(-1deg)!important;
}

/* Phone: fully inside panel */
body.locked .phone-preview{
  left:auto!important;
  right:12px!important;
  top:405px!important;
  width:135px!important;
  height:285px!important;
  z-index:8!important;
}

/* Text gets guaranteed clear space */
body.locked .hero-copy{
  width:40%!important;
  max-width:300px!important;
  position:relative!important;
  z-index:30!important;
}

/* Artwork stays clipped only at actual green-panel boundary */
body.locked .login-hero{
  overflow:hidden!important;
}

/* Channel icons remain inside */
body.locked .channel-bar{
  right:155px!important;
  bottom:28px!important;
}


/* ===== CHANNEL ICONS SIZE ONLY ===== */
body.locked .channel-bar{
  gap:12px!important;
}

body.locked .channel-bar span{
  width:42px!important;
  height:42px!important;
  font-size:17px!important;
  flex:0 0 42px!important;
}


/* ===== CHANNEL ICONS — PROPER BRAND STYLE ===== */

/* remove existing text/symbol appearance */
body.locked .channel-bar span{
  position:relative!important;
  font-size:0!important;
  background:#fff!important;
}

/* WhatsApp */
body.locked .channel-bar span::before,
body.locked .channel-bar span::after{
  content:none!important;
  display:none!important;
}

/* Outer white circles */
body.locked .channel-bar span{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:50%!important;
  background:#fff!important;
  font-size:0!important;
  overflow:hidden!important;
}

/* Actual SVG logos */
body.locked .channel-bar span svg{
  display:block!important;
  width:29px!important;
  height:29px!important;
  flex:none!important;
}

/* Slightly larger WhatsApp/Facebook for optical balance */
body.locked .channel-bar .channel-whatsapp svg,
body.locked .channel-bar .channel-facebook svg{
  width:30px!important;
  height:30px!important;
}

/* Website */
body.locked .channel-bar .channel-web svg{
  width:29px!important;
  height:29px!important;
}

/* Add */
body.locked .channel-bar .channel-add svg{
  width:30px!important;
  height:30px!important;
}


/* ===== REMOVE DUPLICATE CHANNEL ICON LAYERS ===== */
body.locked .channel-bar > span::before,
body.locked .channel-bar > span::after{
  content:"" !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}

body.locked .channel-bar > span{
  position:relative !important;
  text-indent:0 !important;
}

body.locked .channel-bar > span > svg{
  position:relative !important;
  z-index:10 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:29px !important;
  height:29px !important;
}


/* ===== SOCIAL LINKS ON THE SIGN-IN HERO (brand icons, each opens our profile) ===== */
body.locked .channel-bar{gap:10px!important}
body.locked .channel-bar .channel-link{display:flex;border-radius:50%;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
body.locked .channel-bar .channel-link:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
body.locked .channel-bar .channel-link:focus-visible{outline:2px solid #96C93E;outline-offset:3px}
body.locked .channel-bar span{width:40px!important;height:40px!important;flex:0 0 40px!important}
body.locked .channel-bar span svg{width:22px!important;height:22px!important}
body.locked .channel-bar .channel-web svg{width:28px!important;height:28px!important}

/* ===== BRAND (2026 guideline): deep green sidebar, WhatSell CRM wordmark ===== */
.side .brand { color: #fff; }
.side .brand em { color: var(--wk-lime); }
.nav a[aria-current="page"] { box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 3px 0 0 var(--wk-lime); }
[dir="rtl"] .nav a[aria-current="page"] { box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset -3px 0 0 var(--wk-lime); }
.side .brand img { background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* Account card: long names/emails end with an ellipsis instead of being cut by the card edge */
.user-card { overflow: hidden; }
.user-card .who { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Official Whatsell.ai wordmark on the sign-in page (white text on the green hero, dark text on the card), plus the public-page links. */
body.locked .target-brand { flex-direction: column; align-items: flex-start; gap: 7px; text-decoration: none; align-self: flex-start; }
body.locked .target-brand img.wordmark { width: auto !important; height: 42px !important; object-fit: contain; }
body.locked .target-brand small { margin-top: 0; padding-inline-start: 2px; }
body.locked .card-brand { flex-direction: column; gap: 8px; }
body.locked .login form .card-brand img.wordmark { width: auto !important; height: 48px !important; max-width: 100%; margin: 0 !important; object-fit: contain; }
body.locked .card-brand small { margin-top: 0; }
body.locked .login-forms { flex-direction: column; gap: 18px; }
.login .site-links { margin-bottom: auto; align-self: flex-end; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid var(--wk-border); box-shadow: 0 1px 2px rgba(31, 60, 38, .05), 0 8px 24px rgba(31, 60, 38, .08); backdrop-filter: saturate(1.4) blur(8px); }
.login .site-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--wk-text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background var(--wk-t), color var(--wk-t), box-shadow var(--wk-t); }
.login .site-links svg, .login .legal-links svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.login .site-links a:hover, .login .site-links a:focus-visible { background: var(--wk-green); color: #fff; box-shadow: 0 6px 14px rgba(42, 146, 69, .28); }
.login .site-links a:hover svg, .login .site-links a:focus-visible svg { opacity: 1; }
.login .site-legal { margin-top: auto; width: 100%; max-width: 560px; display: grid; justify-items: center; gap: 8px; padding-top: 6px; }
.login .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.login .legal-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; color: var(--wk-text-2); font-size: 12.5px; text-decoration: none; transition: background var(--wk-t), color var(--wk-t), border-color var(--wk-t); }
.login .legal-links svg { width: 14px; height: 14px; color: var(--wk-green); }
.login .legal-links a:hover, .login .legal-links a:focus-visible { background: var(--wk-surface); border-color: var(--wk-border-strong); color: var(--wk-green-700); }
.login .legal-copy { margin: 0; font-size: 12px; color: var(--wk-text-3); }
.login .legal-copy a { color: var(--wk-text-2); text-decoration: none; font-weight: 500; }
.login .legal-copy a:hover { color: var(--wk-green-700); text-decoration: underline; }
@media (max-width: 899px) {
  .login .site-links { align-self: center; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .login .site-links::-webkit-scrollbar { display: none; }
  .login .site-links a { padding: 7px 11px; white-space: nowrap; font-size: 13px; }
}
@media (max-width: 420px) { .login .site-links svg { display: none; } .login .site-links a { padding: 7px 9px; } .login .legal-links { gap: 2px; } .login .legal-links a { padding: 6px 7px; gap: 5px; } }
/* The social icon bar sits at the bottom of the hero: keep the feature list clear of it. */
body.locked .login-hero { padding-bottom: 84px !important; }
@media (max-width: 600px) {
  body.locked .target-brand img.wordmark { height: 30px !important; }
  body.locked .ai-badge { display: none !important; }
}

/* Sign-in hero social icons: one brand colour (Lime outline, solid on hover), same style as the public-page footer.
   Selectors carry an extra .channel-link / html so they outrank the many earlier channel-bar rules. */
html body.locked .channel-bar { gap: 8px !important; }
html body.locked .channel-bar .channel-link { display: inline-grid !important; place-items: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; color: #96c93e !important; background: rgba(150, 201, 62, .12) !important; border: 1px solid rgba(150, 201, 62, .45) !important; box-shadow: none !important; transition: background .15s, color .15s, transform .15s !important; }
html body.locked .channel-bar .channel-link:hover, html body.locked .channel-bar .channel-link:focus-visible { background: #96c93e !important; color: #133f22 !important; transform: translateY(-2px) !important; }
html body.locked .channel-bar .channel-link > span { width: auto !important; height: auto !important; flex: none !important; background: none !important; border: 0 !important; box-shadow: none !important; display: grid !important; place-items: center !important; color: inherit !important; }
html body.locked .channel-bar .channel-link > span > svg { width: 15px !important; height: 15px !important; color: inherit !important; }
html body.locked .channel-bar .channel-link svg [fill]:not([fill="none"]) { fill: currentColor !important; }
html body.locked .channel-bar .channel-link svg [stroke] { stroke: currentColor !important; }
html body.locked .channel-bar .channel-link .channel-web svg > circle:first-child { fill: none !important; stroke: currentColor !important; stroke-width: 1.8; }
html body.locked .channel-bar .channel-link .channel-web svg > circle:nth-child(2) { display: none !important; }

/* Sign-in: "Other portals" — Group dashboard, Partners and Marketing each open directly (own sign-in inside) */
html body.locked .portal-links { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0ee; display: grid; gap: 8px; justify-items: center; }
html body.locked .portal-links[hidden] { display: none; }
html body.locked .portal-links-label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #8a958d; }
html body.locked .portal-links-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
html body.locked .portal-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px; border: 1px solid #d6e9da; border-radius: 10px; background: #f6fbf6; color: #158c47; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
html body.locked .portal-link:hover, html body.locked .portal-link:focus-visible { background: #2a9245; border-color: #2a9245; color: #fff; }
html body.locked .portal-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 420px) { html body.locked .portal-links-row { grid-template-columns: 1fr; } }
html body.locked #lalt { justify-content: center !important; }