/* Skinpop CRM visual layer (2026-11-07). Loaded last; presentation only.
   SkinPop design system: skinpop-red leads, pop-red for filled actions and the header, white pages with
   rice-cream and soft pink tints, cherry-ink text, Unbounded headings, Montserrat body, Cairo Arabic.
   Phone first: compact red header, white sheet, bottom tab bar. Desktop (>=900px): left rail. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 600;font-display:swap;src:url(./fonts/cairo-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 600;font-display:swap;src:url(./fonts/cairo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 700;font-display:swap;src:url(./fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(./fonts/unbounded-700-latin.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --sp-red:#CC0F37; --sp-pop:#E01445; --sp-bg:#FFFFFF; --sp-cream:#FFF6EE; --sp-tint:#FDEBF0;
  --sp-ink:#3D0A18; --sp-muted:#7A4A56; --sp-line:#F0E2DC;
  --sp-sky-soft:#E3EFFB; --sp-sky-ink:#1E3A5C; --sp-butter-soft:#FFF0C2; --sp-butter-ink:#5A4210;
  --sp-ok-soft:#E2F1E6; --sp-ok-ink:#1F5A33;
  --sp-display:"Unbounded","Montserrat",system-ui,sans-serif;
  --sp-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sp-arabic:"Cairo","Montserrat",system-ui,sans-serif;
  --sp-ease:cubic-bezier(.32,.72,0,1);
  --sp-tab-h:64px;
  /* the older stylesheets read these */
  --line:var(--sp-line); --ink:var(--sp-ink); --muted:var(--sp-muted);
}
html body.sp{background:var(--sp-bg);color:var(--sp-ink);font:500 15px/1.45 var(--sp-body);-webkit-font-smoothing:antialiased;color-scheme:light}
body.sp [dir="rtl"],body.sp .care-bubble[dir="auto"]:lang(ar){font-family:var(--sp-arabic)}
body.sp :focus-visible{outline:2px solid var(--sp-red);outline-offset:2px}
body.sp .shell{max-width:none;padding:0;margin:0}
body.sp #phase1-review-notice,body.sp .shell>.footer,body.sp #mobile-menu,body.sp #mobile-navigation,body.sp .nav-caption,body.sp .nav-note,body.sp .skip-link:not(:focus){display:none!important}
body.sp h1,body.sp h2,body.sp h3{letter-spacing:-.01em}

/* Buttons, fields, cards */
body.sp .btn{height:44px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--sp-line);background:#fff;color:var(--sp-ink);font:700 14px/1 var(--sp-body);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
body.sp .btn:hover{background:var(--sp-cream)}
body.sp .btn.primary{background:var(--sp-pop);border-color:var(--sp-pop);color:#fff}
body.sp .btn.primary:hover{background:var(--sp-red);border-color:var(--sp-red)}
body.sp .btn:disabled{opacity:.5}
body.sp .field label,body.sp .search-label{font:700 12px/1.3 var(--sp-body);color:var(--sp-muted);letter-spacing:.02em;text-transform:none}
body.sp input:not([type=checkbox]):not([type=radio]),body.sp textarea,body.sp select{border:1.5px solid var(--sp-line);border-radius:14px;background:#fff;color:var(--sp-ink);font:500 16px/1.4 var(--sp-body);padding:12px 14px}
body.sp input:focus,body.sp textarea:focus,body.sp select:focus{border-color:var(--sp-red);outline:0}
body.sp .panel{background:#fff;border:1px solid var(--sp-line);border-radius:22px;box-shadow:none}
body.sp .alert{border-radius:14px;background:var(--sp-cream);border:1px solid var(--sp-line);color:var(--sp-ink)}
body.sp .quiet-note,body.sp .muted{color:var(--sp-muted)}
body.sp .tag,body.sp .pill,body.sp .badge{border-radius:999px;font-weight:700}

/* Sign-in screens (2026-11-07 v2). Phone: red brand band, white sheet. Desktop: red brand panel + form side. */
body.sp:not(.sp-in) .shell>.top{position:relative;overflow:hidden;background:var(--sp-pop);color:#fff;margin:0;border:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:max(22px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-left,0px)) 64px}
body.sp:not(.sp-in) .shell>.top .logo img{filter:brightness(0) invert(1);width:150px;height:auto;display:block}
body.sp .shell>.top .eyebrow,body.sp .shell>.top .badge,body.sp .shell>.top #logout{display:none!important}
body.sp.sp-in .shell>.top{display:none}
.sp-auth-brand{position:relative;z-index:1;margin-top:18px;max-width:30ch}
.sp-auth-tag{margin:0;font:700 19px/1.3 var(--sp-display);color:#fff;text-wrap:balance}
.sp-auth-sub{margin:8px 0 0;font:600 12px/1 var(--sp-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.sp-auth-bloom{position:absolute;z-index:-1;width:200px;height:200px;right:-96px;top:-118px;color:rgba(255,255,255,.18);pointer-events:none}
#mfa-message.sp-dup{display:none}
body.sp.sp-in .sp-auth-brand{display:none}
body.sp .auth.panel{max-width:440px;margin:-36px auto 32px;position:relative;padding:30px 26px 26px;border-radius:24px;border:0;box-shadow:none;background:#fff}
body.sp .auth h1{font:700 24px/1.2 var(--sp-display);margin-top:6px;text-wrap:balance}
body.sp .auth .eyebrow{color:var(--sp-red);font-size:11px;letter-spacing:.12em}
body.sp .auth p.sm{font-size:14px;line-height:1.5}
body.sp .auth .field{margin-top:18px}
body.sp .auth .field label{font-size:13px;font-weight:700;color:var(--sp-ink)}
body.sp .auth .field input,body.sp .auth .field select{height:52px;border-radius:14px;border:1.5px solid var(--sp-line);background:#fff;padding:0 16px;font:600 16px var(--sp-body);color:var(--sp-ink);transition:border-color .15s ease,box-shadow .15s ease}
body.sp .auth .field input:focus{outline:none;border-color:var(--sp-red);box-shadow:0 0 0 4px rgba(204,15,55,.12)}
body.sp .auth .btn.primary.full{height:52px;border-radius:999px;font-size:15px;margin-top:22px}
body.sp .auth .alert{margin-top:18px;background:transparent;border:0;padding:0;font-size:12.5px;line-height:1.5;color:var(--sp-muted)}
body.sp .auth #mfa-message{background:var(--sp-cream);border:1px solid var(--sp-line);padding:12px 14px;font-size:13.5px;color:var(--sp-ink);margin-top:16px}
body.sp .auth #mfa-message:empty{display:none}
body.sp #login .flex{margin-top:14px!important}
body.sp #change-project,body.sp #mfa-cancel{background:none;border:0;padding:6px 0;height:auto;font:600 13px var(--sp-body);color:var(--sp-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.sp #change-project:hover,body.sp #mfa-cancel:hover{color:var(--sp-ink)}
body.sp #mfa-cancel{display:block;margin:14px auto 0!important}
body.sp .auth .footer{font-size:12.5px;line-height:1.5;color:var(--sp-muted);text-align:center;margin-top:12px}
/* Password show / hide */
.sp-pw{position:relative}
.sp-pw input{width:100%;padding-right:76px!important}
.sp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:38px;padding:0 12px;border:0;border-radius:10px;background:transparent;font:700 13px var(--sp-body);color:var(--sp-red);cursor:pointer}
.sp-eye:hover{background:var(--sp-tint)}
/* Six-digit code */
body.sp #mfa-code{height:68px;text-align:center;font:700 30px/1 var(--sp-body);letter-spacing:.42em;padding-left:.42em;font-variant-numeric:tabular-nums}
body.sp #mfa-code::placeholder{color:#E6D3D0;letter-spacing:.42em}
#sp-code-hint{display:block;margin-top:8px;font-size:12.5px;color:var(--sp-muted);text-align:center}
#mfa-form.sp-busy #mfa-code{border-color:var(--sp-red);background:var(--sp-cream)}
#mfa-form.sp-busy #mfa-verify{opacity:.75;cursor:progress}
body.sp #mfa-enrollment{margin-top:16px;text-align:center}
body.sp #mfa-qr{border-radius:16px;border:1px solid var(--sp-line);padding:10px;background:#fff}
body.sp #mfa-setup{width:100%;height:52px;border-radius:999px;margin-top:16px}
@media (max-width:480px){body.sp .auth.panel{margin:-36px 0 0;border-radius:24px 24px 0 0;max-width:none;min-height:calc(100vh - 160px);padding:28px max(20px,env(safe-area-inset-left,0px)) 32px}}
@media (min-width:900px){
  body.sp:not(.sp-in){min-height:100vh}
  body.sp:not(.sp-in) .shell{display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:100vh;background:var(--sp-pop)}
  body.sp:not(.sp-in) .shell>.top{padding:44px 52px;justify-content:space-between;min-height:100vh;box-sizing:border-box}
  body.sp:not(.sp-in) .shell>.top .logo img{width:176px}
  .sp-auth-brand{margin:0 0 8px;max-width:440px;position:static}
  .sp-auth-tag{font-size:34px;line-height:1.18}
  .sp-auth-sub{margin-top:16px}
  .sp-auth-bloom{width:460px;height:460px;right:-150px;top:-150px;bottom:auto;color:rgba(255,255,255,.14)}
  body.sp:not(.sp-in) .shell>main{background:#fff;display:flex;align-items:center;justify-content:center;padding:48px 32px;border-radius:32px 0 0 32px;margin:12px 0}
  body.sp .auth.panel{margin:0;width:100%;max-width:420px;padding:0}
  body.sp .auth h1{font-size:30px}
}
@media (prefers-reduced-motion:no-preference){body.sp .auth.panel:not(.hidden){animation:sp-auth-in .45s var(--sp-ease) both}}
@keyframes sp-auth-in{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Workspace frame */
body.sp #workspace{display:block;padding:0}
body.sp #crm-navigation{display:none!important}
body.sp #crm-main{padding-bottom:calc(var(--sp-tab-h) + env(safe-area-inset-bottom,0px) + 28px);min-height:100vh}
body.sp::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--sp-pop)}

/* Compact red page header */
body.sp .crm-page>.page-heading.sp-head{display:flex;align-items:center;gap:8px;margin:0;background:var(--sp-pop);color:#fff;
  padding:12px max(16px,env(safe-area-inset-right,0px)) 26px max(16px,env(safe-area-inset-left,0px))}
body.sp .sp-head>div:first-child{flex:1;min-width:0}
body.sp .sp-head .section-kicker,body.sp .sp-head .page-subtitle{display:none}
body.sp .sp-head h1{font:700 19px/1.2 var(--sp-display);color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sp .sp-summary{margin:2px 0 0;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sp .sp-summary:empty{display:none}
body.sp .sp-head .btn{height:36px;min-height:36px;padding:0 14px;font-size:13px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff}
body.sp .sp-head .btn:hover{background:rgba(255,255,255,.24)}
body.sp .sp-head #customer-primary-action{display:flex}
body.sp .sp-me{width:36px;height:36px;flex:none;border-radius:999px;border:1.5px solid rgba(255,255,255,.8);background:transparent;color:#fff;font:700 12px/1 var(--sp-display);display:grid;place-items:center;cursor:pointer}
body.sp .sp-sheet-body{position:relative;background:#fff;border-radius:20px 20px 0 0;margin-top:-14px;padding:14px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
body.sp :focus-visible.sp-me,body.sp .sp-head :focus-visible{outline-color:#fff}

/* Bottom tab bar */
#sp-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--sp-line);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body.sp:not(.sp-in) #sp-tabbar{display:none}
.sp-tab{position:relative;height:var(--sp-tab-h);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px/1 var(--sp-body);color:var(--sp-muted);cursor:pointer}
.sp-tab svg{width:56px;height:30px;padding:3px 16px;border-radius:999px;transition:background .25s var(--sp-ease),transform .14s ease}
.sp-tab[aria-current="page"]{color:var(--sp-red)}
.sp-tab[aria-current="page"] svg{background:var(--sp-tint)}
.sp-badge{position:absolute;top:6px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sp-pop);color:#fff;font:700 11px/18px var(--sp-body);text-align:center}

/* More sheet */
#sp-more{border:0;padding:0;width:100%;max-width:520px;margin:auto auto 0;border-radius:22px 22px 0 0;background:#fff;color:var(--sp-ink)}
#sp-more::backdrop{background:rgba(61,10,24,.32)}
.sp-sheet-grip{width:40px;height:5px;border-radius:999px;background:var(--sp-line);margin:10px auto 4px}
.sp-more-card{display:flex;align-items:center;gap:12px;padding:14px 20px 16px}
.sp-more-card b{display:block;font-size:16px}
.sp-more-card span.sp-role{font-size:13px;color:var(--sp-muted)}
.sp-more-list{display:flex;flex-direction:column;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
.sp-more-item{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px;border:0;border-radius:14px;background:transparent;text-align:left;font:600 15px/1.3 var(--sp-body);color:var(--sp-ink);cursor:pointer;width:100%}
.sp-more-item:hover{background:var(--sp-cream)}
.sp-more-item .sp-ico{width:40px;height:40px;border-radius:12px;background:var(--sp-cream);display:grid;place-items:center;flex:none}
.sp-more-item .sp-ico svg{width:20px;height:20px;color:var(--sp-red)}
.sp-more-item small{display:block;font-weight:500;font-size:12.5px;color:var(--sp-muted)}
.sp-more-item.sp-danger{color:var(--sp-red)}

/* Bloom avatar */
.sp-bloom{width:44px;height:44px;flex:none;display:grid;place-items:center;position:relative;font:700 13px/1 var(--sp-display);color:var(--sp-ink)}
.sp-bloom::before{content:"";position:absolute;inset:0;background:var(--av,#BCD9F5);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3Ccircle cx='150' cy='100' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3Ccircle cx='50' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3Ccircle cx='150' cy='100' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3Ccircle cx='50' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.sp-bloom>span{position:relative}
.sp-bloom.lg{width:84px;height:84px;font-size:22px}

/* Segmented controls (sliding highlight) */
body.sp .sp-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--sp-cream);border-radius:999px;border:0;margin:0 0 10px}
body.sp .sp-seg>button{position:relative;z-index:1;height:34px;min-height:34px;border:0!important;background:transparent!important;border-radius:999px;font:600 13px/1 var(--sp-body);color:var(--sp-ink);white-space:nowrap;padding:0 6px;box-shadow:none!important;display:inline-flex;align-items:center;justify-content:center;gap:5px}
body.sp .sp-seg>button[aria-pressed="true"],body.sp .sp-seg>button[aria-selected="true"]{color:var(--sp-red)}
body.sp .sp-seg>button span{font-weight:700;opacity:.8}
body.sp .sp-seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--sp-red);transition:transform .38s var(--sp-ease),width .38s var(--sp-ease)}
body.sp .care-filters.sp-seg{grid-template-columns:1.35fr 1fr 1fr;grid-auto-flow:row}

/* Customers list */
body.sp #customer-directory{border:0;padding:0;background:transparent;border-radius:0}
body.sp #customer-directory>.rowhead h2,body.sp #customer-directory .directory-count,body.sp #customer-directory>p.xs{display:none}
body.sp #customer-directory .search-tools{display:flex;gap:8px;margin:0 0 10px}
body.sp #search{flex:1;height:46px;border-radius:999px;padding:0 18px;max-width:none}
body.sp #refresh{height:46px;min-height:46px}
body.sp #customers{max-height:none!important;overflow:visible}
body.sp #customers .customer{border:0;border-bottom:1px solid var(--sp-line);border-radius:0;padding:0;background:transparent;margin:0}
body.sp #customers .customer.selected{background:var(--sp-tint);border-radius:14px}
body.sp .customer-open{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 4px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--sp-ink)}
body.sp .customer-open>div{flex:1;min-width:0}
body.sp .customer-open .name{font:700 15px/1.3 var(--sp-body)}
body.sp .customer-open .sub{font-size:13.5px;color:var(--sp-muted);margin-top:2px}
body.sp .customer-open .tags{margin-top:5px;gap:5px}
body.sp .customer-open .tag{font-size:11.5px;padding:3px 9px;background:transparent;border:1.5px solid var(--sp-line);color:var(--sp-muted)}
body.sp .customer-open>.badge{display:none}
body.sp .customer-open::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--sp-muted);border-bottom:2px solid var(--sp-muted);transform:rotate(-45deg);margin-right:4px;opacity:.6}
body.sp #find-customer-form{margin:0 0 6px!important}
body.sp #find-customer-form>label,body.sp #find-customer-form>.flex{display:none}
body.sp #find-customer-status:empty,body.sp #customer-access-note:empty{display:none}
body.sp .sp-find{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 8px;padding:12px 14px;border:1.5px dashed var(--sp-red);border-radius:14px;background:var(--sp-tint);color:var(--sp-red);font:700 14px/1.3 var(--sp-body);text-align:left;cursor:pointer}
body.sp .sp-find svg{width:18px;height:18px;flex:none}

/* Customer profile */
body.sp #profile-placeholder{border:0;background:var(--sp-cream);text-align:center}
body.sp #profile-placeholder .placeholder-mark{display:none}
body.sp #customer-detail{border:0;padding:0;background:transparent}
body.sp #customer-detail>.sectionhead{display:flex;align-items:center;margin:0}
body.sp #customer-detail>.sectionhead .eyebrow{display:none}
body.sp .sp-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 0 8px}
body.sp .sp-hero #detail-name{font:700 21px/1.25 var(--sp-display)!important;margin:4px 0 0!important}
body.sp .sp-hero #detail-meta{justify-content:center}
body.sp .sp-hero #detail-contact{margin:0!important;color:var(--sp-muted);font-size:14px;overflow-wrap:anywhere}
body.sp .sp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:10px}
body.sp .sp-qa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:68px;padding:10px 6px;border-radius:14px;border:1px solid var(--sp-line);background:#fff;font:700 13px/1.2 var(--sp-body);color:var(--sp-ink);text-decoration:none;cursor:pointer}
body.sp .sp-qa svg{width:22px;height:22px;color:var(--sp-red)}
body.sp .sp-qa[aria-disabled="true"]{opacity:.45;pointer-events:none}
body.sp .profile-tabs.sp-seg{margin-top:14px}
body.sp #customer-detail .orderline{border-bottom:1px solid var(--sp-line);padding:12px 0}
body.sp #customer-detail .note{border:1px solid var(--sp-line);border-radius:14px;background:#fff}
body.sp .shipment-line{margin-top:4px}
body.sp .shipment-line a{color:var(--sp-red);font-weight:700}

/* Inbox */
body.sp #page-conversations .care-demo-tools,body.sp #care-list-summary,body.sp #care-directory>.search-label{display:none}
body.sp #care-status{font-size:12.5px;margin:0 0 8px}
body.sp #care-layout{border:0;padding:0;background:transparent;border-radius:0}
body.sp #care-search{height:44px;border-radius:999px;padding:0 18px;margin:0 0 10px;width:100%;max-width:none}
body.sp #care-list{display:flex;flex-direction:column}
body.sp .care-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"av name time" "av prev time";column-gap:12px;row-gap:2px;align-items:center;width:100%;min-height:72px;padding:12px 4px;border:0;border-bottom:1px solid var(--sp-line);border-radius:0;background:transparent;text-align:left;cursor:pointer;color:var(--sp-ink)}
body.sp .care-row[aria-pressed="true"]{background:var(--sp-tint);border-radius:14px}
body.sp .care-row .sp-bloom{grid-area:av}
body.sp .care-row strong{grid-area:name;font:700 15px/1.3 var(--sp-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sp .care-row>span:not(.sp-bloom):not(.sp-time){grid-area:prev;font-size:14px;color:var(--sp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sp .care-row>small{display:none}
body.sp .sp-time{grid-area:time;align-self:start;display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--sp-muted);padding-top:2px;font-variant-numeric:tabular-nums}
body.sp .sp-time.late{color:var(--sp-red);font-weight:700}
body.sp .sp-time svg{width:12px;height:12px}
body.sp #care-thread-empty{text-align:center;color:var(--sp-muted)}
body.sp .care-thread-top{display:flex;gap:8px;flex-wrap:wrap}
body.sp #care-thread-name{font:700 19px/1.25 var(--sp-display)}
body.sp #care-messages{display:flex;flex-direction:column;gap:8px;padding:8px 0}
body.sp .care-bubble{max-width:82%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.4;border:1px solid var(--sp-line);background:#fff;align-self:flex-start;border-bottom-left-radius:6px}
body.sp .care-bubble.outbound{align-self:flex-end;background:var(--sp-sky-soft);border-color:transparent;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
body.sp .care-bubble small{display:block;font-size:11px;color:var(--sp-muted);margin-top:4px}
body.sp #care-reply{border-radius:22px;min-height:48px}

/* Polish: flush layout inside the sheet, compact chat bar, note button, icon buttons */
body.sp #care-layout{padding:0!important;gap:0;border:0!important;box-shadow:none!important}
body.sp #care-directory,body.sp #care-thread,body.sp #care-thread-empty{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;margin:0}
body.sp #find-customer-form>label,body.sp #find-customer-form>.flex{display:none!important}
body.sp .sp-iconbtn{width:46px;min-width:46px;padding:0!important;flex:none}
body.sp .sp-iconbtn svg{width:20px;height:20px}
body.sp .sp-head .sp-iconbtn{width:36px;min-width:36px;height:36px;border-radius:999px}
body.sp .care-thread-top{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:0 0 6px}
body.sp #care-back{margin-right:auto;border-color:transparent;background:transparent;padding:0 6px;height:40px;min-height:40px;color:var(--sp-red)}
body.sp #care-back svg,body.sp #close-detail svg{width:18px;height:18px}
body.sp #care-thread-refresh,body.sp #care-resolve{height:38px;min-height:38px;padding:0 14px;font-size:13px}
body.sp #care-thread-name{margin:6px 0 0}
body.sp #care-thread-state{margin:2px 0 6px;font-size:13px}
body.sp #care-reply-form>label{display:none}
body.sp .care-compose-actions{display:flex;align-items:center;gap:12px;margin-top:8px}
body.sp #care-reply-hint{flex:1;font-size:12px;margin:0}
body.sp #care-reply{min-height:52px;max-height:160px}
body.sp .note-compose{margin:4px 0 12px}
body.sp .note-compose>summary{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1.5px solid var(--sp-line);background:#fff;color:var(--sp-ink);font:700 14px/1 var(--sp-body);list-style:none;cursor:pointer}
body.sp .note-compose>summary::-webkit-details-marker{display:none}
body.sp .note-compose>summary::before{content:"+";font-size:18px;color:var(--sp-red);line-height:1}
body.sp .note-compose[open]>summary{margin-bottom:10px}
body.sp #customer-detail .section-title{font:700 13px/1 var(--sp-body);letter-spacing:.08em;text-transform:uppercase;color:var(--sp-muted)}
body.sp #profile-panel-notes>p,body.sp #profile-panel-orders>.quiet-note{display:none}
body.sp #customer-access-note[data-full="true"]{display:none}

/* Chat screen: newest message always visible; on phones the red header becomes the chat header */
body.sp #care-messages{align-items:stretch;padding:8px 2px 12px}
body.sp .care-bubble{flex-shrink:0;overflow:visible}
body.sp .sp-hback{display:none}
@media (max-width:899px){
  body.sp #care-messages{max-height:none!important;min-height:0;overflow:visible}
  body.sp.sp-thread .sp-hback{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:-8px;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;flex:none}
  body.sp.sp-thread .sp-hback svg{width:22px;height:22px}
  body.sp.sp-thread #care-back,body.sp.sp-thread #care-thread-name,body.sp.sp-thread #care-thread-state,body.sp.sp-thread #care-status{display:none!important}
  body.sp.sp-thread .care-thread-top{justify-content:flex-end}
  body.sp.sp-thread #page-conversations .sp-head .sp-iconbtn{display:none}
  body.sp.sp-thread #page-conversations>.page-heading.sp-head{display:flex!important}
  body.sp.sp-thread #page-conversations .sp-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-bottom:12px}
  body.sp.sp-thread #page-conversations .sp-sheet-body{margin-top:0;border-radius:0}
}
@media (min-width:900px){ body.sp #care-messages{max-height:min(58vh,560px)!important;overflow-y:auto} }
/* Tablets in portrait: phone layout, centred so lines stay readable */
@media (min-width:600px) and (max-width:899px){
  body.sp .sp-sheet-body>*{max-width:720px;margin-left:auto;margin-right:auto}
  body.sp .crm-page>.page-heading.sp-head{padding-left:max(24px,calc((100% - 720px)/2));padding-right:max(24px,calc((100% - 720px)/2))}
}
/* Small laptops: tighter rail and list so the profile keeps room */
@media (min-width:900px) and (max-width:1199px){
  body.sp #workspace{grid-template-columns:216px minmax(0,1fr)}
  body.sp .customer-layout,body.sp #care-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr)!important;gap:18px!important}
  body.sp .sp-sheet-body{padding:16px 20px 0}
  body.sp .crm-page>.page-heading.sp-head{padding:14px 20px 28px}
}
@media (min-width:1600px){ body.sp .sp-sheet-body>*{max-width:1320px;margin-left:auto;margin-right:auto} }
/* Desktop: one continuous red bar across the rail logo and the page header */
@media (min-width:900px){
  body.sp .sp-rail-logo{height:76px;display:flex;align-items:center;padding:0 24px!important;margin-bottom:12px!important;position:sticky;top:0;z-index:5}
  body.sp .crm-page>.page-heading.sp-head{min-height:76px;padding-top:10px!important;padding-bottom:10px!important;position:sticky;top:0;z-index:30}
  body.sp .sp-sheet-body{margin-top:0;border-radius:0}
  body.sp #profile-slot,body.sp #care-thread,body.sp #care-thread-empty{top:92px!important}
}
/* Long names and emails never spill out of a row */
body.sp .customer-open .name,body.sp .customer-open .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Orders, team, account, labs */
body.sp #automatic-order-panel{border:0;padding:0;background:transparent}
body.sp #automatic-order-panel .order-toolbar h2,body.sp #automatic-order-panel .order-toolbar .quiet-note,body.sp #automatic-order-panel>.search-label{display:none}
body.sp #auto-order-search{height:44px;border-radius:999px;padding:0 18px;width:100%;max-width:none;margin:0 0 10px}
body.sp .order-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
body.sp .order-filters>button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--sp-line);background:#fff;font:600 13px/1 var(--sp-body);color:var(--sp-ink);white-space:nowrap}
body.sp .order-filters>button[aria-pressed="true"]{background:var(--sp-tint);border-color:var(--sp-red);color:var(--sp-red)}
body.sp #page-team .panel,body.sp #page-account .panel{border-radius:22px}
body.sp .tool-card{border-radius:22px;border:1px solid var(--sp-line);background:#fff;box-shadow:none}

/* Notifications and dialogs */
body.sp #status{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sp-tab-h) + env(safe-area-inset-bottom,0px) + 14px);z-index:70;width:min(92vw,520px)}
body.sp #status:empty{display:none}
body.sp #status .alert{background:var(--sp-ink);color:#fff;border:0;border-radius:16px;padding:12px 44px 12px 16px;font-weight:600}
body.sp #status .toast-dismiss{color:#fff}
body.sp dialog:not(#sp-more){border:0;border-radius:22px;padding:20px;color:var(--sp-ink)}
body.sp dialog::backdrop{background:rgba(61,10,24,.32)}
@media (max-width:899px){
  body.sp dialog:not(#sp-more){width:100%;max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:92vh;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  /* profile and thread open as their own screen on phones */
  body.sp #page-customers[data-profile-open="true"] .sp-sheet-body{margin-top:0;border-radius:0;padding-top:0}
  body.sp #page-customers[data-profile-open="true"] #customer-detail>.sectionhead{background:var(--sp-pop);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;padding:10px max(16px,env(safe-area-inset-left,0px)) 52px;justify-content:flex-start}
  body.sp #page-customers[data-profile-open="true"] #close-detail{height:36px;min-height:36px;background:transparent;border-color:transparent;color:#fff;padding:0 6px;font-size:14px}
  body.sp #page-customers[data-profile-open="true"] .sp-hero .sp-bloom.lg{margin-top:-46px}
  body.sp #care-layout[data-thread-open="true"] #care-directory{display:none}
  body.sp #care-reply-form{position:static;background:#fff;padding:10px 0 0;margin-top:8px;border-top:1px solid var(--sp-line)}
}

/* Desktop: left rail, header and sheet inside the content column */
@media (min-width:900px){
  body.sp #workspace{display:grid;grid-template-columns:248px minmax(0,1fr);gap:0;min-height:100vh}
  body.sp #crm-navigation{display:flex!important;position:sticky;top:0;height:100vh;flex-direction:column;gap:4px;padding:0 12px 16px;background:#fff;border-right:1px solid var(--sp-line);overflow-y:auto}
  body.sp .sp-rail-logo{margin:0 -12px 12px;padding:20px 24px;background:var(--sp-pop)}
  body.sp .sp-rail-logo img{filter:brightness(0) invert(1);width:132px;height:auto;display:block}
  body.sp #crm-navigation>button[data-page]{display:flex;align-items:center;gap:12px;min-height:44px;height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--sp-ink);font:600 14px/1 var(--sp-body);text-align:left;width:100%}
  body.sp #crm-navigation>button[data-page][hidden]{display:none}
  body.sp #crm-navigation>button[data-page] svg{width:20px;height:20px;color:var(--sp-muted);flex:none}
  body.sp #crm-navigation>button[data-page]:hover{background:var(--sp-cream)}
  body.sp #crm-navigation>button[data-page][aria-current="page"]{background:var(--sp-tint);color:var(--sp-red)}
  body.sp #crm-navigation>button[data-page][aria-current="page"] svg{color:var(--sp-red)}
  body.sp #crm-navigation>button[data-page="account"]{display:none}
  body.sp .sp-rail-group{font:700 11px/1 var(--sp-body);letter-spacing:.1em;text-transform:uppercase;color:var(--sp-muted);padding:20px 12px 6px}
  body.sp .sp-rail-spacer{flex:1}
  body.sp .sp-rail-me{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-cream);text-align:left;cursor:pointer;color:var(--sp-ink)}
  body.sp .sp-rail-me .sp-bloom{width:36px;height:36px;font-size:11px}
  body.sp .sp-rail-me b{display:block;font-size:14px}
  body.sp .sp-rail-me small{display:block;font-size:12px;color:var(--sp-muted)}
  body.sp .sp-rail-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--sp-pop);color:#fff;font:700 12px/22px var(--sp-body);text-align:center}
  body.sp #crm-navigation>button>span{width:auto;font-size:14px;text-align:left;font-weight:600}
  body.sp #crm-navigation>button[data-page]>span:not(.sp-rail-badge){flex:1;white-space:nowrap}
  body.sp #crm-navigation>button>span.sp-rail-badge{flex:none;font-size:12px;width:auto}
  body.sp #crm-navigation>.sp-rail-me{display:flex;align-items:center;gap:10px;min-height:56px;height:auto;padding:10px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-cream);text-align:left;color:var(--sp-ink)}
  body.sp #crm-navigation>.sp-rail-me>span.sp-bloom{width:36px;height:36px;font-size:11px;flex:none}
  body.sp #crm-navigation>.sp-rail-me>span:not(.sp-bloom){flex:1;min-width:0;font-size:14px}
  body.sp #crm-navigation>.sp-rail-me b,body.sp #crm-navigation>.sp-rail-me small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.sp #care-layout{display:grid!important;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px!important;align-items:start}
  body.sp #care-thread,body.sp #care-thread-empty{border:1px solid var(--sp-line)!important;border-radius:22px;padding:20px!important;background:#fff!important;position:sticky;top:16px}
  body.sp #care-thread-empty{background:var(--sp-cream)!important;padding:40px 20px!important}
  body.sp #care-back,body.sp #close-detail{display:none}
  body.sp #customers .customer.selected,body.sp #customers .customer.selected .customer-open{border:0!important;outline:0;box-shadow:none!important}
  body.sp #customers .customer.selected{background:var(--sp-tint);border-radius:14px}
  #sp-tabbar,body.sp .sp-me{display:none!important}
  body.sp #crm-main{padding-bottom:32px}
  body.sp .crm-page>.page-heading.sp-head{padding:16px 28px 30px}
  body.sp .sp-head h1{font-size:22px}
  body.sp .sp-sheet-body{padding:18px 28px 0}
  body.sp .customer-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
  body.sp #profile-slot{position:sticky;top:16px}
  body.sp #customer-detail{border:1px solid var(--sp-line);border-radius:22px;padding:20px;background:#fff}
  body.sp #customer-detail>.sectionhead{justify-content:flex-end}
  body.sp #status{bottom:24px}
  #sp-more{margin:auto;border-radius:22px}
  .sp-sheet-grip{display:none}
}

/* Motion: short and eased; off when the device asks for less motion */
@media (prefers-reduced-motion:no-preference){
  .sp-enter{animation:spFade .26s var(--sp-ease) both}
  .sp-push{animation:spPush .36s var(--sp-ease) both}
  .sp-pop{animation:spPop .32s var(--sp-ease) both}
  .sp-stagger>*{animation:spFade .3s var(--sp-ease) both;animation-delay:calc(var(--n,0) * 28ms)}
  body.sp .btn,body.sp .sp-qa,.sp-tab,body.sp .sp-me,.sp-more-item{transition:transform .14s ease,background .2s,color .2s,border-color .2s}
  body.sp .btn:active,body.sp .sp-qa:active,body.sp .sp-me:active,.sp-more-item:active,body.sp .sp-seg>button:active{transform:scale(.96)}
  body.sp .customer-open:active,body.sp .care-row:active{transform:scale(.985)}
  body.sp .customer-open,body.sp .care-row{transition:transform .14s ease,background .2s}
  .sp-tab:active svg{transform:scale(.92)}
  .sp-tab[aria-current="page"] svg{animation:spPill .34s var(--sp-ease)}
  #sp-more[open]{animation:spSheet .36s var(--sp-ease)}
  body.sp #status .alert{animation:spToast .32s var(--sp-ease) both}
}
@media (prefers-reduced-motion:reduce){body.sp .sp-seg-ind{transition:none}}
@keyframes spFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spPush{from{opacity:0;transform:translateX(30%)}to{opacity:1;transform:none}}
@keyframes spPop{from{opacity:0;transform:translateX(-10%)}to{opacity:1;transform:none}}
@keyframes spPill{from{transform:scaleX(.55);background:transparent}to{transform:none}}
@keyframes spSheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes spToast{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}