:root{ --slpa-ink:#0B1220; --slpa-body:#5B6673; --slpa-muted:#8A94A2; --slpa-line:#E4E9EE;
 --slpa-soft:#F6F8FA; --slpa-accent:#0B7FD4; --slpa-accent-dark:#0A6AB0; --slpa-tint:#EAF4FD; --slpa-r:18px; --slpa-r-sm:10px; }

/* ---- classes injected into the free trial form (kept from v1) ---- */
.slpa-formnote{ font-size:13.5px; line-height:1.55; color:var(--slpa-body); background:var(--slpa-tint);
 border:1px solid #CBE4F8; border-radius:var(--slpa-r-sm); padding:12px 14px; margin:0 0 18px; }
.slpa-formnote strong{ color:var(--slpa-ink); }
.slpa-passfield .slpa-req{ color:var(--slpa-accent); }
.slpa-hint{ font-size:12px; color:var(--slpa-muted); margin:7px 0 0; line-height:1.5; }
.slpa-hint a,.slpa-formnote a{ color:var(--slpa-accent); font-weight:600; }

/* ========================================================================
   PANEL SHELL
   The panel is a page inside the theme, so it breaks out to the full
   viewport width and paints its own background rather than inheriting the
   marketing page's container.
   ===================================================================== */
.slpx{
  --sx-ink:#0B1220; --sx-body:#5B6673; --sx-muted:#8A94A2;
  --sx-line:#E7ECF2; --sx-soft:#F7F9FC; --sx-white:#fff;
  --sx-accent:#0B7FD4; --sx-accent-dark:#0A6AB0; --sx-tint:#EAF4FD;
  --sx-violet:#6C5CE7; --sx-violet-soft:#F1EFFE;
  --sx-green:#12855A; --sx-green-soft:#E7F7EE;
  --sx-amber:#B76E00; --sx-amber-soft:#FFF4E5;
  --sx-red:#B32424; --sx-red-soft:#FDECEC;
  --sx-side:264px; --sx-r:16px; --sx-r-sm:10px;
  --sx-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  position:relative; width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:var(--sx-soft); color:var(--sx-ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.6;
  display:grid; grid-template-columns:var(--sx-side) minmax(0,1fr);
  min-height:78vh; overflow-x:hidden; text-align:left;
}
/* Standalone: the panel is the whole document now, so the full-bleed trick it
   needed to escape the theme's centred container would only cause sideways
   scroll. The page owns its own reset instead of inheriting the theme's. */
body.slpx-standalone{ margin:0; padding:0; background:var(--sx-soft,#F7F9FC);
  -webkit-font-smoothing:antialiased; }
body.slpx-standalone .slpx,body.slpx-standalone .slpx-auth{
  width:100%; max-width:100%; margin-left:0; margin-right:0; }
body.slpx-standalone img{ max-width:100%; height:auto; }
body.slpx-standalone p,body.slpx-standalone h1,body.slpx-standalone h2,
body.slpx-standalone h3,body.slpx-standalone ul,body.slpx-standalone figure{ margin:0; }

.slpx *,.slpx *::before,.slpx *::after{ box-sizing:border-box; }
.slpx button{ font-family:inherit; }
/* The theme underlines links inside page content and paints button text
   white. Neither is right for panel chrome, and both were leaking in: nav
   links, service cards and the drawer CTA all rendered underlined, and the
   burger's icon was white on a white button. */
.slpx a,.slpx a:hover,.slpx a:focus,.slpx a:visited,
.slpx-auth a,.slpx-auth a:hover,.slpx-auth a:focus{ text-decoration:none !important; }
.slpx button svg,.slpx a svg{ color:inherit; flex:none; }
.slpx-burger,.slpx-x,.slpx-chat-back,.slpx-drawer-close{ padding:0 !important; }
/* Themes commonly set svg{fill:currentColor}, which fights these stroke-drawn
   icons. Pin both so an icon can never render as a filled block or vanish. */
.slpx svg,.slpx-auth svg{ fill:none !important; stroke:currentColor; }

/* The theme colours and transitions links on hover, and its colour was
   bleeding into these surfaces on the way in and on the way back out - text
   settling darker or greyer than it should, and reading as unclear. Every
   interactive surface pins its own colour in every state, so nothing is left
   mid-transition between two stylesheets. */
.slpx-navitem,.slpx-navitem:link,.slpx-navitem:visited,
.slpx-navitem:hover,.slpx-navitem:focus,.slpx-navitem:active{ color:var(--sx-body) !important; }
.slpx-navitem:hover{ color:var(--sx-ink) !important; }
.slpx-navitem.is-on,.slpx-navitem.is-on:hover{ color:var(--sx-accent-dark) !important; }

.slpx-chat-item,.slpx-chat-item:hover,.slpx-chat-item:focus{ color:var(--sx-ink) !important; }
.slpx-waitrow,.slpx-waitrow:hover,.slpx-waitrow:focus{ color:var(--sx-ink) !important; }
.slpx-faq summary,.slpx-faq summary:hover{ color:var(--sx-ink) !important; }
.slpx-rostermain a,.slpx-rostermain a:hover{ color:var(--sx-accent) !important; }
/* Order matters here, and getting it wrong made every outline button
   unreadable the moment it was touched: a ghost button also carries
   .slpx-btn, and .slpx-btn:hover outweighs a plain .slpx-btn--ghost, so the
   white text of a solid button was winning on white. Both lists cover the
   same states at the same weight, with the ghost rules last. */
.slpx-btn,.slpx-btn:link,.slpx-btn:visited,
.slpx-btn:hover,.slpx-btn:focus,.slpx-btn:active{ color:#fff !important; }
.slpx-btn--ghost,.slpx-btn--ghost:link,.slpx-btn--ghost:visited,
.slpx-btn--ghost:hover,.slpx-btn--ghost:focus,.slpx-btn--ghost:active{ color:var(--sx-ink) !important; }
.slpx-btn--ghost svg,.slpx-btn--ghost:hover svg{ color:var(--sx-body); }

/* One focus ring for the whole panel. The browser default was drawing a heavy
   black box that read as part of the button. */
.slpx button:focus-visible,.slpx a:focus-visible,.slpx input:focus-visible,
.slpx select:focus-visible,.slpx textarea:focus-visible,.slpx summary:focus-visible,
.slpx-auth button:focus-visible,.slpx-auth a:focus-visible,.slpx-auth input:focus-visible{
  outline:2px solid var(--sx-accent); outline-offset:2px; border-radius:10px;
}
.slpx button:focus:not(:focus-visible),.slpx a:focus:not(:focus-visible),
.slpx summary:focus:not(:focus-visible){ outline:none; }

/* Hover feedback comes from the surface, never from re-colouring the text. */
.slpx-chat-item,.slpx-waitrow,.slpx-navitem,.slpx-faq summary{
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}
/* The drawer scrim only exists below 1024px. Without this it stays in flow as
   a grid item on desktop, taking column one and pushing the sidebar and main
   column out of place. */
.slpx-scrim{ display:none; }
.slpx h1,.slpx h2,.slpx h3,.slpx h4{ font-family:inherit; color:var(--sx-ink); margin:0; letter-spacing:-.02em; line-height:1.25; }

/* ---------------------------------------------------------- sidebar */
.slpx-side{
  background:var(--sx-white); border-right:1px solid var(--sx-line);
  padding:22px 16px 20px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:30;
}
.slpx-drawer-close{
  display:none; position:absolute; top:12px; right:12px; width:38px; height:38px;
  border-radius:10px; border:1px solid var(--sx-line); background:#fff; color:var(--sx-ink);
  font-size:22px; line-height:1; cursor:pointer; align-items:center; justify-content:center; z-index:2;
}
.slpx-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
 padding:2px 8px 0; text-decoration:none; }
.slpx-brand img{ max-height:38px; max-width:190px; width:auto; height:auto; display:block; }
.slpx-brand b{ font-size:17px; letter-spacing:-.03em; color:var(--sx-ink); }
.slpx-brand span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
 text-transform:uppercase; color:var(--sx-muted); }

.slpx-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; border-radius:12px; text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg,#1591E6 0%,#0B7FD4 55%,#0A6AB0 100%);
  color:#fff !important; font-weight:700; font-size:14.5px; border:0;
  box-shadow:0 6px 16px rgba(11,127,212,.28); transition:transform .16s ease, box-shadow .16s ease;
}
.slpx-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(11,127,212,.34); color:#fff !important; }
.slpx-cta svg{ width:17px; height:17px; }

.slpx-nav{ display:flex; flex-direction:column; gap:3px; }
.slpx-navlabel{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
 color:var(--sx-muted); padding:14px 12px 6px; }
.slpx-navitem{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
  font-size:14.5px; font-weight:600; color:var(--sx-body); text-decoration:none;
  background:none; border:0; width:100%; cursor:pointer; text-align:left;
  transition:background .15s ease, color .15s ease;
}
.slpx-navitem svg{ width:19px; height:19px; flex:none; color:var(--sx-muted); transition:color .15s ease; }
.slpx-navitem:hover{ background:var(--sx-soft); color:var(--sx-ink); }
.slpx-navitem.is-on{ background:var(--sx-tint); color:var(--sx-accent-dark); }
.slpx-navitem.is-on svg{ color:var(--sx-accent); }
.slpx-navitem .slpx-count{
  margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:999px;
  background:var(--sx-soft); color:var(--sx-body); font-size:11.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.slpx-navitem.is-on .slpx-count{ background:#fff; color:var(--sx-accent-dark); }
.slpx-navitem .slpx-count--live{ background:var(--sx-accent); color:#fff; }

.slpx-side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.slpx-promo{
  background:linear-gradient(160deg,#EAF4FD 0%,#F1EFFE 100%);
  border:1px solid #DCE9F7; border-radius:14px; padding:15px;
}
.slpx-promo b{ display:block; font-size:14px; letter-spacing:-.01em; }
.slpx-promo p{ margin:5px 0 10px; font-size:12.5px; line-height:1.5; color:var(--sx-body); }
.slpx-promo a{ font-size:12.5px; font-weight:700; color:var(--sx-accent); text-decoration:none; }
.slpx-promo a:hover{ text-decoration:underline; }
/* This was a link and is now a button, which the browser was drawing as a
   grey box with a border in the middle of the card. */
.slpx-promo-cta{
  display:inline-flex; align-items:center; gap:5px; margin:0; padding:7px 13px;
  background:#fff; border:1px solid #CFE2F5; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--sx-accent-dark) !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.slpx-promo-cta:hover{ background:var(--sx-accent); border-color:var(--sx-accent);
  color:#fff !important; transform:translateY(-1px); }
.slpx-promo--out{ background:linear-gradient(160deg,#FFFAEB 0%,#FEF6E7 100%); border-color:#FEDF89; }
.slpx-promo--out .slpx-promo-cta{ border-color:#FEDF89; color:#B54708 !important; }
.slpx-promo--out .slpx-promo-cta:hover{ background:#B54708; border-color:#B54708; color:#fff !important; }

/* ------------------------------------------------------------- main */
.slpx-main{ min-width:0; display:flex; flex-direction:column; }
.slpx-top{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--sx-line);
  padding:14px 28px; display:flex; align-items:center; gap:14px;
}
.slpx-top h1{ font-size:1.35rem; }
.slpx-top-sub{ font-size:12.5px; color:var(--sx-muted); margin-top:2px; }
.slpx-burger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--sx-line);
  background:#fff; cursor:pointer; align-items:center; justify-content:center; color:var(--sx-ink); flex:none;
}
.slpx-burger svg{ width:22px; height:22px; color:var(--sx-ink); }
.slpx-topright{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.slpx-chip{
  display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 6px; border-radius:999px;
  border:1px solid var(--sx-line); background:#fff; text-decoration:none; color:var(--sx-ink);
  font-size:13.5px; font-weight:600; max-width:230px;
}
.slpx-chip img{ width:30px; height:30px; border-radius:999px; object-fit:cover; flex:none; }
.slpx-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slpx-chip:hover{ border-color:var(--sx-accent); color:var(--sx-ink); }

.slpx-body{ padding:26px 28px 60px; min-width:0; }
.slpx-card,.slpx-order,.slpx-chat{ max-width:100%; }
.slpx-avatarform > div{ min-width:0; flex:1; }
.slpx-view{ display:none; }
.slpx-view.is-on{ display:block; animation:slpx-fade .22s ease; }
@keyframes slpx-fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* --------------------------------------------------------- elements */
.slpx-card{ background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-r);
 box-shadow:var(--sx-shadow); padding:22px; }
.slpx-card + .slpx-card{ margin-top:16px; }
.slpx-card h2{ font-size:1.12rem; }
.slpx-card h3{ font-size:1rem; }

.slpx-sectionhead{ display:flex; align-items:center; justify-content:space-between; gap:16px;
 flex-wrap:wrap; margin:30px 0 14px; }
.slpx-sectionhead:first-child{ margin-top:0; }
.slpx-sectionhead h2{ font-size:1.3rem; }

.slpx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px;
  border-radius:11px; background:var(--sx-accent); color:#fff !important; text-decoration:none;
  font-weight:650; font-size:14px; border:1.5px solid var(--sx-accent); cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.slpx-btn:hover{ background:var(--sx-accent-dark); border-color:var(--sx-accent-dark); transform:translateY(-1px); }
.slpx-btn svg{ width:16px; height:16px; }
.slpx-btn--ghost{ background:#fff; color:var(--sx-ink) !important; border-color:var(--sx-line); }
.slpx-btn--ghost:hover{ background:var(--sx-soft); border-color:var(--sx-ink); }
.slpx-btn--sm{ padding:8px 14px; font-size:13px; border-radius:9px; }
.slpx-btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

.slpx-pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
 font-size:11.5px; font-weight:700; letter-spacing:.02em; background:var(--sx-soft); color:var(--sx-body); white-space:nowrap; }
.slpx-pill::before{ content:""; width:6px; height:6px; border-radius:999px; background:currentColor; }
.slpx-pill--new{ background:var(--sx-tint); color:var(--sx-accent-dark); }
.slpx-pill--in_progress,.slpx-pill--editing{ background:var(--sx-amber-soft); color:var(--sx-amber); }
.slpx-pill--delivered,.slpx-pill--completed{ background:var(--sx-green-soft); color:var(--sx-green); }
.slpx-pill--cancelled{ background:var(--sx-red-soft); color:var(--sx-red); }

.slpx-empty{ color:var(--sx-muted); font-size:14px; padding:16px; background:var(--sx-soft);
 border:1px dashed var(--sx-line); border-radius:var(--sx-r-sm); }
.slpx-meta{ font-size:13px; color:var(--sx-muted); }
.slpx-meta b{ color:var(--sx-body); font-weight:600; }
.slpx-sub{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
 color:var(--sx-muted); margin:0 0 10px; }

/* ------------------------------------------------------ trial banner */
.slpx-banner{
  display:flex; align-items:center; gap:20px; padding:20px 22px; margin-bottom:24px;
  background:linear-gradient(120deg,#EEF4FF 0%,#F4F1FE 55%,#EAF7F1 100%);
  border:1px solid #E1E8F5; border-radius:var(--sx-r); position:relative; overflow:hidden;
}
.slpx-banner-ico{ width:58px; height:58px; border-radius:14px; background:#fff; flex:none;
 display:flex; align-items:center; justify-content:center; box-shadow:var(--sx-shadow); }
.slpx-banner-ico svg{ width:28px; height:28px; color:var(--sx-violet); }
.slpx-banner-body{ flex:1; min-width:0; }
.slpx-banner .slpx-kicker{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
 color:var(--sx-violet); margin-bottom:4px; }
.slpx-banner h3{ font-size:1.12rem; margin-bottom:4px; }
.slpx-banner p{ margin:0 0 12px; font-size:14px; color:var(--sx-body); }
.slpx-x{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px;
 border:0; background:transparent; color:var(--sx-muted); cursor:pointer; font-size:18px; line-height:1; }
.slpx-x:hover{ background:#fff; color:var(--sx-ink); }

/* -------------------------------------------------------- stat tiles */
.slpx-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.slpx-stat{ display:flex; align-items:center; gap:15px; padding:20px; border-radius:var(--sx-r);
 border:1px solid transparent; }
.slpx-stat-ico{ width:56px; height:56px; border-radius:14px; background:rgba(255,255,255,.75);
 display:flex; align-items:center; justify-content:center; flex:none; }
.slpx-stat-ico svg{ width:26px; height:26px; }
.slpx-stat b{ display:block; font-size:26px; line-height:1.15; letter-spacing:-.03em; }
.slpx-stat span{ font-size:13px; color:var(--sx-body); font-weight:600; }
.slpx-stat--violet{ background:var(--sx-violet-soft); } .slpx-stat--violet svg{ color:var(--sx-violet); }
.slpx-stat--blue{ background:var(--sx-tint); } .slpx-stat--blue svg{ color:var(--sx-accent); }
.slpx-stat--green{ background:var(--sx-green-soft); } .slpx-stat--green svg{ color:var(--sx-green); }
.slpx-stat--amber{ background:var(--sx-amber-soft); } .slpx-stat--amber svg{ color:var(--sx-amber); }
.slpx-stat-cta{ margin-left:auto; }

/* ------------------------------------------------------- order cards */
.slpx-orders{ display:flex; flex-direction:column; gap:14px; }
.slpx-order{ background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-r);
 box-shadow:var(--sx-shadow); overflow:hidden; }
.slpx-order-head{ display:flex; align-items:center; gap:16px; padding:18px 20px; flex-wrap:wrap; }
.slpx-order-ico{ width:44px; height:44px; border-radius:12px; background:var(--sx-tint); flex:none;
 display:flex; align-items:center; justify-content:center; color:var(--sx-accent); }
.slpx-order-ico svg{ width:21px; height:21px; }
.slpx-order-main{ flex:1; min-width:180px; }
.slpx-order-main h3{ font-size:1rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.slpx-order-ref{ font-size:12px; font-weight:700; color:var(--sx-muted); }
.slpx-order-facts{ font-size:12.5px; color:var(--sx-muted); margin-top:4px; }
.slpx-order-facts b{ color:var(--sx-body); font-weight:600; }
.slpx-order-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.slpx-order-detail{ display:none; padding:0 20px 20px; border-top:1px solid var(--sx-line); margin-top:2px; }
.slpx-order-detail.is-on{ display:block; padding-top:18px; }
.slpx-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }

.slpx-kv{ width:100%; border-collapse:collapse; table-layout:fixed; }
.slpx-kv td{ word-break:break-word; overflow-wrap:anywhere; }
.slpx-kv th,.slpx-kv td{ text-align:left; padding:9px 0; border-bottom:1px solid var(--sx-line);
 font-size:13.5px; vertical-align:top; }
.slpx-kv th{ width:40%; color:var(--sx-muted); font-weight:600; }
.slpx-kv tr:last-child th,.slpx-kv tr:last-child td{ border-bottom:0; }
.slpx-kv a{ color:var(--sx-accent); font-weight:600; }
.slpx-quote{ background:var(--sx-soft); border-left:3px solid var(--sx-accent); border-radius:var(--sx-r-sm);
 padding:13px 15px; font-size:14px; line-height:1.6; color:var(--sx-body); }

.slpx-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:11px; }
.slpx-thumb{ display:block; text-decoration:none; color:var(--sx-body); }
.slpx-thumb img,.slpx-ext{ width:100%; aspect-ratio:1; border-radius:var(--sx-r-sm); object-fit:cover;
 border:1px solid var(--sx-line); background:var(--sx-soft); display:flex; align-items:center;
 justify-content:center; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--sx-muted); }
.slpx-thumb:hover img,.slpx-thumb:hover .slpx-ext{ border-color:var(--sx-accent); }
.slpx-thumb-name{ display:-webkit-box; margin-top:5px; font-size:11px; line-height:1.35; word-break:break-word;
 overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.slpx-files{ display:grid; gap:8px; }
.slpx-file{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px;
 background:var(--sx-soft); border:1px solid var(--sx-line); border-radius:var(--sx-r-sm); font-size:13.5px; }
.slpx-file a{ color:var(--sx-accent); font-weight:700; text-decoration:none; white-space:nowrap; }

/* ------------------------------------------------------------- chat */
.slpx-chat{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:0; background:#fff;
 border:1px solid var(--sx-line); border-radius:var(--sx-r); box-shadow:var(--sx-shadow);
 overflow:hidden; height:min(72vh,720px); min-height:460px; }
.slpx-chat-list{ border-right:1px solid var(--sx-line); display:flex; flex-direction:column; min-height:0; }
.slpx-chat-listhead{ padding:16px 18px 12px; border-bottom:1px solid var(--sx-line); }
.slpx-chat-listhead b{ font-size:14.5px; }
.slpx-chat-listhead p{ margin:3px 0 0; font-size:12px; color:var(--sx-muted); }
.slpx-chat-tap{ display:none; }
@media (max-width:860px){ .slpx-chat-tap{ display:block; color:var(--sx-accent) !important; font-weight:600; } }
.slpx-chat-items{ overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:4px; }
.slpx-chat-item{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:11px;
 border:0; background:none; width:100%; text-align:left; cursor:pointer; color:var(--sx-ink); }
.slpx-chat-item:hover{ background:var(--sx-soft); }
.slpx-chat-item.is-on{ background:var(--sx-tint); }
.slpx-chat-item.is-on .slpx-chat-item-b b{ color:var(--sx-accent-dark); }
.slpx-chat-av{ width:36px; height:36px; border-radius:999px; flex:none; object-fit:cover;
 background:var(--sx-tint); color:var(--sx-accent-dark); display:flex; align-items:center;
 justify-content:center; font-size:13px; font-weight:800; }
/* The studio's own row carries the logo, which needs fitting rather than
   cropping and a white ground to sit on. */
.slpx-chat-av--logo{ object-fit:contain; background:#fff; border:1px solid var(--sx-line); padding:4px; }

/* ------------------------------------------------------- send / trial */
.slpx-trialbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.slpx-trialbar p{ margin:0; }
.slpx-trialpill{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
 background:var(--sx-tint); color:var(--sx-accent-dark); font-weight:800; font-size:13.5px;
 border:1px solid rgba(11,127,212,.18); }
.slpx-trialout h2{ color:var(--sx-ink); }
.slpx-field{ display:block; margin:0 0 18px; }
.slpx-field > span{ display:block; font-size:13.5px; font-weight:700; color:var(--sx-ink); margin-bottom:7px; }
.slpx-field > span i{ font-style:normal; font-weight:500; color:var(--sx-muted); }
.slpx-field input[type=url],.slpx-field input[type=text],.slpx-field select,.slpx-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--sx-line); border-radius:var(--sx-r-sm);
  font-family:inherit; font-size:15px; color:var(--sx-ink); background:#fff; }
.slpx-field textarea{ resize:vertical; min-height:110px; }
.slpx-field select:focus,.slpx-field textarea:focus,.slpx-field input:focus{
  outline:none; border-color:var(--sx-accent); box-shadow:0 0 0 3px rgba(11,127,212,.13); }
.slpx-drop{ border:1.5px dashed var(--sx-line); border-radius:var(--sx-r); padding:22px; text-align:center;
 background:var(--sx-soft); transition:border-color .15s ease, background .15s ease; }
.slpx-drop.is-over{ border-color:var(--sx-accent); background:var(--sx-tint); }
.slpx-filelist{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
.slpx-filelist li{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--sx-line);
 border-radius:var(--sx-r-sm); padding:9px 12px; font-size:13.5px; }
.slpx-filelist li b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.slpx-filelist li span{ color:var(--sx-muted); font-size:12.5px; flex:none; }
.slpx-filelist li.is-over{ color:#B42318; border-color:#FDA29B; background:#FFFBFA; }
.slpx-send .slpx-btn[type=submit]{ margin-top:4px; }

/* ------------------------------------------------------- paid / help */
.slpx-paid p{ margin:0 0 13px; color:var(--sx-body); line-height:1.75; }
.slpx-paid-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.slpx-list{ margin:10px 0 0; padding-left:19px; color:var(--sx-body); line-height:1.95; font-size:14.5px; }
.slpx-list li{ margin:0 0 3px; }
.slpx-faq{ background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-r);
 box-shadow:var(--sx-shadow); margin-bottom:10px; overflow:hidden; }
.slpx-faq summary{ cursor:pointer; padding:17px 20px; font-weight:700; font-size:15px; color:var(--sx-ink);
 list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.slpx-faq summary::-webkit-details-marker{ display:none; }
.slpx-faq summary::after{ content:'+'; font-size:20px; font-weight:600; color:var(--sx-muted); flex:none; }
.slpx-faq[open] summary::after{ content:'\2013'; }
.slpx-faq summary:hover{ background:var(--sx-soft); }
.slpx-faq > div{ padding:0 20px 20px; border-top:1px solid var(--sx-line); }
.slpx-faq > div > p{ margin:14px 0 0; color:var(--sx-body); line-height:1.75; font-size:14.5px; }

/* ---------------------------------------------------------- bookmark */
.slpx-bm-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.slpx-bm-url{ flex:1; min-width:0; padding:12px 14px; border:1px solid var(--sx-line); border-radius:var(--sx-r-sm);
 background:var(--sx-soft); font-size:13.5px; color:var(--sx-ink); overflow-wrap:anywhere; }
.slpx-bm-how{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:20px; }
.slpx-bm-card{ border:1px solid var(--sx-line); border-radius:var(--sx-r); padding:16px 18px; background:var(--sx-soft); }
.slpx-bm-card.is-you{ border-color:var(--sx-accent); background:var(--sx-tint); }
.slpx-bm-card h3{ font-size:14.5px; margin:0 0 6px; }
.slpx-bm-card p{ margin:0; font-size:13.5px; color:var(--sx-body); line-height:1.7; }

/* ------------------------------------------------- studio: who is waiting */
.slpx-hint{ border-left:3px solid var(--sx-accent); background:var(--sx-tint); border-radius:0 var(--sx-r-sm) var(--sx-r-sm) 0;
 padding:14px 18px; margin:0 0 16px; }
.slpx-hint b{ display:block; font-size:14px; color:var(--sx-accent-dark); margin-bottom:3px; }
.slpx-hint p{ margin:0; font-size:13.5px; color:var(--sx-body); line-height:1.65; }

.slpx-waiting{ display:flex; flex-direction:column; gap:8px; }
.slpx-waitrow{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
 background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-r); padding:13px 16px;
 box-shadow:var(--sx-shadow); font-family:inherit; transition:border-color .15s ease, transform .15s ease; }
.slpx-waitrow:hover{ border-color:var(--sx-accent); transform:translateY(-1px); }
.slpx-waitav{ width:38px; height:38px; border-radius:999px; flex:none; display:flex; align-items:center;
 justify-content:center; background:var(--sx-tint); color:var(--sx-accent-dark); font-weight:800; font-size:13px; }
.slpx-waitmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.slpx-waitmain b{ font-size:14.5px; color:var(--sx-ink); }
.slpx-waitmain .slpx-meta{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------------------------------------------- studio: client roster */
.slpx-roster{ display:flex; flex-direction:column; gap:10px; }
.slpx-rosterrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
 border:1px solid var(--sx-line); border-radius:var(--sx-r); padding:14px 16px; background:#fff; }
.slpx-rostermain{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.slpx-rostermain b{ font-size:14.5px; color:var(--sx-ink); }
.slpx-rostermain a{ font-size:13.5px; color:var(--sx-accent); overflow-wrap:anywhere; }
.slpx-rosterstats{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.slpx-tag{ display:inline-flex; padding:5px 11px; border-radius:999px; background:var(--sx-soft);
 color:var(--sx-body); font-size:11.5px; font-weight:700; border:1px solid var(--sx-line); }
.slpx-tag--ok{ background:#ECFDF3; color:#027A48; border-color:#ABEFC6; }
.slpx-tag--out{ background:#FFFAEB; color:#B54708; border-color:#FEDF89; }
@media (max-width:640px){
  .slpx-rosterrow{ align-items:flex-start; }
  .slpx-rosterrow .slpx-btn{ width:100%; justify-content:center; }
}
.slpx-chat-item-b{ min-width:0; flex:1; }
.slpx-chat-item-b b{ display:block; font-size:13.5px; color:var(--sx-ink); overflow:hidden;
 text-overflow:ellipsis; white-space:nowrap; }
.slpx-chat-item-b span{ display:block; font-size:12px; color:var(--sx-muted); overflow:hidden;
 text-overflow:ellipsis; white-space:nowrap; }
.slpx-chat-pane{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.slpx-chat-head{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--sx-line); }
.slpx-chat-head b{ font-size:14.5px; display:block; }
.slpx-chat-head span{ font-size:12px; color:var(--sx-muted); }
.slpx-chat-back{ display:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--sx-line);
 background:#fff; color:var(--sx-ink); cursor:pointer; align-items:center; justify-content:center; flex:none; }
.slpx-chat-back svg{ width:17px; height:17px; }
.slpx-thread{ flex:1; overflow-y:auto; padding:20px; background:var(--sx-soft);
 display:flex; flex-direction:column; gap:11px; }
.slpx-msg{ max-width:78%; padding:11px 15px; border-radius:15px; font-size:14px; line-height:1.6;
 white-space:pre-wrap; word-break:break-word; }
.slpx-msg--client{ align-self:flex-end; background:var(--sx-accent); color:#fff; border-bottom-right-radius:4px; }
.slpx-msg--admin{ align-self:flex-start; background:#fff; border:1px solid var(--sx-line); border-bottom-left-radius:4px; }
.slpx-msg small{ display:block; margin-top:5px; font-size:10.5px; opacity:.75; }
.slpx-msg--mine{ align-self:flex-end; background:var(--sx-accent); color:#fff; border-bottom-right-radius:4px; }
.slpx-compose{ display:flex; gap:10px; align-items:flex-end; padding:14px 16px; border-top:1px solid var(--sx-line); background:#fff; }
.slpx-compose textarea{ flex:1; min-height:46px; max-height:140px; padding:12px 14px; font-size:15px;
 font-family:inherit; color:var(--sx-ink); border:1.5px solid var(--sx-line); border-radius:12px; resize:vertical; }
.slpx-compose textarea:focus{ outline:none; border-color:var(--sx-accent); box-shadow:0 0 0 4px var(--sx-tint); }
.slpx-chat-empty{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px;
 text-align:center; color:var(--sx-muted); font-size:14px; }

/* ------------------------------------------------------------ forms */
.slpx-form{ max-width:460px; }
.slpx-form label{ display:block; font-size:13px; font-weight:700; margin:0 0 6px; }
.slpx-form input,.slpx-form select,.slpx-form textarea{
  width:100%; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--sx-ink);
  background:#fff; border:1.5px solid var(--sx-line); border-radius:11px; margin-bottom:15px;
}
.slpx-form input:focus,.slpx-form select:focus,.slpx-form textarea:focus{
  outline:none; border-color:var(--sx-accent); box-shadow:0 0 0 4px var(--sx-tint); }
.slpx-note{ margin-top:12px; font-size:13.5px; padding:11px 14px; border-radius:var(--sx-r-sm); display:none; }
.slpx-note.ok{ display:block; background:var(--sx-green-soft); color:var(--sx-green); }
.slpx-note.err{ display:block; background:var(--sx-red-soft); color:var(--sx-red); }
.slpx-avatar{ width:96px; height:96px; border-radius:999px; object-fit:cover;
 border:3px solid #fff; box-shadow:var(--sx-shadow); background:var(--sx-soft); }
.slpx-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.slpx-filter{ padding:9px 15px; border-radius:999px; border:1.5px solid var(--sx-line); background:#fff;
 font-size:13px; font-weight:650; color:var(--sx-body); cursor:pointer; }
.slpx-filter.is-on{ background:var(--sx-accent); border-color:var(--sx-accent); color:#fff; }
.slpx-search{ flex:1; min-width:180px; max-width:320px; padding:9px 15px; border-radius:999px;
 border:1.5px solid var(--sx-line); font-family:inherit; font-size:13.5px; }
.slpx-search:focus{ outline:none; border-color:var(--sx-accent); box-shadow:0 0 0 4px var(--sx-tint); }

/* ---------------------------------------------------- services grid */

/* ================================ AUTH ================================ */
.slpx-auth{
  --sx-ink:#0B1220; --sx-body:#5B6673; --sx-muted:#8A94A2; --sx-line:#E7ECF2;
  --sx-soft:#F7F9FC; --sx-accent:#0B7FD4; --sx-accent-dark:#0A6AB0; --sx-tint:#EAF4FD;
  --sx-r:16px; --sx-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  position:relative; width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:var(--sx-soft); color:var(--sx-ink); overflow-x:hidden; text-align:left;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
}
.slpx-auth *,.slpx-auth *::before,.slpx-auth *::after{ box-sizing:border-box; }
.slpx-auth-form{ display:flex; align-items:center; justify-content:center; padding:56px 28px; }
.slpx-auth-inner{ width:100%; max-width:430px; }
.slpx-auth-inner h1{ font-size:clamp(1.6rem,2.6vw,2.05rem); letter-spacing:-.03em; margin:0 0 8px; line-height:1.2; }
.slpx-auth-inner .slpx-lead{ margin:0 0 26px; color:var(--sx-body); font-size:15px; }
.slpx-auth-card{ background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-r);
 box-shadow:var(--sx-shadow); padding:26px; }
.slpx-auth-card .slpx-form{ max-width:none; }
.slpx-auth-card .slpx-btn{ width:100%; padding:13px 18px; font-size:15px; }
.slpx-auth-alt{ margin:18px 0 0; font-size:14px; color:var(--sx-body); text-align:center; }
.slpx-auth-alt a{ color:var(--sx-accent); font-weight:700; text-decoration:none; }
.slpx-auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
 margin:-6px 0 16px; font-size:13px; }
.slpx-auth-row a{ color:var(--sx-accent); font-weight:600; text-decoration:none; }
.slpx-check{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--sx-body);
 line-height:1.5; margin:0 0 16px; }
.slpx-check input{ width:16px; height:16px; margin:2px 0 0; flex:none; }
.slpx-auth-back{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
 color:var(--sx-muted); text-decoration:none; margin-bottom:26px; }
.slpx-auth-back:hover{ color:var(--sx-accent); }
.slpx-auth-back svg{ width:15px; height:15px; }
.slpx-captcha{ margin:0 0 16px; }
.slpx-captcha .g-recaptcha{ display:inline-block; }
/* The widget is a fixed 304px iframe; scale it down rather than let it
   overflow the card on narrow phones. */
@media (max-width:360px){
  .slpx-captcha{ transform:scale(.88); transform-origin:0 0; height:68px; }
}

.slpx-auth-side{
  background:linear-gradient(150deg,#0B1220 0%,#10305A 48%,#0A6AB0 100%);
  color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.slpx-auth-side::after{ content:""; position:absolute; width:420px; height:420px; border-radius:999px;
 background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 68%);
 right:-140px; top:-120px; }
.slpx-auth-side-in{ position:relative; z-index:1; max-width:430px; }
/* Logo plate, linking home.

   The site logo is a colour mark whose "Retouching" half is set in dark navy,
   and this panel is a dark navy gradient - dropped straight on, that word
   disappears into the background. Inverting the asset would flatten the
   blue/purple/orange mark into a silhouette, so it sits on white instead. The
   same asset is already handled this way by .slpx-chat-av--logo, which puts it
   on a white field inside dark chat rows.

   38px tall against a 76px-tall source is exactly 2x, so it stays crisp on a
   retina screen without needing a second file. */
.slpx-auth-logo{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; padding:12px 16px; margin-bottom:26px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.slpx-auth-logo img{ display:block; width:auto; height:38px; }
.slpx-auth-logo:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.28); }
.slpx-auth-logo:focus-visible{ outline:3px solid #8FD0FF; outline-offset:3px; }
.slpx-auth-side .slpx-kicker{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
 color:#8FD0FF; margin-bottom:14px; }
.slpx-auth-side h2{ font-size:clamp(1.5rem,2.3vw,1.95rem); letter-spacing:-.03em; line-height:1.25;
 margin:0 0 14px; color:#fff; }
.slpx-auth-side > .slpx-auth-side-in > p{ color:#C7D6E6; font-size:15px; line-height:1.65; margin:0 0 26px; }
.slpx-auth-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.slpx-auth-points li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#E6EEF7; }
.slpx-auth-points svg{ width:20px; height:20px; flex:none; color:#5CC6A0; margin-top:1px; }
.slpx-auth-proof{ margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.15);
 font-size:13.5px; color:#AFC3D6; }
.slpx-auth-proof b{ color:#fff; }

/* ========================== RESPONSIVE ========================== */
@media (max-width:1024px){
  .slpx{ grid-template-columns:minmax(0,1fr); }
  /* Above the theme's own sticky header. Sitting below it clipped the top of
     the drawer and cut the primary CTA in half. */
  .slpx-side{
    position:fixed; top:0; left:0; bottom:0; width:min(86vw,320px); height:100dvh;
    transform:translateX(-102%); transition:transform .26s ease; box-shadow:0 0 40px rgba(16,24,40,.18);
    z-index:100001; padding-top:58px;
  }
  .slpx.is-open .slpx-side{ transform:none; }
  .slpx-scrim{ display:block; position:fixed; inset:0; background:rgba(11,18,32,.45); border:0; padding:0;
    opacity:0; pointer-events:none; transition:opacity .26s ease; z-index:100000; cursor:pointer; }
  .slpx.is-open .slpx-scrim{ opacity:1; pointer-events:auto; }
  .slpx-drawer-close{ display:inline-flex; }
  .slpx-burger{ display:inline-flex; }
  .slpx-top{ padding:12px 18px; }
  .slpx-body{ padding:20px 18px 56px; }
  .slpx-grid2{ grid-template-columns:1fr; gap:20px; }
  .slpx-auth{ grid-template-columns:minmax(0,1fr); }
  /* Form first on a phone. The brand panel led on mobile and pushed the
     actual sign in below the fold, so the page opened on marketing copy
     rather than on the thing the visitor came to do. */
  .slpx-auth-form{ order:0; padding:34px 22px 40px; }
  .slpx-auth-side{ order:1; padding:34px 26px 42px; }
  .slpx-auth-side::after{ display:none; }
}
@media (max-width:860px){
  .slpx-chat{ grid-template-columns:minmax(0,1fr); height:auto; min-height:0; }
  .slpx-chat-list{ border-right:0; border-bottom:1px solid var(--sx-line); }
  .slpx-chat-items{ max-height:44vh; }
  .slpx-chat-pane{ display:none; height:min(74vh,600px); }
  .slpx-chat.is-thread .slpx-chat-list{ display:none; }
  .slpx-chat.is-thread .slpx-chat-pane{ display:flex; }
  .slpx-chat-back{ display:inline-flex; }
  .slpx-msg{ max-width:88%; }
  /* Composer stays reachable with the keyboard up, and the Send button never
     shrinks below a tappable size. */
  .slpx-compose{ position:sticky; bottom:0; padding:12px; gap:8px; }
  .slpx-compose textarea{ font-size:16px; min-height:44px; }
  .slpx-compose .slpx-btn{ padding:12px 16px; flex:none; }
}
@media (max-width:640px){
  .slpx-top h1{ font-size:1.15rem; }
  .slpx-chip span{ display:none; }
  .slpx-chip{ padding:5px; }
  .slpx-banner{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px; }
  .slpx-stat{ padding:16px; }
  .slpx-stat-ico{ width:48px; height:48px; }
  .slpx-order-head{ padding:16px; }
  .slpx-order-detail{ padding-left:16px; padding-right:16px; }
  .slpx-order-actions{ width:100%; }
  .slpx-order-actions .slpx-btn{ flex:1; }
  .slpx-auth-side{ padding:32px 20px; }
  .slpx-auth-card{ padding:20px; }
}
/* The panel is chrome, not an article: keep the theme's page title and any
   inherited container padding from framing it. */
.slpx-page .entry-content,.slpx-page .site-content{ padding-left:0 !important; padding-right:0 !important; }