/* Generated by tools/build-gallery.mjs from cs-frontly-website-and-product/app/index.html on 2026-10-02. Do not edit — rebuild. */

  :root{
    color-scheme:light;
    --topbar-h:64px;
    --app:#1E7FEF;
    /* Frontly brand blue, matched to the frontly-new source-of-truth marketing site */
    --app-grad:linear-gradient(135deg, color-mix(in srgb,#1E7FEF 82%,#ffffff) 0%, #1E7FEF 55%, color-mix(in srgb,#1E7FEF 84%,#000000) 100%);
    --app-soft:linear-gradient(135deg, color-mix(in srgb,#1E7FEF 16%,var(--surface)) 0%, color-mix(in srgb,#1E7FEF 6%,var(--surface)) 100%);
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-2:#f1f3f4;
    --surface-3:#e8eaed;
    --ink:#202124;
    --ink-soft:#5f6368;
    --ink-faint:#5f6368;
    --line:#dadce0;
    --accent:var(--app);       /* Frontly is single-brand now — accent always tracks --app */
    --accent-ink:#ffffff;
    --secondary:#202124;       /* brand black (secondary) */
    --sk-hi:rgba(255,255,255,.6);
    --shadow-1:0 1px 3px rgba(60,64,67,.15);
    --shadow-2:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
    --shadow-pop:0 4px 12px rgba(60,64,67,.14),0 14px 34px rgba(60,64,67,.16);
    --shadow-lift:0 24px 60px -18px rgba(20,22,40,.42);
    --r-lg:20px; --r-md:16px; --r-sm:10px; --r-xs:8px; --r-full:999px;
    --ease:cubic-bezier(.4,0,.2,1);
    /* shared Careship Suite type/spacing scale — same values as every product site */
    --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:23px; --fs-3xl:32px;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
    /* legacy aliases so any inline styles still resolve */
    --clay:var(--shadow-2); --clay-sm:var(--shadow-1);
    --clay-in:inset 0 0 0 1px var(--line); --clay-in-sm:inset 0 0 0 1px var(--line);
    --g-font-display:'Fustat',sans-serif;
    --g-font-text:'Fustat',sans-serif;
    --chief-ok-bg:#d7f0e1; --chief-ok-ink:#146c43;
    --chief-warn-bg:#fdf0d1; --chief-warn-ink:#8a5a00;
    --chief-bad-bg:#fbe0e2; --chief-bad-ink:#a3283b;
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#151619;
    --surface:#202226;
    --surface-2:#2a2d31;
    --surface-3:#33373c;
    --ink:#e8eaed;
    --ink-soft:#c3c7ce;
    --ink-faint:#a6adb9;   /* brighter tertiary for dark glass surfaces */
    --line:#33373c;
    --accent:var(--app);
    --accent-ink:#ffffff;
    --secondary:#e8eaed;
    --sk-hi:rgba(255,255,255,.05);
    --shadow-1:0 1px 2px rgba(0,0,0,.44),0 1px 3px rgba(0,0,0,.34);
    --shadow-2:0 2px 6px rgba(0,0,0,.44),0 6px 16px rgba(0,0,0,.38);
    --shadow-pop:0 6px 18px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.52);
    --shadow-lift:0 26px 64px -16px rgba(0,0,0,.7);
    --chief-ok-bg:#173829; --chief-ok-ink:#7ee2ac;
    --chief-warn-bg:#3a2c0f; --chief-warn-ink:#f0c674;
    --chief-bad-bg:#3a1620; --chief-bad-ink:#f39aa9;
  }
  /* The marketing website never follows dark mode — it stays light regardless of the
     product app's theme (OS preference or in-app toggle). Re-declaring the light values
     scoped to #landing overrides the :root[data-theme="dark"] cascade for that subtree. */
  :root[data-theme="dark"] #landing{
    color-scheme:light;
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-2:#f1f3f4;
    --surface-3:#e8eaed;
    --ink:#202124;
    --ink-soft:#5f6368;
    --ink-faint:#5f6368;
    --line:#dadce0;
    --accent:var(--app);
    --accent-ink:#ffffff;
    --secondary:#202124;
    --sk-hi:rgba(255,255,255,.6);
    --shadow-1:0 1px 3px rgba(60,64,67,.15);
    --shadow-2:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
    --shadow-pop:0 4px 12px rgba(60,64,67,.14),0 14px 34px rgba(60,64,67,.16);
    --shadow-lift:0 24px 60px -18px rgba(20,22,40,.42);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;font-family:'Fustat',sans-serif;
    background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;
    transition:background .3s var(--ease),color .3s var(--ease);
  }
  button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
  svg{display:block}
  .ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ic-sm{width:17px;height:17px}
  .ic-lg{width:24px;height:24px}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

  /* ============ LOGIN ============ */
  #login{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:34px;background:var(--bg)}
  .login-card{
    width:min(940px,100%);height:min(560px,100%);display:grid;grid-template-columns:1.05fr 1fr;
    background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-pop);overflow:hidden;
  }
  .login-left{padding:52px 46px;display:flex;flex-direction:column;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:13px}
  .brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;overflow:hidden}
  .brand-mark img{width:100%;height:100%;display:block}
  .brand-name{font-weight:650;font-size:19px}
  .brand-sub{font-size:11px;color:var(--ink-faint);margin-top:2px;letter-spacing:1.6px;text-transform:uppercase}
  .login-hero h1{font-size:32px;line-height:1.15;font-weight:650;margin:0 0 14px;letter-spacing:-.6px}
  .login-hero p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0;max-width:34ch}
  .prod-strip{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
  .prod-chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff}
  .prod-chip svg{width:19px;height:19px;stroke-width:2}
  .login-foot{font-size:11.5px;color:var(--ink-faint)}
  .login-right{background:var(--surface-2);padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
  .login-right h2{margin:0 0 4px;font-size:23px;font-weight:650}
  .login-right .muted{color:var(--ink-faint);font-size:13px;margin:0 0 24px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12px;color:var(--ink-soft);margin:0 0 8px}
  .input{
    width:100%;padding:13px 15px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
    font-size:14px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s
  }
  .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
  .input::placeholder{color:var(--ink-faint)}
  .btn-primary{
    width:100%;margin-top:8px;padding:14px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;
    background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-1);transition:filter .15s,box-shadow .15s
  }
  .btn-primary:hover{box-shadow:var(--shadow-2);filter:brightness(1.03)}
  .btn-primary:active{filter:brightness(.96)}
  .login-alt{margin-top:18px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
  .login-alt a{color:var(--accent);text-decoration:none;font-weight:600}

  /* ============ APP SHELL ============ */
  #app{
    position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;background:var(--bg);
    opacity:0;pointer-events:none;transform-origin:left center;
    transition:opacity .5s var(--ease),transform .5s var(--ease),border-radius .5s var(--ease),box-shadow .5s var(--ease)
  }
  #app.on{opacity:1;pointer-events:auto}
  body.reveal #app{
    transform:translateX(120px) scale(.94);border-radius:26px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-lift)
  }

  /* Top bar */
  .topbar{height:66px;flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 16px}
  .tb-left{display:flex;align-items:center;gap:10px;min-width:0}
  .tb-right{display:flex;align-items:center;gap:8px;justify-self:end}
  .iconbtn{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);transition:background .15s,color .15s;position:relative}
  .iconbtn:hover{background:var(--surface-2);color:var(--ink)}
  .iconbtn.active{background:color-mix(in srgb,var(--app) 15%,transparent);color:var(--app)}
  .iconbtn.primary{background:var(--app-grad);color:#fff}
  .iconbtn.primary:hover{background:var(--app-grad);color:#fff;filter:brightness(1.06)}
  .ws-identity{display:flex;align-items:center;gap:11px;min-width:0;padding-left:4px}
  .ws-identity .wi-ico{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;color:#fff;overflow:hidden}
  .ws-identity .wi-ico svg{width:19px;height:19px;stroke-width:2}
  .ws-identity .wi-ico .wi-mark{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
  .ws-identity .wi-t{font-size:16px;font-weight:650;color:var(--ink);line-height:1.15}
  .ws-identity .wi-d{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .tb-center{justify-self:center;display:flex;align-items:center;gap:12px}
  .search{
    width:min(560px,42vw);height:46px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:24px;
    background:var(--surface-2);border:1px solid transparent;color:var(--ink-faint);transition:background .16s,box-shadow .16s,border-color .16s
  }
  .search:focus-within{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-1)}
  .search input{flex:1;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
  .search input::placeholder{color:var(--ink-faint)}
  .search kbd{font-size:10.5px;color:var(--ink-faint);background:var(--surface);border:1px solid var(--line);padding:2px 6px;border-radius:6px}
  .btn-new{
    height:42px;padding:0 20px 0 16px;border-radius:22px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
    background:var(--app-grad);color:#fff;box-shadow:var(--shadow-1);transition:filter .15s,box-shadow .15s
  }
  .btn-new:hover{box-shadow:var(--shadow-2);filter:brightness(1.03)}
  .btn-new:active{filter:brightness(.96)}
  .btn-new svg{width:18px;height:18px;stroke-width:2.2}
  .btn-new.secondary{background:var(--surface-2);color:var(--ink);box-shadow:none;padding:0 20px;border:1px solid var(--line)}
  .btn-new.secondary:hover{background:var(--line);filter:none}
  #memActions{gap:8px;align-items:center}
  .avatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--secondary);color:var(--bg);display:grid;place-items:center;font-size:14px;font-weight:600;transition:filter .15s}
  .avatar:hover{filter:brightness(1.08)}
  .user-pill{display:flex;align-items:center;gap:5px;height:42px;padding:2px 9px 2px 2px;border-radius:24px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;transition:background .13s}
  .user-pill:hover{background:var(--surface-3)}
  .up-av{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--secondary);color:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:600}
  .up-gear{display:grid;place-items:center;color:var(--ink-soft);width:22px;height:22px}
  .up-gear svg{width:18px;height:18px}
  .dot-badge{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--app);box-shadow:0 0 0 2.5px var(--bg)}

  /* Body split */
  .body{flex:1;display:flex;min-height:0;padding:0 16px 16px;gap:14px}

  /* Left nav */
  .leftnav{width:236px;flex:0 0 auto;background:transparent;padding:14px 8px;display:flex;flex-direction:column;gap:3px;overflow:hidden auto}
  .nav-item{
    display:flex;align-items:center;gap:15px;padding:0 16px;height:40px;border-radius:20px;color:var(--ink-soft);
    font-size:14px;font-weight:500;cursor:pointer;transition:background .13s,color .13s
  }
  .nav-item svg{width:20px;height:20px;flex:0 0 auto}
  .nav-item .count{margin-left:auto;font-size:12px;color:var(--ink-faint);font-weight:600}
  .nav-item:hover{background:var(--surface-2);color:var(--ink)}
  .nav-item.active{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);font-weight:600}
  .nav-sep{height:1px;background:var(--line);margin:8px 16px}
  .sub-nav-item{display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;height:36px;border-radius:18px;color:var(--ink-soft);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .13s,color .13s}
  .sub-nav-item svg{width:17px;height:17px;flex:0 0 auto}
  .sub-nav-item .count{margin-left:auto;font-size:12px;color:var(--ink-faint);font-weight:600}
  .sub-nav-item:hover{background:var(--surface-2);color:var(--ink)}
  .sub-nav-item.active{background:var(--app-grad);color:#fff;box-shadow:0 5px 14px -7px color-mix(in srgb,var(--app) 52%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
  .sub-nav-item.active .count{color:rgba(255,255,255,.85)}
  .count-ai{padding:2px 9px;border-radius:999px;color:#fff!important;font-weight:700;letter-spacing:.2px;
    background:linear-gradient(120deg,#f472b6,#93c5fd,#f472b6);background-size:220% 100%;
    animation:aiShimmer 2.6s linear infinite;box-shadow:0 2px 8px -3px color-mix(in srgb,var(--app) 60%,transparent)}
  @keyframes aiShimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
  .nav-actions{margin-left:auto;display:flex;align-items:center;gap:2px}
  .nav-act{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-faint);position:relative;transition:background .13s,color .13s}
  .nav-act:hover{background:var(--surface-3);color:var(--ink)}
  .nav-act svg{width:17px;height:17px}
  .nav-act .dot-badge{top:5px;right:5px;box-shadow:0 0 0 2px var(--surface)}
  .nav-caret{margin-left:auto;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-faint);opacity:0;transition:background .13s,opacity .13s}
  .nav-item:hover .nav-caret,.nav-caret:focus-visible{opacity:1}
  .nav-caret:hover{background:var(--surface-3)}
  .nav-caret svg{width:16px;height:16px;transition:transform .22s var(--ease)}
  .nav-caret.open svg{transform:rotate(180deg)}
  .sub-group{display:flex;flex-direction:column;gap:3px;max-height:0;margin:0;overflow:hidden;transition:max-height .28s var(--ease),margin .28s var(--ease)}
  .sub-group.open{max-height:340px;margin:2px 0 2px 26px}
  .sub-item{padding:9px 12px 9px 16px;cursor:pointer;color:var(--ink-soft);font-size:13.5px;border-radius:0 8px 8px 0;transition:background .12s,color .12s}
  .sub-item:hover{background:var(--surface-2);color:var(--ink)}
  .cbox{width:18px;height:18px;flex:0 0 auto;border-radius:5px;border:2px solid var(--cb);position:relative;transition:.12s}
  .cbox.on{background:var(--cb)}
  .cbox.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-size:100%;background-repeat:no-repeat}
  .sub-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Main content */
  .main{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);display:flex;flex-direction:column;overflow:hidden}
  .main-head{display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--line)}
  .main-head h1{margin:0;font-size:18px;font-weight:650;letter-spacing:-.2px}
  .main-head .sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px;padding-left:42px}
  .head-titlerow{display:flex;align-items:center;gap:8px}
  .expand-pane{width:34px;height:34px}
  .expand-pane svg{width:18px;height:18px}
  .expand-pane:hover{background:var(--surface-2);color:var(--ink)}
  .expand-pane.active{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .date-range{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;flex:0 0 auto;transition:background .13s}
  .date-range:hover{background:var(--surface-2)}
  .date-range svg{width:16px;height:16px;color:var(--ink-faint)}
  /* segmented control: self-contained, looks identical wherever it is placed (header, chart card, pane) */
  .seg{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);padding:4px;border-radius:13px}
  .main-head .seg{margin-left:auto}
  .seg button{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-faint);transition:.13s}
  .seg button.on{color:var(--ink);background:var(--surface);box-shadow:var(--shadow-1)}
  .main-body{flex:1;overflow:auto;padding:14px 18px 24px}

  /* Rows */
  .row{display:flex;align-items:center;gap:15px;padding:13px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background .14s;margin-bottom:2px}
  .row:hover{background:var(--surface-2)}
  .row .mono{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-soft)}
  .row:hover .mono{background:var(--surface-3)}
  .row .mono svg{width:18px;height:18px}
  .row .rc{flex:1;min-width:0}
  .row .rt{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .rp{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .row .rtime{font-size:11.5px;color:var(--ink-faint);flex:0 0 auto}
  .grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;padding:4px}
  .card{height:132px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);padding:15px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:box-shadow .16s,transform .16s,border-color .16s}
  .card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:transparent}
  .card .ct{font-size:13.5px;font-weight:600}
  .card .cm{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-soft)}
  .card .cf{font-size:11px;color:var(--ink-faint)}

  /* Right dock — pushes content */
  .dock{flex:0 0 auto;width:0;overflow:hidden;transition:width .34s var(--ease)}
  .dock.on{width:330px}
  .dock:not(.on){margin-left:-14px}
  .dock-inner{width:330px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:16px;display:flex;flex-direction:column;overflow:auto}
  .dock .mini-body{flex:1}
  .mini-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .mini-head .mh-ico{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);display:grid;place-items:center}
  .mini-head .mh-ico svg{width:17px;height:17px}
  .mini-head .mh-t{font-size:14.5px;font-weight:650}
  .mini-head .mh-d{font-size:11px;color:var(--ink-faint)}
  .mini-head .mh-x{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);transition:background .14s}
  .mini-head .mh-x:hover{background:var(--surface-2);color:var(--ink)}
  .mini-body{overflow:auto;font-size:13px;color:var(--ink-soft)}
  .mini-note{width:100%;min-height:150px;border:1px solid var(--line);outline:none;resize:none;background:var(--surface-2);border-radius:var(--r-sm);padding:13px;font:inherit;font-size:13px;color:var(--ink)}
  .mini-note:focus{border-color:var(--app)}
  .stickies{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  .sticky{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--app);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink);line-height:1.4}
  .mini-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-faint);margin:16px 0 8px}

  /* ===== Dashboard charts ===== */
  .dash-sec{margin-top:24px}
  .dash-sec-lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
  .dash-sec-lbl svg{width:14px;height:14px}
  .charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
  .chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;min-width:0}
  .cc-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
  .cc-head svg{width:14px;height:14px;color:var(--ink-faint)}
  .cc-sp{flex:1}
  .cc-i{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-style:italic;font-weight:600;color:var(--ink-faint)}
  .cc-hero{display:flex;align-items:baseline;gap:8px;margin-bottom:16px;flex-wrap:wrap}
  .cc-num{font-size:32px;font-weight:700;letter-spacing:-1px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
  .cc-sub{font-size:13px;color:var(--ink-soft)}
  .cc-foot{margin-top:14px;font-size:12px;color:var(--ink-faint);line-height:1.5}
  .cc-foot b{color:var(--ink-soft);font-weight:600}
  .seg-mini{padding:3px}
  .seg-mini button{padding:5px 10px;font-size:11px}
  .hbars{display:flex;flex-direction:column;gap:13px}
  .hbar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
  .hbar-l{font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hbar-v{font-size:12px;color:var(--ink-faint);font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
  .hbar-track{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden}
  .hbar-fill{height:100%;border-radius:5px;min-width:5px}
  .vbars{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:4px}
  .vbar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
  .vbar-wrap{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
  .vbar{width:100%;border-radius:5px 5px 0 0;min-height:3px}
  .vbar-x{font-size:10.5px;color:var(--ink-faint);font-weight:600}
  .vbars.stacked .seg{display:block;width:100%;padding:0;gap:0;border-radius:5px 5px 0 0}
  .vbars.stacked .seg+.seg{margin-top:2px}
  .donut-wrap{display:flex;justify-content:center;position:relative;margin:2px 0}
  .donut{width:168px;height:168px}
  .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .donut-center b{font-size:26px;font-weight:700;color:var(--ink)}
  .donut-center span{font-size:11px;color:var(--ink-faint)}
  .legend{display:flex;flex-direction:column;gap:9px;margin-top:14px}
  .legend.row{flex-direction:row;gap:18px;flex-wrap:wrap}
  .legend-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft)}
  .legend-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .legend-item .lg-v{margin-left:auto;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
  @media (max-width:900px){.charts-two{grid-template-columns:1fr!important}}

  /* Membership Plans */
  .plans-wrap{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
  .plans-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
  .plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
  .pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
  .pc-name{font-size:15px;font-weight:650;color:var(--ink)}
  .pc-price{font-size:14px;font-weight:700;color:var(--app);white-space:nowrap}
  .pc-benefits{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .pc-age{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--ink-faint)}
  .pc-age svg{width:14px;height:14px}
  .plan-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;position:sticky;top:0}
  .pf-h{font-size:14px;font-weight:650;color:var(--ink);margin-bottom:14px}
  .pf-l{display:block;font-size:12px;color:var(--ink-soft);margin:0 0 6px}
  .plan-form .input{margin-bottom:12px;width:100%}
  .pf-row{display:flex;gap:12px}
  .plan-form .btn-primary{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);box-shadow:var(--shadow-1)}
  .plan-form .btn-primary:hover{transform:none;box-shadow:var(--shadow-2)}
  .plan-form .btn-primary svg{width:16px;height:16px}
  @media (max-width:820px){.plans-wrap{grid-template-columns:1fr}}
  /* ---- Tasks table (assigned to me / others / AI) — reuses .ltable/.lt-row, just new cell content ---- */
  .task-status-btn{height:28px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;transition:background .13s}
  .task-status-btn:hover{background:var(--surface-2)}
  .task-add-chip{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:14px;border:1px dashed var(--line);background:none;color:var(--ink-faint);font-size:12px;cursor:pointer;transition:background .13s,color .13s}
  .task-add-chip:hover{background:var(--surface-2);color:var(--ink-soft)}
  .task-add-chip svg{width:13px;height:13px}
  .task-add-round{width:22px;height:22px;border-radius:50%;border:1px dashed var(--line);background:none;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer}
  .task-add-round svg{width:12px;height:12px}
  .task-composer{display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;color:var(--ink-faint);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-top:10px}
  /* canonical Task view: filter bar + search, category chip, done rows, tab count */
  .tfb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .tfb-dd{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .13s,border-color .13s}
  .tfb-dd:hover{background:var(--surface-2)}
  .tfb-dd.on{border-color:color-mix(in srgb,var(--app) 45%,var(--line));color:var(--app);background:color-mix(in srgb,var(--app) 8%,var(--surface))}
  .tfb-clear{font-size:12.5px;font-weight:600;color:var(--app);padding:0 6px;height:34px}
  .tfb-sp{flex:1}
  .tfb-search{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-faint);min-width:220px;transition:border-color .18s,box-shadow .18s}
  .tfb-search input{border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--ink);width:100%}
  .tfb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
  .task-cat{display:inline-block;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border-radius:7px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .lt-row.done .nm{text-decoration:line-through;color:var(--ink-faint)}
  .lt-row.done .task-status-btn{color:#0e8f85;border-color:color-mix(in srgb,#0d9488 35%,var(--line));background:color-mix(in srgb,#0d9488 10%,transparent)}
  .tt-c{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app);font-size:11px;font-weight:700}
  .dpill.on .tt-c{background:color-mix(in srgb,var(--app) 22%,transparent)}
  .tasks-empty{padding:36px 20px}
  .task-sub{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink-faint);background:var(--surface-2);border-radius:7px;padding:2px 7px;flex:0 0 auto}
  .task-sub svg{width:12px;height:12px}
  .task-composer-top{margin:0 0 12px}
  /* Chief tab in the conversation pane */
  .chief-pane{padding-top:2px}
  .chief-suggest{display:flex;gap:8px;padding:0 0 10px;flex-wrap:wrap}
  .chief-suggest button{font-size:12px;padding:7px 12px;border-radius:16px;background:var(--surface-2);color:var(--ink-soft);transition:background .14s}
  .chief-suggest button:hover,.chief-suggest button.on{background:color-mix(in srgb,var(--app) 12%,var(--surface-2));color:var(--app)}
  .chief-pane-result{margin-top:10px}
  .chief-pane-answer{border:1px solid color-mix(in srgb,var(--app) 22%,var(--line));background:color-mix(in srgb,var(--app) 5%,var(--surface));border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .cpa-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--app)}
  .cpa-b{font-size:13.5px;line-height:1.55;color:var(--ink)}
  .sub-tab svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
  /* chat view: divider before the Assign chip (verbatim from Commly) */
  .vch-sep{width:1px;height:20px;background:var(--line);margin:0 2px;flex:0 0 auto}
  @media (max-width:640px){.tfb-search{min-width:0;flex:1 1 100%}}
  .task-composer svg{width:15px;height:15px}
  .task-composer input{flex:1;border:0;background:none;outline:none;font-size:13.5px;color:var(--ink)}
  .task-composer input::placeholder{color:var(--ink-faint)}
  .calc-screen{background:var(--surface-2);border-radius:var(--r-sm);padding:16px;text-align:right;font-size:26px;font-weight:650;margin-bottom:12px;color:var(--ink)}
  .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .calc-grid button{padding:14px 0;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink-soft);transition:background .12s}
  .calc-grid button:hover{background:var(--surface-3);color:var(--ink)}
  .calc-grid button:active{background:var(--app-grad);color:#fff;border-color:transparent}
  /* call dock: search + collapsible dial pad */
  .callsearch{position:relative}
  .dial-toggle{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;color:var(--ink-faint);transition:background .13s,color .13s}
  .dial-toggle:hover{background:var(--surface-3);color:var(--ink)}
  .dial-toggle.on{background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app)}
  .dial-toggle svg{width:18px;height:18px}
  .dialwrap{max-height:0;overflow:hidden;transition:max-height .28s var(--ease)}
  .dialwrap.open{max-height:420px;margin-bottom:8px}
  .dial-screen{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px}
  .dial-num{flex:1;font-size:19px;font-weight:650;color:var(--ink-faint);min-height:24px;overflow:hidden;text-overflow:ellipsis}
  .dial-cc{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--ink-soft);padding-left:10px;border-left:1px solid var(--line)}
  .dial-cc .flag{font-size:16px}
  /* send assessment flow */
  .assess-row{cursor:pointer;gap:12px}
  .btn-new.asfull{margin-top:12px;width:100%;justify-content:center}
  .btn-new[disabled]{opacity:.45;pointer-events:none}
  .assess-sent{text-align:center;padding:26px 12px}
  .assess-check{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#22a06b 16%,transparent);color:#22a06b}
  .assess-check svg{width:26px;height:26px;stroke-width:2.4}
  .assess-sent-t{font-size:17px;font-weight:700;color:var(--ink)}
  .assess-sent-d{font-size:13px;color:var(--ink-faint);margin-top:5px}
  .mini-list .row{padding:11px 12px}
  .chk{width:18px;height:18px;border-radius:5px;border:2px solid var(--ink-faint);flex:0 0 auto;cursor:pointer;position:relative;transition:.13s}
  .chk.on{background:var(--app);border-color:var(--app)}
  .chk.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-size:100%;background-repeat:no-repeat}

  /* Right rail — mini apps (flat) */
  .rail{width:56px;flex:0 0 auto;background:transparent;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:8px}
  .rail button{width:42px;height:42px;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--ink-soft);transition:background .14s,color .14s}
  .rail button:hover{background:var(--surface-2);color:var(--ink)}
  .rail button.active{background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app)}
  .rail button svg{width:20px;height:20px}
  /* rail tools + separator */
  .rail-tool{position:relative}
  .rail-sep{width:24px;height:1px;background:var(--line);margin:6px 0;flex:0 0 auto}
  .rail-max{display:none!important}
  body.rail-hidden .rail-max{display:grid!important}
  /* Get Started launcher: rocket pinned to bottom, small loader below (no ring) */
  .rail-gs{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex:0 0 auto;padding-top:6px}
  .gs-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--app);transition:background .13s,color .13s}
  .rail-gs:hover .gs-ico{background:color-mix(in srgb,var(--app) 12%,transparent)}
  .gs-ico svg{width:20px;height:20px;stroke-width:2}
  .rail-gs.complete .gs-ico{color:#22a06b}
  .gs-load{width:34px;height:4px;border-radius:3px;background:var(--surface-3);overflow:hidden}
  .gs-load-fill{display:block;height:100%;background:var(--app);border-radius:3px;transition:width .5s var(--ease)}
  .rail-gs.complete .gs-load-fill{background:#22a06b}
  /* Get Started dock drawer */
  .gsd-hero{padding:2px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
  .gsd-hrow{display:flex;align-items:baseline;justify-content:space-between}
  .gsd-htitle{font-size:14px;font-weight:700;color:var(--ink)}
  .gsd-hpct{font-size:13px;font-weight:700;color:var(--app)}
  .gsd-hero .gs-bar{margin:8px 0 6px}
  .gsd-hero .gs-fill{background:var(--app)}
  .gsd-hsub{font-size:11.5px;color:var(--ink-faint)}
  .gsd-list{display:flex;flex-direction:column;gap:6px}
  .gsd-step{display:flex;align-items:center;gap:11px;padding:10px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface);transition:border .14s,background .14s}
  .gsd-step:hover{background:var(--surface-2)}
  .gsd-step.is-next{border-color:color-mix(in srgb,var(--app) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 9%,transparent)}
  .gsd-step.is-done{opacity:.72}
  .gsd-mark{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink-faint);font-size:12px;font-weight:700}
  .gsd-step.is-done .gsd-mark{background:var(--app);border-color:var(--app);color:#fff}
  .gsd-step.is-next .gsd-mark{border-color:#3b6ef5;color:#3b6ef5}
  .gsd-mark svg{width:13px;height:13px;stroke-width:2.6}
  .gsd-body{flex:1;min-width:0}
  .gsd-t{font-size:13px;font-weight:600;color:var(--ink)}
  .gsd-d{font-size:11px;color:var(--ink-faint);margin-top:1px;line-height:1.35}
  .gsd-cta{flex:0 0 auto;color:var(--ink-faint)}
  .gsd-step.is-next .gsd-cta{color:#3b6ef5}
  .gsd-cta svg{width:16px;height:16px}

  /* ============ PRODUCT RAIL (revealed behind app) ============ */
  .prail{position:fixed;left:0;top:0;bottom:0;z-index:1;width:120px;display:flex;flex-direction:column;align-items:center;padding:22px 0;justify-content:center}
  .prail-list{flex:0 1 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;overflow:auto;padding:6px 0}
  .prail-list::-webkit-scrollbar{width:0}
  .prail-item{
    display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;color:var(--ink-soft);
    opacity:0;transform:translateX(-12px);transition:opacity .38s var(--ease),transform .38s var(--ease),color .16s
  }
  body.reveal .prail-item{opacity:1;transform:none}
  .prail-ico{width:48px;height:48px;border-radius:15px;background:var(--pc);display:grid;place-items:center;color:#fff;transition:transform .16s var(--ease),box-shadow .16s}
  .prail-ico svg{width:22px;height:22px;stroke-width:2}
  .prail-item:hover .prail-ico{transform:translateY(-2px);box-shadow:var(--shadow-2)}
  .prail-item.active .prail-ico{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--pc)}
  .prail-item.active{color:var(--ink)}
  .prail-lbl{font-size:11px;font-weight:600;letter-spacing:.2px}

  /* ============ MENUS / POPOVERS ============ */
  .pop{
    position:fixed;z-index:200;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);
    padding:8px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.18s var(--ease)
  }
  .pop.on{opacity:1;transform:none;pointer-events:auto}
  .pop-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:background .14s,color .14s}
  .pop-item:hover{background:var(--surface-2);color:var(--ink)}
  .pop-item svg{width:18px;height:18px}
  .pop-confirm-ico{display:inline-grid;place-items:center;color:#22a06b}
  .pop-confirm-ico svg{width:18px;height:18px}
  .pop-sep{height:1px;background:var(--line);margin:6px 8px}
  .tf-group{padding:10px 14px}
  .tf-lbl{font-size:10.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.05em;margin-bottom:8px}
  .tf-chk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--ink);cursor:pointer}
  .tf-chk input{width:16px;height:16px;flex:0 0 auto}
  .tf-italic{font-style:italic;color:var(--ink-soft)}
  .bam-overlay{position:fixed;inset:0;background:rgba(15,17,22,.45);z-index:150;display:none;align-items:center;justify-content:center}
  .bam-overlay.on{display:flex}
  .bam-card{background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:26px 28px;width:460px;max-width:90vw}
  .bam-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:16px}
  .bam-textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--ink);background:var(--surface);outline:none;resize:vertical;font-family:inherit}
  .bam-count{font-size:12px;color:var(--ink-faint);margin-top:8px;text-align:right}
  .bam-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
  .import-drop{border:1.5px dashed var(--line);border-radius:12px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;color:var(--ink-soft)}
  .import-drop-ic{width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-faint)}
  .import-drop-t{font-size:13px;color:var(--ink-soft)}
  .import-drop-d{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
  .tpl-modal-card{width:640px;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;padding:0}
  .tpl-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
  .tpl-modal-close{font-size:13.5px;color:var(--ink-soft);cursor:pointer;background:none}
  .tpl-modal-close:hover{color:var(--ink)}
  .tpl-modal-body{padding:22px 24px;overflow:auto;flex:1;display:flex;flex-direction:column;min-height:0}
  .tpl-toolbar{display:flex;align-items:center;gap:4px;padding:8px 10px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--surface-2);flex-wrap:wrap}
  .tpl-toolbar button{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--ink-soft);font-size:13px;font-weight:700;cursor:pointer;background:transparent}
  .tpl-toolbar button:hover{background:var(--surface-3);color:var(--ink)}
  .tpl-toolbar button.on{background:var(--surface-3);color:var(--ink)}
  .tpl-toolbar svg{width:15px;height:15px}
  .tpl-tb-sep{width:1px;align-self:stretch;background:var(--line);margin:4px 2px}
  .tpl-editor{border:1px solid var(--line);border-radius:0 0 10px 10px;padding:14px 16px;font-size:13.5px;color:var(--ink);outline:none;overflow:auto;flex:1;min-height:280px}
  .tpl-editor:empty:before{content:attr(data-placeholder);color:var(--ink-faint)}
  .aicall-modal{width:600px;max-width:92vw;padding:0;max-height:88vh;display:flex;flex-direction:column}
  .aicall-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .aicall-sub{font-size:13px;color:var(--ink-faint);margin-top:4px}
  .aicall-head-acts{display:flex;gap:10px;flex:0 0 auto}
  .aicall-body{padding:22px 26px;overflow:auto}
  .aicall-suggest{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;background:none}
  .aicall-suggest:hover{color:var(--app)}
  .aicall-suggest svg{width:15px;height:15px}
  .aicall-count{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
  .aicall-target{font-size:13px;color:var(--ink-soft);margin-top:18px}
  .pop-wave{height:8px;margin:6px 10px;background:var(--app);opacity:.5;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='8'%3E%3Cpath%20d='M0%204%20Q5%201%2010%204%20T20%204'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center/20px 8px;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='8'%3E%3Cpath%20d='M0%204%20Q5%201%2010%204%20T20%204'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center/20px 8px}
  .pop-head{padding:9px 12px 5px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
  .notif{display:flex;gap:12px;padding:11px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background .14s}
  .notif:hover{background:var(--surface-2)}
  .notif .nd{width:8px;height:8px;border-radius:50%;background:var(--app);margin-top:5px;flex:0 0 auto}
  .notif .nt{font-size:13px;font-weight:600;color:var(--ink)}
  .notif .np{font-size:11.5px;color:var(--ink-faint);margin-top:2px}

  /* ============ ROUTED SCREEN STATES ============ */
  .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:16px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
  .stat .sl{font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
  .stat .sl svg{width:14px;height:14px;color:var(--app)}
  .stat .sv{font-size:26px;font-weight:650;color:var(--ink);margin-top:9px;letter-spacing:-.6px}
  .stat .sd{font-size:11px;color:var(--ink-faint);margin-top:2px}
  .panel-ph{background:var(--surface-2);border-radius:var(--r-md);min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-faint);font-size:12.5px}
  .panel-ph svg{width:26px;height:26px;opacity:.6;margin-bottom:4px;color:var(--app)}
  .empty{min-height:360px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:44px}
  .empty .em-ico{width:76px;height:76px;border-radius:22px;background:color-mix(in srgb,var(--app) 13%,transparent);color:var(--app);display:grid;place-items:center;margin-bottom:14px}
  .empty .em-ico svg{width:31px;height:31px}
  .empty h2{margin:0;font-size:17px;font-weight:650;color:var(--ink)}
  .empty p{margin:0;font-size:13px;color:var(--ink-faint);max-width:40ch;line-height:1.55}

  /* ============ RICH WORKSPACE SCREENS (Joi) ============ */
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .act{height:36px;padding:0 15px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:background .13s,color .13s,box-shadow .13s}
  .act svg{width:16px;height:16px}
  .act:hover{background:var(--surface-2);color:var(--ink)}
  .act.primary{background:var(--app-grad);color:#fff;border-color:transparent}
  .act.primary:hover{filter:brightness(1.06)}
  .act.danger{color:#c34a40;border-color:color-mix(in srgb,#c34a40 40%,var(--line))}
  .act.danger:hover{background:color-mix(in srgb,#c34a40 12%,transparent);color:#c34a40}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
  .panel h3{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:8px}
  .panel h3 svg{width:16px;height:16px;color:var(--app)}
  .q-actions{margin-top:2px}
  .qa-lbl{font-size:12px;font-weight:650;color:var(--ink-soft);margin-bottom:10px}
  .sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
  .sec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:box-shadow .16s,transform .16s,border-color .16s;min-height:106px;display:flex;flex-direction:column}
  .sec-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:transparent}
  .sec-card .sc-ico{width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--app) 13%,transparent);color:var(--app);display:grid;place-items:center;margin-bottom:12px}
  .sec-card .sc-ico svg{width:18px;height:18px}
  .sec-card .sc-t{font-size:14px;font-weight:600;color:var(--ink)}
  .sec-card .sc-d{font-size:11.5px;color:var(--ink-faint);margin-top:3px}
  @media (max-width:720px){.two-col{grid-template-columns:1fr}}

  /* ---- Website Visitors: live chat inbox ---- */
  .chatpane{display:flex;gap:0;height:100%;min-height:440px}
  .chatpane.mode-grid .lead-detail,.chatpane.mode-grid .gutter{display:none}
  .chatpane.mode-chat .ltable,.chatpane.mode-chat .gutter{display:none}
  .chatpane.mode-chat .lead-detail{width:auto!important;flex:1 1 auto}
  .mobile-back-btn{display:none;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer;padding:2px 0 14px}
  .mobile-back-btn svg{width:16px;height:16px}
  @media(max-width:860px){
    .chatpane{position:relative;overflow:hidden}
    .chatpane .ltable,.chatpane .week{width:100%!important;flex:none}
    .chatpane #gutter{display:none}
    .chatpane .vchat.lead-detail{position:absolute;inset:0;width:100%!important;transform:translateX(100%);transition:transform .22s var(--ease);background:var(--surface);padding:16px}
    .chatpane.mobile-detail-open .vchat.lead-detail{transform:translateX(0)}
    .chatpane.mobile-detail-open .ltable{display:none}
    .mobile-back-btn{display:flex}
  }
  .gutter{flex:0 0 16px;align-self:stretch;cursor:col-resize;position:relative}
  .gutter::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:transparent;transform:translateX(-50%);transition:background .12s}
  .gutter:hover::before,body.resizing .gutter::before{background:var(--app)}
  body.resizing{cursor:col-resize;user-select:none}
  .vlist{width:300px;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;overflow:hidden}
  .vlist-head{padding:14px 16px;font-size:13px;font-weight:650;color:var(--ink);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
  .vlist-head .lp{width:8px;height:8px;border-radius:50%;background:#22a06b}
  .vcount{margin-left:auto;font-size:11px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 14%,transparent);padding:2px 8px;border-radius:10px}
  .vrows{flex:1;overflow:auto}
  .vlist-sub{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint);border-top:1px solid var(--line);margin-top:4px}
  .vlist-sub svg{width:14px;height:14px}
  .vrow{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .13s}
  .vrow:hover{background:var(--surface-2)}
  .vrow.active{background:color-mix(in srgb,var(--app) 10%,transparent)}
  .vav{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--ink-soft);position:relative}
  .vav svg{width:18px;height:18px}
  .vpres{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface)}
  .vpres.online{background:#22a06b}
  .vpres.idle{background:var(--ink-faint)}
  .vpres.offline{background:var(--surface-3);border-color:var(--line)}
  .vrc{flex:1;min-width:0}
  .vrt{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vrp{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .vrmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
  .vrtime{font-size:11px;color:var(--ink-faint)}
  .vunread{font-size:10.5px;font-weight:700;color:#fff;background:var(--app);min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center}
  .vchat{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
  .vchat-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
  .vch-t{font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vch-d{font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;margin-top:2px;overflow:hidden;white-space:nowrap}
  .vch-d svg{width:13px;height:13px;flex:0 0 auto}
  .vch-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .vch-actions .iconbtn{width:38px;height:38px}
  .kebab-wrap{position:relative;display:none}
  .kebab-menu{position:absolute;right:0;top:44px;z-index:20;min-width:172px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:6px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.16s var(--ease)}
  .kebab-menu.on{opacity:1;transform:none;pointer-events:auto}
  .kebab-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-soft)}
  .kebab-menu button:hover{background:var(--surface-2);color:var(--ink)}
  .kebab-menu svg{width:16px;height:16px}
  @container (max-width:452px){ .vch-actions .opt{display:none} .kebab-wrap{display:block} }
  .pane-tasklist{display:flex;flex-direction:column;gap:8px}
  .pane-task{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--surface)}
  .pane-task-check{display:flex;align-items:center;padding-top:2px;cursor:pointer;flex:0 0 auto}
  .pane-task-main{min-width:0;flex:1}
  .pane-task-name{font-size:13px;font-weight:650;color:var(--ink)}
  .pane-task.done .pane-task-name{text-decoration:line-through;color:var(--ink-faint)}
  .pane-task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:11.5px;color:var(--ink-faint)}
  .pane-task-meta span{display:inline-flex;align-items:center;gap:5px}
  .pane-task-meta svg{width:13px;height:13px;flex:0 0 auto}
  .pane-task-empty{color:var(--ink-faint);font-size:12.5px;text-align:center;padding:30px 10px}
  .detail-pills{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;border-bottom:1px solid var(--line);scrollbar-width:none}
  .detail-pills::-webkit-scrollbar{height:0}
  .head-pills{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;margin:0 4px}
  .lead-centerpills{flex:1;justify-content:center;overflow:visible}
  .head-pills::-webkit-scrollbar{height:0}
  .dpill{flex:0 0 auto;height:30px;padding:0 13px;border-radius:15px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.13s}
  .dpill:hover{background:var(--surface-2);color:var(--ink)}
  .dpill.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);border-color:transparent}
  .vmsgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
  .vmsg{max-width:74%;font-size:13px;line-height:1.5;padding:9px 13px;border-radius:14px}
  .vmsg.them{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:5px}
  .vmsg.me{align-self:flex-end;background:var(--app-grad);color:#fff;border-bottom-right-radius:5px}
  .vmsg.ai{align-self:flex-end;background:color-mix(in srgb,var(--app) 15%,transparent);color:var(--ink);border-bottom-right-radius:5px}
  .vmsg .who{font-size:9.5px;font-weight:700;opacity:.75;margin-bottom:3px;letter-spacing:.4px;text-transform:uppercase}
  .vmsg .mt{font-size:10px;opacity:.6;margin-top:4px;text-align:right}
  .vcomposer{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .vcomposer input{flex:1;height:42px;border:1px solid var(--line);border-radius:22px;background:var(--surface-2);padding:0 16px;font-size:14px;color:var(--ink);outline:none;transition:background .14s,border-color .14s}
  .vcomposer input:focus{background:var(--surface);border-color:var(--app)}
  .vsend{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--app-grad);color:#fff;display:grid;place-items:center}
  .vsend svg{width:18px;height:18px;stroke-width:2.2}
  .vattach{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer;transition:background .13s,color .13s}
  .vattach:hover{background:var(--surface-2);color:var(--ink)}
  .vattach svg{width:18px;height:18px}
  /* Calls: unified communication linear timeline */
  .tline{gap:0!important}
  .titem{display:flex;gap:14px;padding-bottom:18px;position:relative}
  .titem::before{content:"";position:absolute;left:17px;top:38px;bottom:-2px;width:2px;background:var(--line)}
  .titem:last-child{padding-bottom:0}
  .titem:last-child::before{display:none}
  .tico{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 13%,transparent);color:var(--app);z-index:1}
  .tico svg{width:17px;height:17px}
  .tbody{flex:1;min-width:0;padding-top:5px}
  .tt{display:flex;align-items:center;gap:8px}
  .ttype{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink)}
  .ttime{margin-left:auto;font-size:11px;color:var(--ink-faint)}
  .ttext{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5;background:var(--surface-2);padding:9px 12px;border-radius:10px}

  /* Leads: card list + call detail panel */
  .leadwrap{display:flex;flex-direction:column;height:100%;gap:14px}
  .leadwrap .chatpane{flex:1;min-height:0}
  .lead-card{padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .13s}
  .lead-card:hover{background:var(--surface-2)}
  .lead-card.active{background:color-mix(in srgb,var(--app) 10%,transparent)}
  .lc-top{display:flex;align-items:center;gap:10px}
  .lc-name{font-size:14px;font-weight:650;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lc-time{font-size:11px;color:var(--ink-faint);flex:0 0 auto}
  .lc-purpose{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lc-badges{display:flex;gap:10px;margin-top:10px;align-items:center}
  .badge-u{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}
  .badge-u.high{color:#c34a40;background:color-mix(in srgb,#e05a4e 18%,transparent)}
  .badge-u.medium{color:#b0781a;background:color-mix(in srgb,#e0a020 22%,transparent)}
  .badge-u.low{color:#0e8f85;background:color-mix(in srgb,#0d9488 18%,transparent)}
  .sent{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
  .sent .sdot{width:8px;height:8px;border-radius:50%}
  .sent .sdot.positive{background:#0d9488}
  .sent .sdot.neutral{background:var(--ink-faint)}
  .sent .sdot.negative{background:#d1466a}
  .ld-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
  .ld-body{flex:1;overflow:auto;padding:18px}
  /* unified comms: centered pill divider that expands on click */
  .comm-list{display:flex;flex-direction:column;gap:2px}
  .comm-pill{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:none;border:0;padding:9px 0;cursor:pointer}
  .comm-pill .cl{flex:0 0 38px;height:9px;background:var(--ink-faint);opacity:.6;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='38'%20height='9'%3E%3Cpath%20d='M0%205%20Q4.75%201%209.5%205%20T19%205%20T28.5%205%20T38%205'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='38'%20height='9'%3E%3Cpath%20d='M0%205%20Q4.75%201%209.5%205%20T19%205%20T28.5%205%20T38%205'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
  .comm-pill .pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);transition:.13s;white-space:nowrap}
  .comm-pill:hover .pill{background:var(--surface-3)}
  .comm.open .pill{color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);border-color:transparent}
  .pill svg{width:14px;height:14px}
  .pill .p-dim{color:var(--ink-faint);font-weight:500}
  .pill .p-caret{display:inline-flex;transition:transform .2s}
  .comm.open .pill .p-caret{transform:rotate(180deg)}
  .comm-body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .comm.open .comm-body{max-height:1600px;padding:2px 4px 8px}
  .comm-meta{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.3px;text-align:center;margin-bottom:4px}
  .comm .audio{margin-top:10px;margin-bottom:0}
  .comm-summary{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-soft)}
  .comm-summary .report{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .report-step{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
  .rs-t{font-size:12.5px;font-weight:650;color:var(--ink)}
  .rs-d{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
  .rs-time{font-size:10.5px;color:var(--ink-faint);margin-top:3px}
  .comm [data-tx]{margin-top:12px}
  .comm .transcript.open{margin-top:10px}
  /* channel selector above composer */
  .chbar{display:flex;gap:6px;padding:10px 12px 12px;flex-wrap:wrap}
  .chchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;transition:.13s}
  .chchip svg{width:15px;height:15px}
  .chchip:hover{background:var(--surface-2);color:var(--ink)}
  .chchip.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);border-color:transparent}
  .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px}
  .meta .ml{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.3px}
  .meta .mv{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:3px}
  .audio{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:12px;padding:11px 14px;margin-bottom:18px}
  .audio .play{width:38px;height:38px;border-radius:50%;background:var(--app-grad);color:#fff;display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
  .audio .play svg{width:15px;height:15px}
  .audio .wave{flex:1;display:flex;align-items:center;gap:2px;height:30px}
  .audio .wave span{flex:1;background:var(--ink-faint);border-radius:2px;opacity:.45;min-width:2px}
  .audio.playing .wave span{background:var(--app);opacity:.7}
  .audio .atime{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .ld-sec{margin-bottom:18px}
  .ld-sec h4{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint)}
  .ld-sec p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
  .ld-sec-head{display:flex;align-items:center;justify-content:space-between}
  .transcript{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .transcript.open{max-height:700px;margin-top:10px}
  .tx{display:flex;gap:12px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .tx-who{flex:0 0 62px;font-weight:700;color:var(--app);font-size:10.5px;text-transform:uppercase;padding-top:2px}
  .tx-txt{color:var(--ink-soft);line-height:1.45}
  .seg-ic button{padding:7px 10px}
  .seg-ic button svg{width:17px;height:17px}
  .lead-detail{width:360px;flex:0 0 auto;transition:width .3s var(--ease)}
  /* expand / focus mode: hide left nav, widen both panes */
  body.focus .leftnav{display:none}
  body.rail-hidden .rail{display:none}
  body.focus .lead-detail{width:440px}
  /* Leads table (Google-Drive style: airy, muted headers, row dividers) */
  .ltable{flex:1;min-width:0;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
  .lt-head,.lt-row{display:grid;grid-template-columns:var(--lt-cols,1.5fr 2.3fr 96px 124px 96px);gap:14px;align-items:center;padding:0 20px}
  @media(max-width:700px){.lt-head,.lt-row{grid-template-columns:var(--lt-cols-m,var(--lt-cols,1.5fr 2.3fr 96px 124px 96px))}}
  .lt-head>*,.lt-row>*{min-width:0}
  .lt-head>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lt-head{height:46px;position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);z-index:1;font-size:12px;color:var(--ink-faint);font-weight:600}
  .lt-col-add{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer;background:var(--surface);box-shadow:-10px 0 10px var(--surface);z-index:2}
  .lt-col-add:hover{background:var(--surface-3);color:var(--ink)}
  .lt-col-add svg{width:14px;height:14px}
  .lt-col-hidden{display:none!important}
  .col-mgr-row{display:flex;align-items:center;gap:8px;padding:4px 2px;border-radius:8px;background:var(--surface)}
  .col-mgr-row.dragging{opacity:.4}
  .col-mgr-drag{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;color:var(--ink-faint);cursor:grab}
  .col-mgr-drag:active{cursor:grabbing}
  .col-mgr-drag svg{width:14px;height:14px}
  .dev-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-soft);font-size:12.5px;line-height:1.5;margin-bottom:18px;max-width:640px}
  .dev-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--ink-faint)}
  .dev-note b{color:var(--ink);font-weight:700}
  .lt-row{height:56px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px;color:var(--ink);transition:background .12s}
  .lt-row:last-child{border-bottom:0}
  .lt-row:hover{background:var(--surface-2)}
  .lt-row.active{background:color-mix(in srgb,var(--app) 10%,transparent)}
  .lt-name{display:flex;align-items:center;gap:12px;font-weight:600;min-width:0}
  .lt-av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-soft)}
  .lt-name .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lt-purpose{color:var(--ink-soft);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lt-time{color:var(--ink-faint);font-size:12.5px}
  .rk-cell{display:flex;justify-content:center}
  .row-kebab{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);opacity:.45;transition:opacity .12s,background .12s,color .12s}
  .lt-row:hover .row-kebab,.lt-row.active .row-kebab,.appt-row:hover .row-kebab,.appt-row.active .row-kebab{opacity:1}
  .row-kebab:hover{background:var(--surface-3);color:var(--ink)}
  .row-kebab svg{width:16px;height:16px}
  /* Appointments: date-grouped list */
  .appt-list{overflow:auto}
  .appt-date{position:sticky;top:0;z-index:1;padding:11px 16px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint);background:var(--surface);border-bottom:1px solid var(--line)}
  .appt-row{display:grid;grid-template-columns:34px 76px 1.4fr 1.1fr 1fr auto 40px;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
  .appt-doc,.appt-loc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);min-width:0}
  .appt-doc svg,.appt-loc svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-faint)}
  .appt-doc span,.appt-loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* checkbox */
  .cbx-cell{display:flex;align-items:center;justify-content:center}
  .cbx{display:inline-flex}
  .cbx input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.6px solid var(--ink-faint);border-radius:5px;cursor:pointer;position:relative;transition:.12s;background:var(--surface)}
  .cbx input:checked{background:var(--app);border-color:var(--app)}
  /* tick is an SVG centred in the box — never hand-positioned */
  .cbx input:checked{background:var(--app) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
  /* bulk action bar */
  .bulkbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(16px);z-index:70;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:.22s var(--ease);max-width:calc(100vw - 40px);overflow-x:auto;scrollbar-width:none}
  .bulkbar::-webkit-scrollbar{height:0}
  .bulkbar .act{white-space:nowrap;flex:0 0 auto}
  .bulkbar.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
  .bb-count{font-size:13px;font-weight:650;color:var(--ink);margin-right:4px}
  .bb-clear{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .bb-clear:hover{background:var(--surface-2);color:var(--ink)}
  .bb-clear svg{width:16px;height:16px}
  /* date stepper */
  .date-nav{display:inline-flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:20px;padding:3px}
  .dn-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .dn-btn:hover{background:var(--surface);color:var(--ink)}
  .dn-btn svg{width:17px;height:17px}
  .dn-label{font-size:13px;font-weight:600;color:var(--ink);padding:0 6px;min-width:92px;text-align:center;white-space:nowrap}
  .appt-row:hover{background:var(--surface-2)}
  .appt-row.active{background:color-mix(in srgb,var(--app) 10%,transparent)}
  .appt-row-meet{border-left:3px solid #ec4899}
  .appt-row-meet.active{background:color-mix(in srgb,#ec4899 10%,transparent)}
  .appt-row-meet .appt-time{color:#ec4899}
  .appt-time{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .appt-name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appt-sub{font-size:12px;color:var(--ink-faint);margin-top:1px}
  /* week view */
  .week{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:auto}
  .wk-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));min-height:100%}
  .wk-col{border-right:1px solid var(--line)}
  .wk-col:last-child{border-right:0}
  .wk-day{position:sticky;top:0;z-index:1;background:var(--surface);padding:9px 6px;text-align:center;font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line)}
  .wk-day b{display:block;font-size:15px;color:var(--ink);margin-top:3px;font-weight:700}
  .wk-day.today b{color:#fff;background:var(--app);width:26px;height:26px;line-height:26px;border-radius:50%;margin:3px auto 0}
  .wk-events{padding:8px;display:flex;flex-direction:column;gap:8px}
  .wk-ev{background:color-mix(in srgb,var(--app) 12%,transparent);border-left:3px solid var(--app);border-radius:8px;padding:8px 9px;cursor:pointer;transition:background .12s,box-shadow .12s}
  .wk-ev:hover{background:color-mix(in srgb,var(--app) 20%,transparent)}
  .wk-ev.active{box-shadow:0 0 0 2px var(--app)}
  .wk-ev-time{font-size:11px;font-weight:700;color:var(--app)}
  /* meet & greets get a pink treatment on the combined calendar; regular appointments stay blue */
  .wk-ev-meet{background:color-mix(in srgb,#ec4899 14%,transparent);border-left-color:#ec4899}
  .wk-ev-meet:hover{background:color-mix(in srgb,#ec4899 22%,transparent)}
  .wk-ev-meet.active{box-shadow:0 0 0 2px #ec4899}
  .wk-ev-meet .wk-ev-time{color:#ec4899}
  .wk-ev-name{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wk-ev-type{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ltable.nm .lt-head,.ltable.nm .lt-row{grid-template-columns:1.5fr 1.3fr 92px 78px 98px 108px}
  .pill-status{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}
  .pill-status.active{color:#0e8f85;background:color-mix(in srgb,#0d9488 16%,transparent)}
  .pill-status.pending{color:#b0781a;background:color-mix(in srgb,#e0a020 22%,transparent)}
  .pill-status.refunded{color:var(--ink-soft);background:var(--surface-3)}
  .pill-status.done{color:var(--ink-soft);background:var(--surface-3)}
  .pill-status.danger{color:#c34a40;background:color-mix(in srgb,#e05a4e 16%,transparent)}
  .stripe-status{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:16px}
  .ss-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint)}
  .ss-dot.on{background:#0d9488}
  .hchip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:11px;white-space:nowrap}
  .hchip svg{width:13px;height:13px}
  .hchip.engaged{color:#3b6ef5;background:color-mix(in srgb,#3b6ef5 15%,transparent)}
  .hchip.resolved{color:#0e8f85;background:color-mix(in srgb,#0d9488 16%,transparent)}
  .hchip.handoff{color:#b0781a;background:color-mix(in srgb,#e0a020 22%,transparent)}
  .cx{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink)}
  .cx svg{width:13px;height:13px;color:var(--app)}
  .intent{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}

  /* left nav: scroll region + bottom-pinned group, submenu icons */
  .nav-scroll{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:0}
  .nav-bottom{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
  .sub-ico{width:22px;flex:0 0 auto;display:grid;place-items:center}
  .sub-ico svg{width:17px;height:17px}
  .sub-item.active{color:var(--app);font-weight:600;box-shadow:inset 2px 0 0 var(--app)}
  .nav-xlink{margin-top:8px}
  .nav-wave{height:8px;margin:8px 14px 14px;background:var(--app);opacity:.55;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='8'%3E%3Cpath%20d='M0%204%20Q5%201%2010%204%20T20%204'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center/20px 8px;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='8'%3E%3Cpath%20d='M0%204%20Q5%201%2010%204%20T20%204'%20fill='none'%20stroke='black'%20stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center/20px 8px}
  .nav-xtitle{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);padding:0 16px 1px}
  .nav-xitem{height:32px}
  .nav-ehr{height:38px;color:var(--app);font-weight:600}
  .nav-ehr svg{color:var(--app)}
  .nav-ehr:hover{background:color-mix(in srgb,var(--app) 12%,transparent)}
  /* Con conversations sidebar */
  .con-nav{padding:12px 8px;overflow-y:auto;height:100%;display:flex;flex-direction:column;gap:2px}
  .con-sec.collapsed .con-sub{display:none}
  .con-group-h{display:flex;align-items:center;gap:15px;width:100%;min-height:40px;flex:0 0 auto;padding:0 16px;border-radius:20px;font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;background:transparent;transition:background .13s,color .13s}
  .con-group-h:hover{background:var(--surface-2);color:var(--ink)}
  .con-group-h>svg{width:20px;height:20px;flex:0 0 auto;color:currentColor}
  .con-nav-item.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);font-weight:600}
  .con-gt{flex:1;min-width:0;text-align:left}
  .con-chev{display:inline-grid;place-items:center;transition:transform .15s}
  .con-chev svg{width:14px;height:14px;color:var(--ink-faint)}
  .con-sec.collapsed .con-chev{transform:rotate(-90deg)}
  .con-add{width:22px;height:22px;flex:0 0 auto;border-radius:6px;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;background:transparent}
  .con-add:hover{background:var(--line);color:var(--ink)}
  .con-add svg{width:14px;height:14px}
  .con-sub{margin:1px 0 6px 22px;padding-left:12px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
  .con-subitem{display:flex;align-items:center;gap:8px;min-height:32px;padding:5px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;position:relative;background:transparent}
  .con-subitem:hover{background:var(--surface-2);color:var(--ink)}
  .con-subitem.on{color:var(--app);font-weight:700}
  .con-subitem.on::before{content:'';position:absolute;left:-13px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--app)}
  .con-lbl{flex:1;min-width:0;text-align:left}
  .con-count{font-size:12px;color:var(--ink-faint);font-weight:600}
  .con-dim{color:var(--ink-faint);font-weight:600}
  .con-search{display:flex;align-items:center;gap:8px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:0 11px;margin:2px 8px 6px}
  .con-search svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 auto}
  .con-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:13px;color:var(--ink)}
  .con-empty{font-size:12.5px;color:var(--ink-faint);padding:6px 10px}
  /* Tas sidebar + task view */
  .con-flabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);padding:4px 12px 6px}
  .tas-fitem{cursor:pointer}
  .tas-fitem.on{background:var(--surface-2);color:var(--ink);font-weight:600}
  .tas-fitem .con-count{font-size:12px;color:var(--ink-faint);font-weight:600}
  .tas-sub{border-left:0;margin:1px 0 6px;padding-left:0;gap:2px}
  .tas-view{max-width:820px}
  .tas-vhead{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--ink);padding:2px 2px 14px}
  .tas-vhead svg{width:18px;height:18px;color:var(--ink-soft)}
  .tas-glbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);padding:12px 4px 4px;border-top:1px solid var(--line)}
  .tas-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
  .tas-check{width:20px;height:20px;flex:0 0 auto;border:1.6px solid var(--line);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:transparent}
  .tas-check.on{background:var(--app);border-color:var(--app)}
  .tas-check svg{width:12px;height:12px}
  .tas-t{font-size:14px;color:var(--ink);flex:1;min-width:0}
  .tas-t.done{text-decoration:line-through;color:var(--ink-faint)}
  .tas-row.tas-sub{padding-left:36px}
  .tas-row.tas-sub .tas-check{width:17px;height:17px}
  .tas-row.tas-sub .tas-t{font-size:13px}
  .tas-prog{width:60px;height:4px;border-radius:99px;background:var(--surface-2);flex:0 0 auto;overflow:hidden}
  .tas-prog i{display:block;height:100%;background:var(--app);border-radius:99px}
  .tas-prog-n{font-size:11px;color:var(--ink-faint);flex:0 0 auto;width:32px;text-align:right}
  .tas-add{display:flex;align-items:center;gap:12px;padding:11px 4px}
  .tas-add .tas-check{cursor:default}
  .tas-add input{flex:1;border:0;background:transparent;outline:none;font-size:14px;color:var(--ink)}
  .tas-add input::placeholder{color:var(--ink-faint)}
  /* Tas shared list + huddle */
  .tas-split{display:flex;gap:16px;height:100%;min-height:460px}
  .tas-main{flex:1;min-width:0;max-width:820px}
  .tas-huddle{width:320px;flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;overflow:hidden}
  .tas-hh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin-bottom:10px}
  .tas-people{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .tas-person{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink)}
  .tas-person .lt-av{width:26px;height:26px;font-size:11px}
  .tas-pn{flex:1;min-width:0}
  .tas-share-btn{display:flex;align-items:center;gap:8px;margin-top:6px;height:34px;padding:0 10px;border:1px dashed var(--line);border-radius:9px;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer}
  .tas-share-btn:hover{border-color:var(--app);color:var(--app)}
  .tas-share-btn svg{width:14px;height:14px}
  .tas-huddle-body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:2px 0}
  .hud-msg{display:flex;gap:9px}
  .hud-msg .lt-av{width:26px;height:26px;flex:0 0 auto;font-size:11px}
  .hud-bubble{flex:1;min-width:0}
  .hud-who{font-size:12px;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:baseline}
  .hud-who span{font-size:11px;font-weight:500;color:var(--ink-faint)}
  .hud-text{font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
  .tas-hcomposer{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .tas-hcomposer input{flex:1;min-width:0;height:38px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);padding:0 14px;font-size:13px;color:var(--ink);outline:none}
  .tas-hcomposer input:focus{border-color:var(--app)}
  .tas-hcomposer .vsend{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:0;background:var(--app-grad);color:#fff;display:grid;place-items:center;cursor:pointer}
  .tas-hcomposer .vsend svg{width:16px;height:16px}
  @media(max-width:1100px){.tas-huddle{display:none}}
  /* Rea outreach sequences */
  .rea-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .rea-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:16px;transition:.13s;cursor:pointer}
  .rea-card:hover{border-color:var(--app)}
  .rea-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .rea-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 13%,transparent);color:var(--app)}
  .rea-ic svg{width:16px;height:16px}
  .rea-name{font-size:15px;font-weight:700;color:var(--ink)}
  .rea-aud,.rea-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);margin-top:8px}
  .rea-aud svg,.rea-meta svg{width:14px;height:14px;color:var(--ink-faint);flex:0 0 auto}

  /* ============ AI Campaigns ============ */
  .camp-badge{display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:3px 9px;font-size:10.5px;font-weight:700;white-space:nowrap}
  .camp-badge svg{width:11px;height:11px}
  .camp-badge.b-green{background:var(--success-bg);color:var(--success)}
  .camp-badge.b-amber{background:var(--warning-bg);color:var(--warning)}
  .camp-badge.b-red{background:var(--danger-bg);color:var(--danger)}
  .camp-badge.b-blue{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .camp-badge.b-gray{background:var(--surface-3);color:var(--ink-soft)}
  .camp-spin{display:inline-block;width:11px;height:11px;border:2px solid color-mix(in srgb,var(--app) 30%,transparent);border-top-color:var(--app);border-radius:50%;animation:campspin .8s linear infinite}
  @keyframes campspin{to{transform:rotate(360deg)}}
  .camp-kpi.clickable{cursor:pointer}
  .camp-kpi.clickable:hover{background:var(--surface-2)}
  .camp-kpi.active{background:color-mix(in srgb,var(--app) 10%,transparent);box-shadow:inset 0 0 0 2px var(--app)}
  .camp-filterbar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-soft);background:color-mix(in srgb,var(--app) 10%,transparent);border-radius:100px;padding:6px 8px 6px 14px;margin-bottom:14px;width:fit-content}
  .camp-filterbar svg{color:var(--app)}
  .camp-progressbar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:0 0 14px}
  .camp-progressbar .fill{height:100%;background:var(--app);border-radius:999px;transition:width .4s}
  .camp-goals{margin-bottom:16px}
  .camp-goals-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:12px;flex-wrap:wrap}
  .camp-goals-head svg{color:var(--app)}
  .camp-goal-steps{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding-bottom:2px}
  .camp-goal{flex:1 1 0;min-width:150px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
  .camp-goal-arrow{display:flex;align-items:center;color:var(--ink-faint);flex:none}
  .cg-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .cg-ic{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);display:inline-grid;place-items:center;flex:none}
  .cg-n{font-size:10px;font-weight:700;color:var(--ink-faint)}
  .cg-l{font-size:12px;font-weight:650;color:var(--ink-soft)}
  .cg-v{font-size:22px;font-weight:750;color:var(--ink);line-height:1.2}
  .cg-v span{font-size:12px;font-weight:600;color:var(--ink-faint)}
  .cg-s{font-size:11px;color:var(--ink-faint)}
  .camp-goal-chips{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .camp-goal-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
  .camp-goal-num{width:18px;font-size:11px;font-weight:700;color:var(--ink-faint);text-align:center}
  .camp-chip-btn{cursor:pointer;gap:5px}
  .camp-chip-btn:hover{background:color-mix(in srgb,var(--app) 22%,transparent)}
  .camp-chip-btn svg{width:11px;height:11px}
  .camp-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .camp-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
  .camp-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  .camp-table tr:last-child td{border-bottom:none}
  .camp-table tbody tr:hover td{background:color-mix(in srgb,var(--app) 7%,transparent)}
  .camp-t-name{font-weight:650;color:var(--ink)}
  .camp-t-sub{color:var(--ink-faint);font-size:11px;margin-top:2px}
  .camp-hint{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-top:8px}
  .camp-det-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .camp-subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px}
  .camp-subtab{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:12.5px;font-weight:650;color:var(--ink-faint);border-bottom:2px solid transparent;margin-bottom:-1px}
  .camp-subtab svg{width:14px;height:14px}
  .camp-subtab.on{color:var(--app);border-bottom-color:var(--app)}
  .camp-subtab:hover{color:var(--ink)}
  .camp-aud-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer}
  .camp-aud-row:last-child{border-bottom:none}
  .camp-aud-info{flex:1;min-width:0}
  .camp-aud-name{font-weight:650;font-size:13px}
  .camp-aud-desc{color:var(--ink-faint);font-size:11px;margin-top:2px}
  .camp-tr-box{background:var(--surface-2);border-radius:12px;padding:12px 14px;margin:0 0 10px}
  .camp-tr-line{display:flex;gap:10px;padding:5px 0;font-size:12.5px;line-height:1.55}
  .camp-tr-line b{flex:none;width:46px;font-weight:600;color:var(--ink-faint)}
  .camp-tr-line.a b{color:var(--app)}

  /* wizard modal */
  .camp-wiz-card{--app:var(--app);width:min(960px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
  .camp-wiz-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .camp-wiz-ico{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);display:grid;place-items:center}
  .camp-wiz-ico svg{width:15px;height:15px}
  .camp-wiz-t{font-size:14px;font-weight:700}
  .camp-wiz-scroll{flex:1;overflow:auto;padding:20px 24px 30px}
  .camp-stepper{display:flex;align-items:center;margin:0 0 20px}
  .camp-step{display:flex;align-items:center;gap:8px}
  .camp-step-dot{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;background:var(--surface-3);color:var(--ink-faint);border:1.5px solid var(--line)}
  .camp-step.cur .camp-step-dot{background:var(--app);color:#fff;border-color:var(--app)}
  .camp-step.done .camp-step-dot{background:var(--success-bg);color:var(--success);border-color:var(--success)}
  .camp-step-lbl{font-size:11.5px;font-weight:650;color:var(--ink-faint)}
  .camp-step.cur .camp-step-lbl{color:var(--ink)}
  .camp-step.done .camp-step-lbl{color:var(--success)}
  .camp-step-line{flex:1;height:1.5px;background:var(--line);margin:0 12px;min-width:24px}
  .camp-wiz-foot{display:flex;gap:10px;margin-top:18px}
  .camp-wiz-foot .right{margin-left:auto;display:flex;gap:10px}
  .camp-upload-ok{display:flex;align-items:center;gap:8px;background:var(--success-bg);color:var(--success);border-radius:10px;padding:9px 13px;font-weight:650;font-size:12.5px;margin-bottom:12px}
  .camp-col-chips{display:flex;flex-wrap:wrap;gap:6px}
  .camp-chip{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--app) 12%,transparent);color:var(--app);border:1px solid color-mix(in srgb,var(--app) 30%,transparent);border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:700}
  .camp-src-tabs{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:11px;padding:4px;margin-bottom:14px}
  .camp-src-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:11.5px;font-weight:650;color:var(--ink-soft)}
  .camp-src-tab.on{background:var(--surface);color:var(--app);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .camp-filter-bar{display:flex;align-items:center;gap:10px;padding:2px 2px 12px;flex-wrap:wrap}
  .camp-filter-bar .input{height:36px;padding:0 12px;width:auto;flex:1 1 180px}
  .camp-sel-bar{display:flex;align-items:center;gap:16px;padding:2px 2px 12px;flex-wrap:wrap}
  .camp-chk{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:11.5px}
  .camp-chk input{width:14px;height:14px;accent-color:var(--app)}
  .camp-dropzone{border:2px dashed var(--line);border-radius:14px;background:var(--surface);padding:40px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
  .camp-dropzone:hover,.camp-dropzone.over{border-color:var(--app);background:color-mix(in srgb,var(--app) 6%,transparent)}
  .camp-dropzone svg{width:26px;height:26px;margin:0 auto 8px;color:var(--app)}
  .camp-dz-title{font-weight:650;font-size:13px}
  .camp-dz-sub{color:var(--ink-faint);font-size:11px;margin-top:4px}
  .camp-tgl{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--ink-soft);cursor:pointer}
  .camp-tgl input{display:none}
  .camp-tgl svg{width:13px;height:13px}
  .camp-tgl-track{width:32px;height:18px;border-radius:999px;background:var(--surface-3);position:relative;transition:background .15s;flex:none}
  .camp-tgl-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .camp-tgl.on{color:var(--app)}
  .camp-tgl.on .camp-tgl-track{background:var(--app)}
  .camp-tgl.on .camp-tgl-knob{left:16px}
  .camp-mod-sec{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
  .camp-mod-head{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-weight:650;font-size:11.5px}
  .camp-mod-head svg{width:13px;height:13px;color:var(--app)}
  .camp-mod-head .h-sub{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--ink-faint);font-size:10.5px}
  .camp-mod-body{padding:12px 14px}
  .camp-dev-wrap{display:flex;justify-content:center;padding:8px 0 4px}
  .camp-mod-split{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:16px;align-items:start}
  @media(max-width:900px){.camp-mod-split{grid-template-columns:1fr}}
  .camp-mailwin{width:100%;max-width:560px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.10)}
  .camp-mailwin-bar{display:flex;align-items:center;gap:6px;background:var(--surface-2);border-bottom:1px solid var(--line);padding:8px 12px}
  .camp-mw-dot{width:9px;height:9px;border-radius:50%}
  .camp-mw-dot.r{background:#f27b6c}.camp-mw-dot.y{background:#f5c04e}.camp-mw-dot.g{background:#61c46a}
  .camp-mw-title{margin-left:7px;font-size:10.5px;color:var(--ink-faint);font-weight:700}
  .camp-mail-subject{font-size:14px;font-weight:800;padding:13px 16px 6px}
  .camp-mail-meta{display:flex;align-items:flex-start;gap:9px;padding:8px 16px 11px;border-bottom:1px solid var(--line)}
  .camp-mail-avatar{width:30px;height:30px;border-radius:50%;background:var(--app);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none}
  .camp-mm-from{font-size:11.5px}
  .camp-mm-to{font-size:10.5px;color:var(--ink-faint);margin-top:2px}
  .camp-mm-time{font-size:10px;color:var(--ink-faint)}
  .camp-mail-body{padding:13px 16px 16px;font-size:11.5px;line-height:1.6;white-space:pre-wrap;color:var(--ink)}
  .camp-phone{width:270px;border:9px solid #1c2330;border-radius:34px;background:#1c2330;box-shadow:0 16px 38px rgba(0,0,0,.26)}
  .camp-phone-screen{background:var(--surface);border-radius:25px;overflow:hidden;display:flex;flex-direction:column;min-height:420px}
  .camp-sms-head{text-align:center;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
  .camp-sms-avatar{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
  .camp-sms-name{font-weight:700;font-size:11.5px;margin-top:5px}
  .camp-sms-num{font-size:9.5px;color:var(--ink-faint)}
  .camp-sms-thread{flex:1;padding:12px 12px 6px;background:var(--surface-2)}
  .camp-sms-date{text-align:center;font-size:9px;color:var(--ink-faint);margin-bottom:10px}
  .camp-sms-in{background:var(--surface-3);color:var(--ink);border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:11px;line-height:1.5;white-space:pre-wrap;max-width:92%}
  .camp-sms-delivered{font-size:9px;color:var(--ink-faint);margin:5px 0 0 6px}
  .camp-sms-inputbar{margin:8px 12px 12px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:10px;color:var(--ink-faint)}
  .camp-callscreen{background:linear-gradient(180deg,#16233c,#0a1526);color:#fff}
  .camp-call-head{text-align:center;padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .camp-call-avatar{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
  .camp-call-avatar svg{width:19px;height:19px;color:#9fd4a8}
  .camp-call-name{font-weight:700;font-size:12px;margin-top:8px}
  .camp-call-num{font-size:9.5px;color:rgba(255,255,255,.65);margin-top:2px}
  .camp-call-dur{font-size:10px;color:#9fd4a8;margin-top:4px}
  .camp-call-lines{flex:1;padding:12px 14px;overflow-y:auto;max-height:230px}
  .camp-call-line{display:flex;gap:8px;margin-bottom:9px}
  .camp-call-line .cl-t{font-size:9px;color:rgba(255,255,255,.5);flex:none;padding-top:3px;width:26px}
  .camp-call-line .cl-x{background:rgba(255,255,255,.10);border-radius:12px 12px 12px 4px;padding:8px 10px;font-size:10.5px;line-height:1.5}
  .camp-call-actions{display:flex;justify-content:center;gap:18px;padding:12px 0 16px}
  .camp-ca{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
  .camp-ca svg{width:15px;height:15px;color:#fff}
  .camp-ca.end{background:#d64545}
  .camp-ca.end svg{transform:rotate(135deg)}
  .camp-charcount{font-size:10px;color:var(--ink-faint);text-align:right;margin-top:4px}
  .camp-slash-menu{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:5px;z-index:300;display:none;max-height:220px;overflow-y:auto}
  .camp-slash-menu.show{display:block}
  .camp-slash-item{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:7px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
  .camp-slash-item svg{width:11px;height:11px;color:var(--app)}
  .camp-slash-item:hover,.camp-slash-item.on{background:color-mix(in srgb,var(--app) 10%,transparent);color:var(--app)}
  .camp-slash-hint{display:flex;align-items:center;gap:7px;margin:6px 0 12px}
  .camp-slash-hint kbd{flex:none;font-size:10px;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);border:1px solid color-mix(in srgb,var(--app) 30%,transparent);border-radius:5px;padding:1px 6px}
  .camp-slash-hint b{color:var(--ink-soft)}
  .camp-init-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
  @media(max-width:900px){.camp-init-grid{grid-template-columns:1fr}}
  .camp-stat-big{font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1.1}
  .camp-sched-card{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s,background .15s}
  .camp-sched-card:hover{border-color:color-mix(in srgb,var(--app) 40%,var(--line))}
  .camp-sched-card.on{border-color:var(--app);box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 14%,transparent);background:color-mix(in srgb,var(--app) 5%,transparent)}
  .camp-sc-ico{width:32px;height:32px;flex:none;border-radius:10px;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);display:inline-flex;align-items:center;justify-content:center}
  .camp-sc-ico svg{width:15px;height:15px}
  .camp-sc-t{font-weight:700;font-size:12.5px}
  .camp-sc-d{font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:3px}
  .camp-sc-radio{width:17px;height:17px;flex:none;border-radius:50%;border:2px solid var(--line);position:relative;margin-top:2px}
  .camp-sched-card.on .camp-sc-radio{border-color:var(--app)}
  .camp-sched-card.on .camp-sc-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--app)}
  .camp-sumrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:11.5px;color:var(--ink-soft)}
  .camp-disclose-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .camp-saved{display:inline-flex;align-items:center;gap:5px;color:var(--success);font-weight:700;font-size:11px;margin-left:10px}
  @media(max-width:720px){.camp-wiz-scroll{padding:16px}}

  /* Mem — member home */
  .mem-nav{padding:16px 10px;display:flex;flex-direction:column;gap:3px}
  .mem-me{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .mem-me-name{font-size:15px;font-weight:700;color:var(--ink)}
  .mem-me-sub{font-size:12px;color:var(--ink-faint)}
  .mem-nav-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);padding:2px 8px 6px}
  .mem-team{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:13.5px;color:var(--ink)}
  .mem-team:hover{background:var(--surface-2)}
  .mem-view{display:flex;gap:16px;height:100%;min-height:480px}
  .mem-main{flex:1;min-width:0;max-width:760px;overflow:auto}
  .mem-plan{border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--app) 12%,var(--surface)),var(--surface));padding:20px}
  .mem-plan-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .mem-plan-h{font-size:20px;font-weight:800;color:var(--ink)}
  .mem-plan-sub{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
  .mem-sec-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin:22px 2px 12px}
  .mem-cards{display:flex;flex-direction:column;gap:10px}
  .mem-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:14px 16px;transition:.13s}
  .mem-card:hover{border-color:var(--app)}
  .mem-card-ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .mem-card-ic svg{width:18px;height:18px}
  .mem-card-main{flex:1;min-width:0}
  .mem-card-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app)}
  .mem-card-t{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px}
  .mem-card-d{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .mem-card-btn{flex:0 0 auto;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:.13s}
  .mem-card-btn:hover{border-color:var(--app);color:var(--app)}
  .mem-card-btn.done{background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app);border-color:transparent}
  .mem-card.warn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
  .mem-card.warn .mem-card-ic{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .mem-card.warn .mem-card-tag{color:var(--accent)}
  .mem-chat{width:340px;flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .mem-chat-h{padding:16px 18px;border-bottom:1px solid var(--line)}
  .mem-chat-t{font-size:15px;font-weight:700;color:var(--ink)}
  .mem-chat-sub{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .mem-chat-body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:16px 18px}
  .mem-composer{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
  .mem-composer input{flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);padding:0 15px;font-size:13px;color:var(--ink);outline:none}
  .mem-composer input:focus{border-color:var(--app)}
  .mem-composer .vsend{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:0;background:var(--app-grad);color:#fff;display:grid;place-items:center;cursor:pointer}
  .mem-composer .vsend svg{width:16px;height:16px}
  .mem-page{max-width:1000px}
  .mem-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
  .mem-chat-full{width:100%;max-width:720px;height:calc(100vh - 200px);min-height:420px}
  .mem-plan-card{max-width:420px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--app) 14%,var(--surface)),var(--surface));padding:22px}
  .mem-plan-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--app);background:color-mix(in srgb,var(--app) 15%,transparent);padding:4px 10px;border-radius:20px}
  .mem-plan-name{font-size:15px;color:var(--ink-soft);margin-top:12px}
  .mem-plan-price{font-size:34px;font-weight:800;color:var(--ink);margin-top:2px}
  .mem-plan-price span{font-size:15px;font-weight:600;color:var(--ink-faint)}
  .mem-plan-renew{font-size:13px;color:var(--ink-soft);margin:6px 0 16px}
  @media(max-width:1080px){.mem-chat{display:none}}
  /* Product splash (first visit) */
  .splash-overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;overflow:auto;padding:24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s var(--ease)}
  .splash-overlay.on{display:grid;opacity:1}
  .splash-card{width:min(760px,96vw);background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 40px 120px rgba(0,0,0,.4);padding:44px 40px;text-align:center;animation:splashIn .35s var(--ease)}
  @keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .splash-ico{width:64px;height:64px;margin:0 auto;border-radius:18px;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 26px color-mix(in srgb,var(--app) 40%,transparent)}
  .splash-ico svg{width:30px;height:30px}
  .splash-ico img{width:100%;height:100%;display:block}
  .splash-title{font-size:30px;font-weight:800;color:var(--ink);margin-top:18px}
  .splash-tag{font-size:15px;color:var(--ink-soft);margin-top:6px}
  .splash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
  .splash-feat{text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:16px 18px}
  .sf-t{font-size:15px;font-weight:700;color:var(--ink)}
  .sf-d{font-size:13px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
  .splash-go{margin:0 auto;justify-content:center;min-width:200px;background:var(--app-grad);color:#fff}
  .splash-skip{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink-faint);font-size:13px;cursor:pointer}
  .splash-skip:hover{color:var(--ink-soft)}
  body.splash-open .app-shell{filter:blur(2px)}
  body.wb-open .app-shell{filter:blur(2px)}
  /* ---- While you were gone: full-screen frosted takeover, not a popup ---- */
  .wb-overlay{position:fixed;inset:0;z-index:220;display:none;overflow:hidden;
    background:color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
  .wb-overlay.on{display:flex;align-items:center;justify-content:center}
  .wb-confetti-layer{position:absolute;inset:0;pointer-events:none}
  .wb-confetti{position:absolute;top:-5vh;border-radius:2px;opacity:0}
  .wb-overlay.on .wb-confetti{animation:wbFall linear forwards}
  @keyframes wbFall{0%{transform:translateY(0) rotate(0deg);opacity:.95}100%{transform:translateY(115vh) rotate(600deg);opacity:0}}
  .wb-content{position:relative;z-index:2;text-align:center;max-width:760px;width:100%;padding:40px 32px;animation:wbPop .5s var(--ease) both}
  @keyframes wbPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
  .wb-ico-hero{width:72px;height:72px;margin:0 auto;border-radius:20px;display:grid;place-items:center;background:var(--app-grad);color:#fff;box-shadow:0 14px 34px color-mix(in srgb,var(--app) 45%,transparent)}
  .wb-ico-hero svg{width:32px;height:32px}
  .wb-title{font-size:32px;font-weight:800;color:var(--ink);margin-top:20px;letter-spacing:-.5px}
  .wb-tag{font-size:15px;color:var(--ink-soft);margin-top:8px}
  .wb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0}
  .wb-stat{text-align:center;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:16px;
    background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(8px);padding:18px 10px}
  .wb-stat .wb-ico{width:34px;height:34px;margin:0 auto 10px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app)}
  .wb-num{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
  .wb-lbl{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.3}
  .wb-go{margin:0 auto;justify-content:center;min-width:200px;background:var(--app-grad);color:#fff}
  @media(max-width:640px){.wb-grid{grid-template-columns:1fr 1fr}.wb-title{font-size:25px}}
  @media(max-width:640px){.splash-card{padding:32px 22px;border-radius:20px}.splash-grid{grid-template-columns:1fr;gap:10px;margin:22px 0}.splash-title{font-size:25px}}
  .ma-short{display:none}
  /* ===== Responsive: stack signature split views on small screens ===== */
  @media(max-width:900px){
    .con-view,.tas-split,.mem-view{flex-direction:column;height:auto;min-height:0}
    .con-list{width:auto;max-height:none}
    .con-info{display:none}
    .con-chat,.tas-main,.tas-huddle,.mem-main,.mem-chat{width:auto}
    .tas-huddle,.mem-chat{max-width:none}
    .chatpane.mode-split{flex-direction:column}
    .chatpane.mode-split .gutter{display:none}
    .chatpane.mode-split .vchat,.chatpane.mode-split .lead-detail,.chatpane.mode-split #contactdetail{width:auto!important;min-height:420px}
    .rea-list,.mem-cards-grid,.splash-grid{grid-template-columns:1fr}
    #memActions{flex-wrap:nowrap;gap:6px}
    #memActions .btn-new{height:36px;padding:0 14px;font-size:13px;white-space:nowrap}
    .ma-full{display:none}.ma-short{display:inline}
  }
  .con-add svg{width:14px;height:14px}
  /* Con 3-pane communication view */
  .con-view{display:flex;gap:14px;height:100%;min-height:440px}
  .con-list{width:280px;flex:0 0 auto;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:6px}
  .con-conv{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;background:transparent}
  .con-conv:hover{background:var(--surface-2)} .con-conv.on{background:var(--surface-2)}
  .con-conv-main{flex:1;min-width:0}
  .con-conv-name{font-size:13.5px;font-weight:600;color:var(--ink)}
  .con-conv-last{font-size:12px;color:var(--ink-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .con-chat{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;overflow:hidden}
  .con-info{width:300px;flex:0 0 auto;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
  .con-info-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .con-info-name{font-size:16px;font-weight:700;color:var(--ink)}
  .con-info-sec{padding:16px 0;border-bottom:1px solid var(--line)}
  .con-info-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin-bottom:10px}
  .con-info-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0}
  .con-info-row span{color:var(--ink-soft)} .con-info-row b{color:var(--ink);font-weight:600;text-align:right}
  @media(max-width:1200px){.con-info{display:none}}
  /* Con new-group modal */
  .cg-overlay{position:fixed;inset:0;z-index:118;display:none;place-items:center;padding:26px;background:rgba(10,12,18,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s var(--ease)}
  .cg-overlay.on{display:grid;opacity:1}
  .cg-card{--app:#7c3aed;width:min(460px,94vw);max-height:82vh;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
  .cg-head{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
  .cg-t{flex:1;font-size:16px;font-weight:700;color:var(--ink)}
  .cg-head .mh-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .cg-body{flex:1;overflow:auto;padding:16px 18px}
  .cg-name{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:0 14px;font-size:14px;color:var(--ink);outline:none;margin-bottom:14px}
  .cg-name:focus{border-color:var(--app)}
  .cg-people{display:flex;flex-direction:column;gap:2px}
  .cg-person{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer}
  .cg-person:hover{background:var(--surface-2)}
  .cg-person svg{width:16px;height:16px;color:var(--ink-soft);flex:0 0 auto}
  .cg-pname{flex:1;font-size:13.5px;color:var(--ink)}
  .cg-ptag{font-size:11px;font-weight:600;color:var(--ink-faint);background:var(--surface-2);padding:3px 8px;border-radius:8px}
  .cg-foot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
  .cg-count{flex:1;font-size:12.5px;color:var(--ink-faint)}

  /* ============ CHIEF (in right dock) ============ */
  .chief-dock{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:2px}
  .chief-msgs{flex:1;display:flex;flex-direction:column;gap:10px;overflow:auto;padding:6px 2px 10px}
  .msg{max-width:88%;font-size:13px;line-height:1.5;padding:10px 13px;border-radius:14px}
  .msg.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink)}
  .msg.me{align-self:flex-end;background:var(--app-grad);color:#fff}
  .chief-suggest{display:flex;gap:8px;padding:0 0 10px;flex-wrap:wrap}
  .chief-suggest button{font-size:12px;padding:7px 12px;border-radius:16px;background:var(--surface-2);color:var(--ink-soft);transition:background .14s}
  .chief-suggest button:hover{background:var(--surface-3);color:var(--ink)}
  .chief-bar{display:flex;align-items:center;gap:10px;padding:0 6px 0 14px;height:48px;border-radius:24px;background:var(--surface-2);border:1px solid var(--line);transition:border-color .15s}
  .chief-bar:focus-within{border-color:var(--app)}
  .chief-bar .cb-ico{color:var(--app);flex:0 0 auto;display:flex}
  .chief-bar .cb-ico svg{width:18px;height:18px}
  .chief-bar input{flex:1;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
  .chief-bar input::placeholder{color:var(--ink-faint)}
  .chief-send{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--app-grad);color:#fff;display:grid;place-items:center}
  .chief-send svg{width:17px;height:17px;stroke-width:2.2}
  .pulse{width:8px;height:8px;border-radius:50%;background:#3b6ef5;box-shadow:0 0 0 0 rgba(59,110,245,.5);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,110,245,.5)}70%{box-shadow:0 0 0 7px rgba(59,110,245,0)}100%{box-shadow:0 0 0 0 rgba(59,110,245,0)}}

  /* ============ CHIEF INTELLIGENCE OUTCOME (Summary/Understanding/Evidence/Foresight/Recommendation/Decision) ============ */
  .chief-digest{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;max-width:96%}
  .chief-digest-t{font-size:12.5px;font-weight:700;color:var(--ink)}
  .chief-digest-row{display:flex;align-items:center;gap:9px;text-align:left;padding:9px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
  .chief-digest-row:hover{border-color:var(--app)}
  .cdr-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .cdr-dot.cdr-high{background:#c62828}
  .cdr-dot.cdr-medium{background:#c99a1e}
  .cdr-dot.cdr-low{background:#5f6368}
  .cdr-name{font-size:12.5px;font-weight:700;color:var(--ink);flex:0 0 auto}
  .cdr-reason{font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chief-outc{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;max-width:96%;font-size:13px}
  .chief-outc-hd{display:flex;align-items:center;gap:8px;font-family:'Fustat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:12px}
  .chief-outc-sec{padding:12px 0;border-top:1px dashed var(--line)}
  .chief-outc-sec:first-of-type{border-top:0;padding-top:0}
  .chief-outc-lbl{font-family:'Fustat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.07em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px}
  .chief-outc-sum{color:var(--ink);line-height:1.55}
  .chief-outc-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  .chief-outc-checks li{display:flex;align-items:flex-start;gap:8px;color:var(--ink);line-height:1.4}
  .chief-outc-checks li svg{flex:0 0 auto;margin-top:2px;color:var(--ink-soft)}
  .chief-outc-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
  .chief-outc-row span{color:var(--ink-soft)}
  .chief-outc-row b{font-size:18px;color:var(--ink)}
  .chief-outc-of{font-size:11px;font-weight:500;color:var(--ink-faint);margin-left:1px}
  .chief-bar-track{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
  .chief-bar-fill{height:100%;background:var(--ink);border-radius:2px}
  .chief-outc-note{font-family:'Fustat',sans-serif;font-size:10.5px;color:var(--ink-faint);margin-top:6px}
  .chief-outc-quote{margin:0 0 12px;padding:2px 0 2px 12px;border-left:2px solid var(--app);font-family:'Fustat',sans-serif;font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink)}
  .chief-outc-quote cite{display:block;margin-top:6px;font-family:'Fustat',sans-serif;font-style:normal;font-size:10.5px;color:var(--ink-faint)}
  .chief-outc-rec{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:9px}
  .chief-outc-ifnot{margin-top:10px;font-size:12px;color:var(--ink-soft);line-height:1.5}
  .chief-outc-ifnot b{color:var(--ink)}
  .chief-outc-level{font-family:'Fustat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:6px 12px;display:inline-block;margin-bottom:10px}
  .chief-outc-level.done{color:var(--chief-ok-ink);border-color:var(--chief-ok-ink)}
  .chief-outc-level.rejected{color:var(--chief-bad-ink);border-color:var(--chief-bad-ink)}
  .chief-outc-acts{display:flex;gap:8px;flex-wrap:wrap}
  .chief-act{font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:12px}
  .chief-act.ok{background:var(--chief-ok-bg);color:var(--chief-ok-ink)}
  .chief-act.warn{background:var(--chief-warn-bg);color:var(--chief-warn-ink)}
  .chief-act.bad{background:var(--chief-bad-bg);color:var(--chief-bad-ink)}
  .chief-act:hover{filter:brightness(0.96)}
  .chief-outc-modify{width:100%;min-height:60px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;padding:9px 11px;margin-bottom:10px}
  .chief-exec-line{display:flex;align-items:center;gap:8px;color:var(--chief-ok-ink);font-weight:600;margin-bottom:6px}
  .chief-exec-line svg{flex:0 0 auto}
  .chief-exec-path{font-family:'Fustat',sans-serif;font-size:10.5px;color:var(--ink-faint)}
  .chief-outc-empty .chief-outc-sum{color:var(--ink-soft);font-style:italic}
  .chief-canvas{padding:14px;overflow:auto;flex:1}
  .chief-panetabs{gap:6px}
  .chief-panetab{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);padding:7px 12px;border-radius:14px}
  .chief-panetab svg{width:14px;height:14px}
  .chief-panetab:hover{background:var(--surface-2);color:var(--ink)}
  .chief-panetab.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .chief-panetab .chief-dot{width:6px;height:6px;border-radius:50%;background:#c62828;margin-left:2px}

  /* compact "Chief found something" preview bubble in chat — expands into the parallel viewer pane */
  .chief-outc-preview{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:8px}
  .chief-outc-preview-top{display:flex;align-items:center;gap:8px}
  .chief-outc-preview-top b{font-size:13px;color:var(--ink)}
  .chief-outc-preview-lvl{margin-left:auto;font-family:'Fustat',sans-serif;font-size:10px;color:var(--ink-faint);border:1px solid var(--line);border-radius:10px;padding:2px 8px}
  .chief-outc-preview-sum{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  .chief-outc-preview-btn{display:flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);border-radius:10px;padding:7px 11px}
  .chief-outc-preview-btn:hover{background:color-mix(in srgb,var(--app) 20%,transparent)}
  .chief-outc-preview-btn svg{width:14px;height:14px}

  /* execution timeline shown after Approve/Modify — Chief → Agent → Automation → Verified */
  .chief-exec-timeline{display:flex;flex-direction:column;gap:0;margin-top:2px}
  .chief-exec-step{display:flex;gap:10px;position:relative;padding-bottom:16px;opacity:0;transform:translateY(4px);animation:chiefStepIn .32s var(--ease) forwards}
  .chief-exec-step:last-child{padding-bottom:0}
  .chief-exec-step::before{content:'';position:absolute;left:9px;top:20px;bottom:0;width:1px;background:var(--line)}
  .chief-exec-step:last-child::before{display:none}
  .chief-exec-step .cet-ico{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--chief-ok-bg);color:var(--chief-ok-ink);display:grid;place-items:center;z-index:1}
  .chief-exec-step .cet-ico svg{width:11px;height:11px}
  .chief-exec-step .cet-t{font-size:12.5px;font-weight:700;color:var(--ink)}
  .chief-exec-step .cet-d{font-size:11.5px;color:var(--ink-faint);margin-top:1px}
  @keyframes chiefStepIn{to{opacity:1;transform:translateY(0)}}

  /* Master Outcome Library — "/" command palette in the Chief dock input */
  .chief-inputwrap{position:relative}
  .chief-palette{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;max-height:264px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.16);padding:6px;z-index:5}
  .chief-palette-grp{font-family:'Fustat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.07em;color:var(--ink-faint);text-transform:uppercase;padding:9px 10px 4px}
  .chief-palette-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:9px;font-size:13px;color:var(--ink);text-align:left}
  .chief-palette-row:hover,.chief-palette-row.hi{background:var(--surface-2)}
  .chief-palette-row .cpr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chief-palette-row .cpr-fee{font-size:11px;color:var(--ink-faint);flex:0 0 auto}
  .chief-palette-empty{padding:14px 10px;font-size:12.5px;color:var(--ink-faint)}

  /* Master Outcome Library execution trail — reuses .chief-exec-timeline for the same visual grammar */
  .chief-trail{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px 14px 11px;max-width:96%}
  .chief-trail-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Fustat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:11px}
  .chief-trail-fee{padding:3px 9px;border-radius:10px;background:var(--surface-3);color:var(--ink-soft);font-size:10.5px;text-transform:none;letter-spacing:0;flex:0 0 auto}

  /* ambient "Chief is working" one-liner in the topbar */
  .chief-activity{display:flex;align-items:center;gap:7px;margin-left:10px;padding:6px 11px 6px 9px;border-radius:14px;background:var(--surface-2);max-width:240px;min-width:0}
  .chief-activity-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--app);box-shadow:0 0 0 0 color-mix(in srgb,var(--app) 50%,transparent);animation:pulse 2.4s infinite}
  .cact-text{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s var(--ease)}
  @media(max-width:1000px){.chief-activity{display:none}}

  .nav-drop-btn{display:none}
  .nav-scrim{display:none}
  @media (max-width:820px){
    .login-card{grid-template-columns:1fr;height:auto;max-height:100%;overflow:auto}
    .rail{display:none}
    /* Search collapses to an icon button */
    .search{width:42px;flex:0 0 auto;padding:0;justify-content:center;border-radius:50%;height:42px}
    .search input,.search kbd{display:none}
    /* Left nav becomes a slide-out drawer opened from the hamburger button, docked BELOW
       the topbar (top:var(--topbar-h), not top:0) so the drawer never covers the Frontly
       logo/identity or the current screen title — the topbar stays fully visible above it. */
    .nav-drop-btn{display:grid;order:-1}
    .leftnav{position:fixed;top:var(--topbar-h);bottom:0;left:0;width:min(300px,84vw);max-height:none;overflow:auto;
      background:var(--surface);border-right:1px solid var(--line);border-radius:0 0 20px 0;box-shadow:0 24px 60px rgba(0,0,0,.34);
      padding-top:14px;
      z-index:150;transform:translateX(-100%);pointer-events:none;transition:transform .26s var(--ease)}
    body.nav-drop .leftnav{transform:translateX(0);pointer-events:auto}
    /* Scrim also starts below the topbar, so the topbar (incl. the hamburger toggle) stays
       tappable/visible while the drawer is open — no need to fight it with z-index tricks. */
    .nav-scrim{display:block;position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;z-index:140;background:rgba(0,0,0,.42);
      opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
    body.nav-drop .nav-scrim{opacity:1;pointer-events:auto}
  }

  /* ===== Get Started nav item ===== */
  .nav-getstarted{margin-top:6px;color:var(--app);font-weight:600;background:color-mix(in srgb,var(--app) 8%,transparent)}
  .nav-getstarted svg{color:var(--app)}
  .nav-getstarted:hover{background:color-mix(in srgb,var(--app) 15%,transparent);color:var(--app)}
  .nav-getstarted.active{background:color-mix(in srgb,var(--app) 18%,transparent)}

  /* ===== Get Started screen ===== */
  .gs-wrap{max-width:760px}
  .gs-hero{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);
    background:linear-gradient(120deg,color-mix(in srgb,var(--app) 12%,var(--surface)),var(--surface));margin-bottom:18px}
  .gs-hi{width:46px;height:46px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:var(--app-grad);color:#fff}
  .gs-hi svg{width:24px;height:24px;stroke-width:2}
  .gs-htitle{font-size:17px;font-weight:700;color:var(--ink)}
  .gs-hsub{font-size:12.5px;color:var(--ink-soft);margin:3px 0 10px}
  .gs-bar{height:7px;border-radius:6px;background:var(--surface-3);overflow:hidden}
  .gs-fill{height:100%;border-radius:6px;background:var(--app);transition:width .4s var(--ease)}
  .gs-pct{font-size:20px;font-weight:700;color:var(--app);flex:0 0 auto}
  .gs-steps{display:flex;flex-direction:column;gap:10px}
  .gs-step{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border .15s,box-shadow .15s}
  .gs-step.is-next{border-color:color-mix(in srgb,var(--app) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 10%,transparent)}
  .gs-step.is-done{opacity:.8}
  .gs-mark{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink-faint);font-size:12.5px;font-weight:700}
  .gs-step.is-done .gs-mark{background:var(--app);border-color:var(--app);color:#fff}
  .gs-step.is-next .gs-mark{border-color:var(--app);color:var(--app)}
  .gs-mark svg{width:15px;height:15px;stroke-width:2.4}
  .gs-ico{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft)}
  .gs-body{flex:1;min-width:0}
  .gs-t{font-size:14px;font-weight:600;color:var(--ink)}
  .gs-d{font-size:12px;color:var(--ink-faint);margin-top:2px}
  /* ---- Setup Frontly: full split view ---- */
  .gs-split{flex:1;display:grid;grid-template-columns:340px 1fr;gap:20px;min-height:0}
  .gs-split-left{overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:6px}
  .gs-split-step{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface);transition:border .14s,background .14s}
  .gs-split-step:hover{background:var(--surface-2)}
  .gs-split-step.active{border-color:var(--app);box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 12%,transparent);background:color-mix(in srgb,var(--app) 6%,var(--surface))}
  .gs-split-step.is-done{opacity:.7}
  .gs-split-right{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:36px}
  .gs-panel{max-width:520px;margin:0 auto;text-align:center}
  .gs-panel-ico{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:var(--app-grad);color:#fff;display:grid;place-items:center}
  .gs-panel-t{font-size:20px;font-weight:700;color:var(--ink)}
  .gs-panel-d{font-size:14px;color:var(--ink-soft);margin-top:6px}
  .gs-panel-placeholder{margin-top:32px;padding:40px 20px;border:1.5px dashed var(--line);border-radius:14px;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px}
  .gs-panel-placeholder svg{width:28px;height:28px}
  @media(max-width:820px){.gs-split{grid-template-columns:1fr}}
  .gs-btn{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;height:34px;padding:0 14px;border-radius:18px;font-size:13px;font-weight:600;
    background:var(--surface-2);color:var(--ink);border:1px solid var(--line);cursor:pointer;transition:filter .13s,background .13s}
  .gs-btn svg{width:15px;height:15px}
  .gs-btn:hover{background:var(--surface-3)}
  .gs-btn.primary{background:var(--app-grad);color:#fff;border-color:transparent}
  .gs-btn.primary:hover{filter:brightness(1.06)}
  .gs-btn.done{background:transparent;border-color:transparent;color:var(--ink-faint);cursor:default}

  /* ===== Settings menu extras ===== */
  .pop-hint{margin-left:auto;font-size:10.5px;color:var(--ink-faint);font-weight:600}
  .pop-item.danger{color:#c34a40}
  .pop-item.danger:hover{background:color-mix(in srgb,#e05a4e 12%,transparent);color:#c34a40}

  /* ===== Subscription screen ===== */
  .sub-wrap{max-width:760px}
  .sub-plan{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
  .sub-plan-l{flex:1;min-width:200px}
  .sub-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);padding:4px 10px;border-radius:20px}
  .sub-badge svg{width:14px;height:14px}
  .sub-amt{font-size:26px;font-weight:700;color:var(--ink);margin-top:8px}
  .sub-amt span{font-size:14px;font-weight:500;color:var(--ink-faint)}
  .sub-note{font-size:12px;color:var(--ink-faint);margin-top:3px}
  .sub-plan-r{display:flex;gap:8px}
  .sub-cards{display:flex;flex-direction:column;gap:12px}
  .sub-card{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
  .sub-ch{display:flex;align-items:center;gap:12px}
  .sub-ch svg{width:22px;height:22px;color:var(--app)}
  .sub-ct{font-size:14px;font-weight:600;color:var(--ink)}
  .sub-cd{font-size:12px;color:var(--ink-faint)}
  .sub-price{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .sub-meter{height:7px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin:14px 0 6px}
  .sub-mfill{height:100%;border-radius:6px;background:var(--app)}
  .sub-usage{font-size:12px;color:var(--ink-faint)}
  .sub-stepper{display:flex;align-items:center;gap:10px;margin-top:14px}
  .st-btn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer}
  .st-btn svg{width:15px;height:15px}
  .st-btn:hover{background:var(--surface-3)}
  .st-val{min-width:26px;text-align:center;font-size:15px;font-weight:700;color:var(--ink)}

  /* ===== Settings split view ===== */
  .set-split{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
  .set-nav{display:flex;flex-direction:column;gap:3px}
  .set-nav-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-faint);margin:2px 8px 8px}
  /* match the app's main side nav exactly: spacing + rounded (capsule) selected state */
  .set-navitem{display:flex;align-items:center;gap:15px;padding:0 16px;height:40px;border-radius:20px;color:var(--ink-soft);font-size:14px;font-weight:500;cursor:pointer;transition:background .13s,color .13s}
  .set-navitem svg{width:20px;height:20px;flex:0 0 auto}
  .set-navitem:hover{background:var(--surface-2);color:var(--ink)}
  .set-navitem.active{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);font-weight:600}
  .set-signout{display:flex;align-items:center;gap:15px;margin-top:auto;padding:0 16px;height:40px;border-radius:20px;color:#c34a40;font-size:14px;font-weight:500;cursor:pointer;transition:background .13s}
  .set-signout svg{width:20px;height:20px;flex:0 0 auto}
  .set-signout:hover{background:color-mix(in srgb,#e05a4e 12%,transparent)}
  .set-inrow{padding:8px 0}
  .set-inl{display:block;font-size:12px;color:var(--ink-faint);font-weight:600;margin-bottom:6px}
  .set-input{width:100%}
  /* settings submenu (e.g. Channels) */
  .set-grouphd .set-caret{margin-left:auto;display:grid;place-items:center;color:var(--ink-faint);opacity:0;transition:transform .22s var(--ease),opacity .13s}
  .set-grouphd:hover .set-caret,.set-caret:focus-visible{opacity:1}
  .set-grouphd .set-caret svg{width:16px;height:16px}
  .set-grouphd.open .set-caret{transform:rotate(180deg)}
  .set-sub{max-height:0;overflow:hidden;transition:max-height .28s var(--ease);margin:2px 0 2px 26px;border-left:1px solid var(--line)}
  .set-sub.open{max-height:260px}
  .set-subitem{padding:0 16px;height:36px;display:flex;align-items:center;font-size:13.5px;color:var(--ink-soft);cursor:pointer;border-radius:18px;transition:background .12s,color .12s}
  .set-subitem:hover{background:var(--surface-2);color:var(--ink)}
  .set-subitem:hover{background:var(--surface-2);color:var(--ink)}
  .set-subitem.active{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);font-weight:600}
  .set-pane{min-width:0}
  .set-pane-h{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
  @media (max-width:820px){.set-split{grid-template-columns:1fr}}
  /* settings form controls (Google-Drive-style, our tokens) */
  .set-form{max-width:640px}
  .set-sec{padding:18px 0;border-bottom:1px solid var(--line)}
  .set-sec:first-child{padding-top:0}
  .set-sec:last-child{border-bottom:0}
  .set-sec-h{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
  .set-opt{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:13.5px;color:var(--ink);cursor:pointer;user-select:none}
  .set-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-faint);flex:0 0 auto;position:relative;transition:border-color .13s}
  .set-radio.on{border-color:var(--app)}
  .set-radio.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--app)}
  .set-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--ink-faint);flex:0 0 auto;position:relative;transition:.13s}
  .set-check.on{background:var(--app) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--app)}
  .set-row{display:flex;align-items:center;gap:14px;padding:10px 0}
  .set-rc{flex:1;min-width:0}
  .set-rl{font-size:13.5px;color:var(--ink);font-weight:500}
  .set-rd{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .set-rv{font-size:13px;color:var(--ink-soft);margin-left:auto}
  .set-switch{width:40px;height:23px;border-radius:20px;background:var(--surface-3);position:relative;flex:0 0 auto;transition:background .16s;cursor:pointer}
  .set-switch::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .16s}
  .set-switch.on{background:var(--app)}
  .set-switch.on::after{transform:translateX(17px)}
  .set-select{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}
  .set-select svg{width:15px;height:15px}
  .set-link{font-size:13px;font-weight:600;color:var(--app);padding:8px 0;cursor:pointer;background:none;text-align:left}

  /* ===== Settings — Nova-style detail pages (Profile/Org/Team/Billing/Agents) ===== */
  .pg-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-faint);margin-bottom:4px}
  .pg-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
  .pg-h1{font-size:24px;font-weight:700;color:var(--ink);line-height:1.25}
  .pg-sub{font-size:13px;color:var(--ink-faint);margin-top:4px}
  .pg-topbar-r{display:flex;gap:8px;flex:0 0 auto;padding-top:2px}
  .pg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:16px;overflow:hidden}
  .pg-card-pad{padding:20px 22px}
  .pg-card-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-faint);margin-bottom:4px}
  .pg-card-d{font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
  .pg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .pg-field{display:flex;flex-direction:column;gap:6px}
  .pg-field label{font-size:12.5px;color:var(--ink-soft);font-weight:500}
  .pg-field .input,.pg-field select{width:100%}
  .pg-actions{display:flex;gap:10px;margin-top:18px}
  .pg-btn{height:36px;padding:0 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);white-space:nowrap}
  .pg-btn:hover{background:var(--surface-3)}
  .pg-btn svg{width:15px;height:15px}
  .pg-btn.dark{background:var(--app-grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-1)}
  .pg-btn.dark:hover{filter:brightness(1.05);box-shadow:var(--shadow-2)}
  .pg-btn.danger{background:#e0574a;color:#fff;border-color:#e0574a}
  .pg-btn.danger:hover{background:#c94a3f}
  .pg-btn.ghost{background:transparent}
  .pg-btn:disabled{opacity:.5;cursor:default}
  .pg-avstrip{background:var(--surface-3);height:56px}
  .pg-avrow{display:flex;align-items:center;gap:14px;padding:16px 22px 20px;margin-top:-28px}
  .pg-avatar{width:56px;height:56px;border-radius:50%;background:var(--app-grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;border:3px solid var(--surface);flex:0 0 auto}
  .pg-avname{font-size:15px;font-weight:700;color:var(--ink)}
  .pg-avemail{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
  .pg-orglogo-row{display:flex;align-items:center;gap:16px;padding:20px 22px}
  .pg-orglogo{width:60px;height:60px;border-radius:14px;position:relative;flex:0 0 auto;background:conic-gradient(from 180deg,var(--app),color-mix(in srgb,var(--app) 40%,#fff),#997E76,var(--app))}
  .pg-orglogo-del{position:absolute;left:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:#fceceb;color:#c94a3f;display:grid;place-items:center;cursor:pointer;border:2px solid var(--surface)}
  .pg-orglogo-del svg{width:13px;height:13px}
  .pg-orgname{font-size:15px;font-weight:700;color:var(--ink)}
  .pg-orgid{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .pg-swrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px}
  .pg-sw{width:30px;height:30px;border-radius:8px;cursor:pointer;flex:0 0 auto;border:2px solid transparent}
  .pg-sw.on{border-color:var(--ink)}
  .pg-sw-custom{width:30px;height:30px;border-radius:8px;flex:0 0 auto;border:1px solid var(--line)}
  .pg-sw-shuffle{margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .pg-sw-shuffle svg{width:15px;height:15px}
  .pg-utabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px}
  .pg-utab{padding:10px 0 12px;font-size:13.5px;font-weight:600;color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .pg-utab.on{color:var(--ink);border-color:var(--ink)}
  .pg-ptabs{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px;margin-bottom:20px}
  .pg-ptab{height:30px;padding:0 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center}
  .pg-ptab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
  .pg-alert{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px dashed #e0a020;background:color-mix(in srgb,#e0a020 10%,transparent);border-radius:var(--r-md);flex-wrap:wrap}
  .pg-alert-ic{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,#e0a020 18%,transparent);color:#b0781a;display:grid;place-items:center;flex:0 0 auto}
  .pg-alert-ic svg{width:18px;height:18px}
  .pg-alert-t{font-size:13.5px;font-weight:700;color:var(--ink)}
  .pg-alert-d{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .pg-alert-r{margin-left:auto;display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
  .pg-empty{padding:60px 20px;text-align:center}
  .pg-empty-t{font-size:14px;font-weight:700;color:var(--ink)}
  .pg-empty-d{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
  .pg-secnum{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .pg-card-h2{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px}
  .pg-filterchip{height:30px;padding:0 14px;border-radius:16px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer}
  .pg-filterchip.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);border-color:transparent}
  .pg-kb-sub{padding:16px 18px;border-top:1px solid var(--line)}
  .pg-kb-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .pg-kb-add{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;flex:0 0 auto}
  .pg-kb-add svg{width:14px;height:14px}
  .pg-kb-desc{font-size:12px;color:var(--ink-faint);margin-top:6px;line-height:1.5}
  .pg-kb-link{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e0574a;border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13px}
  .pg-kb-link-l{display:flex;align-items:center;gap:8px;color:var(--ink);min-width:0}
  .pg-kb-link-l svg{width:15px;height:15px;color:var(--ink-soft);flex:0 0 auto}
  .pg-kb-link-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .pg-kb-status{color:#16a34a;font-weight:600;font-size:12.5px}
  .pg-kb-viewlink{color:var(--ink);text-decoration:underline;font-size:12.5px;font-weight:600;cursor:pointer;background:none}
  .pg-kb-link-r svg{width:15px;height:15px;color:var(--ink-faint);cursor:pointer}
  .pg-kb-content{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:var(--surface-2);border-radius:8px;padding:12px 14px;margin-top:12px}
  .pg-kb-content-text{font-size:13px;color:var(--ink-soft);text-decoration:underline;line-height:1.5}
  .pg-kb-content svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 auto;cursor:pointer;margin-top:2px}
  .pg-kb-attach{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;color:var(--ink);cursor:pointer;border-top:1px solid var(--line)}
  .pg-kb-attach:first-of-type{border-top:1px solid var(--line);margin-top:12px}
  .pg-expand{display:none;padding:18px;border-top:1px solid var(--line)}
  .pg-expand.show{display:block}
  .pg-expand-t{font-size:14px;color:var(--ink);font-weight:500;margin-bottom:8px}
  .pg-expand-eg{font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
  .pg-expand-lbl{font-size:13px;color:var(--ink);margin-bottom:8px}
  .pg-agent-tree{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;padding-bottom:14px}
  .pg-agent-tree>.pg-ritem{border-bottom:1px solid var(--line);cursor:default}
  .pg-subtree{margin:14px 0 0 34px;padding-left:22px;border-left:1.5px solid var(--line)}
  .pg-subrow{position:relative}
  .pg-subrow::before{content:'';position:absolute;left:-22px;top:27px;width:22px;height:1.5px;background:var(--line)}
  .pg-subitem{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;margin:2px 0;border-radius:9px;cursor:pointer}
  .pg-subitem:hover{background:var(--surface-2)}
  .pg-row-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
  .pg-origin-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:4px 4px 4px 12px;margin-top:14px}
  .pg-origin-row svg{width:16px;height:16px;color:var(--ink-faint);flex:0 0 auto}
  .pg-origin-row input{border:0;background:transparent;flex:1;font-size:13px;color:var(--ink);outline:none}
  .pg-code{background:#1c2129;color:#d7dbe0;border-radius:10px;padding:18px 20px;font-family:'Fustat',sans-serif;font-size:12.5px;line-height:1.75;overflow-x:auto;margin-top:14px;white-space:pre}
  .pg-code .tg{color:#f28b82}
  .pg-code .at{color:#e0a34e}
  .pg-code .sv{color:#8bd17c}
  .pg-mono{font-family:'Fustat',sans-serif;font-size:12.5px}
  .pg-keyactions{display:flex;align-items:center;gap:8px;color:var(--ink-faint)}
  .pg-keyactions svg{width:15px;height:15px;cursor:pointer}
  .pg-keyactions svg:hover{color:var(--ink)}
  .pg-seg2{display:inline-flex;border:1px solid var(--line);border-radius:9px;padding:2px;background:var(--surface-2)}
  .pg-seg2 button{height:30px;padding:0 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:transparent}
  .pg-seg2 button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
  .pg-testbar{position:fixed;inset:0;background:rgba(15,17,22,.45);z-index:140;display:none}
  .pg-testbar.on{display:block}
  .pg-test-widget{position:absolute;right:34px;bottom:28px;width:340px;max-height:520px;background:var(--surface);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden}
  .pg-test-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .pg-test-head b{font-size:13.5px;color:var(--ink)}
  .pg-test-close{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .pg-test-close:hover{background:var(--surface-2);color:var(--ink)}
  .pg-test-body{flex:1;padding:16px;overflow:auto;display:flex;flex-direction:column;gap:10px}
  .pg-test-msg{max-width:85%;font-size:13px;line-height:1.5;padding:9px 13px;border-radius:14px}
  .pg-test-msg.bot{align-self:flex-start;background:var(--surface-2);color:var(--ink)}
  .pg-test-msg.you{align-self:flex-end;background:var(--app);color:#fff}
  .pg-test-inputrow{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
  .pg-test-inputrow input{flex:1;border:1px solid var(--line);border-radius:20px;padding:0 14px;height:38px;font-size:13px;outline:none}
  .pg-test-send{width:38px;height:38px;border-radius:50%;background:var(--app);color:#fff;display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
  .pg-test-send svg{width:16px;height:16px}
  .pg-statrow{display:flex;gap:60px;padding:22px 0 4px}
  .pg-stat{text-align:center}
  .pg-stat-v{font-size:26px;font-weight:700;color:var(--ink)}
  .pg-stat-l{font-size:12px;color:var(--ink-faint);margin-top:4px}
  .pg-pn-ic{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,#0d9488 16%,transparent);color:#0d9488;display:grid;place-items:center}
  .pg-pn-ic svg{width:20px;height:20px}
  .pg-pn-num{font-size:24px;font-weight:700;color:var(--ink);margin-top:10px}
  .pg-pn-status{font-size:12.5px;color:var(--ink-faint);margin-top:4px}
  .pg-pn-info{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .pg-pn-info div{font-size:13px;color:var(--ink-soft)}
  .pg-pn-info b{color:var(--ink);font-weight:600}
  .pg-rlist{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .pg-ritem{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer}
  .pg-ritem:last-child{border-bottom:0}
  .pg-ritem:hover{background:var(--surface-2)}
  .pg-ritem.selected{background:var(--surface-2)}
  .pg-ric{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-soft);flex:0 0 auto}
  .pg-ric svg{width:16px;height:16px}
  .pg-rt{font-size:13.5px;font-weight:600;color:var(--ink)}
  .pg-rd{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .pg-rr{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px}
  .pg-rchev{color:var(--ink-faint);transition:transform .18s}
  .pg-rchev svg{width:16px;height:16px}
  .pg-ritem.open .pg-rchev{transform:rotate(180deg)}
  .pg-rlink{color:var(--app);font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:3px}
  .pg-rlink svg{width:13px;height:13px}
  .pg-prog-top{display:flex;align-items:flex-start;justify-content:space-between}
  .pg-prog-t{font-size:14px;font-weight:700;color:var(--ink)}
  .pg-prog-d{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .pg-prog-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-soft);margin:16px 0 6px}
  .pg-prog-bar{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden}
  .pg-prog-fill{height:100%;background:var(--ink);border-radius:5px}
  .pg-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:start}
  .pg-price-card{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column}
  .pg-price-name{font-size:15px;font-weight:700;color:var(--ink)}
  .pg-price-amt{font-size:26px;font-weight:800;color:var(--ink);margin-top:10px}
  .pg-price-amt span{font-size:13px;font-weight:500;color:var(--ink-faint)}
  .pg-price-desc{font-size:12px;color:var(--ink-faint);margin:6px 0 14px}
  .pg-price-feats{list-style:none;padding:0;margin:0 0 16px;flex:1}
  .pg-price-feats li{font-size:12.5px;color:var(--ink-soft);padding:5px 0;display:flex;gap:8px}
  .pg-price-feats li::before{content:'•';color:var(--ink-faint)}
  .pg-price-foot{display:flex;gap:6px;align-items:center}
  .pg-price-foot .pg-btn{flex:1;justify-content:center;padding:0 8px}
  .pg-price-step{width:32px;height:36px;flex:0 0 auto;justify-content:center;padding:0}
  .pg-trialbadge{display:inline-block;font-size:10.5px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 14%,transparent);padding:3px 8px;border-radius:6px;margin-bottom:4px}
  .pg-payg{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
  .pg-payg-h{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
  .pg-payg ul{list-style:none;padding:0;margin:0;columns:2;gap:24px}
  .pg-payg li{font-size:12.5px;color:var(--ink-soft);padding:4px 0}
  .pg-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .pg-seg button{height:32px;padding:0 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--surface)}
  .pg-seg button.on{background:var(--surface-2);color:var(--ink)}
  .pg-table{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .pg-trow{display:grid;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
  .pg-trow:last-child{border-bottom:0}
  .pg-thead{background:var(--surface-2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-faint);padding-top:11px;padding-bottom:11px}
  .pg-user{display:flex;align-items:center;gap:10px}
  .pg-user-av{width:32px;height:32px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-soft);flex:0 0 auto}
  .pg-user-name{font-size:13.5px;font-weight:600;color:var(--ink)}
  .pg-user-sub{font-size:11.5px;color:var(--ink-faint);margin-top:1px}
  .pg-user-role{font-size:11px;color:var(--ink-faint);margin-top:2px;display:flex;align-items:center;gap:4px}
  .pg-chip{font-size:10.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
  .pg-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
  .pg-rowicons{display:flex;gap:4px;justify-content:flex-end}
  .pg-icobtn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .pg-icobtn:hover{background:var(--surface-2);color:var(--ink)}
  .pg-icobtn.danger:hover{color:#c94a3f;background:color-mix(in srgb,#e05a4e 12%,transparent)}
  .pg-icobtn svg{width:15px;height:15px}
  .pg-selectbtn{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);font-size:11.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px}
  .pg-selectbtn svg{width:12px;height:12px}
  .pg-link{color:var(--app);font-weight:600;text-decoration:underline;cursor:pointer}
  .pg-summ-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;color:var(--ink-soft)}
  .pg-summ-lbl{display:inline-flex;align-items:center;gap:6px}
  .pg-summ-row b{color:var(--ink);font-weight:600}
  .pg-summ-total{display:flex;justify-content:space-between;padding-top:12px;margin-top:4px;border-top:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink)}
  .pg-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:10px;background:none}
  .pg-back svg{width:15px;height:15px}
  .pg-ela-preview{position:fixed;right:32px;bottom:24px;display:flex;align-items:center;gap:10px;z-index:5;pointer-events:none}
  .pg-ela-tip{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);border-radius:10px;padding:6px 12px;font-size:12px;color:var(--ink-soft)}
  .pg-ela-bub{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f0a8d8,#b98fe0);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-1);flex:0 0 auto}
  .pg-ela-bub svg{width:19px;height:19px}
  .pg-ela-bub.chat{background:linear-gradient(135deg,#b98fe0,#8fb8e0);font-size:12px;font-weight:700;width:auto;height:auto;padding:9px 16px;border-radius:22px}
  @media (max-width:820px){.pg-grid2{grid-template-columns:1fr}.pg-statrow{gap:32px}.pg-price-grid{grid-template-columns:1fr}}

  /* Settings — full screen, landing-split style (plain menu left, card detail right) */
  .settings-overlay{--app:#1E7FEF;position:fixed;inset:0;z-index:90;background:var(--bg);display:none;opacity:0;transition:opacity .2s var(--ease)}
  .settings-overlay.on{display:flex;opacity:1}
  .sv-shell{flex:1;display:flex;flex-direction:column;width:100%;height:100%;padding:20px 30px 26px;min-height:0}
  .sv-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex:0 0 auto}
  .sv-h1{font-size:22px;font-weight:600;color:var(--ink)}
  .sv-back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;transition:background .13s,color .13s}
  .sv-back:hover{background:var(--surface-2);color:var(--ink)}
  .sv-back svg{width:22px;height:22px}
  .sv-shell .set-split{flex:1;display:grid;grid-template-columns:260px 1fr;grid-template-rows:minmax(0,1fr);gap:26px;min-height:0;align-items:stretch}
  .sv-shell .set-nav{overflow:auto;min-height:0}
  .sv-shell .set-pane{overflow:auto;min-height:0;background:var(--surface);border:0;border-radius:24px;padding:30px 34px;box-shadow:none}

  /* ---------- Automation / Campaign workflow builder ---------- */
  .wf-pane{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);width:100%;height:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
  .wf-pane #setPaneBody{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .wf-top{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .wf-top-back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;flex:0 0 auto;background:none;border:0}
  .wf-top-back:hover{background:var(--surface-2);color:var(--ink)}
  .wf-top-back svg{width:18px;height:18px}
  .wf-top-name{font-size:17px;font-weight:700;color:var(--ink);border:1px solid transparent;border-radius:var(--r-sm);padding:5px 9px;margin:-5px 0;cursor:text;background:transparent;min-width:80px;max-width:360px}
  .wf-top-name:hover,.wf-top-name:focus{border-color:var(--line);background:var(--surface-2);outline:none}
  .wf-top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
  .wf-sched-btn{height:36px;padding:0 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
  .wf-sched-btn svg{width:14px;height:14px;color:var(--ink-faint)}
  .wf-sched-pop{position:absolute;top:calc(100% + 8px);right:0;width:260px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:14px;z-index:20;display:none}
  .wf-sched-pop.on{display:block}
  .wf-sched-opt{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink);cursor:pointer}
  .wf-sched-opt:hover{background:var(--surface-2)}
  .wf-sched-opt input{margin:0}
  .wf-body{flex:1;display:flex;min-height:0}
  .wf-palette{width:270px;flex:0 0 auto;border-right:1px solid var(--line);overflow-y:auto;padding:16px 12px 40px}
  .wf-palette-h{font-size:14px;font-weight:700;color:var(--ink);padding:2px 8px}
  .wf-palette-sub{font-size:11.5px;color:var(--ink-faint);padding:0 8px;margin-top:2px;margin-bottom:16px}
  .wf-cat{display:flex;align-items:center;gap:6px;padding:9px 8px 6px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-faint);cursor:pointer}
  .wf-cat svg{width:12px;height:12px;transition:transform .18s var(--ease)}
  .wf-cat.collapsed svg{transform:rotate(-90deg)}
  .wf-cat-count{margin-left:auto;background:var(--surface-2);color:var(--ink-soft);font-size:10px;font-weight:700;border-radius:8px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
  .wf-cat-list{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
  .wf-cat-list.collapsed{display:none}
  .wf-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:16px;font-size:12.5px;font-weight:500;color:var(--ink-soft);cursor:pointer}
  .wf-item:hover{background:var(--surface-2);color:var(--ink)}
  .wf-item svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 auto}
  .wf-item:hover svg{color:var(--app)}
  .wf-canvas-wrap{flex:1;position:relative;overflow:auto;background-image:radial-gradient(circle,var(--line) 1.2px,transparent 1.2px);background-size:22px 22px;background-color:var(--surface)}
  .wf-canvas{position:relative;width:2400px;height:2000px}
  .wf-svg{position:absolute;inset:0;pointer-events:none;overflow:visible;width:100%;height:100%}
  .wf-link-path{fill:none;stroke:var(--ink-faint);stroke-width:1.6}
  .wf-link-path.yes{stroke:#1a9c5c}
  .wf-link-path.no{stroke:#d84d3e}
  .wf-link-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer;pointer-events:stroke}
  .wf-link-lbl-bg{fill:var(--surface);stroke:var(--line);stroke-width:1}
  .wf-link-lbl{font-size:10px;font-weight:700;fill:var(--ink-soft)}
  .wf-link-lbl.yes{fill:#1a9c5c}
  .wf-link-lbl.no{fill:#d84d3e}
  .wf-node{position:absolute;width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:grab;user-select:none}
  .wf-node:hover{border-color:var(--app)}
  .wf-node.dragging{cursor:grabbing;box-shadow:0 12px 26px rgba(0,0,0,.18);z-index:5}
  .wf-node.selected{border-color:var(--app);box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 18%,transparent)}
  .wf-node-top{display:flex;align-items:center;gap:9px;padding:12px 10px 2px 12px}
  .wf-node-ic{width:26px;height:26px;border-radius:7px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;color:var(--ink-soft)}
  .wf-node-ic svg{width:14px;height:14px}
  .wf-node-title{font-size:13px;font-weight:700;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wf-node-kebab{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--ink-faint);flex:0 0 auto;cursor:pointer;background:none;border:0}
  .wf-node-kebab:hover{background:var(--surface-2);color:var(--ink)}
  .wf-node-kebab svg{width:14px;height:14px}
  .wf-node-sub{font-size:11px;color:var(--ink-faint);padding:0 12px 12px 47px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wf-port{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-faint);cursor:crosshair;z-index:2}
  .wf-port:hover{border-color:var(--app);background:var(--app)}
  .wf-port.in{top:-6px;left:50%;margin-left:-5.5px}
  .wf-port.out{bottom:-6px;left:50%;margin-left:-5.5px}
  .wf-port.yes{bottom:-6px;left:30%;margin-left:-5.5px;border-color:#1a9c5c}
  .wf-port.no{bottom:-6px;left:70%;margin-left:-5.5px;border-color:#d84d3e}
  .wf-add-fab{position:absolute;left:20px;bottom:20px;width:40px;height:40px;border-radius:50%;background:var(--app-grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-2);z-index:3;border:0;transition:filter .15s}
  .wf-add-fab:hover{filter:brightness(1.05)}
  .wf-add-fab svg{width:17px;height:17px}
  /* node config drawer */
  .wf-drawer-backdrop{position:absolute;inset:0;background:rgba(15,17,22,.35);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s var(--ease);display:flex;align-items:stretch;justify-content:flex-end;padding:14px;border-radius:inherit}
  .wf-drawer-backdrop.on{opacity:1;pointer-events:auto}
  .wf-drawer{position:relative;width:480px;max-width:100%;height:100%;background:var(--surface);z-index:211;box-shadow:0 20px 70px rgba(0,0,0,.28);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;transform:translateX(24px) scale(.98);opacity:0;transition:transform .22s var(--ease),opacity .2s var(--ease)}
  .wf-drawer-backdrop.on .wf-drawer{transform:translateX(0) scale(1);opacity:1}
  .wf-drawer-head{display:flex;align-items:center;gap:12px;padding:22px 26px;border-bottom:1px solid var(--line);flex:0 0 auto;background:linear-gradient(180deg,color-mix(in srgb,var(--app) 7%,var(--surface)),var(--surface))}
  .wf-drawer-title{font-size:17px;font-weight:700;color:var(--ink)}
  .wf-drawer-body{flex:1;overflow-y:auto;padding:22px 26px 40px}
  .wf-drawer-statrow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-bottom:22px}
  .wf-drawer-statrow b{color:var(--ink);font-weight:700}
  .wf-frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:16px;margin-bottom:20px}
  .wf-frow>div label{display:block;font-size:11px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.2px;margin-bottom:7px}
  .wf-seclbl{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.3px;margin:22px 0 10px}
  .wf-seclbl:first-child{margin-top:0}
  .wf-fgroup{margin-bottom:20px}
  .wf-fgroup>label{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-bottom:7px}
  .wf-checkbox-box{border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;margin-bottom:18px}
  .wf-checkrow{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
  .wf-checkrow:last-child{border-bottom:0}
  .wf-checkrow input{width:15px;height:15px;flex:0 0 auto}
  .wf-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .wf-pill{height:30px;padding:0 14px;border-radius:16px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .wf-pill.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app);border-color:var(--app)}
  .wf-toggle-more{font-size:12.5px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;background:var(--surface);margin-bottom:20px}
  .wf-more-link{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:4px;cursor:pointer;padding:6px 0;background:none;border:0}
  .wf-filter-row{display:grid;grid-template-columns:20px 1.1fr 1fr 1fr;gap:10px;align-items:center;padding:9px 0}
  .wf-filter-row label{font-size:12.5px;color:var(--ink)}
  .wf-filter-row input[type=checkbox]{width:15px;height:15px}
  .wf-varbtn-wrap{position:relative;display:inline-block}
  .wf-varpop{position:absolute;top:calc(100% + 6px);right:0;width:230px;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:6px;z-index:8;display:none}
  .wf-varpop.on{display:block}
  .wf-varpop-h{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 4px}
  .wf-varpop-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--ink);cursor:pointer}
  .wf-varpop-item:hover{background:var(--surface-2)}
  .wf-varpop-item span:last-child{color:var(--ink-faint);font-family:'Fustat',sans-serif;font-size:11px}
  .wf-varpop-item .wf-form-desc{font-size:11px;color:var(--ink-faint);margin-top:1px}
  .wf-fieldrow-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .wf-charcount{font-size:11.5px;color:var(--ink-faint);margin-top:6px;text-align:right}
  .wf-form-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .wf-form-row:last-child{border-bottom:0}
  .wf-form-row input{width:15px;height:15px;margin-top:2px;flex:0 0 auto}
  .wf-form-name{font-size:13px;font-weight:600;color:var(--ink)}
  .wf-form-desc{font-size:11.5px;color:var(--ink-faint);margin-top:1px}
  .wf-swatch{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer;padding:0}
  @media(max-width:900px){.wf-palette{width:220px}.wf-drawer{width:100%}.wf-drawer-backdrop{padding:8px}}
  /* clickable record names -> open lead/patient profile */
  .lt-row .nm{cursor:pointer}
  .lt-row .nm:hover{color:var(--app);text-decoration:underline}
  .vch-t.lead-name-link{cursor:pointer}
  .vch-t.lead-name-link:hover{color:var(--app);text-decoration:underline}
  /* Lead / patient profile (full view) */
  .lead-profile{position:fixed;inset:0;z-index:95;background:var(--bg);display:none;flex-direction:column;opacity:0;transition:opacity .2s var(--ease)}
  .lead-profile.on{display:flex;opacity:1}
  .lp-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .lp-name{font-size:18px;font-weight:700;color:var(--ink)}
  .lp-nsub{display:flex;align-items:center;gap:8px;margin-top:3px}
  .lp-dim{font-size:12px;color:var(--ink-faint)}
  .lp-topacts{margin-left:auto;display:flex;gap:8px}
  .lp-body{flex:1;display:flex;min-height:0}
  .lp-work{flex:1;display:flex;min-width:0;gap:16px;padding:16px}
  .lp-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:0;border-radius:18px;box-shadow:var(--shadow-1);overflow:hidden}
  .lp-tabs{display:flex;gap:4px;padding:12px 20px 0;flex:0 0 auto;overflow-x:auto;scrollbar-width:none}
  .lp-tabs::-webkit-scrollbar{height:0}
  .lp-tab{flex:0 0 auto;height:34px;padding:0 15px;border-radius:18px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.13s}
  .lp-tab:hover{background:var(--surface-2);color:var(--ink)}
  .lp-tab.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .lp-content{flex:1;overflow:auto;padding:20px 24px}
  .lp-tab-add{width:34px;padding:0;color:var(--ink-faint)}
  .lp-tab-add svg{width:16px;height:16px}
  .lp-tabbar{display:flex;align-items:center;gap:12px;padding:12px 20px 0;flex:0 0 auto}
  .lp-tabbar .lp-tabs{padding:0;flex:1;min-width:0}
  .lp-tabactions{display:flex;gap:8px;flex:0 0 auto;align-items:center}
  .lp-capture{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:9px;border:0;background:#6d4df5;color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
  .lp-capture:hover{background:#5b3ce0}
  .lp-capture svg{width:15px;height:15px}
  .lp-capture.rec{background:#e05a4e;animation:lp-pulse 1.4s ease-in-out infinite}
  @keyframes lp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,90,78,.5)}50%{box-shadow:0 0 0 6px rgba(224,90,78,0)}}
  .lp-capture-zone{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
  .lp-big-plus{width:64px;height:64px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1.5px dashed var(--line);color:var(--ink-soft);cursor:pointer;transition:.14s}
  .lp-big-plus:hover{border-color:#6d4df5;color:#6d4df5;background:color-mix(in srgb,#6d4df5 8%,transparent)}
  .lp-big-plus svg{width:28px;height:28px}
  .lp-editor{width:100%;max-width:520px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
  .lp-editor-ta{width:100%;min-height:110px;border:0;background:transparent;padding:14px 16px;font-size:14px;color:var(--ink);outline:none;resize:vertical;font-family:inherit}
  .lp-listening{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 16px}
  .lp-live-wave{display:flex;align-items:center;gap:3px;height:38px}
  .lp-live-wave span{width:3px;border-radius:2px;background:#6d4df5;animation:lp-wave 1s ease-in-out infinite}
  .lp-live-wave span:nth-child(odd){animation-duration:.8s}
  .lp-live-wave span:nth-child(3n){animation-duration:1.2s;background:color-mix(in srgb,#6d4df5 60%,transparent)}
  @keyframes lp-wave{0%,100%{height:8px}50%{height:34px}}
  .lp-listen-t{font-size:13.5px;font-weight:600;color:#6d4df5}
  .lp-live-stop{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:10px;border:0;background:#e05a4e;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}
  .lp-live-stop svg{width:16px;height:16px}
  .lp-msg-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
  .lp-msg-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}
  .lp-msg-h svg{width:16px;height:16px;color:var(--ink-soft)}
  .lp-msg-acts{margin-left:auto;display:flex;gap:8px}
  .lp-msg-body{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
  .gs-btn.sm{height:30px;padding:0 11px;font-size:12.5px}
  .lp-instr-bar{display:flex;gap:10px;margin-bottom:22px;justify-content:flex-end}
  .lp-sec-btn{margin-left:auto}
  .lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
  .lp-chip{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px}
  .lp-add-menu{width:290px;max-height:60vh;overflow:auto;padding:8px;z-index:130}
  .lp-topcap{display:flex;align-items:center;gap:10px}
  .lp-topcap.listening{gap:12px;padding:6px 8px 6px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
  .lp-topcap .lp-live-wave{height:28px}
  .lp-live-wave.paused span{animation-play-state:paused}
  .lp-ver-seg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:2px}
  .lp-ver-seg button{height:28px;padding:0 13px;border-radius:7px;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;background:transparent}
  .lp-ver-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
  .lp-work-v2{gap:16px}
  .lp-v2-sum{width:330px;flex:0 0 auto;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;overflow:hidden}
  .lp-v2-sum-body{flex:1;overflow:auto;padding:18px 20px}
  .lp-ask-sug{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 4px}
  .lp-ask-chip{font-size:12px;font-weight:600;color:#6d4df5;background:color-mix(in srgb,#6d4df5 10%,transparent);border:1px solid color-mix(in srgb,#6d4df5 25%,transparent);border-radius:14px;padding:5px 11px;cursor:pointer}
  .lp-ask-chip:hover{background:color-mix(in srgb,#6d4df5 18%,transparent)}
  .lp-v2-ask-box{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:0 0 auto}
  .lp-v2-ask-box input{flex:1;min-width:0;height:38px;border:1px solid var(--line);border-radius:19px;background:var(--surface-2);padding:0 14px;font-size:13px;color:var(--ink);outline:none}
  .lp-ask-send{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#6d4df5;color:#fff;cursor:pointer}
  .lp-ask-send svg{width:16px;height:16px}
  .lp-ask-log{display:flex;flex-direction:column;gap:8px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
  .lp-ask-msg{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:12px;max-width:90%}
  .lp-ask-msg.you{align-self:flex-end;background:#6d4df5;color:#fff}
  .lp-ask-msg.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink)}
  .lp-v2-note{flex:1;min-width:0}
  .lp-v2-nhead{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .lp-v2-nhead #lpTopCap{flex:1;display:flex}
  .lp-v2-nhead .lp-topcap{flex:1;justify-content:space-between}
  @media(max-width:1200px){.lp-v2-sum{display:none}}
  .lp-add-badge{display:inline-block;font-size:11px;font-weight:700;color:#6d4df5;background:color-mix(in srgb,#6d4df5 12%,transparent);padding:4px 10px;border-radius:8px;margin:4px 6px 6px}
  .lp-add-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink);text-align:left;background:transparent}
  .lp-add-item:hover{background:var(--surface-2)}
  .lp-add-item svg{width:15px;height:15px;color:var(--ink-faint);flex:0 0 auto}
  /* patient-profile document tabs (Context/Note/Codes/Instructions) */
  .lp-doc{max-width:680px}
  .lp-doc-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
  .lp-doc-h svg{width:17px;height:17px}
  .lp-mic{margin-left:4px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft);cursor:pointer}
  .lp-doc-bar{display:flex;align-items:center;gap:8px;margin-bottom:20px}
  .lp-doc-h.inl{margin:0;flex:1;min-width:0}
  .lp-doc-bar .gs-btn,.gs-btn.sm{height:34px}
  .lp-icon-btn{width:34px;height:34px;flex:0 0 auto;justify-content:center;padding:0}
  .lp-note-sec{border-top:1px solid var(--line);padding:16px 0}
  .lp-note-sec:first-of-type{border-top:0;padding-top:0}
  .lp-note-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
  .lp-note-h svg{width:15px;height:15px;color:var(--ink-soft)}
  .lp-note-body{font-size:13.5px;color:var(--ink);line-height:1.6}
  .lp-note-body p{margin:2px 0 14px;color:var(--ink-soft)}
  .lp-note-lbl{font-weight:600;color:var(--ink);margin-top:4px}
  .lp-code-sec{margin-bottom:26px}
  .lp-code-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .lp-code-h b{font-size:15px;color:var(--ink)}
  .lp-cpt-lock{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px;border:1px solid var(--line);border-radius:14px}
  .lp-lock-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 12%,transparent);color:var(--app);margin-bottom:6px}
  .lp-lock-ic svg{width:22px;height:22px}
  .lp-lock-t{font-size:14.5px;font-weight:700;color:var(--ink)}
  .lp-lock-d{font-size:12.5px;color:var(--ink-faint);max-width:300px;line-height:1.5;margin-bottom:8px}
  .lp-code-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .lp-code-badge{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-width:96px;height:34px;padding:0 12px;border-radius:9px;background:var(--surface-2);font-size:13px;font-weight:700;color:var(--ink)}
  .lp-code-badge svg{width:14px;height:14px;color:var(--ink-faint)}
  .lp-code-desc{flex:1;font-size:13.5px;color:var(--ink)}
  .lp-letter{font-size:13.5px;color:var(--ink);line-height:1.65}
  .lp-letter p{margin:0 0 16px}
  .lp-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 18px;color:var(--ink-faint)}
  .lp-empty-ic{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-faint);margin-bottom:6px}
  .lp-empty-ic svg{width:28px;height:28px}
  .lp-empty-t{font-size:15px;font-weight:600;color:var(--ink-soft)}
  .lp-empty-d{font-size:12.5px;line-height:1.5;max-width:320px}
  .lp-ctx-pane{width:100%;min-height:280px;border:0;background:transparent;padding:0;font-size:13.5px;color:var(--ink);outline:none;resize:none;font-family:inherit;line-height:1.65}
  .lp-ctx-pane::placeholder{color:var(--ink-faint)}
  .lp-ctx-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin:18px 0 26px}
  .lp-metric{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .lp-metric.bad{border-color:color-mix(in srgb,#e05a4e 40%,var(--line));background:color-mix(in srgb,#e05a4e 6%,transparent)}
  .lp-metric-v{font-size:20px;font-weight:800;color:var(--ink);line-height:1.1}
  .lp-metric.bad .lp-metric-v{color:#e05a4e}
  .lp-metric-l{font-size:12px;color:var(--ink-soft);margin-top:4px;font-weight:600}
  .lp-metric-d{font-size:11px;color:var(--ink-faint);margin-top:1px}
  .lp-ctx-sec-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);margin:0 0 12px}
  .lp-ctx-sec-h svg{width:15px;height:15px;color:var(--ink-soft)}
  .lp-ctx-when{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-faint)}
  .lp-vitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:26px}
  .lp-vital{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:var(--surface-2)}
  .lp-vital-v{font-size:17px;font-weight:700;color:var(--ink)}
  .lp-vital-v span{font-size:11px;font-weight:500;color:var(--ink-faint);margin-left:3px}
  .lp-vital-l{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
  .lp-ctx-goals{display:flex;flex-direction:column;gap:2px}
  .lp-sec{margin-bottom:24px;max-width:640px}
  .lp-sec-h{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
  .lp-sec-h svg{width:17px;height:17px}
  .lp-p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
  .lp-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .lp-fact{display:flex;flex-direction:column;gap:2px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;font-size:12px}
  .lp-fact span{color:var(--ink-faint)} .lp-fact b{color:var(--ink);font-size:13px;text-transform:capitalize}
  .lp-tx{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .lp-list{margin:0;padding-left:18px;font-size:13px;color:var(--ink-soft);line-height:1.75}
  .lp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .lp-field label{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-bottom:4px}
  .lp-val{font-size:13.5px;color:var(--ink)}
  .lp-row2{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink)}
  .lp-tag{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);padding:3px 9px;border-radius:10px}
  .lp-note{font-size:13px;color:var(--ink);background:var(--surface-2);border-radius:11px;padding:11px 13px;margin-bottom:8px}
  /* lp Tasks tab (table + quick add + detail slide-over) */
  .lp-task-pt{background:var(--surface-2);border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--ink-soft);display:inline-block}
  .lp-td-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:150;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .18s ease}
  .lp-td-overlay.on{opacity:1;pointer-events:auto}
  .lp-td-panel{width:420px;max-width:92vw;height:100%;background:var(--surface);box-shadow:var(--shadow-2);display:flex;flex-direction:column;transform:translateX(24px);transition:transform .18s ease}
  .lp-td-overlay.on .lp-td-panel{transform:none}
  .lp-td-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .lp-td-mark{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .lp-td-close{margin-left:auto;display:flex;gap:4px}
  .lp-td-meta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);flex:0 0 auto}
  .lp-td-meta b{color:var(--ink);font-weight:600}
  .lp-td-body{flex:1;overflow:auto;padding:18px}
  .lp-td-lbl{font-size:11px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:10px}
  .lp-td-task{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.5}
  .lp-td-more{font-size:12.5px;color:var(--app);font-weight:600;cursor:pointer;margin-top:10px;display:inline-flex;align-items:center;gap:2px}
  .lp-td-more svg{width:13px;height:13px}
  .lp-td-sub{margin-top:26px}
  .lp-td-sub-head{display:grid;grid-template-columns:1fr 90px 90px;gap:10px;font-size:10.5px;font-weight:700;color:var(--ink-faint);padding:0 2px 8px;border-bottom:1px solid var(--line)}
  .lp-td-sub-add{display:flex;align-items:center;gap:8px;padding:12px 2px;color:var(--ink-faint)}
  .lp-td-sub-add svg{width:14px;height:14px}
  .lp-td-sub-add input{flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--ink)}
  .lp-td-sub-add input::placeholder{color:var(--ink-faint)}
  .lp-td-subtask{display:flex;align-items:center;gap:8px;padding:9px 2px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line)}
  /* lp Notes tab */
  .lp-note-composer{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:22px}
  .lp-note-subtabs{display:flex;align-items:center;gap:2px;padding:10px 12px 0}
  .lp-note-sub{height:30px;padding:0 12px;border-radius:14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .lp-note-sub:hover{background:var(--surface-2)}
  .lp-note-sub.on{background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .lp-note-publish{margin-left:auto}
  .lp-note-ta{width:100%;min-height:90px;border:0;background:transparent;padding:12px 16px 4px;font-size:13.5px;color:var(--ink);outline:none;resize:vertical;font-family:inherit}
  .lp-note-ta::placeholder{color:var(--ink-faint)}
  .lp-note-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 12px}
  .lp-note-count{font-size:11px;color:var(--ink-faint)}
  .lp-update-head{display:flex;align-items:center;margin-bottom:14px}
  .lp-update-title{font-size:14px;font-weight:700;color:var(--ink)}
  .lp-update-item{border-top:1px solid var(--line);padding:16px 0}
  .lp-update-item:first-of-type{border-top:0;padding-top:0}
  .lp-update-top{display:flex;align-items:center;gap:8px}
  .lp-update-type{font-size:14px;font-weight:700;color:var(--ink)}
  .lp-update-acts{margin-left:auto;display:flex;gap:4px}
  .lp-update-icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .lp-update-icon:hover{background:var(--surface-2);color:var(--ink)}
  .lp-update-icon svg{width:14px;height:14px}
  .lp-update-meta{font-size:11.5px;color:var(--ink-faint);margin:4px 0 8px}
  .lp-update-body{font-size:13.5px;color:var(--ink-soft);line-height:1.6;white-space:pre-wrap}
  /* lp Profile Details tab */
  .lp-appt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
  .lp-appt-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .lp-appt-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft);flex:0 0 auto}
  .lp-appt-ic.next{background:var(--ink);color:var(--surface)}
  .lp-appt-ic svg{width:18px;height:18px}
  .lp-appt-lbl{font-size:10.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:3px}
  .lp-appt-val{font-size:13px;color:var(--ink-soft)}
  .lp-info-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .lp-info-col-h{font-size:11px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:12px}
  .lp-info-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dotted var(--line);font-size:12.5px}
  .lp-info-row span{color:var(--ink-faint)}
  .lp-info-row b{color:var(--ink);font-weight:600;text-align:right}
  @media(max-width:900px){.lp-info-grid3{grid-template-columns:1fr}}
  .lp-chat{width:400px;flex:0 0 auto;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:0;border-radius:18px;box-shadow:var(--shadow-1);overflow:hidden}
  .lp-chat-head{display:flex;align-items:center;gap:8px;padding:15px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink)}
  .lp-chat-tabs{display:flex;gap:4px;padding:10px 12px 8px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .lp-chat-inner{flex:1;display:flex;flex-direction:column;min-height:0}
  .lp-live-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#6d4df5;background:color-mix(in srgb,#6d4df5 12%,transparent);padding:6px 12px;border-radius:20px;margin-bottom:14px}
  .lp-live-badge.done{color:var(--ink-soft);background:var(--surface-2)}
  .lp-live-badge svg{width:13px;height:13px}
  .lp-live-transcript{display:flex;flex-direction:column;gap:13px}
  .lp-live-transcript .tx{display:flex;flex-direction:column;gap:3px}
  .lp-live-transcript .tx-who{font-size:11px;font-weight:700;color:#6d4df5;text-transform:uppercase;letter-spacing:.3px}
  .lp-live-transcript .tx-txt{font-size:13.5px;color:var(--ink);line-height:1.5}
  .lp-rail{flex:0 0 auto;width:60px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0}
  .lp-rail button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);transition:.13s}
  .lp-rail button:hover{background:var(--surface-2);color:var(--ink)}
  .lp-rail button.active{background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app)}
  .lp-rail svg{width:20px;height:20px}
  .lp-ctx{flex:0 0 auto;width:0;overflow:hidden;margin-left:-16px;background:var(--surface);border:0;border-radius:18px;box-shadow:var(--shadow-1);transition:width .28s var(--ease),margin .28s var(--ease);display:flex;flex-direction:column}
  .lp-ctx.on{width:320px;margin-left:0}
  .lp-ctx-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .lp-ctx-ico{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .lp-ctx-ico svg{width:16px;height:16px}
  .lp-ctx-ttl{flex:1;min-width:0}
  .lp-ctx-t{font-size:13.5px;font-weight:700;color:var(--ink)}
  .lp-ctx-for{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--app);margin-top:2px}
  .lp-ctx-for svg{width:12px;height:12px}
  .lp-ctx-head .mh-x{margin-left:6px;width:28px;height:28px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .lp-ctx-body{flex:1;overflow:auto;padding:14px}
  .lp-ctx-msg{font-size:13px;color:var(--ink-soft);margin-bottom:12px}
  @media(max-width:1100px){.lp-chat{display:none}}
  /* share booking link + Calendly-style widget */
  .cal-link{flex:0 0 auto;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:background .13s}
  .cal-link:hover{background:var(--surface-2)}
  .cal-link svg{width:17px;height:17px;color:var(--app)}
  .cal-url{font-size:12.5px;color:var(--app);font-weight:600;padding:7px 12px;background:var(--surface-2);border-radius:8px;margin:2px 8px 8px;word-break:break-all}
  .book-overlay{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:26px;background:rgba(10,12,18,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s var(--ease)}
  .book-overlay.on{display:grid;opacity:1}
  .book-card{--app:#0284c7;position:relative;width:min(724px,96vw);max-height:92vh;display:grid;grid-template-columns:288px 1fr;background:var(--surface);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;transform:translateY(12px) scale(.99);opacity:0;transition:width .34s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
  .book-card.has-times{width:min(980px,96vw)}
  .book-left,.book-calcol,.book-timecol,.book-right{scrollbar-width:none;-ms-overflow-style:none}
  .book-left::-webkit-scrollbar,.book-calcol::-webkit-scrollbar,.book-timecol::-webkit-scrollbar,.book-right::-webkit-scrollbar{width:0;height:0;display:none}
  .book-overlay.on .book-card{transform:none;opacity:1}
  .book-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);background:var(--surface);z-index:2;cursor:pointer}
  .book-x:hover{background:var(--surface-2);color:var(--ink)}
  .book-x svg{width:17px;height:17px}
  .book-left{padding:26px 24px;border-right:1px solid var(--line);background:var(--surface-2);overflow:auto;display:flex;flex-direction:column}
  .book-right-cal{display:flex;padding:0;overflow:hidden}
  .book-calcol{flex:1;min-width:0;padding:26px;overflow:auto;display:flex;flex-direction:column}
  .book-timecol{width:0;flex:0 0 auto;border-left:0;padding:0;overflow:hidden;transition:width .34s var(--ease),padding .34s var(--ease)}
  .book-card.has-times .book-timecol{width:216px;border-left:1px solid var(--line);padding:22px 16px;overflow:auto}
  .book-timecol-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px}
  .book-tz-lbl{font-size:12px;font-weight:700;color:var(--ink);margin-top:22px;margin-bottom:8px}
  .book-tz{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);cursor:pointer}
  .book-tz svg{width:16px;height:16px;color:var(--ink-faint)}
  .book-tz .book-tz-c{margin-left:2px}
  .book-tz .book-tz-c svg{width:14px;height:14px}
  .book-foot{margin-top:auto;padding-top:18px;display:flex;gap:18px}
  .book-foot a{font-size:12.5px;font-weight:600;color:var(--app);cursor:pointer}
  .book-org{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .book-org svg{width:16px;height:16px;color:var(--app)}
  .book-host{font-size:13px;color:var(--ink-faint);margin:10px 0 4px}
  .book-type-t{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 12px}
  .book-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);margin-bottom:6px}
  .book-meta svg{width:16px;height:16px;color:var(--ink-faint)}
  .book-desc{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:14px 0}
  .book-types{display:flex;flex-direction:column;gap:6px;margin-top:8px}
  .book-type-pill{text-align:left;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:.13s}
  .book-type-pill:hover{background:var(--surface-3)}
  .book-type-pill.on{border-color:var(--app);color:var(--app);background:color-mix(in srgb,var(--app) 8%,transparent)}
  .book-fields .set-inl{margin-top:12px}
  .book-selwrap{position:relative}
  .book-select{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:0 32px 0 12px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none}
  .book-select:focus{border-color:var(--app)}
  .book-selwrap svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-faint);pointer-events:none}
  .book-right{padding:26px;overflow:auto}
  .book-cal-h{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
  .book-month{margin-bottom:16px}
  .bm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--ink)}
  .bm-nav{display:flex;gap:4px}
  .bm-nav button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft)}
  .bm-nav button:hover{background:var(--surface-2)}
  .bm-grid{display:grid;grid-template-columns:repeat(7,44px);gap:8px;grid-auto-rows:44px;justify-content:start;align-content:start}
  .bm-wd{width:44px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-faint)}
  .bm-cell{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--app);background:color-mix(in srgb,var(--app) 10%,transparent);cursor:pointer;transition:.12s}
  .bm-cell:hover:not(.past):not(.empty){background:color-mix(in srgb,var(--app) 22%,transparent)}
  .bm-cell.empty{background:transparent;cursor:default}
  .bm-cell.past{color:var(--ink-faint);opacity:.45;background:transparent;cursor:not-allowed}
  .bm-cell.sel{background:var(--app-grad);color:#fff}
  .book-slots-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);margin:6px 0 10px}
  .book-slots-h svg{width:15px;height:15px;color:var(--app)}
  .book-times{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
  .book-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .book-slots-col{grid-template-columns:1fr}
  .book-slot{height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
  .book-slot:hover{border-color:var(--app);color:var(--app)}
  .book-slot.on{background:var(--app-grad);color:#fff;border-color:transparent}
  .book-slots-empty{display:flex;align-items:center;gap:8px;justify-content:center;padding:26px 12px;font-size:13px;color:var(--ink-faint);background:var(--surface-2);border-radius:12px}
  .book-slots-empty svg{width:16px;height:16px}
  .book-confirm-when{display:flex;align-items:center;gap:8px;width:100%;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:14px;cursor:pointer;text-align:left;transition:background .13s}
  .book-confirm-when:hover{background:var(--surface-3)}
  .book-confirm-when svg{width:16px;height:16px;color:var(--app)}
  .book-when-edit{margin-left:auto;color:var(--app);font-weight:700;font-size:12.5px}
  .book-right .set-inl{margin-top:10px}
  .book-done{grid-template-columns:1fr;text-align:center;padding:44px 30px;display:flex;flex-direction:column;align-items:center}
  .book-done-check{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#22a06b 16%,transparent);color:#22a06b;margin-bottom:16px}
  .book-done-check svg{width:30px;height:30px;stroke-width:2.4}
  .book-done-t{font-size:20px;font-weight:700;color:var(--ink)}
  .book-done-d{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
  .book-done-sub{font-size:12.5px;color:var(--ink-faint);margin-top:8px}
  @media(max-width:720px){.book-card{grid-template-columns:1fr}.book-left{display:none}}
  /* Share scheduling link modal */
  .share-overlay{position:fixed;inset:0;z-index:115;display:none;place-items:center;padding:26px;background:rgba(10,12,18,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s var(--ease)}
  .share-overlay.on{display:grid;opacity:1}
  .share-card{--app:#0284c7;position:relative;width:min(440px,94vw);background:var(--surface);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:32px 28px 26px;text-align:center;transform:translateY(10px) scale(.99);opacity:0;transition:transform .28s var(--ease),opacity .28s var(--ease)}
  .share-overlay.on .share-card{transform:none;opacity:1}
  .share-ico{width:54px;height:54px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .share-ico svg{width:26px;height:26px}
  .share-t{font-size:19px;font-weight:700;color:var(--ink)}
  .share-d{font-size:13px;color:var(--ink-soft);margin:8px 0 18px;line-height:1.5}
  .share-url{font-size:14px;font-weight:600;color:var(--app);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:16px;word-break:break-all}
  .share-btns{display:flex;gap:10px}
  .share-btns button{flex:1;justify-content:center;height:44px}
  /* Int workspace: library + submitted + drawer */
  .int-pills{display:flex;gap:8px;margin-bottom:16px}
  .lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .lib-card{padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
  .lib-card-btn{cursor:pointer;text-align:left;font:inherit;transition:.13s}
  .lib-card-btn:hover{border-color:var(--app)}
  .lib-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .lib-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .lib-badge{font-size:10.5px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 14%,transparent);padding:3px 8px;border-radius:10px}
  .lib-t{font-size:14px;font-weight:700;color:var(--ink)}
  .lib-d{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
  .lib-meta{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
  .lib-badge.draft{color:var(--ink-faint);background:var(--surface-2)}
  .lib-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:172px;border:1.5px dashed var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;font-size:13px;font-weight:600;transition:.14s}
  .lib-new:hover{border-color:var(--app);color:var(--app)}
  .cf-name{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:0 12px;font-size:13.5px;color:var(--ink);outline:none;margin-bottom:4px}
  .cf-name:focus{border-color:var(--app)}
  .cf-q{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .cf-qn{width:22px;height:22px;flex:0 0 auto;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-soft)}
  .cf-qi{flex:1;min-width:0;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:0 11px;font-size:13px;color:var(--ink);outline:none}
  .cf-qi:focus{border-color:var(--app)}
  .cf-qdel{width:28px;height:28px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .cf-qdel:hover{background:var(--surface-2);color:var(--ink)}
  /* Form builder */
  .fb-overlay{--app:#c026a8;position:fixed;inset:0;z-index:120;display:none;flex-direction:column;background:var(--bg)}
  .fb-overlay.on{display:flex}
  .fb-topbar{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
  .fb-name{flex:1;max-width:420px;height:40px;border:1px solid transparent;border-radius:10px;background:transparent;padding:0 12px;font-size:17px;font-weight:700;color:var(--ink);outline:none}
  .fb-name:hover{background:var(--surface-2)}
  .fb-name:focus{background:var(--surface-2);border-color:var(--app)}
  .fb-topacts{margin-left:auto;display:flex;gap:10px}
  .fb-body{flex:1;display:grid;grid-template-columns:1fr 288px;min-height:0}
  .fb-canvas-wrap{overflow:auto;padding:26px}
  .fb-canvas{max-width:640px;margin:0 auto;min-height:calc(100% - 12px);display:flex;flex-direction:column;gap:12px;border-radius:14px;padding:6px;transition:background .15s,outline-color .15s}
  .fb-canvas.drop{background:color-mix(in srgb,var(--app) 8%,transparent);outline:2px dashed color-mix(in srgb,var(--app) 45%,transparent);outline-offset:6px}
  .fb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-faint);border:1.5px dashed var(--line);border-radius:14px;min-height:340px}
  .fb-empty svg{width:40px;height:40px;opacity:.5}
  .fb-empty-t{font-size:15px;font-weight:600;color:var(--ink-soft)}
  .fb-empty span{font-size:12.5px}
  .fb-field{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px}
  .fb-field.dragging{opacity:.45}
  .fb-field-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .fb-grip{color:var(--ink-faint);display:inline-grid;place-items:center;cursor:grab}
  .fb-grip svg{width:16px;height:16px}
  .fb-label{flex:1;min-width:0;height:34px;border:1px solid transparent;border-radius:8px;background:transparent;padding:0 8px;font-size:14px;font-weight:600;color:var(--ink);outline:none}
  .fb-label:hover{background:var(--surface-2)}
  .fb-label:focus{background:var(--surface-2);border-color:var(--app)}
  .fb-type{font-size:10.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;background:var(--surface-2);padding:3px 8px;border-radius:6px;white-space:nowrap}
  .fb-del{width:28px;height:28px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .fb-del:hover{background:color-mix(in srgb,#e05a4e 14%,transparent);color:#e05a4e}
  .fb-preview{pointer-events:none}
  .fbp-input{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:0 11px;font-size:13px;color:var(--ink-soft);resize:none}
  textarea.fbp-input{height:auto;padding:9px 11px}
  .fbp-select{display:flex;align-items:center;justify-content:space-between;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:0 11px;font-size:13px;color:var(--ink-soft)}
  .fbp-select svg{width:15px;height:15px}
  .fbp-opts{display:flex;flex-direction:column;gap:8px}
  .fbp-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
  .fbp-radio{width:15px;height:15px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line)}
  .fbp-cbx{width:15px;height:15px;flex:0 0 auto;border-radius:4px;border:1.5px solid var(--line)}
  .fbp-yesno{display:flex;gap:8px}
  .fbp-yesno span{flex:1;text-align:center;height:36px;line-height:34px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .fbp-yesno span.on{border-color:var(--app);color:var(--app);background:color-mix(in srgb,var(--app) 10%,transparent)}
  .fbp-rating{display:flex;gap:6px}
  .fbp-rating svg{width:22px;height:22px;fill:color-mix(in srgb,var(--app) 22%,transparent);color:transparent}
  .fbp-heading{font-size:15px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:6px}
  .fb-palette{border-left:1px solid var(--line);background:var(--surface);padding:18px 16px;overflow:auto}
  .fb-pal-h{font-size:13px;font-weight:700;color:var(--ink)}
  .fb-pal-hint{font-size:11.5px;color:var(--ink-faint);margin:3px 0 14px}
  .fb-pal-list{display:flex;flex-direction:column;gap:8px}
  .fb-comp{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink);cursor:grab;transition:.13s}
  .fb-comp:hover{border-color:var(--app);color:var(--app);transform:translateX(-2px)}
  .fb-comp svg{width:16px;height:16px;color:var(--app)}
  @media(max-width:820px){.fb-body{grid-template-columns:1fr}.fb-palette{display:none}}
  /* Note-template builder */
  .nt-body{flex:1;overflow:auto;padding:24px;max-width:760px;margin:0 auto;width:100%}
  .nt-hint{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:11px 14px;margin-bottom:18px;line-height:1.5}
  .nt-hint svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--app)}
  .nt-list{display:flex;flex-direction:column;gap:14px}
  .nt-sec{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px}
  .nt-sec-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .nt-sec-top .fb-grip{color:var(--ink-faint);display:inline-grid;place-items:center;cursor:grab}
  .nt-sec-top .fb-grip svg{width:16px;height:16px}
  .nt-title{flex:1;min-width:0;height:34px;border:1px solid transparent;border-radius:8px;background:transparent;padding:0 8px;font-size:14.5px;font-weight:700;color:var(--ink);outline:none}
  .nt-title:hover{background:var(--surface-2)} .nt-title:focus{background:var(--surface-2);border-color:var(--app)}
  .nt-modes{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:9px;padding:3px;margin-bottom:10px}
  .nt-mode{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;background:transparent}
  .nt-mode svg{width:14px;height:14px}
  .nt-mode.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
  .nt-text{width:100%;min-height:80px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:10px 12px;font-size:13px;color:var(--ink);outline:none;resize:vertical;font-family:inherit;line-height:1.5}
  .nt-text:focus{border-color:var(--app)}
  .nt-add{width:100%;justify-content:center;margin-top:14px}
  .fb-del{width:28px;height:28px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);cursor:pointer}
  .fb-del:hover{background:color-mix(in srgb,#e05a4e 14%,transparent);color:#e05a4e}
  /* Scr new-patient search */
  .ps-overlay{--app:#4f46e5;position:fixed;inset:0;z-index:118;display:none;justify-content:center;padding-top:12vh;background:rgba(10,12,18,.5);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s var(--ease)}
  .ps-overlay.on{display:flex;opacity:1}
  .ps-card{width:min(500px,94vw);max-height:66vh;align-self:flex-start;background:var(--surface);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column}
  .ps-search{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
  .ps-search svg{width:18px;height:18px;color:var(--ink-faint);flex:0 0 auto}
  .ps-search input{flex:1;border:0;background:transparent;outline:none;font-size:15px;color:var(--ink)}
  .ps-list{overflow:auto;padding:8px}
  .ps-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:10px;cursor:pointer;text-align:left;background:transparent}
  .ps-item:hover{background:var(--surface-2)}
  .ps-nm{font-size:14px;font-weight:600;color:var(--ink);flex:1;min-width:0}
  .ps-meta{font-size:12px;color:var(--ink-faint);flex:0 0 auto}
  .ps-add-ic{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 15%,transparent);color:var(--app)}
  .ps-add-ic svg{width:16px;height:16px}
  .ps-add .ps-nm{color:var(--app)}
  .ps-empty{padding:26px;text-align:center;font-size:13px;color:var(--ink-faint)}
  /* Note-template list + preview */
  .tpl-list{display:flex;flex-direction:column;gap:8px;max-width:720px}
  .tpl-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;transition:.13s}
  .tpl-row:hover{border-color:var(--app);background:var(--surface-2)}
  .tpl-ico{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 13%,transparent);color:var(--app)}
  .tpl-ico svg{width:16px;height:16px}
  .tpl-main{flex:1;min-width:0}
  .tpl-name{font-size:14px;font-weight:700;color:var(--ink)}
  .tpl-desc{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .tpl-arrow{color:var(--ink-faint);flex:0 0 auto}
  .tpl-arrow svg{width:16px;height:16px}
  .tpl-new{border-style:dashed;justify-content:center;gap:8px;color:var(--ink-soft);font-weight:600;font-size:13.5px}
  .tpl-new:hover{color:var(--app)}
  .tplp-overlay{position:fixed;inset:0;z-index:118;display:none;place-items:center;padding:26px;background:rgba(10,12,18,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s var(--ease)}
  .tplp-overlay.on{display:grid;opacity:1}
  .tplp-card{--app:#4f46e5;width:min(520px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
  .tplp-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
  .tplp-ico{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
  .tplp-ico svg{width:17px;height:17px}
  .tplp-name{font-size:16px;font-weight:700;color:var(--ink)}
  .tplp-sub{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .tplp-head .mh-x{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .tplp-head .mh-x:hover{background:var(--surface-2)}
  .tplp-body{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
  .tpl-pv-sec .tpl-pv-h{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .tpl-pv-lines{display:flex;flex-direction:column;gap:6px}
  .tpl-pv-lines span{height:8px;width:100%;border-radius:4px;background:var(--surface-2)}
  .tplp-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line)}
  .tplp-foot button{height:40px}
  .int-drawer{position:fixed;inset:0;z-index:96;display:none;background:rgba(10,12,18,.45);opacity:0;transition:opacity .2s var(--ease)}
  .int-drawer.on{display:block;opacity:1}
  .idr-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--surface);box-shadow:-20px 0 60px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(24px);transition:transform .28s var(--ease)}
  .int-drawer.on .idr-panel{transform:none}
  .idr-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
  .idr-name{font-size:16px;font-weight:700;color:var(--ink)}
  .idr-sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
  .idr-head .mh-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
  .idr-head .mh-x:hover{background:var(--surface-2);color:var(--ink)}
  .idr-body{flex:1;overflow:auto;padding:20px}
  .idr-score{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
  .idr-score.bad{border-color:color-mix(in srgb,#e05a4e 40%,var(--line));background:color-mix(in srgb,#e05a4e 7%,transparent)}
  .idr-score-v{font-size:34px;font-weight:800;color:var(--ink);line-height:1}
  .idr-score.bad .idr-score-v{color:#e05a4e}
  .idr-score-l{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
  .idr-sec-h{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 12px}
  .idg{display:flex;align-items:flex-end;gap:6px;height:110px;margin-bottom:24px;padding:0 2px}
  .idg-col{flex:1;display:flex;align-items:flex-end;height:100%}
  .idg-bar{width:100%;border-radius:5px 5px 0 0;background:color-mix(in srgb,#3b6ef5 32%,transparent);min-height:3px}
  .idg-bar.last{background:#3b6ef5}
  .idr-answers{display:flex;flex-direction:column;gap:12px}
  .idr-ans{border-bottom:1px solid var(--line);padding-bottom:12px}
  .idr-q{font-size:12.5px;color:var(--ink-faint)}
  .idr-a{font-size:13.5px;color:var(--ink);font-weight:600;margin-top:3px}
  .idr-foot{padding:16px 20px;border-top:1px solid var(--line)}
  .idr-scribely{width:100%;justify-content:center}
  .sub-tabs{display:flex;gap:4px;padding:10px 12px 8px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .sub-tab{flex:1;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-soft);background:transparent;cursor:pointer;transition:background .13s,color .13s}
  .sub-tab:hover{color:var(--ink)}
  .sub-tab.on{background:var(--surface-2);color:var(--ink)}
  .sub-results{flex:1}
  .sub-res-acts{display:flex;gap:10px;margin-top:20px}
  .sub-res-acts button{flex:1;justify-content:center;height:44px;white-space:nowrap;border-radius:12px}
  .si-method{display:flex;gap:8px;margin-bottom:14px}
  .si-mbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer;transition:.13s}
  .si-mbtn.on{border-color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);color:var(--app)}
  .si-mbtn svg{width:15px;height:15px}
  .sub-src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;margin-bottom:16px}
  .sub-src svg{width:14px;height:14px}
  .sub-src.call{color:var(--app);border-color:color-mix(in srgb,var(--app) 30%,var(--line))}
  .lt-mode{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
  .lt-mode.call{color:var(--app)}
  .lt-mode svg{width:13px;height:13px;flex:0 0 auto}

  /* ===== Joi per-product login ===== */
  .joilogin{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:26px;
    background:rgba(12,14,20,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
  .joilogin.on{display:grid;opacity:1}
  .jl-card{--jl:#3b6ef5;width:min(1040px,100%);height:min(660px,92vh);display:grid;grid-template-columns:1.05fr .95fr;
    background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.45);
    transform:translateY(14px) scale(.99);transition:transform .32s var(--ease);opacity:0}
  .joilogin.on .jl-card{transform:none;opacity:1}
  .jl-promo{background:linear-gradient(160deg,#4f6ef7,#3b6ef5 55%,#2f57d6);color:#fff;padding:44px 40px;display:flex;flex-direction:column;gap:26px;overflow:hidden}
  .jl-promo-h{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.5px}
  .jl-auth{padding:52px 46px;display:flex;flex-direction:column;justify-content:center;background:var(--surface)}
  .jl-brand{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:22px;box-shadow:0 1px 2px rgba(60,64,67,.10),0 1px 3px rgba(60,64,67,.06)}
  .jl-brand img{width:26px;height:auto;display:block}
  .jl-brand svg{width:26px;height:26px;stroke-width:2}
  .jl-title{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.4px}
  .jl-sub{font-size:14px;color:var(--ink-soft);margin:10px 0 26px;line-height:1.5;max-width:340px}
  .jl-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:13px;font-size:14.5px;font-weight:600;
    border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;margin-bottom:12px;transition:background .14s,filter .14s}
  .jl-btn svg{width:19px;height:19px}
  .jl-btn:hover{background:var(--surface-2)}
  .jl-btn.primary{background:#3b6ef5;color:#fff;border-color:transparent}
  .jl-btn.primary:hover{filter:brightness(1.07)}
  /* one control height in the sign-in form: buttons, inputs, selects = 48px */
  .jl-auth .jl-btn,.jl-auth .jl-btn-cta,.jl-auth .btn-primary,.jl-auth .input{height:48px!important;min-height:48px;box-sizing:border-box}
  /* Plans uses the same two panels as every other sign-in step: story left (jl-promo), form right (jl-auth) */
  .pay-full{grid-template-columns:1.15fr .85fr!important}   /* same split as the sign-in card */
  .pay-full .pay-side.jl-promo{justify-content:center}
  @media (max-width:820px){.pay-full{grid-template-columns:1fr!important}}
  .pay-full .pay-stripe.jl-auth{display:grid;place-items:center}
  .pay-full .pay-stripe.jl-auth .input{height:44px!important;min-height:44px}
  .jl-gm{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:#fff;color:#4285f4;border:1px solid var(--line)}
  .jl-fine{font-size:11.5px;color:var(--ink-faint);margin-top:8px}
  .jl-fine a{color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .jl-fine a:hover{color:var(--ink)}
  .jl-row{display:flex;gap:14px}
  .jl-row .field{flex:1}
  .jl-terms{font-size:12px;color:var(--ink-faint);line-height:1.5;margin:2px 0 18px}
  .jl-terms a{color:var(--ink-soft);text-decoration:underline}
  .jl-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--ink-faint)}
  .jl-or::before,.jl-or::after{content:'';flex:1;height:1px;background:var(--line)}
  .jl-btn-cta{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:13px;font-size:14.5px;font-weight:600;
    border:0;background:var(--app-grad);color:#fff;cursor:pointer;width:100%;transition:filter .14s}
  .jl-btn-cta:hover{filter:brightness(1.06)}
  .jl-btn-cta svg{width:19px;height:19px}
  .jl-auth .jl-row,.jl-auth .field,.jl-auth .jl-terms,.jl-auth .btn-primary,.jl-auth .jl-btn-cta,.jl-auth .jl-or{max-width:420px}

  /* ---- organization setup wizard (post-signup) ---- */
  .orgset-steps{display:flex; align-items:center; gap:8px; margin-bottom:26px; max-width:420px}
  .orgset-step{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-faint); flex-shrink:0}
  .orgset-step i{font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--surface-2); color:var(--ink-faint); display:grid; place-items:center; font-size:10.5px; flex-shrink:0}
  .orgset-step.active{color:var(--ink)}
  .orgset-step.active i{background:var(--app-grad); color:#fff}
  .orgset-step.done i{background:var(--app); color:#fff}
  .orgset-line{flex:1; height:1px; background:var(--line)}
  .orgset-line.done{background:var(--app)}
  .orgset-logo{margin-bottom:22px}
  .orgset-logo-circle{width:72px; height:72px; border-radius:50%; background:var(--app-grad); color:#fff; font-size:26px; font-weight:800; display:grid; place-items:center; margin-bottom:10px; cursor:pointer; box-shadow:0 10px 24px -10px color-mix(in srgb,var(--app) 60%,transparent); transition:filter .15s}
  .orgset-logo-circle:hover{filter:brightness(1.06)}
  .orgset-logo-label{font-size:12.5px; color:var(--ink-faint)}
  .orgset-hint{font-size:12px; color:var(--ink-faint); margin:-10px 0 16px}
  .orgset-colors{display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); max-width:420px}
  .orgset-color{width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; flex-shrink:0; transition:transform .15s}
  .orgset-color.sel{border-color:var(--ink); transform:scale(1.12)}
  .orgset-invite-row{display:flex; gap:8px; align-items:center; margin-bottom:10px; max-width:420px}
  .orgset-invite-row .input{flex:1}
  .orgset-x{width:38px; height:38px; flex-shrink:0; border-radius:var(--r-sm); color:var(--ink-faint); font-size:17px; display:grid; place-items:center; cursor:pointer; background:none; border:none}
  .orgset-x:hover{background:var(--surface-2); color:var(--ink)}
  .orgset-add{align-self:flex-start; width:auto!important; padding:0 18px!important; margin-bottom:20px}
  .orgset-actions{display:flex; gap:10px; max-width:420px}
  .orgset-actions .jl-btn{flex:1; margin-bottom:0; width:auto}
  /* entrance choreography: text and cards arrive as one motion (no text-first pop) */
  @keyframes jlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .jl-promo .al-brand-row{animation:jlIn .45s .05s var(--easeS) both}
  .jl-promo .jl-promo-h{animation:jlIn .5s .12s var(--easeS) both}
  .jl-auth > *{animation:jlIn .45s .1s var(--easeS) both}
  .jl-promo .al-card{animation-delay:calc(var(--i) * .07s + .18s),calc(var(--i) * 4s + 2s)}
  @media (max-width:820px){ .jl-card{grid-template-columns:1fr} .jl-promo{display:none} }


/* ══════════════════════════════════════════════════════════════
   MacPaw-inspired skin layer — vibrant · translucent · living.
   Colors, glass, glow and motion ONLY. No layout rules here:
   no display/size/padding/margin changes; transforms are
   hover/entrance-only. Remove this block to restore the flat UI.
   ══════════════════════════════════════════════════════════════ */

/* --- animatable product hues: switching products color-morphs the whole environment --- */
@property --app {syntax:'<color>';inherits:true;initial-value:#3b6ef5}
@property --app2{syntax:'<color>';inherits:true;initial-value:#38bdf8}
:root{--app2:#74B0F5;transition:--app .8s var(--ease),--app2 .8s var(--ease)}

/* --- squircle geometry: generous radii, true squircle corners where supported --- */
:root{--r-lg:28px;--r-md:22px;--r-sm:13px;--r-xs:11px}
@supports (corner-shape:squircle){
  .main,.stat,.chart-card,.plan-card,.mem-card,.rea-card,.card,.con-list,.dock-inner,
  .pop,.splash-card,.jl-card,.nav-item,.btn-new,.btn-primary,.search,.seg,.input{corner-shape:squircle}
}
/* --- app icon chips: soft squircles — generous 44% radius + continuous superellipse curve --- */
.prail-ico,.ws-identity .wi-ico,.brand-mark,.prod-chip,.mini-head .mh-ico,.card .cm,
.row .mono,.splash-ico,.jl-brand,.al-chip,.al-ico{border-radius:55%}
@supports (corner-shape:squircle){
  .prail-ico,.ws-identity .wi-ico,.brand-mark,.prod-chip,.mini-head .mh-ico,.card .cm,
  .row .mono,.splash-ico,.jl-brand,.al-chip,.al-ico{corner-shape:squircle}
}
#app{
  transition:--app .8s var(--ease),--app2 .8s var(--ease),opacity .5s var(--ease),transform .5s var(--ease),border-radius .5s var(--ease),box-shadow .5s var(--ease);
  /* signature two-hue gradient per product (beats the JS-set legacy gradient) */
  --app-grad:linear-gradient(135deg,var(--app2) 0%,var(--app) 58%,color-mix(in srgb,var(--app) 78%,#12083a) 100%) !important;
  --app-soft:linear-gradient(135deg,color-mix(in srgb,var(--app) 15%,var(--surface)) 0%,color-mix(in srgb,var(--app2) 7%,var(--surface)) 100%) !important;
  /* CleanMyMac scene: corner washes + the signature module glow rising from bottom-center.
     Light mode stays airy — washes are whispers, color lives in the accents. */
  background:
    radial-gradient(120vh 120vh at 8% -10%,color-mix(in srgb,var(--app) 7%,transparent),transparent 60%),
    radial-gradient(110vh 110vh at 104% 112%,color-mix(in srgb,var(--app2) 6%,transparent),transparent 60%),
    radial-gradient(90vw 70vh at 50% 118%,color-mix(in srgb,var(--app) 5%,transparent),transparent 62%),
    var(--bg);
}
:root[data-theme="dark"] #app{
  background:
    radial-gradient(120vh 120vh at 8% -10%,color-mix(in srgb,var(--app) 24%,transparent),transparent 62%),
    radial-gradient(110vh 110vh at 104% 112%,color-mix(in srgb,var(--app2) 20%,transparent),transparent 62%),
    radial-gradient(90vw 70vh at 50% 118%,color-mix(in srgb,var(--app) 20%,transparent),transparent 64%),
    linear-gradient(180deg,#0b0c10 0%,#0d0f16 100%);
}

/* --- living aurora: product-colored light drifting behind the glass --- */
.mp-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mp-aurora i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;opacity:.10}
.mp-aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-18vh;background:radial-gradient(circle,var(--app),transparent 65%);animation:mpDrift1 26s ease-in-out infinite alternate}
.mp-aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;bottom:-20vh;background:radial-gradient(circle,var(--app2),transparent 65%);animation:mpDrift2 34s ease-in-out infinite alternate}
.mp-aurora i:nth-child(3){width:34vw;height:34vw;left:38vw;top:26vh;background:radial-gradient(circle,color-mix(in srgb,var(--app) 50%,var(--app2)),transparent 68%);opacity:.07;animation:mpDrift3 42s ease-in-out infinite alternate}
/* the CleanMyMac "module light": a breathing glow anchored at the bottom of the scene */
.mp-aurora i:nth-child(4){width:60vw;height:34vw;left:20vw;bottom:-24vw;border-radius:50%;background:radial-gradient(ellipse,var(--app2) 0%,var(--app) 45%,transparent 70%);opacity:.09;animation:mpModule 9s ease-in-out infinite alternate}
:root[data-theme="dark"] .mp-aurora i{opacity:.24}
:root[data-theme="dark"] .mp-aurora i:nth-child(3){opacity:.12}
:root[data-theme="dark"] .mp-aurora i:nth-child(4){opacity:.20}
@keyframes mpDrift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes mpDrift2{to{transform:translate(-8vw,-6vh) scale(1.15)}}
@keyframes mpDrift3{to{transform:translate(-6vw,8vh) scale(1.2) rotate(20deg)}}
@keyframes mpModule{from{transform:scale(1)}to{transform:scale(1.14) translateY(-3vh)}}
.topbar,.body{position:relative;z-index:1}
.splash-overlay,.joilogin,#login{
  --app-grad:linear-gradient(135deg,var(--app2) 0%,var(--app) 58%,color-mix(in srgb,var(--app) 78%,#12083a) 100%) !important;
}

/* --- frosted glass: primary panels blur the scene behind them --- */
.main,.con-list,.dock-inner{
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  border-color:color-mix(in srgb,var(--line) 72%,transparent);
}
:root[data-theme="dark"] .main,:root[data-theme="dark"] .con-list,:root[data-theme="dark"] .dock-inner{
  background:color-mix(in srgb,color-mix(in srgb,var(--app) 4%,var(--surface)) 68%,transparent);
}
/* sidebar stays transparent — nav pills float directly on the scene (our floating-panel language) */
.pop{
  background:color-mix(in srgb,var(--surface) 76%,transparent);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
}
.splash-card,.jl-card{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
}
/* search must read as a field on any wash: defined glass fill + hairline + soft lift */
.search{
  background:color-mix(in srgb,var(--surface) 74%,transparent);
  border-color:color-mix(in srgb,var(--line) 85%,transparent);
  box-shadow:0 2px 10px -4px rgba(20,22,40,.10),inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
}
:root[data-theme="dark"] .search{
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  box-shadow:0 2px 12px -4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
.search:focus-within{border-color:color-mix(in srgb,var(--app) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 18%,transparent),0 10px 30px -12px color-mix(in srgb,var(--app) 35%,transparent)}

/* --- inner cards: translucent fill wrapped in a gradient ring that follows the corner curve --- */
.stat,.chart-card,.plan-card,.mem-card,.rea-card{
  position:relative;
  border-color:transparent;
  background:
    linear-gradient(color-mix(in srgb,var(--surface) 80%,transparent),color-mix(in srgb,var(--surface) 80%,transparent)) padding-box,
    linear-gradient(155deg,
      color-mix(in srgb,var(--app) 38%,var(--line)) 0%,
      var(--line) 38%,var(--line) 62%,
      color-mix(in srgb,var(--app2) 26%,var(--line)) 100%) border-box;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* dark cards carry the module hue from within — never flat gray */
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .chart-card,:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .mem-card,:root[data-theme="dark"] .rea-card{
  background:
    linear-gradient(165deg,
      color-mix(in srgb,var(--app) 9%,color-mix(in srgb,var(--surface) 72%,transparent)),
      color-mix(in srgb,var(--surface) 68%,transparent) 55%) padding-box,
    linear-gradient(155deg,
      color-mix(in srgb,var(--app) 42%,var(--line)) 0%,
      var(--line) 40%,var(--line) 60%,
      color-mix(in srgb,var(--app2) 30%,var(--line)) 100%) border-box;
}
.stat:hover,.chart-card:hover,.plan-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -16px color-mix(in srgb,var(--app) 32%,transparent);
}
.card:hover{box-shadow:0 12px 30px -14px color-mix(in srgb,var(--app) 34%,transparent)}
.stat .sv{background:linear-gradient(120deg,var(--ink) 45%,color-mix(in srgb,var(--app) 58%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- vibrant actives: the product hue fills, glows and breathes --- */
.nav-item.active,.con-nav-item.on,.con-subitem.on{
  background:var(--app-grad);color:#fff;
  box-shadow:0 5px 14px -7px color-mix(in srgb,var(--app) 52%,transparent),inset 0 1px 0 rgba(255,255,255,.22);
}
.nav-item.active .count,.con-subitem.on .con-count{color:rgba(255,255,255,.85)}
.nav-item{transition:background .18s var(--ease),color .18s var(--ease),box-shadow .25s var(--ease)}
.iconbtn.active,.rail button.active{
  background:color-mix(in srgb,var(--app) 16%,transparent);color:var(--app);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--app) 32%,transparent),0 6px 16px -6px color-mix(in srgb,var(--app) 45%,transparent);
}
.iconbtn.primary{
  position:relative;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--app) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .25s var(--ease);
}
.iconbtn.primary::after{ /* glow pulses via opacity — compositor-only, zero repaint */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 10px 28px -6px color-mix(in srgb,var(--app) 90%,transparent);
  opacity:0;animation:mpPulseO 3.6s ease-in-out infinite;
}
.iconbtn.primary:hover{transform:scale(1.06)}
@keyframes mpPulseO{0%,100%{opacity:0}50%{opacity:1}}
.btn-new:not(.secondary),.btn-primary,.splash-go{
  background:var(--app-grad);
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--app) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .15s;
}
.btn-new:not(.secondary):hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px -10px color-mix(in srgb,var(--app) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.lt-row.active,.con-conv.on{
  background:linear-gradient(90deg,color-mix(in srgb,var(--app) 15%,transparent),color-mix(in srgb,var(--app2) 6%,transparent));
  box-shadow:inset 3px 0 0 var(--app);
}
.lt-row,.con-conv,.row{transition:background .18s var(--ease),box-shadow .18s var(--ease)}
.input:focus{border-color:color-mix(in srgb,var(--app) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app) 20%,transparent)}

/* --- product rail: soft translucent squircle chips, Apple-bento glass in each product's hue --- */
.prail-ico{
  background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 78%,transparent),color-mix(in srgb,var(--pc) 94%,transparent) 62%);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.14),
             0 10px 24px -9px color-mix(in srgb,var(--pc) 60%,transparent);
}
:root[data-theme="dark"] .prail-ico{
  background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 60%,transparent),color-mix(in srgb,var(--pc) 86%,transparent) 62%);
}
.prail-item:hover .prail-ico{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.16),0 14px 30px -9px color-mix(in srgb,var(--pc) 80%,transparent)}
/* focal halo removed — new PNG icon fills the chip edge-to-edge, no ring needed */

/* --- living content: screens rise in, charts grow, bars bloom --- */
#mainBody>*{animation:mpIn .45s var(--ease) both}
#mainBody>*:nth-child(2){animation-delay:.05s}
#mainBody>*:nth-child(3){animation-delay:.10s}
#mainBody>*:nth-child(4){animation-delay:.15s}
#mainBody>*:nth-child(5){animation-delay:.20s}
@keyframes mpIn{from{opacity:0;transform:translateY(12px)}}
.hbar-fill{transform-origin:left;animation:mpGrowX .7s var(--ease) backwards;animation-delay:.15s}
@keyframes mpGrowX{from{transform:scaleX(0)}}
.vbar,.vbars.stacked .seg{transform-origin:bottom;animation:mpGrowY .6s var(--ease) backwards}
.vbar-col:nth-child(2n) .vbar{animation-delay:.06s}
.vbar-col:nth-child(3n) .vbar{animation-delay:.12s}
@keyframes mpGrowY{from{transform:scaleY(0)}}
/* topbar avatar: white in light mode */
:root[data-theme="light"] .up-av{background:#ffffff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* status pills: themed via --stc; dark mode lifts the text toward white for contrast */
.mp-st{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  color:var(--stc);background:color-mix(in srgb,var(--stc) 12%,transparent);border:1px solid color-mix(in srgb,var(--stc) 30%,transparent)}
:root[data-theme="dark"] .mp-st{color:color-mix(in srgb,var(--stc) 48%,#fff)}

/* accent-on-tint chips: in dark, pure accent text sinks — lift it toward white */
:root[data-theme="dark"] .comm-pill .pill,
:root[data-theme="dark"] .chchip.on{color:color-mix(in srgb,var(--app) 52%,#fff)}

/* offscreen chart cards skip layout & paint until needed */
.chart-card{content-visibility:auto;contain-intrinsic-size:auto 340px}

/* --- chrome details --- */
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--app) 26%,var(--surface-3));border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app) 45%,var(--surface-3));background-clip:content-box}
.seg{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.seg button.on{box-shadow:0 1px 4px color-mix(in srgb,var(--app) 25%,rgba(60,64,67,.12))}
.user-pill{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gs-load-fill{background:var(--app-grad)}
.pop-wave{background:var(--app-grad)}

/* ══════════ logins: full-screen split — living animated scene left, auth panel right ══════════ */
/* the scene spans the FULL screen — same language as the per-app logins, in the suite's brand hue */
#login{padding:0;--app:#ea6a17;--app2:#fbbf24;background:
    radial-gradient(80vh 80vh at 10% -8%,color-mix(in srgb,var(--app2) 58%,transparent),transparent 64%),
    radial-gradient(90vh 65vh at 34% 118%,color-mix(in srgb,var(--app2) 32%,transparent),transparent 62%),
    linear-gradient(160deg,color-mix(in srgb,var(--app) 86%,#ffffff),var(--app) 42%,color-mix(in srgb,var(--app) 62%,#0a0620) 100%);
}
:root[data-theme="light"] #login{background:
    radial-gradient(80vh 80vh at 10% -8%,color-mix(in srgb,var(--app2) 30%,transparent),transparent 64%),
    radial-gradient(90vh 65vh at 34% 118%,color-mix(in srgb,var(--app) 20%,transparent),transparent 62%),
    linear-gradient(160deg,#fdfdff,#f2f4fa);
}
.login-card{
  width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;
  grid-template-columns:1.15fr .85fr;background:transparent;
}
/* suite scene: deep multi-hue space with all products alive in it */
.login-left{
  position:relative;overflow:hidden;color:#fff;padding:clamp(44px,5vw,84px);justify-content:center;gap:30px;
  background:transparent;
}
.login-left .brand-sub{color:rgba(255,255,255,.55)}
.login-left .login-hero h1{font-size:clamp(30px,3vw,44px);color:#fff}
.login-left .login-hero p{color:rgba(255,255,255,.72);max-width:44ch}
.login-left .login-foot{color:rgba(255,255,255,.45)}
.login-right{
  background:color-mix(in srgb,var(--surface) 52%,transparent);
  backdrop-filter:blur(36px) saturate(1.6);-webkit-backdrop-filter:blur(36px) saturate(1.6);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--line) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
  padding:clamp(46px,7vw,120px);
}
/* suite form controls = same anatomy as the per-app login controls */
.login-right .field,.login-right .btn-primary,.login-right .login-alt,.login-right h2,.login-right .muted{max-width:420px}
.login-right .input{
  height:50px;padding:0 16px;font-size:14.5px;
  background:color-mix(in srgb,var(--surface) 48%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.login-right .btn-primary{
  height:50px;padding:0;display:flex;align-items:center;justify-content:center;
  font-size:14.5px;font-weight:600;
}
/* per-app scene: the product's own hue, full bleed — auth glass floats over it */
.joilogin{padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:
    radial-gradient(80vh 80vh at 10% -8%,color-mix(in srgb,var(--app2) 58%,transparent),transparent 64%),
    radial-gradient(90vh 65vh at 34% 118%,color-mix(in srgb,var(--app2) 32%,transparent),transparent 62%),
    linear-gradient(160deg,color-mix(in srgb,var(--app) 86%,#ffffff),var(--app) 42%,color-mix(in srgb,var(--app) 62%,#0a0620) 100%);
}
:root[data-theme="light"] .joilogin{background:
    radial-gradient(80vh 80vh at 10% -8%,color-mix(in srgb,var(--app2) 30%,transparent),transparent 64%),
    radial-gradient(90vh 65vh at 34% 118%,color-mix(in srgb,var(--app) 20%,transparent),transparent 62%),
    linear-gradient(160deg,#fdfdff,#f2f4fa);
}
.jl-card{
  width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none;
  grid-template-columns:1.15fr .85fr;background:transparent;
}
@media (max-width:820px){.jl-card{grid-template-columns:1fr}}
.jl-promo{
  position:relative;overflow:hidden;justify-content:center;gap:22px;padding:clamp(44px,5vw,84px);
  background:transparent;
}
.jl-promo-h{font-size:clamp(30px,3vw,44px);max-width:18ch}
.jl-auth{
  background:color-mix(in srgb,var(--surface) 52%,transparent);
  backdrop-filter:blur(36px) saturate(1.6);-webkit-backdrop-filter:blur(36px) saturate(1.6);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--line) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
  padding:clamp(46px,7vw,120px);
}
.jl-btn:not(.primary){background:color-mix(in srgb,var(--surface) 48%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* ── post-signup checkout: full screen — Stripe open on the left, plan picker right, skip on top ── */
.pay-full{position:relative;width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
.pay-skip-top{
  position:absolute;top:16px;right:20px;z-index:6;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:99px;font-size:13px;font-weight:600;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 60%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line);transition:transform .25s var(--easeS),background .25s;
}
.pay-skip-top:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.pay-stripe{display:grid;place-items:center;padding:clamp(20px,3.5vw,56px);overflow:auto}
.stripe-sheet{
  width:min(460px,100%);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px color-mix(in srgb,var(--line) 75%,transparent);
  animation:mpInS .55s .05s var(--easeS) backwards;
}
.st-brand{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);margin-bottom:16px}
.st-brand b{font-size:16px;letter-spacing:-.03em;color:var(--ink)}
.st-lock{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--app) 14%,transparent);color:var(--app)}
.st-sum{border:1px solid color-mix(in srgb,var(--app) 22%,var(--line));border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;background:color-mix(in srgb,var(--app) 6%,transparent)}
.st-sum-plan{font-size:13px;font-weight:700}
.st-sum-price{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.st-sum-price b{font-size:26px;font-weight:800;letter-spacing:-.8px}
.st-sum-price span{font-size:11.5px;color:var(--ink-soft)}
.st-sum-trial{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-soft);margin-top:8px}
.st-sum-trial svg{color:var(--app)}
.st-l{display:block;font-size:11.5px;color:var(--ink-soft);margin:12px 0 6px}
.st-in{height:44px;padding:0 14px;font-size:13.5px}
.st-card .st-in{width:100%}
.st-card .st-row{gap:0;margin-top:-1px}
.st-row{display:flex;gap:10px}
.st-row .st-in{flex:1;min-width:0}
.st-pay{margin-top:18px;height:50px;display:flex;align-items:center;justify-content:center;font-size:14.5px}
.st-fine{font-size:11px;color:var(--ink-faint);margin-top:12px;line-height:1.55}
.pay-side{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,3.5vw,64px);padding-top:clamp(56px,7vh,72px);overflow:auto;
  background:color-mix(in srgb,var(--surface) 52%,transparent);
  backdrop-filter:blur(36px) saturate(1.6);-webkit-backdrop-filter:blur(36px) saturate(1.6);
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--line) 60%,transparent);
}
.pay-side .pay-plan{cursor:pointer}
/* safe vertical centering: auto margins collapse when content overflows, so the top never clips */
.pay-side>*:first-child{margin-top:auto}
.pay-side>*:last-child{margin-bottom:auto}
.pay-plan.sel{
  border-color:color-mix(in srgb,var(--app) 55%,var(--line));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--app) 30%,transparent),0 18px 44px -20px color-mix(in srgb,var(--app) 40%,transparent);
}
@media (max-width:880px){.pay-full{grid-template-columns:1fr;overflow:auto}.pay-stripe{order:2}.pay-side{order:1;padding-top:64px}}
@supports (corner-shape:squircle){.stripe-sheet,.pay-plan,.st-in,.st-pay,.pay-skip-top{corner-shape:squircle}}
.pay-head{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.pay-h{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.4px}
.pay-sub{font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.5}
.pay-plan{
  position:relative;border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:14px;
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  transition:transform .3s var(--easeS),box-shadow .3s var(--easeS),border-color .3s;
}
.pay-plan:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--app) 35%,var(--line));box-shadow:0 18px 44px -20px color-mix(in srgb,var(--app) 40%,transparent)}
.pay-plan.best{
  border-color:color-mix(in srgb,var(--app) 40%,var(--line));
  background:linear-gradient(165deg,color-mix(in srgb,var(--app) 10%,transparent),transparent 60%),color-mix(in srgb,var(--surface) 55%,transparent);
  box-shadow:0 22px 54px -24px color-mix(in srgb,var(--app) 45%,transparent);
}
.pp-badge{
  align-self:flex-start;font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;color:var(--app);
  background:color-mix(in srgb,var(--app) 12%,transparent);border:1px solid color-mix(in srgb,var(--app) 30%,transparent);
}
.pp-badge.hot{color:#fff;background:var(--app-grad);border-color:transparent;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app) 65%,transparent)}
.pp-name{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;letter-spacing:-.2px}
.pp-name .al-chip{width:30px;height:30px}
.pp-price{display:flex;align-items:baseline;gap:9px}
.pp-price s{font-size:15px;color:var(--ink-faint)}
.pp-price b{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--ink) 40%,color-mix(in srgb,var(--app) 62%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-price span{font-size:12.5px;color:var(--ink-soft)}
.pp-feats{display:flex;flex-direction:column;gap:8px}
.pp-feat{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.pp-feat svg{color:var(--app);flex:0 0 auto}
.pp-chips{display:flex;flex-wrap:wrap;gap:7px}
.pp-chips .al-chip{width:26px;height:26px;animation:alEnter .5s var(--easeS) backwards}

/* login form controls follow the squircle language too */
.login-right .input,.login-right .btn-primary,.jl-auth .jl-btn{border-radius:17px}
@supports (corner-shape:squircle){
  .login-right .input,.login-right .btn-primary,.jl-auth .jl-btn{corner-shape:squircle}
}
.jl-auth .jl-btn{max-width:420px}
.jl-brand{box-shadow:0 10px 26px -10px color-mix(in srgb,var(--app) 40%,transparent)}
.jl-btn.primary{background:var(--app-grad);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--app) 60%,transparent)}
.al-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.al-chip{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;color:#fff;background:var(--app-grad);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--app) 60%,transparent)}
.al-name{font-weight:700;font-size:15px}
.al-purpose{font-size:12px;color:var(--ink-faint)}
/* the card deck: a hand of real cards, dealt then spread into a fan — each takes a turn rising */
.al-cards{position:relative;height:min(44vh,400px);margin-top:14px;margin-bottom:10px;width:100%;max-width:600px;--mid:1.5;align-self:center}
.al-card{
  --rot:calc((var(--i) - var(--mid)) * 10deg);
  --shift:calc((var(--i) - var(--mid)) * 68px);
  position:absolute;left:50%;bottom:26px;
  width:min(212px,24vw);aspect-ratio:5/7;border-radius:22px;
  display:flex;flex-direction:column;gap:12px;padding:22px 20px;
  border:1px solid rgba(255,255,255,.6);
  /* frosted-white opaque panel with a whisper of the product hue — dark ink is ALWAYS readable,
     and cards behind read as edges/shadows, never as text */
  background:linear-gradient(168deg,
    color-mix(in srgb,#ffffff 88%,var(--app)),
    color-mix(in srgb,#ffffff 76%,var(--app)) 58%,
    color-mix(in srgb,#ffffff 84%,var(--app)));
  color:#1f2023;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.7);
  transform-origin:50% 130%;
  transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot));
  z-index:calc(1 + var(--i));will-change:transform;
  animation:
    alDeal .9s calc(var(--i) * .09s + .15s) var(--easeS) both,
    alPeek 16s calc(var(--i) * 4s + 2s) ease-in-out infinite;
}
.al-card::after{ /* card face sheen, like light across a glossy card */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 60%);
}
.al-idx{position:absolute;top:16px;right:18px;font-size:12px;font-weight:800;letter-spacing:.08em;color:rgba(31,32,35,.4)}
.al-ico{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;color:#fff;background:var(--app-grad);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app) 60%,transparent)}
.al-main{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.al-t{font-size:16px;font-weight:750;letter-spacing:-.25px;line-height:1.2}
.al-d{font-size:12px;color:rgba(31,32,35,.66);line-height:1.5}
/* deal-in: the deck starts squared in hand, then spreads into the fan */
@keyframes alDeal{
  from{transform:translate(-50%,90px) rotate(0deg) scale(.9);opacity:0}
  to{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot)) scale(1);opacity:1}
}
/* peek: the card slides up out of the fan along its own angle, then tucks back in */
@keyframes alPeek{
  /* z-index steps a beat before the card visually moves (and drops a beat after it fully
     settles) so the raised card is never under-stacked mid-transform — that mismatch was
     what read as a choppy "clip" against the neighboring cards. */
  0%{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot));z-index:calc(1 + var(--i))}
  .5%{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot));z-index:9}
  5%,13%{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot)) translateY(-48px) scale(1.06);z-index:9}
  17.5%{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot));z-index:9}
  18%,100%{transform:translate(calc(-50% + var(--shift)),0) rotate(var(--rot));z-index:calc(1 + var(--i))}
}
/* suite login: the turning hand — pure transform/opacity keyframes (compositor-only; the old
   registered-property animation recalculated style per frame and its round()-driven z-index
   reshuffles caused a visible hitch). z steps only at keyframes. */
.login-left .al-card{
  --app-grad:linear-gradient(135deg,var(--app2) 0%,var(--app) 58%,color-mix(in srgb,var(--app) 78%,#12083a) 100%);
  transform-origin:50% 215%;
  opacity:0;will-change:transform,opacity;
  animation:alHandT 42s linear infinite;
  animation-delay:calc(var(--i) * -3s);
}
@keyframes alHandT{
  0%   {transform:translateX(-50%) rotate(-40deg);opacity:0;z-index:1}
  8%   {transform:translateX(-50%) rotate(-27.5deg);opacity:1;z-index:2}
  16%  {transform:translateX(-50%) rotate(-16.5deg);opacity:1;z-index:3}
  24%  {transform:translateX(-50%) rotate(-5.5deg);opacity:1;z-index:4}
  32%  {transform:translateX(-50%) rotate(5.5deg);opacity:1;z-index:5}
  40%  {transform:translateX(-50%) rotate(16.5deg);opacity:1;z-index:6}
  48%  {transform:translateX(-50%) rotate(27.5deg);opacity:1;z-index:7}
  56%  {transform:translateX(-50%) rotate(66deg);opacity:0;z-index:8}
  100% {transform:translateX(-50%) rotate(66deg);opacity:0;z-index:8}
}
}
.login-left .al-cards:hover .al-card{animation-play-state:paused}
@keyframes alHand{
  0%   {--slot:-0.9;opacity:0}
  8%   {opacity:1}
  48%  {opacity:1}       /* card clears the fan BEFORE fading — no ghost text over neighbors */
  54.5%{--slot:6.7;opacity:0}
  100% {--slot:6.7;opacity:0}
}
.login-left .al-card .al-ico{background:var(--app-grad);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app) 70%,transparent)}
@media (max-width:820px){.login-left{display:none}.login-card{grid-template-columns:1fr}}

/* ── login theming: light = white-frosted, translucent, colorful · dark = deep but vibrant ── */
:root[data-theme="light"] .login-left{color:var(--ink);background:transparent}
:root[data-theme="light"] .login-left .login-hero h1{color:var(--ink)}
:root[data-theme="light"] .login-left .login-hero p{color:var(--ink-soft)}
:root[data-theme="light"] .login-left .brand-sub,:root[data-theme="light"] .login-left .login-foot{color:var(--ink-faint)}
:root:not([data-theme="dark"]) .jl-promo{color:var(--ink);background:transparent}
/* (cards are frosted-white with dark ink in BOTH themes — no per-theme overrides needed) */
@keyframes alEnter{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(4px)}}
.splash-prods{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:26px 0 30px}
.splash-prods .al-chip{animation:alEnter .5s var(--easeS) backwards}
.splash-prods .al-chip:nth-child(n){animation-delay:calc(.05s * var(--mp-i,1))}

/* ══════════ extreme smoothness: page transitions, load choreography, gliding panels ══════════ */
:root{--easeS:cubic-bezier(.22,1,.36,1);--easeO:cubic-bezier(.3,1.36,.44,1)}

/* view transitions: content morphs between screens while the shell stays put */
#mainBody{view-transition-name:mp-body}
#mainHead{view-transition-name:mp-head}
#leftnav{view-transition-name:mp-nav}
/* VT = a clean crossfade only; the MOTION lives in the content stagger (never both — that reads as jank) */
::view-transition-old(mp-body){animation:mpVtFadeOut .18s var(--easeS) both}
::view-transition-new(mp-body){animation:mpVtFadeIn .34s .04s var(--easeS) both}
::view-transition-old(mp-head),::view-transition-old(mp-nav){animation:mpVtFadeOut .18s var(--easeS) both}
::view-transition-new(mp-head),::view-transition-new(mp-nav){animation:mpVtFadeIn .32s .04s var(--easeS) both}
@keyframes mpVtFadeOut{to{opacity:0}}
@keyframes mpVtFadeIn{from{opacity:0}}

/* dashboard load: the WRAPPERS only fade (no double movement); cards inside carry the rise */
@keyframes mpInS{from{opacity:0;transform:translateY(12px) scale(.99);filter:blur(3px)}}
@keyframes mpFade{from{opacity:0}}
#mainBody>*{animation-name:mpFade;animation-duration:.4s;animation-timing-function:var(--easeS)}
#mainBody>*:nth-child(6){animation-delay:.25s}
#mainBody>*:nth-child(7){animation-delay:.30s}
#mainBody>*:nth-child(8){animation-delay:.35s}
.stat-row .stat{animation:mpInS .55s var(--easeS) backwards}
.stat-row .stat:nth-child(1){animation-delay:.04s}.stat-row .stat:nth-child(2){animation-delay:.08s}
.stat-row .stat:nth-child(3){animation-delay:.12s}.stat-row .stat:nth-child(4){animation-delay:.16s}
.stat-row .stat:nth-child(5){animation-delay:.20s}.stat-row .stat:nth-child(6){animation-delay:.24s}
.stat-row .stat:nth-child(7){animation-delay:.28s}.stat-row .stat:nth-child(8){animation-delay:.32s}
.stat-row .stat:nth-child(9){animation-delay:.36s}
.charts-grid .chart-card{animation:mpInS .6s var(--easeS) backwards}
.charts-grid .chart-card:nth-child(1){animation-delay:.10s}
.charts-grid .chart-card:nth-child(2){animation-delay:.18s}
.charts-grid .chart-card:nth-child(3){animation-delay:.26s}
.grid-cards .card{animation:mpInS .5s var(--easeS) backwards}
.grid-cards .card:nth-child(-n+12){animation-delay:calc(.04s * var(--mp-i,0))}

/* graphs: bars bloom in sequence, donuts draw themselves, numbers land softly */
.hbar-fill{animation:mpGrowX .9s var(--easeS) backwards}
.hbar-row:nth-child(1) .hbar-fill{animation-delay:.20s}
.hbar-row:nth-child(2) .hbar-fill{animation-delay:.28s}
.hbar-row:nth-child(3) .hbar-fill{animation-delay:.36s}
.hbar-row:nth-child(4) .hbar-fill{animation-delay:.44s}
.hbar-row:nth-child(5) .hbar-fill{animation-delay:.52s}
.hbar-row:nth-child(6) .hbar-fill{animation-delay:.60s}
.vbar,.vbars.stacked .seg{animation:mpGrowY .8s var(--easeS) backwards}
.vbar-col:nth-child(1) .vbar{animation-delay:.15s}.vbar-col:nth-child(2) .vbar{animation-delay:.19s}
.vbar-col:nth-child(3) .vbar{animation-delay:.23s}.vbar-col:nth-child(4) .vbar{animation-delay:.27s}
.vbar-col:nth-child(5) .vbar{animation-delay:.31s}.vbar-col:nth-child(6) .vbar{animation-delay:.35s}
.vbar-col:nth-child(7) .vbar{animation-delay:.39s}.vbar-col:nth-child(8) .vbar{animation-delay:.43s}
.donut circle:last-child{animation:mpDonut 1.1s .25s var(--easeS) backwards}
@keyframes mpDonut{from{stroke-dasharray:0 1000}}
.cc-hero{animation:mpInS .6s .15s var(--easeS) backwards}

/* panels glide: dock opens with spring, its content follows; popovers settle with overshoot */
.dock{transition:width .5s var(--easeS),margin-left .5s var(--easeS)}
.dock.on .dock-inner{animation:mpInS .45s .12s var(--easeS) backwards}
.pop{transition:opacity .28s var(--easeO),transform .28s var(--easeO)}
.pop:not(.on){transform:translateY(-10px) scale(.96)}

/* interaction glide: every hover/active eases on the same smooth curve */
.nav-item,.con-subitem,.con-nav-item,.iconbtn,.rail button,.seg button,.user-pill,.prail-ico,
.lt-row,.row,.con-conv,.btn-new,.btn-primary,.card,.input,.search{
  transition-duration:.28s;transition-timing-function:var(--easeS);
}

/* scrollbars: invisible until the pane is actually scrolling (gutter stays — no layout shift) */
::-webkit-scrollbar-thumb{background:transparent;border:3px solid transparent;background-clip:content-box;transition:background .3s}
::-webkit-scrollbar-thumb:hover{background:transparent}
.mp-scrolling::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--app) 30%,var(--surface-3));background-clip:content-box}
.mp-scrolling::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app) 48%,var(--surface-3));background-clip:content-box}

/* ══════════ Age · Agent Studio ══════════ */
.age-head-line{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;margin:4px 2px 16px}
.age-head-line>div>b{font-size:19px;letter-spacing:-.3px;display:block;margin-bottom:3px}
.age-sub{font-size:12px;color:var(--ink-soft);line-height:1.5}
.age-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.age-card{display:flex;flex-direction:column;gap:12px;cursor:pointer}
.age-card-top{display:flex;align-items:center;gap:11px}
.age-av{width:40px;height:40px;flex:0 0 auto;border-radius:38%;display:grid;place-items:center;font-weight:750;color:#fff;background:var(--app-grad);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app) 60%,transparent)}
@supports (corner-shape:squircle){.age-av{corner-shape:squircle}}
.age-nm{min-width:0;flex:1}.age-nm b{font-size:15px}
.age-role{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.age-stats{display:flex;flex-wrap:wrap;gap:10px 24px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.age-stats>div{min-width:0}
.age-stats b{font-size:19px;letter-spacing:-.4px;display:block;font-variant-numeric:tabular-nums}
.age-stats span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.age-acts{display:flex;flex-wrap:wrap;gap:7px}
.age-acts .btn-new{height:32px;padding:0 13px;font-size:12px}
.age-editbar{display:flex;align-items:center;gap:10px;margin:2px 2px 16px;font-size:14px}
.age-form{max-width:820px;display:flex;flex-direction:column;gap:14px}
.age-sec .age-sec-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.age-sec .age-sec-h b{font-size:15px}
.age-n{width:22px;height:22px;flex:0 0 auto;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent)}
.age-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:color-mix(in srgb,var(--surface) 55%,transparent)}
.age-row>div{flex:1;min-width:0}
.age-row.tool{gap:12px}.age-row.tool b{flex:1}
.age-perm{display:flex;align-items:center;gap:16px;padding:8px 13px;margin:-4px 0 10px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--surface-2) 60%,transparent);font-size:12.5px}
.age-perm label{display:flex;align-items:center;gap:7px;cursor:pointer}
.age-tgl{width:38px;height:22px;flex:0 0 auto;border-radius:99px;background:var(--surface-3);position:relative;transition:background .25s var(--easeS);cursor:pointer}
.age-tgl i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .25s var(--easeS)}
.age-tgl.on{background:var(--app-grad)}
.age-tgl.on i{left:18px}
.age-out{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;background:color-mix(in srgb,var(--surface) 55%,transparent)}
.age-out-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.age-out-nm{height:38px;font-weight:700;max-width:300px;background:transparent;border-color:transparent;padding-left:2px}
.age-out-nm:hover,.age-out-desc:hover{border-color:var(--line)}
.age-out-sel{height:36px;width:auto;padding:0 10px;font-size:12.5px}
.age-out-desc{height:34px;font-size:12.5px;color:var(--ink-soft);margin-top:2px;background:transparent;border-color:transparent;padding-left:2px}
.age-out-f{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin-top:10px}
.age-b{font-size:10px;font-weight:750;letter-spacing:.05em;padding:3px 8px;border-radius:99px;text-transform:uppercase}
.age-b.t{color:var(--app);background:color-mix(in srgb,var(--app) 11%,transparent);border:1px solid color-mix(in srgb,var(--app) 28%,transparent)}
.age-b.v{color:var(--ink-soft);border:1px solid var(--line)}
.age-b.ok{color:#fff;background:var(--app-grad);border:1px solid transparent;font-variant-numeric:tabular-nums}
.age-glbl{font-size:10.5px;font-weight:750;letter-spacing:.09em;color:var(--ink-faint);margin:18px 2px 8px;text-transform:uppercase}
.age-lib-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:7px;background:color-mix(in srgb,var(--surface) 55%,transparent);transition:border-color .25s,transform .25s var(--easeS)}
.age-lib-row:hover{border-color:color-mix(in srgb,var(--app) 30%,var(--line));transform:translateY(-1px)}
.age-lib-row>div{min-width:0}
.age-price{font-weight:750;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
@media (max-width:700px){.age-out-f{grid-template-columns:1fr}.age-head-line{flex-direction:column}}

/* ══════════ responsive: phones · folds · tablets · ultra-wide ══════════ */

/* ── 43" / ultra-wide monitors: the app becomes a centered canvas ── */
@media (min-width:2200px){
  body{background:color-mix(in srgb,var(--app,#3b6ef5) 4%,var(--bg))}
  .login-card,.jl-card,.pay-full{max-width:2000px;max-height:1200px;border-radius:34px;overflow:hidden;box-shadow:0 60px 160px -50px rgba(0,0,0,.5)}
  .splash-card{max-width:820px}
}

/* ── tablets (portrait) & small laptops ── */
@media (max-width:1080px){
  .dock.on{width:min(330px,42vw)}
  .charts-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ── phones & folds (unfolded ≈ 717px) ── */
@media (max-width:700px){
  :root{--topbar-h:58px}
  .body{padding:0 8px 8px;gap:8px}
  .dock:not(.on){margin-left:-8px}   /* closed docks cancel exactly one (8px) gap on phones */
  .topbar{height:58px;padding:0 8px;gap:8px}
  .ws-identity .wi-d{display:none}
  /* name shrinks with ellipsis instead of overflowing under the search icon */
  .ws-identity>div{min-width:0}
  .ws-identity .wi-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-left,.tb-right,.tb-center{min-width:0;overflow:hidden}
  /* collapse "New" to an icon-only circle earlier so the center grid track never forces
     the topbar wider than the viewport and overlapping the identity/right-side columns */
  .topbar .btn-new{height:38px;padding:0;width:38px;justify-content:center;border-radius:50%;font-size:0;gap:0;flex:0 0 auto}
  .topbar .btn-new svg{width:18px;height:18px}
  #memActions{gap:6px}
  #memActions .btn-new{height:34px;width:auto;padding:0 10px;font-size:12.5px;flex:0 0 auto;border-radius:99px;gap:6px}
  .charts-grid{grid-template-columns:1fr!important}
  .stat-row{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
  .main-head{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .main-head .lead-centerpills{order:10;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;margin:0}
  .main-body{padding:10px 12px 18px}
  .main-head .sub{display:none}
  .seg button{padding:6px 10px;font-size:12px}
  .cc-num{font-size:26px}
  .pay-side,.pay-stripe{padding:18px}
  .pay-skip-top{top:10px;right:10px}
  .jl-auth,.login-right{padding:26px 20px}
  .dock.on{width:min(330px,88vw)}
}

/* ── fold closed (~280–400px): everything essential, nothing else ── */
@media (max-width:400px){
  :root{--topbar-h:54px}
  .topbar{height:54px}
  .ws-identity .wi-ico{width:32px;height:32px}
  .ws-identity .wi-t{font-size:14px}
  .topbar .btn-new{height:38px;padding:0;width:38px;justify-content:center;border-radius:50%;font-size:0;gap:0}
  .topbar .btn-new svg{width:18px;height:18px}
  .iconbtn{width:38px;height:38px}
  .user-pill{padding:2px}
  .up-name,.up-gear{display:none}
  .stat-row{grid-template-columns:1fr 1fr}
  .stat .sv{font-size:21px}
  .prail-ico{width:42px;height:42px}
  .splash-title{font-size:22px}
}

@media (max-width:360px){
  .ws-identity .wi-t{display:none}
}

/* ── short landscape (folds open sideways, small laptops) ── */
@media (max-height:560px){
  .al-cards{height:min(36vh,260px)}
  .al-card{width:min(150px,20vw);padding:12px 11px}
  .al-card .al-d{display:none}
  .login-hero h1,.jl-promo-h{font-size:clamp(22px,3vh,30px)}
  .splash-card{padding:20px;max-height:92vh;overflow:auto}
  .pay-full{overflow:auto}
}

/* tactile press — everything gives slightly under the finger */
.btn-new:active,.btn-primary:active,.jl-btn:active,.nav-item:active,.iconbtn:active,
.seg button:active,.pay-plan:active,.prail-item:active .prail-ico,.pay-skip-top:active{transform:scale(.97)}
.main-body,.con-list,.dock-inner{overscroll-behavior:contain}

.mp-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:400;
  display:flex;align-items:center;gap:9px;padding:11px 20px;border-radius:99px;
  font-size:13.5px;font-weight:600;color:var(--ink);opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.4),0 0 0 1px var(--line);
  transition:opacity .3s var(--easeS),transform .3s var(--easeS);
}
.mp-toast.on{opacity:1;transform:translate(-50%,0)}
.mp-toast svg{color:var(--app)}
.mp-toast.err svg{color:#e05a4e}
@supports (corner-shape:squircle){.mp-toast{corner-shape:squircle}}

@media (prefers-reduced-motion:reduce){
  .mp-aurora i,#mainBody>*,.hbar-fill,.vbar,.vbars.stacked .seg,.iconbtn.primary,.ws-identity .wi-ico,
  .iconbtn.primary::after,.ws-identity .wi-ico::after,
  .stat-row .stat,.charts-grid .chart-card,.grid-cards .card,.donut circle:last-child,.cc-hero,.dock-inner,
  .al-card{animation:none!important}
  ::view-transition-old(*),::view-transition-new(*){animation:none!important}
  :root,#app{transition:none}
}


/* ═══════════════ GlassX — deeper translucency & fluidity (approved, applied everywhere) ═══════════════
   #app.glassx is now always on (set in render()). To retire: delete this block + that line. */

/* clearer glass: panels thin out, the scene breathes through */
#app.glassx .main,#app.glassx .con-list,#app.glassx .dock-inner{
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  backdrop-filter:blur(34px) saturate(1.8);-webkit-backdrop-filter:blur(34px) saturate(1.8);
}
/* the dock floats over the screen you were on (rail mini-panels, Get Started) — read
   as a clearer frosted pane than the main content area so it stays legible on its own */
#app.glassx .dock-inner{
  background:color-mix(in srgb,var(--surface) 42%,transparent);
  backdrop-filter:blur(40px) saturate(2);-webkit-backdrop-filter:blur(40px) saturate(2);
  border:1px solid color-mix(in srgb,#fff 35%,var(--line));
}
:root[data-theme="dark"] #app.glassx .main,
:root[data-theme="dark"] #app.glassx .con-list,
:root[data-theme="dark"] #app.glassx .dock-inner{
  background:color-mix(in srgb,color-mix(in srgb,var(--app) 5%,var(--surface)) 50%,transparent);
}
/* inner cards lighter still — floating panes of tinted light */
#app.glassx .stat,#app.glassx .chart-card,#app.glassx .plan-card,#app.glassx .mem-card,#app.glassx .rea-card{
  background:
    linear-gradient(color-mix(in srgb,var(--surface) 66%,transparent),color-mix(in srgb,var(--surface) 66%,transparent)) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--app) 38%,var(--line)) 0%,var(--line) 38%,var(--line) 62%,color-mix(in srgb,var(--app2) 26%,var(--line)) 100%) border-box;
}
:root[data-theme="dark"] #app.glassx .stat,:root[data-theme="dark"] #app.glassx .chart-card,
:root[data-theme="dark"] #app.glassx .plan-card,:root[data-theme="dark"] #app.glassx .mem-card,
:root[data-theme="dark"] #app.glassx .rea-card{
  background:
    linear-gradient(165deg,color-mix(in srgb,var(--app) 8%,color-mix(in srgb,var(--surface) 56%,transparent)),color-mix(in srgb,var(--surface) 52%,transparent) 55%) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--app) 42%,var(--line)) 0%,var(--line) 40%,var(--line) 60%,color-mix(in srgb,var(--app2) 30%,var(--line)) 100%) border-box;
}
/* the scene turns up to meet the clearer glass */
#app.glassx .mp-aurora i{opacity:.15}
#app.glassx .mp-aurora i:nth-child(4){opacity:.13}
:root[data-theme="dark"] #app.glassx .mp-aurora i{opacity:.34}
:root[data-theme="dark"] #app.glassx .mp-aurora i:nth-child(3){opacity:.18}
:root[data-theme="dark"] #app.glassx .mp-aurora i:nth-child(4){opacity:.30}
/* fluidity: floatier lifts on a springier curve, glassy hovers, slower dock glide */
#app.glassx .stat:hover,#app.glassx .chart-card:hover{transform:translateY(-4px) scale(1.004);transition-timing-function:var(--easeO)}
#app.glassx .card:hover{transform:translateY(-4px);transition-timing-function:var(--easeO)}
#app.glassx .lt-row:hover,#app.glassx .row:hover,#app.glassx .con-conv:hover{background:color-mix(in srgb,var(--app) 7%,transparent)}
#app.glassx .nav-item,#app.glassx .seg button,#app.glassx .iconbtn{transition-duration:.36s;transition-timing-function:var(--easeO)}
#app.glassx .dock{transition:width .62s var(--easeO),margin-left .62s var(--easeO)}
#app.glassx .seg{background:color-mix(in srgb,var(--surface-2) 62%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#app.glassx .search{background:color-mix(in srgb,var(--surface) 52%,transparent)}
/* ---------- Programly: smart tracker accordion + enrollment wizard ---------- */
.pro-acc-wrap{margin-bottom:10px}
.pro-acc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 6px;cursor:pointer;background:none;border:0;border-bottom:1px solid var(--line)}
.pro-acc-ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--app) 14%,transparent);display:grid;place-items:center;flex:0 0 auto}
.pro-acc-ic svg{width:15px;height:15px;color:var(--app)}
.pro-acc-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.pro-acc-t{font-size:13.5px;font-weight:650;color:var(--ink)}
.pro-acc-n{font-size:11px;font-weight:700;color:var(--ink-faint);margin-left:7px}
.pro-acc-h{font-size:11.5px;color:var(--ink-faint)}
.pro-acc-chev{margin-left:auto;flex:0 0 auto;transition:transform .15s var(--ease);color:var(--ink-faint)}
.pro-acc-chev svg{width:14px;height:14px}
.pro-acc-chev.open{transform:rotate(180deg)}
.pro-empty{padding:10px 6px 14px;font-size:12.5px;color:var(--ink-faint)}
.risk-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.risk-dot.high{background:var(--accent)}
.risk-dot.medium{background:var(--app)}
.risk-dot.low{background:var(--ink-faint)}
.enr-card{width:min(640px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:hidden}
.enr-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.enr-head .icb{display:flex;align-items:center;gap:8px}
.enr-steps{display:flex;gap:6px}
.enr-step{width:26px;height:4px;border-radius:99px;background:var(--line)}
.enr-step.on{background:var(--app)}
.enr-step.done{background:color-mix(in srgb,var(--app) 55%,var(--line))}
.enr-body{flex:1;overflow:auto;padding:20px}
.enr-body h3{margin:0 0 6px;font-size:16px}
.enr-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
.enr-elig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.enr-elig-card{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;font-size:12.5px;color:var(--ink-soft)}
.enr-elig-card .ei{width:32px;height:32px;margin:0 auto 8px;border-radius:10px;background:color-mix(in srgb,var(--app) 12%,transparent);display:grid;place-items:center}
.enr-elig-card .ei svg{width:15px;height:15px;color:var(--app)}
.enr-field{margin-bottom:14px}
.enr-field label{display:block;font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.enr-field input,.enr-field select,.enr-field textarea{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:0 12px;font-size:13.5px;color:var(--ink);outline:none;font-family:inherit}
.enr-field textarea{height:auto;padding:10px 12px;resize:vertical;min-height:72px}
.enr-consent-list{margin:12px 0;padding-left:18px;font-size:13px;color:var(--ink-soft);line-height:1.65}

/* ============ MARKETING LANDING PAGE (ported from CS/frontly, our theme) ============ */
#landing *{ margin:0; padding:0; box-sizing:border-box; }#landing{
  --ink-block:#15161a;
  --gray-1:var(--ink-soft); --gray-2:var(--ink-faint);
  --paper:var(--bg); --paper-2:var(--surface);
  --accent:var(--app); --accent-deep:var(--ink);
  --ela:var(--ink-block); --fia:var(--app); --claire:#b87d5a; --sira:#4a4a5a; --rivi:#3d5552;
  --red-bg:#fbe7e2; --red:#b5402f; --green-bg:#e3f3ea; --amber-bg:#fbf0db;
  --lilac-bg:#ece8f7; --mist-bg:#eaf0f7;
}

#landing{scroll-behavior:smooth}
#landing *{box-sizing:border-box}
#landing a{text-decoration:none;color:inherit}
#landing svg.ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* nav */
#landing .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#landing .nav-in{display:flex;align-items:center;height:74px;gap:36px}
#landing .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.3px}
#landing .brand-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
#landing .nav-links{display:flex;align-items:center;gap:28px;flex:1}
#landing .nav-links a.navlink{font-size:14.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:5px}
#landing .nav-links a.navlink:hover{color:var(--ink)}
#landing .nav-cta{display:flex;align-items:center;gap:16px}
#landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent;white-space:nowrap}
#landing .btn-outline{background:transparent;color:var(--app);border-color:var(--app)}
#landing .btn-outline:hover{background:color-mix(in srgb,var(--app) 8%,transparent)}
#landing .btn-solid{background:var(--app);color:#fff}
#landing .btn-solid:hover{background:color-mix(in srgb,var(--app) 88%,black)}
#landing .navtext{font-size:14.5px;font-weight:700;color:var(--ink)}
#landing .navburger{display:none;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);align-items:center;justify-content:center;cursor:pointer}
#landing #mobileNav{display:none}

/* hero */
#landing .hero{padding:76px 0 40px}
#landing .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
#landing .hero h1{font-size:52px;line-height:1.06;letter-spacing:-1.6px;font-weight:800;margin:0 0 22px;font-family:'Fustat',sans-serif}
#landing .hero p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:480px;margin:0 0 30px}
#landing .hero-form{display:flex;gap:10px;margin-bottom:16px;max-width:460px}
#landing .hero-form input{flex:1;height:52px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:14.5px;color:var(--ink);outline:none}
#landing .hero-form input:focus{border-color:var(--app)}
#landing .hero-form .btn{height:52px;padding:0 24px;font-size:14.5px}
#landing .hero-demo{display:inline-flex;align-items:center;gap:5px;color:var(--app);font-weight:700;font-size:14.5px;margin-bottom:40px}
#landing .hero-demo svg{width:15px;height:15px}
#landing .hero-badges{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
#landing .hero-badge{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#landing .hero-badge b{font-size:12.5px;font-weight:700}
#landing .hero-badge span{font-size:11px;color:var(--ink-faint)}
#landing .hero-stars{color:#f5a623;font-size:12px;letter-spacing:1px}

#landing .hero-shot{background:var(--surface-2);border-radius:var(--r-lg);padding:14px;position:relative;min-height:420px}
#landing .hero-shot-inner{background:var(--surface);border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 90px -40px color-mix(in srgb,var(--app) 35%,transparent)}
#landing .hero-shot-top{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
#landing .hero-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
#landing .hero-shot-body{display:grid;grid-template-columns:170px 1fr;min-height:340px}
#landing .hero-shot-embed{position:relative;overflow:hidden;min-height:340px}
#landing .hero-shot-embed iframe{position:absolute;top:0;left:0;width:200%;height:200%;border:none;display:block;transform:scale(.5);transform-origin:top left;pointer-events:none}
#landing .hero-shot-nav{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
#landing .hero-shot-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-xs);font-size:12px;font-weight:600;color:var(--ink-soft)}
#landing .hero-shot-item.on{background:var(--app);color:#fff}
#landing .hero-shot-item svg{width:14px;height:14px}
#landing .hero-shot-main{padding:6px 0}
#landing .hero-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px}
#landing .hero-av{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--app);flex:0 0 auto}
#landing .hero-row b{font-weight:700}
#landing .hero-row span.muted{color:var(--ink-faint);flex:1;text-align:right}
#landing .hero-row span.tag{font-size:10.5px;font-weight:700;color:var(--app);background:color-mix(in srgb,var(--app) 12%,transparent);padding:3px 8px;border-radius:99px}

/* trust */
#landing .trust{padding:54px 0 10px;text-align:center}
#landing .trust-label{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--ink-faint);text-transform:uppercase;margin-bottom:22px}
#landing .trust-row{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;opacity:.8}
#landing .trust-badge{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--ink-soft)}
#landing .trust-badge svg{width:20px;height:20px;color:var(--app)}

/* testimonials */
#landing .testis{padding:54px 0;border-top:1px solid var(--line);margin-top:44px}
#landing .testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
#landing .testi{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:var(--surface)}
#landing .testi-stars{color:#f5a623;font-size:12px;letter-spacing:1px;margin-bottom:12px}
#landing .testi h4{font-size:15px;margin:0 0 8px;font-family:'Fustat',sans-serif}
#landing .testi p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px}
#landing .testi-who{display:flex;align-items:center;gap:10px}
#landing .testi-av{width:34px;height:34px;border-radius:50%;background:var(--app);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
#landing .testi-who b{font-size:12.5px;display:block}
#landing .testi-who span{font-size:12px;color:var(--ink-faint)}

/* feature sections */
#landing .feat{padding:90px 0;border-top:1px solid var(--line)}
#landing .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
#landing .feat:nth-child(even) .feat-visual{order:2}
#landing .feat h2{font-size:40px;letter-spacing:-1.2px;margin:0 0 16px;font-weight:800;font-family:'Fustat',sans-serif}
#landing .feat-sub{font-size:17px;color:var(--ink-soft);line-height:1.55;margin:0 0 40px;max-width:460px}
#landing .feat-sub a{color:var(--app);font-weight:700}
#landing .feat-items{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px}
#landing .feat-items.c3{grid-template-columns:1fr 1fr 1fr}
#landing .feat-item h5{font-size:15px;margin:0 0 6px;font-weight:700}
#landing .feat-item p{font-size:13.5px;line-height:1.5;color:var(--ink-faint);margin:0}

#landing .feat-visual{background:var(--surface-2);border-radius:var(--r-md);padding:20px;min-height:340px;display:flex;align-items:center;justify-content:center}
#landing .fv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);width:100%;box-shadow:0 30px 70px -40px color-mix(in srgb,var(--app) 30%,transparent);overflow:hidden}
#landing .fv-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
#landing .fv-body{padding:16px}
#landing .fv-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--r-xs)}
#landing .fv-row:hover{background:var(--surface-2)}
#landing .fv-ico{width:34px;height:34px;border-radius:var(--r-xs);background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
#landing .fv-ico svg{width:16px;height:16px;color:var(--app)}
#landing .fv-row .t{font-size:13px;font-weight:700}
#landing .fv-row .d{font-size:11.5px;color:var(--ink-faint)}
#landing .fv-row .cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-faint);background:var(--surface-2);padding:3px 9px;border-radius:99px}

/* faq */
#landing .faq{padding:90px 0;border-top:1px solid var(--line)}
#landing .faq h2{font-size:36px;letter-spacing:-1px;margin:0 0 40px;font-weight:800;font-family:'Fustat',sans-serif}
#landing .faq-item{border-bottom:1px solid var(--line)}
#landing .faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;font-size:16px;font-weight:700}
#landing .faq-q svg{width:18px;height:18px;color:var(--ink-faint);flex:0 0 auto;transition:transform .2s}
#landing .faq-item.on .faq-q svg{transform:rotate(45deg)}
#landing .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
#landing .faq-item.on .faq-a{max-height:260px}
#landing .faq-a p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 4px 22px;max-width:760px}

/* final cta */
#landing .cta{padding:100px 0;text-align:center;border-top:1px solid var(--line)}
#landing .cta-stars{color:#f5a623;font-size:15px;margin-bottom:10px}
#landing .cta .rating{font-size:13px;color:var(--ink-faint);font-weight:700;margin-bottom:26px}
#landing .cta h2{font-size:38px;letter-spacing:-1px;margin:0 0 12px;font-weight:800;font-family:'Fustat',sans-serif}
#landing .cta p{font-size:16px;color:var(--ink-soft);margin:0 0 30px}
#landing .cta-ctas{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
#landing .cta-ctas .btn{height:50px;padding:0 26px;font-size:15px}

/* footer */
#landing footer{padding:60px 0 40px;border-top:1px solid var(--line);background:transparent}
#landing .foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;margin-bottom:50px}
#landing .foot-brand .brand{margin-bottom:14px}
#landing .foot-brand p{font-size:13.5px;color:var(--ink-faint);max-width:220px;line-height:1.6}
#landing .foot-col h6{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin:0 0 16px}
#landing .foot-col a{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:12px}
#landing .foot-col a:hover{color:var(--ink)}
#landing .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-faint);flex-wrap:wrap;gap:12px}
#landing .foot-legal{display:flex;gap:20px}

@media (max-width:980px){
  #landing .hero-grid{grid-template-columns:1fr}
  #landing .hero-shot{order:-1}
  #landing .feat-grid{grid-template-columns:1fr;gap:30px}
  #landing .feat:nth-child(even) .feat-visual{order:0}
  #landing .testi-grid{grid-template-columns:1fr 1fr}
  #landing .foot-grid{grid-template-columns:1fr 1fr}
  #landing .nav-links{display:none}
  #landing .navburger{display:flex}
  #landing .hero h1{font-size:38px}
}
@media (max-width:640px){
  #landing .testi-grid{grid-template-columns:1fr}
  #landing .feat-items,#landing .feat-items.c3{grid-template-columns:1fr}
  #landing .foot-grid{grid-template-columns:1fr 1fr}
  #landing .hero-form{flex-direction:column}
  #landing .nav-cta .navtext{display:none}
}

#landing #mobileNav.on{display:block;position:fixed;inset:74px 12px auto 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.28);padding:10px;z-index:90}
#landing #mobileNav a{display:block;padding:12px 14px;border-radius:var(--r-sm);font-weight:600;font-size:14.5px}
#landing #mobileNav a:hover{background:var(--surface-2)}
#landing #mobileNav .mn-ctas{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}


/* ---- gtheme tokens needed by the ported animated components below ---- */
#landing{
  --g-blue-600:#1a73e8; --g-blue-700:#1967d2; --g-blue-800:#174ea6; --g-blue-300:#8ab4f8;
  --g-blue-050:#e8f0fe; --g-blue-100:#d2e3fc; --g-blue-brand:#4285f4;
  --g-green:#34a853; --g-green-700:#188038;
  --g-grey-900:#202124; --g-grey-800:#3c4043; --g-grey-700:#5f6368; --g-grey-600:#80868b;
  --g-grey-400:#bdc1c6; --g-grey-300:#dadce0; --g-grey-200:#e8eaed; --g-grey-100:#f1f3f4; --g-grey-050:#f8f9fa;
  --g-white:#fff; --g-radius-pill:100px;
  --g-shadow-card:0 1px 3px rgba(54,64,67,.15);
  --g-shadow-float:0 1px 20px rgba(60,64,67,.05),0 1px 10px rgba(128,134,139,.03),0 4px 20px rgba(128,134,139,.10);
  --g-shadow-mockup:0 2px 10px rgba(134,134,139,.25);
}

/* ============ 9. AUTOPLAY FEATURE ACCORDION + 13. ANIMATED HERO COLLAGE ============
   Ported verbatim (selectors scoped to #landing) from gtheme.css / driven by gtheme.js */
#landing .g-feature-accordion { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { #landing .g-feature-accordion { grid-template-columns: 1fr; } }

#landing .g-feature-list details { --g-progress: 0; position: relative; overflow: hidden; margin-bottom: 32px; }
#landing .g-feature-list details::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--g-grey-200);
}
#landing .g-feature-list details::after {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--g-blue-600);
  transform: scaleY(var(--g-progress)); transform-origin: top;
  transition: transform .1s linear;
}
#landing .g-feature-list summary {
  cursor: pointer; list-style: none; padding-left: 24px;
  font-family: var(--g-font-display); font-size: 20px; line-height: 28px; font-weight: 500;
  color: var(--g-grey-700); transition: color .2s;
}
#landing .g-feature-list summary::-webkit-details-marker { display: none; }
#landing .g-feature-list details[open] summary { color: var(--g-grey-900); }
#landing .g-feature-list details > *:not(summary) {
  padding: 16px 0 0 24px; margin: 0;
  font-family: var(--g-font-text); font-size: 16px; line-height: 24px; color: var(--g-grey-700);
}
#landing .g-feature-media { position: relative; }
#landing .g-feature-media img { width: 100%; border-radius: 24px; display: none; }
#landing .g-feature-media img.is-active { display: block; }

#landing .g-collage {
  position: relative; width: 100%; max-width: 566px; aspect-ratio: 566/392;
  margin: 0 auto; font-family: var(--g-font-text); font-size: 12px; line-height: 1.35;
}
#landing .g-collage, #landing .g-collage * { box-sizing: border-box; }
#landing .g-collage__layer {
  position: absolute; inset: 0;
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
#landing .g-collage__wide { opacity: 1; transform: scale(1); }
#landing .g-collage.is-zoom .g-collage__wide { opacity: 0; transform: scale(1.12); pointer-events: none; }
#landing .g-collage__zoomlayer { opacity: 0; transform: scale(.92); pointer-events: none; }
#landing .g-collage.is-zoom .g-collage__zoomlayer { opacity: 1; transform: scale(1); }

#landing .g-collage__disc {
  position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: var(--g-white); border-radius: 50%; box-shadow: var(--g-shadow-mockup);
  transition: all .55s cubic-bezier(.4,0,.2,1);
}
#landing .g-collage__disc--gmail { width: 52px; height: 52px; top: 10%; left: 1%; }
#landing .g-collage.is-zoom .g-collage__disc--gmail { top: 16%; left: -4%; }
#landing .g-collage__disc--spark { width: 44px; height: 44px; top: 3%; left: 48%; background: var(--g-blue-brand); }
#landing .g-collage.is-zoom .g-collage__disc--spark { top: -3%; left: 26%; }
#landing .g-collage__disc--drive { width: 46px; height: 46px; bottom: 15%; left: 29%; }
#landing .g-collage.is-zoom .g-collage__disc--drive { opacity: 0; transform: scale(.6); }
#landing .g-collage__pavatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; color: #fff;
  font-family: var(--g-font-display); font-size: 11px; font-weight: 500;
}
#landing .g-collage__float-av1, #landing .g-collage__float-av2, #landing .g-collage__float-av3 {
  position: absolute; z-index: 3; box-shadow: 0 0 0 4px var(--g-white), var(--g-shadow-mockup);
  transition: all .55s cubic-bezier(.4,0,.2,1);
}
#landing .g-collage__float-av1 { width: 26px; height: 26px; top: 0; left: 26%; }
#landing .g-collage.is-zoom .g-collage__float-av1 { opacity: 0; transform: translateY(-12px); }
#landing .g-collage__float-av2 { width: 32px; height: 32px; top: -2%; left: 56%; font-size: 13px; }
#landing .g-collage.is-zoom .g-collage__float-av2 { opacity: 0; transform: translateY(-12px); }
#landing .g-collage__float-av3 { width: 56px; height: 56px; top: 42%; right: 16%; font-size: 22px; opacity: 0; transform: scale(.6); }
#landing .g-collage.is-zoom .g-collage__float-av3 { opacity: 1; transform: scale(1); }

#landing .g-collage__gmail, #landing .g-collage__appwin {
  position: absolute; left: -5%; top: 14%; width: 66%; height: 76%;
  background: var(--g-white); border-radius: 14px; box-shadow: var(--g-shadow-mockup);
  padding: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
}
#landing .g-collage__appwin { padding: 12px; }
#landing .g-collage__whead { display: flex; align-items: center; gap: 7px; padding-left: 78px; }
#landing .g-collage__wtitle { font-family: var(--g-font-display); font-size: 12px; font-weight: 500; color: var(--g-grey-900); }
#landing .g-collage__wsub { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 9px; color: var(--g-grey-600); }
#landing .g-collage__appwin .g-collage__replies { margin-top: auto; }
#landing .g-collage__gtop { display: flex; align-items: center; gap: 10px; }
#landing .g-collage__search {
  flex: 1; background: var(--g-grey-100); border-radius: var(--g-radius-pill);
  padding: 5px 12px; color: var(--g-grey-600); font-size: 11px;
}
#landing .g-collage__brand { font-family: var(--g-font-display); font-weight: 700; font-size: 11px; color: var(--g-grey-800); }
#landing .g-collage__gbody { display: flex; gap: 10px; flex: 1; min-height: 0; }
#landing .g-collage__gside { width: 86px; flex: none; display: flex; flex-direction: column; gap: 9px; }
#landing .g-collage__compose {
  display: inline-flex; align-items: center; gap: 5px; background: var(--g-blue-100);
  color: var(--g-grey-800); border-radius: 10px; padding: 6px 10px;
  font-family: var(--g-font-display); font-size: 11px; font-weight: 500;
}
#landing .g-collage__navrow { display: flex; align-items: center; gap: 6px; padding-left: 4px; }
#landing .g-collage__navrow i { width: 9px; height: 9px; border: 1.4px solid var(--g-grey-400); border-radius: 2px; flex: none; }
#landing .g-collage__navrow b { height: 7px; border-radius: var(--g-radius-pill); background: var(--g-grey-200); }
#landing .g-collage__navrow.is-active b { background: var(--g-blue-300); }
#landing .g-collage__navrow.is-active i { border-color: var(--g-blue-600); }
#landing .g-collage__gmain { flex: 1; min-width: 0; border-left: 1px solid var(--g-grey-100); padding-left: 10px; display: flex; flex-direction: column; gap: 7px; }
#landing .g-collage__toolbar { display: flex; gap: 7px; }
#landing .g-collage__toolbar i { width: 8px; height: 8px; border: 1.3px solid var(--g-grey-400); border-radius: 2px; }
#landing .g-collage__subject { font-family: var(--g-font-display); font-size: 12px; font-weight: 500; color: var(--g-grey-900); }
#landing .g-collage__sender { display: flex; align-items: center; gap: 7px; }
#landing .g-collage__sender strong { display: block; font-size: 10.5px; color: var(--g-grey-900); }
#landing .g-collage__sender span.g-collage__meta { display: block; font-size: 9px; color: var(--g-grey-600); }
#landing .g-collage__time { margin-left: auto; font-size: 9px; color: var(--g-grey-600); white-space: nowrap; }
#landing .g-collage__lines { flex: 1; }
#landing .g-collage__lines i { display: block; height: 7px; border-radius: var(--g-radius-pill); background: var(--g-grey-200); margin: 0 0 7px; }
#landing .g-collage__lines i.bullet { margin-left: 12px; }
#landing .g-collage__replies { display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: all .45s .15s; }
#landing .g-collage[data-scene="out"] .g-collage__replies { opacity: 1; transform: none; }
#landing .g-collage__replies span {
  border: 1px solid var(--g-grey-300); border-radius: var(--g-radius-pill);
  padding: 4px 10px; font-family: var(--g-font-display); font-size: 10px; font-weight: 500; color: var(--g-grey-800);
}

#landing .g-collage__doccard {
  position: absolute; width: 21%; height: 22%; background: var(--g-white);
  border-radius: 8px; box-shadow: var(--g-shadow-mockup); padding: 9px; z-index: 2;
  transition: all .5s cubic-bezier(.4,0,.2,1);
}
#landing .g-collage[data-scene="out"] .g-collage__doccard, #landing .g-collage[data-scene="out"] .g-collage__disc--drive { opacity: 0; transform: translateY(12px); }
#landing .g-collage__doccard--1 { left: 7%; bottom: 4%; }
#landing .g-collage__doccard--2 { left: 31%; bottom: 2%; }
#landing .g-collage__doccard i { display: block; height: 5px; border-radius: var(--g-radius-pill); background: var(--g-grey-200); margin-bottom: 5px; }
#landing .g-collage__doccard .pic { height: 24px; border-radius: 3px; background: var(--g-blue-050); margin-bottom: 6px; }
#landing .g-collage__doccard .dot { position: absolute; left: 9px; bottom: 7px; width: 8px; height: 8px; border-radius: 2px; }

#landing .g-collage__minipanel {
  position: absolute; right: 2%; top: 19%; width: 30%; height: 70%;
  background: var(--g-white); border-radius: 12px; box-shadow: var(--g-shadow-mockup);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
#landing .g-collage__ghead { display: flex; align-items: center; gap: 6px; font-family: var(--g-font-display); font-weight: 700; font-size: 12px; color: var(--g-grey-900); }
#landing .g-collage__ghead .g-collage__sparkglyph { color: var(--g-blue-brand); font-size: 13px; }
#landing .g-collage__minihow { font-family: var(--g-font-display); font-size: 11px; color: var(--g-grey-900); }
#landing .g-collage__srow {
  display: flex; align-items: center; gap: 8px; background: var(--g-grey-050);
  border-radius: 8px; padding: 7px 9px;
}
#landing .g-collage__sicon {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--g-white);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--g-grey-800);
  box-shadow: var(--g-shadow-card);
}
#landing .g-collage__srow > div { min-width: 0; }
#landing .g-collage__srow strong { display: block; font-family: var(--g-font-display); font-size: 10px; font-weight: 500; color: var(--g-grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#landing .g-collage__srow span { display: block; font-size: 9px; color: var(--g-grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#landing .g-collage__miniprompt {
  margin-top: auto; background: var(--g-grey-100); border-radius: var(--g-radius-pill);
  padding: 6px 11px; font-size: 10px; color: var(--g-grey-600);
}

#landing .g-collage__gemini {
  position: absolute; left: 21%; top: 6%; width: 56%; height: 76%;
  background: var(--g-white); border-radius: 16px; box-shadow: var(--g-shadow-float);
  padding: 18px 20px; display: flex; flex-direction: column; overflow: hidden;
}
#landing .g-collage__gemini .g-collage__ghead { font-size: 15px; }
#landing .g-collage__greet, #landing .g-collage__suggests, #landing .g-collage__chat {
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
#landing .g-collage__greet { margin-top: 14px; }
#landing .g-collage__hello { font-family: var(--g-font-display); font-size: 21px; font-weight: 500; color: var(--g-blue-600); }
#landing .g-collage__how { font-family: var(--g-font-display); font-size: 19px; color: var(--g-grey-800); }
#landing .g-collage[data-scene="greet"] .g-collage__greet, #landing .g-collage[data-scene="suggest"] .g-collage__greet { opacity: 1; transform: none; }
#landing .g-collage__suggests { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
#landing .g-collage__suggests .g-collage__srow { padding: 10px 12px; border-radius: 10px; opacity: 0; transform: translateY(10px); transition: all .4s; }
#landing .g-collage__suggests .g-collage__srow strong { font-size: 12.5px; }
#landing .g-collage__suggests .g-collage__srow span { font-size: 11px; }
#landing .g-collage__suggests .g-collage__sicon { width: 28px; height: 28px; font-size: 13px; }
#landing .g-collage[data-scene="suggest"] .g-collage__suggests { opacity: 1; transform: none; }
#landing .g-collage[data-scene="suggest"] .g-collage__suggests .g-collage__srow { opacity: 1; transform: none; }
#landing .g-collage[data-scene="suggest"] .g-collage__suggests .g-collage__srow:nth-child(1) { transition-delay: .1s; }
#landing .g-collage[data-scene="suggest"] .g-collage__suggests .g-collage__srow:nth-child(2) { transition-delay: .25s; }
#landing .g-collage[data-scene="suggest"] .g-collage__suggests .g-collage__srow:nth-child(3) { transition-delay: .4s; }
#landing .g-collage[data-scene="ask"] .g-collage__chat, #landing .g-collage[data-scene="think"] .g-collage__chat, #landing .g-collage[data-scene="answer"] .g-collage__chat { opacity: 1; transform: none; }
#landing .g-collage[data-scene="ask"] .g-collage__greet, #landing .g-collage[data-scene="ask"] .g-collage__suggests, #landing .g-collage[data-scene="think"] .g-collage__greet, #landing .g-collage[data-scene="think"] .g-collage__suggests, #landing .g-collage[data-scene="answer"] .g-collage__greet, #landing .g-collage[data-scene="answer"] .g-collage__suggests { display: none; }
#landing .g-collage__chat { margin-top: 12px; }
#landing .g-collage__q { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; flex-direction: column; }
#landing .g-collage__qtext { font-size: 13px; color: var(--g-grey-900); min-height: 18px; }
#landing .g-collage__caret {
  display: none; width: 1px; height: 13px; background: var(--g-grey-700);
  margin-left: 1px; vertical-align: -2px; animation: g-caret 1s steps(1) infinite;
}
#landing .g-collage[data-scene="ask"] .g-collage__caret { display: inline-block; }
@keyframes g-caret { 50% { opacity: 0; } }
#landing .g-collage__aspark { color: var(--g-blue-brand); font-size: 15px; margin-bottom: 6px; opacity: 0; transition: opacity .3s; }
#landing .g-collage[data-scene="think"] .g-collage__aspark, #landing .g-collage[data-scene="answer"] .g-collage__aspark { opacity: 1; }
#landing .g-collage__shimmer { display: none; }
#landing .g-collage[data-scene="think"] .g-collage__shimmer { display: block; }
#landing .g-collage__shimmer i {
  display: block; height: 9px; border-radius: var(--g-radius-pill); margin-bottom: 8px;
  background: linear-gradient(90deg, #d2e3fc, #e8f0fe 40%, #aecbfa 70%, #d2e3fc);
  background-size: 200% 100%; animation: g-shimmer 1.1s linear infinite;
}
@keyframes g-shimmer { to { background-position: -200% 0; } }
#landing .g-collage__answer { opacity: 0; transform: translateY(8px); transition: all .45s; }
#landing .g-collage[data-scene="answer"] .g-collage__answer { opacity: 1; transform: none; }
#landing .g-collage__answer p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--g-grey-900); }
#landing .g-collage__srclabel { display: block; font-family: var(--g-font-display); font-size: 11px; font-weight: 500; color: var(--g-blue-700); margin-bottom: 7px; }
#landing .g-collage__srcchip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--g-grey-100);
  border-radius: 6px; padding: 4px 10px; margin: 0 6px 6px 0; font-size: 11px; color: var(--g-grey-800);
  opacity: 0; transform: translateY(6px); transition: all .4s;
}
#landing .g-collage[data-scene="answer"] .g-collage__srcchip { opacity: 1; transform: none; }
#landing .g-collage[data-scene="answer"] .g-collage__srcchip:nth-of-type(2) { transition-delay: .15s; }
#landing .g-collage[data-scene="answer"] .g-collage__srcchip:nth-of-type(3) { transition-delay: .3s; }
#landing .g-collage__docicon { position: relative; width: 10px; height: 13px; border-radius: 2px; flex: none; }
#landing .g-collage__docicon::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1.5px;
  background: #fff; box-shadow: 0 3px 0 #fff;
}
#landing .g-collage__docicon--docs { background: var(--g-blue-brand); }
#landing .g-collage__docicon--sheets { background: var(--g-green); }
#landing .g-collage__actions { display: flex; gap: 10px; margin-top: 6px; color: var(--g-grey-600); font-size: 12px; }
#landing .g-collage__actions .thumb { filter: grayscale(1); opacity: .55; }
#landing .g-collage__zprompt {
  position: absolute; left: 17%; top: 84%; width: 64%;
  background: var(--g-white); border: 1px solid var(--g-grey-300); border-radius: 12px;
  padding: 12px 16px; font-size: 12px; color: var(--g-grey-600); box-shadow: var(--g-shadow-card);
  opacity: 0; transform: translateY(10px); transition: all .45s .2s;
}
#landing .g-collage[data-scene="suggest"] .g-collage__zprompt, #landing .g-collage[data-scene="ask"] .g-collage__zprompt, #landing .g-collage[data-scene="think"] .g-collage__zprompt, #landing .g-collage[data-scene="answer"] .g-collage__zprompt { opacity: 1; transform: none; }

#landing .g-collage [hidden] { display: none !important; }
#landing .g-collage [data-show]:not([hidden]) { animation: g-pop .45s cubic-bezier(.2,0,.2,1) both; }
@keyframes g-pop { from { opacity: 0; transform: translateY(7px) scale(.96); } }
#landing .g-collage [data-type].is-typing::after {
  content: ""; display: inline-block; width: 1px; height: .9em;
  background: var(--g-grey-700); margin-left: 1px; vertical-align: -1px;
  animation: g-caret 1s steps(1) infinite;
}
#landing .g-collage__shimbar {
  display: inline-block; height: 7px; border-radius: var(--g-radius-pill);
  background: linear-gradient(90deg, #d2e3fc, #e8f0fe 40%, #aecbfa 70%, #d2e3fc);
  background-size: 200% 100%; animation: g-shimmer 1.1s linear infinite;
}

#landing .g-collage__msgs { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
#landing .g-collage__msgrow { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
#landing .g-collage__msgrow--out { align-self: flex-end; flex-direction: row-reverse; }
#landing .g-collage__mname { font-size: 8.5px; color: var(--g-grey-600); margin: 0 0 2px 2px; }
#landing .g-collage__mbubble {
  background: var(--g-grey-100); border-radius: 12px; padding: 6px 10px;
  font-size: 10px; line-height: 1.45; color: var(--g-grey-900);
}
#landing .g-collage__msgrow--out .g-collage__mbubble { background: var(--g-blue-100); }
#landing .g-collage__mbubble .g-mention { font-size: 9px; padding: 1px 7px; }
#landing .g-collage__composebar {
  display: flex; align-items: center; gap: 8px; background: var(--g-grey-100);
  border-radius: var(--g-radius-pill); padding: 6px 11px; font-size: 10px; color: var(--g-grey-600);
}
#landing .g-collage__composebar svg { margin-left: auto; flex: none; }
#landing .g-collage__task { display: flex; align-items: center; gap: 8px; background: var(--g-grey-050); border-radius: 8px; padding: 7px 9px; }
#landing .g-collage__task b, #landing .g-collage__qrow b { height: 7px; border-radius: var(--g-radius-pill); background: var(--g-grey-200); }
#landing .g-collage__cb {
  width: 12px; height: 12px; flex: none; border: 1.5px solid var(--g-grey-400);
  border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff;
}
#landing .g-collage__task--done .g-collage__cb { background: var(--g-blue-600); border-color: var(--g-blue-600); }
#landing .g-collage__task--done b { opacity: .45; }
#landing .g-collage__due {
  margin-left: auto; flex: none; background: var(--g-blue-050); color: var(--g-blue-700);
  border-radius: var(--g-radius-pill); padding: 2px 7px; font-size: 8.5px; font-weight: 500;
}
#landing .g-collage__due--warn { background: #fef7e0; color: #b06000; }
#landing .g-collage__due--ok { background: #ceead6; color: var(--g-green-700); }
#landing .g-collage__task .g-collage__pavatar { width: 18px; height: 18px; font-size: 8px; flex: none; }
#landing .g-collage__task .g-collage__due { margin-left: auto; }
#landing .g-collage__stats { display: flex; gap: 8px; }
#landing .g-collage__stat { flex: 1; background: var(--g-grey-050); border-radius: 10px; padding: 7px 10px; }
#landing .g-collage__stat strong { display: block; font-family: var(--g-font-display); font-size: 15px; font-weight: 500; color: var(--g-grey-900); }
#landing .g-collage__stat span { font-size: 8.5px; color: var(--g-grey-600); }
#landing .g-collage__qrow { display: flex; align-items: center; gap: 7px; padding: 6px 4px; border-bottom: 1px solid var(--g-grey-100); }
#landing .g-collage__qrow:last-child { border-bottom: 0; }
#landing .g-collage__qrow > span:last-child { margin-left: auto; font-size: 8.5px; color: var(--g-grey-600); }
#landing .g-collage__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#landing .g-collage__caldays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 8.5px; color: var(--g-grey-600); text-align: center; }
#landing .g-collage__calgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; min-height: 0; align-items: start; }
#landing .g-collage__calcol { display: flex; flex-direction: column; gap: 5px; }
#landing .g-collage__evt { border-radius: 5px; background: var(--g-blue-100); color: var(--g-blue-800); font-size: 8px; line-height: 1.2; padding: 3px 5px; overflow: hidden; white-space: nowrap; }
#landing .g-collage__evt--free { background: var(--g-white); border: 1.3px dashed var(--g-blue-300); color: var(--g-blue-700); }
#landing .g-collage__evt--green { background: #ceead6; color: var(--g-green-700); }
#landing .g-collage__evt--yellow { background: #fef7e0; color: #b06000; }
#landing .g-collage__evt--new { background: var(--g-blue-600); color: #fff; box-shadow: 0 0 0 2px var(--g-blue-100); }
#landing .g-collage__notebar { height: 8px; width: 36%; border-radius: var(--g-radius-pill); background: var(--g-grey-300); margin: 4px 0 6px; }
#landing .g-collage__vitals { display: flex; gap: 6px; flex-wrap: wrap; }
#landing .g-collage__vitals .g-collage__due { margin-left: 0; }

#landing .g-collage__ctrl {
  position: absolute; right: -6%; bottom: -15%; width: 44px; height: 44px;
  padding: 3px; border: none; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--g-blue-600) calc(var(--g-cprog, 0) * 1turn), var(--g-grey-200) 0);
}
#landing .g-collage__ctrl span {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  background: var(--g-white); border-radius: 50%; color: var(--g-blue-600);
}
#landing .g-collage__ctrl .ic-play { display: none; }
#landing .g-collage__ctrl.is-paused .ic-pause { display: none; }
#landing .g-collage__ctrl.is-paused .ic-play { display: block; }
#landing .g-collage__sparkglyph { display: inline-flex; }
#landing .g-collage__actions { align-items: center; }
@media (prefers-reduced-motion: reduce) {
#landing .g-collage__ctrl { display: none; }
#landing .g-collage__shimmer i, #landing .g-collage__shimbar { animation: none; }
#landing .g-collage [data-show]:not([hidden]) { animation: none; }
}


.cs-ico{position:relative;display:inline-grid !important;place-items:center !important;place-items:center;width:100%;height:100%;min-width:0;border-radius:38%;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff!important;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--c1) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 5px rgba(0,0,0,.10);overflow:hidden;flex:0 0 auto;box-sizing:border-box}
.cs-ico::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 52%);pointer-events:none}
.cs-ico>svg{position:relative;width:56%!important;height:56%!important;fill:none!important;stroke:#fff!important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;max-width:none}
@supports (corner-shape:squircle){.cs-ico,.cs-ico::before,:has(>.cs-ico){corner-shape:squircle}}
:has(>.cs-ico){background:none!important;background-image:none!important;box-shadow:none!important;border-radius:38%!important;overflow:visible!important;padding:0!important;border:0!important}