/* =============================================================================
   TradeForm Portal — Brand Overlay (v3.9.0)
   Editorial, dark-first premium refresh aligned to tradeformhq.co.uk.
   Every existing selector, id and data-attribute in portal.css / pwa.css
   is preserved; this file only re-skins the visual layer.
   ========================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root{
  /* Deep navy palette from the TradeForm marketing site */
  --tf-ink-900:#05091A;
  --tf-ink-800:#0A1024;
  --tf-ink-700:#0F1633;
  --tf-ink-600:#151E42;
  --tf-line:#1B254B;
  --tf-line-strong:#243060;
  --tf-text:#E9ECF6;
  --tf-text-muted:#8892B8;
  --tf-text-subtle:#5B6592;

  --tf-teal:#3FE2C7;
  --tf-teal-2:#14B8A6;
  --tf-teal-ink:#08221F;

  --tf-serif:"Fraunces","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --tf-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  --tf-radius:14px;
  --tf-radius-lg:20px;
  --tf-shadow-sm:0 1px 2px rgba(5,9,26,.06),0 1px 3px rgba(5,9,26,.05);
  --tf-shadow:0 12px 32px -18px rgba(5,9,26,.35), 0 2px 6px rgba(5,9,26,.06);
  --tf-shadow-dark:0 22px 60px -28px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35);
}

/* ---- Global type ------------------------------------------------------ */
body.qsp-body{
  font-family:var(--tf-sans);
  font-feature-settings:"ss01","cv02","cv11";
  letter-spacing:-.005em;
}
body.qsp-body h1,body.qsp-body .qsp-hero h1,body.qsp-body .qsp-page-title h1{
  font-family:var(--tf-sans);
  letter-spacing:-.022em;
  font-weight:700;
}
body.qsp-body .qsp-hero h1 em,
body.qsp-body .qsp-page-title h1 em,
.qsp-hero .eyebrow{font-style:normal}

/* Serif italic accent — inject via ::after where copy already reads well */
body.qsp-body .qsp-hero h1::after{
  content:"";
}

/* ---- Light theme refinement ------------------------------------------ */
body.qsp-body:not(.qsp-theme-dark){
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(63,226,199,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(15,22,51,.05), transparent 60%),
    #F6F7FB;
  color:#0B1024;
}
body.qsp-body:not(.qsp-theme-dark) .qsp-card,
body.qsp-body:not(.qsp-theme-dark) .qsp-table-wrap,
body.qsp-body:not(.qsp-theme-dark) .qsp-over-card,
body.qsp-body:not(.qsp-theme-dark) .qsp-kpi,
body.qsp-body:not(.qsp-theme-dark) .qsp-quick-btn,
body.qsp-body:not(.qsp-theme-dark) .qsp-msg-card,
body.qsp-body:not(.qsp-theme-dark) .qsp-dash-card{
  background:#FFFFFF;
  border-color:#E4E7F2;
  border-radius:var(--tf-radius);
  box-shadow:var(--tf-shadow-sm);
}
body.qsp-body:not(.qsp-theme-dark) .qsp-card:hover,
body.qsp-body:not(.qsp-theme-dark) .qsp-over-card:hover,
body.qsp-body:not(.qsp-theme-dark) .qsp-kpi:hover,
body.qsp-body:not(.qsp-theme-dark) .qsp-quick-btn:hover{
  box-shadow:var(--tf-shadow);
  border-color:#D2D7E8;
}

/* Sidebar & topbar in light mode — subtly premium */
body.qsp-body:not(.qsp-theme-dark) .qsp-sidebar{
  background:#FFFFFF;
  border-right:1px solid #E4E7F2;
}
body.qsp-body:not(.qsp-theme-dark) .qsp-topbar{
  background:linear-gradient(180deg,var(--tf-ink-800) 0%, var(--tf-ink-700) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(5,9,26,.55);
}

/* Hero in light mode: dark editorial block, teal glow, serif italics */
body.qsp-body:not(.qsp-theme-dark) .qsp-hero{
  background:
    radial-gradient(600px 260px at 88% 0%, rgba(63,226,199,.18), transparent 60%),
    linear-gradient(135deg, var(--tf-ink-900) 0%, var(--tf-ink-700) 60%, #0E2A2E 100%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--tf-radius-lg);
  box-shadow:0 30px 80px -40px rgba(5,9,26,.55);
}

/* ---- Dark theme — full editorial brand -------------------------------- */
body.qsp-theme-dark{
  --qsp-bg:var(--tf-ink-900);
  --qsp-card:var(--tf-ink-700);
  --qsp-border:var(--tf-line);
  --qsp-border-strong:var(--tf-line-strong);
  --qsp-text:var(--tf-text);
  --qsp-ink:#F5F7FF;
  --qsp-muted:var(--tf-text-muted);
  --qsp-subtle:var(--tf-text-subtle);
  --qsp-teal:var(--tf-teal);
  --qsp-teal-600:var(--tf-teal-2);
  --qsp-teal-700:#5EEAD4;
  --qsp-teal-50:rgba(63,226,199,.10);
}
body.qsp-theme-dark.qsp-body{
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(63,226,199,.10), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(63,226,199,.05), transparent 60%),
    var(--tf-ink-900);
  color:var(--tf-text);
}
body.qsp-theme-dark .qsp-topbar{
  background:linear-gradient(180deg, rgba(5,9,26,.9) 0%, rgba(10,16,36,.9) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tf-line);
  box-shadow:none;
}
body.qsp-theme-dark .qsp-sidebar{
  background:var(--tf-ink-800);
  border-right:1px solid var(--tf-line);
}
body.qsp-theme-dark .qsp-card,
body.qsp-theme-dark .qsp-table-wrap,
body.qsp-theme-dark .qsp-over-card,
body.qsp-theme-dark .qsp-kpi,
body.qsp-theme-dark .qsp-quick-btn,
body.qsp-theme-dark .qsp-dash-card,
body.qsp-theme-dark .qsp-msg-card,
body.qsp-theme-dark .qsp-modal-box{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--tf-ink-700);
  border:1px solid var(--tf-line);
  color:var(--tf-text);
  border-radius:var(--tf-radius);
  box-shadow:var(--tf-shadow-dark);
}
body.qsp-theme-dark .qsp-card:hover,
body.qsp-theme-dark .qsp-over-card:hover,
body.qsp-theme-dark .qsp-kpi:hover,
body.qsp-theme-dark .qsp-quick-btn:hover,
body.qsp-theme-dark .qsp-dash-card:hover{
  border-color:var(--tf-line-strong);
}

/* Dark inputs */
body.qsp-theme-dark .qsp-input,
body.qsp-theme-dark .qsp-select,
body.qsp-theme-dark .qsp-modal-box input,
body.qsp-theme-dark .qsp-modal-box textarea,
body.qsp-theme-dark .qsp-modal-box select,
body.qsp-theme-dark .qi-items td input,
body.qsp-theme-dark .qi-section label input,
body.qsp-theme-dark .qi-section label select,
body.qsp-theme-dark .qi-section label textarea,
body.qsp-theme-dark .qi-company-grid input,
body.qsp-theme-dark .qi-company-grid textarea,
body.qsp-theme-dark #qsp-msg-text,
body.qsp-theme-dark #qsp-notes-area{
  background:var(--tf-ink-800)!important;
  border-color:var(--tf-line)!important;
  color:var(--tf-text)!important;
}
body.qsp-theme-dark .qsp-input:focus,
body.qsp-theme-dark .qsp-select:focus,
body.qsp-theme-dark .qsp-modal-box input:focus,
body.qsp-theme-dark .qsp-modal-box textarea:focus,
body.qsp-theme-dark .qsp-modal-box select:focus{
  border-color:var(--tf-teal)!important;
  box-shadow:0 0 0 4px rgba(63,226,199,.16)!important;
}
body.qsp-theme-dark .qsp-table thead th{
  background:var(--tf-ink-800);color:var(--tf-text-muted);border-bottom-color:var(--tf-line);
}
body.qsp-theme-dark .qsp-table tbody td{border-bottom-color:var(--tf-line)}
body.qsp-theme-dark .qsp-table tbody tr:hover{background:rgba(63,226,199,.04)}
body.qsp-theme-dark .qsp-pagination{background:var(--tf-ink-800);border-top-color:var(--tf-line)}
body.qsp-theme-dark .qsp-page-btn{background:var(--tf-ink-700);border-color:var(--tf-line);color:var(--tf-text)}
body.qsp-theme-dark .qsp-page-btn.active{background:var(--tf-teal);color:var(--tf-teal-ink);border-color:var(--tf-teal)}

/* Sidebar links */
body.qsp-theme-dark .qsp-sidebar a,
body.qsp-theme-dark .qsp-sd-item{color:#CBD3EE}
body.qsp-theme-dark .qsp-sidebar a:hover,
body.qsp-theme-dark .qsp-sd-item:hover{background:rgba(255,255,255,.04);color:#fff}
body.qsp-theme-dark .qsp-sidebar a.active,
body.qsp-theme-dark .qsp-sd-item.active{
  background:linear-gradient(90deg, rgba(63,226,199,.14), rgba(63,226,199,0));
  color:var(--tf-teal);
}
body.qsp-theme-dark .qsp-sidebar a.active::before{background:var(--tf-teal)}
body.qsp-theme-dark .qsp-sd-item.active .qsp-sd-ic{background:var(--tf-teal);color:var(--tf-teal-ink)}

/* ---- Hero (both themes share this look) ------------------------------ */
.qsp-hero{
  background:
    radial-gradient(600px 280px at 88% 0%, rgba(63,226,199,.22), transparent 60%),
    linear-gradient(135deg, var(--tf-ink-900) 0%, var(--tf-ink-700) 55%, #0E2A2E 100%)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:var(--tf-radius-lg)!important;
  padding:36px 40px!important;
  overflow:hidden;
  position:relative;
}
.qsp-hero::before,.qsp-hero::after{display:none!important}
.qsp-hero .eyebrow{
  color:var(--tf-teal)!important;
  font-family:var(--tf-sans);
  font-size:11px!important;letter-spacing:.18em!important;
}
.qsp-hero .eyebrow .pulse{background:var(--tf-teal)!important;box-shadow:0 0 0 0 rgba(63,226,199,.6)}
.qsp-hero h1{
  font-family:var(--tf-sans);
  font-size:34px!important;line-height:1.1!important;letter-spacing:-.028em!important;
  color:#fff!important;font-weight:700!important;
  margin:2px 0 10px!important;
}
/* Serif italic feel via strong>em pattern; also style any inline em */
.qsp-hero h1 em,.qsp-hero h1 i,
.qsp-page-title h1 em,.qsp-page-title h1 i{
  font-family:var(--tf-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  color:#F1F5FF;
}
.qsp-hero .qsp-hero-sub{color:rgba(233,236,246,.72)!important;font-size:15px;max-width:62ch;line-height:1.6}
.qsp-hero .hero-cta{
  background:var(--tf-teal)!important;color:var(--tf-teal-ink)!important;
  border-radius:999px!important;padding:12px 20px!important;font-weight:700!important;
  box-shadow:0 10px 30px -12px rgba(63,226,199,.55)!important;
}
.qsp-hero .hero-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* ---- Editorial page title -------------------------------------------- */
.qsp-page-title h1{
  font-size:28px;letter-spacing:-.02em;font-weight:700;
}
.qsp-page-title .qsp-sub{font-size:13.5px}

/* ---- Buttons ---------------------------------------------------------- */
.qsp-btn{
  border-radius:999px!important;
  background:var(--tf-teal)!important;color:var(--tf-teal-ink)!important;
  font-weight:700!important;letter-spacing:.01em;
  box-shadow:0 6px 20px -10px rgba(63,226,199,.6);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.qsp-btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(63,226,199,.7)}
.qsp-btn.secondary{
  background:transparent!important;color:inherit!important;
  border:1px solid currentColor!important;
  box-shadow:none!important;opacity:.9;
}
body.qsp-theme-dark .qsp-btn.secondary{color:var(--tf-text)!important;border-color:var(--tf-line-strong)!important}
body.qsp-body:not(.qsp-theme-dark) .qsp-btn.secondary{color:var(--tf-ink-800)!important;border-color:#CFD5E6!important;background:#fff!important}
.qsp-btn.ghost{
  background:transparent!important;
  color:inherit!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
.qsp-btn.ghost:hover{background:rgba(63,226,199,.08)!important;color:var(--tf-teal)!important}
.qsp-btn.danger{background:#F87171!important;color:#3a0b0b!important}
.qsp-btn.success{background:var(--tf-teal)!important;color:var(--tf-teal-ink)!important}
.qsp-btn.warning{background:#FBBF77!important;color:#3a2408!important}

.qsp-refresh{
  border-radius:999px;padding:8px 16px;font-weight:600;
  background:transparent;
}
body.qsp-theme-dark .qsp-refresh{
  background:transparent;border-color:var(--tf-line-strong);color:var(--tf-text);
}

/* ---- Pills / status badges ------------------------------------------- */
.qsp-pill{
  border-radius:999px;padding:5px 12px;font-weight:600;font-size:11.5px;
  letter-spacing:.02em;text-transform:uppercase;
}
body.qsp-theme-dark .qsp-pill.s-new{background:rgba(96,165,250,.14);color:#93C5FD}
body.qsp-theme-dark .qsp-pill.s-contacted{background:rgba(251,191,120,.14);color:#FBBF77}
body.qsp-theme-dark .qsp-pill.s-quoted{background:rgba(167,139,250,.14);color:#C4B5FD}
body.qsp-theme-dark .qsp-pill.s-won{background:rgba(63,226,199,.15);color:var(--tf-teal)}
body.qsp-theme-dark .qsp-pill.s-lost{background:rgba(248,113,113,.14);color:#FCA5A5}

/* ---- KPI cards / overview -------------------------------------------- */
.qsp-over-card,.qsp-kpi{border-radius:var(--tf-radius)}
.qsp-over-card .ribbon{height:2px}
.qsp-over-card .val,.qsp-kpi .value{
  font-family:var(--tf-sans);letter-spacing:-.028em;font-weight:700;
}
.qsp-over-card .lbl,.qsp-kpi .label{
  font-size:11px;letter-spacing:.14em;
}
body.qsp-theme-dark .qsp-over-card .val,
body.qsp-theme-dark .qsp-kpi .value{color:#F5F7FF}

/* Follow-ups warn state — restyled for dark editorial */
body.qsp-theme-dark #qsp-followups-card.is-warn{
  background:
    linear-gradient(180deg, rgba(248,113,113,.10) 0%, rgba(248,113,113,.03) 100%),
    var(--tf-ink-700)!important;
  border-color:rgba(248,113,113,.35)!important;
  box-shadow:0 0 0 4px rgba(248,113,113,.10), 0 22px 60px -32px rgba(248,113,113,.35)!important;
}
body.qsp-theme-dark #qsp-followups-card.is-warn .qsp-card-head h2{color:#FCA5A5}
body.qsp-theme-dark .qsp-over-card.tone-red.is-warn{
  background:linear-gradient(180deg, rgba(248,113,113,.10), rgba(248,113,113,.03)), var(--tf-ink-700);
  border-color:rgba(248,113,113,.35);
}

/* ---- Cards heads: editorial rule ------------------------------------- */
.qsp-card .qsp-card-head h2{
  font-family:var(--tf-sans);
  font-size:14px;letter-spacing:.01em;font-weight:700;
  text-transform:uppercase;
  color:inherit;
}
.qsp-card .qsp-card-head h2::before{
  content:"";display:inline-block;width:14px;height:1px;background:var(--tf-teal);
  vertical-align:middle;margin-right:10px;transform:translateY(-3px);
}
.qsp-card .qsp-card-sub{margin-top:6px;font-size:12.5px;color:var(--tf-text-muted)}

/* ---- Login: editorial split feel ------------------------------------- */
.qsp-login-shell{
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(63,226,199,.15), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(63,226,199,.06), transparent 60%),
    var(--tf-ink-900)!important;
}
.qsp-login-card{
  background:var(--tf-ink-700)!important;
  color:var(--tf-text)!important;
  border:1px solid var(--tf-line)!important;
  border-radius:var(--tf-radius-lg)!important;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6)!important;
}
.qsp-login-card h1{color:#fff!important;font-family:var(--tf-sans);letter-spacing:-.02em}
.qsp-login-card h1 em,.qsp-login-card h1 i{font-family:var(--tf-serif);font-style:italic;font-weight:400}
.qsp-login-card p.sub{color:var(--tf-text-muted)!important}
.qsp-login-card label{color:var(--tf-text-muted)!important}
.qsp-login-card input{
  background:var(--tf-ink-800)!important;color:var(--tf-text)!important;
  border-color:var(--tf-line)!important;border-radius:12px!important;
}
.qsp-login-card input:focus{border-color:var(--tf-teal)!important;box-shadow:0 0 0 4px rgba(63,226,199,.15)!important}
.qsp-login-card .qsp-btn{border-radius:999px!important}

/* ---- Bottom nav (mobile) — teal active, brand ink surface ----------- */
.qsp-bottomnav{background:var(--tf-ink-900)!important;border-top-color:var(--tf-line)!important}
body:not(.qsp-theme-dark) .qsp-bottomnav{
  background:#FFFFFF!important;border-top-color:#E4E7F2!important;
}
.qsp-bn-item.active{color:var(--tf-teal)!important}

/* ---- Notif panel dark polish ----------------------------------------- */
body.qsp-theme-dark .qsp-notif-panel{
  background:var(--tf-ink-700);
  border-color:var(--tf-line);
  color:var(--tf-text);
}
body.qsp-theme-dark .qsp-notif-head{border-bottom-color:var(--tf-line)}
body.qsp-theme-dark .qsp-notif-item{border-bottom-color:var(--tf-line)}

/* ---- Focus rings — teal everywhere ----------------------------------- */
.qsp-btn:focus-visible,
.qsp-input:focus,.qsp-select:focus,
.qsp-icon-btn:focus-visible,
.qsp-page-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(63,226,199,.22)!important;
}

/* ---- Quick actions: brand accent on hover ---------------------------- */
.qsp-quick-btn:hover{
  border-color:var(--tf-teal)!important;
  color:inherit!important;
}
.qsp-quick-btn .qa-ic{
  background:rgba(63,226,199,.12)!important;color:var(--tf-teal-2)!important;
}
body.qsp-theme-dark .qsp-quick-btn .qa-ic{color:var(--tf-teal)!important}

/* ---- Table thumbnail polish ------------------------------------------ */
.qsp-thumb{border-radius:10px}
body.qsp-theme-dark .qsp-thumb,body.qsp-theme-dark .qsp-thumb-empty{
  background:var(--tf-ink-800);border-color:var(--tf-line);
}

/* ---- Modal shell ----------------------------------------------------- */
.qsp-modal{background:rgba(5,9,26,.65)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qsp-modal-box{border-radius:var(--tf-radius-lg)!important}
body.qsp-theme-dark .qi-doc-head,
body.qsp-theme-dark .qi-doc-footer{border-color:var(--tf-line)!important;background:transparent!important}
body.qsp-theme-dark .qi-section{background:var(--tf-ink-800);border-color:var(--tf-line)}
body.qsp-theme-dark .qi-section h3{color:var(--tf-text)}
body.qsp-theme-dark .qi-items th{color:var(--tf-text-muted);border-bottom-color:var(--tf-line)}
body.qsp-theme-dark .qi-items td{border-bottom-color:var(--tf-line)}
body.qsp-theme-dark .qi-totals-display{color:var(--tf-text-muted)}
body.qsp-theme-dark .qi-totals-display .qi-grand{color:var(--tf-text);border-top-color:var(--tf-text)}

/* ---- Toast ----------------------------------------------------------- */
.qsp-toast{background:var(--tf-ink-900)!important;color:var(--tf-text)!important;border:1px solid var(--tf-line);border-radius:12px}

/* ---- Refined motion --------------------------------------------------- */
.qsp-over-card,.qsp-kpi,.qsp-quick-btn,.qsp-dash-card,.qsp-msg-card{
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
}

/* ---- iOS install banner: brand-aligned ------------------------------- */
.qsp-ios-install{background:var(--tf-ink-900)!important;border:1px solid var(--tf-line)!important}
.qsp-ios-install .qsp-ios-icon{background:var(--tf-teal)!important;color:var(--tf-teal-ink)!important}
.qsp-ios-install .qsp-ios-btn{background:var(--tf-teal)!important;color:var(--tf-teal-ink)!important}

/* ---- Sidebar active accent for desktop legacy list ------------------- */
body.qsp-theme-dark .qsp-sidebar .qsp-sd-item.active .qsp-sd-ic{background:var(--tf-teal);color:var(--tf-teal-ink)}

/* ---- Sidebar version text ------------------------------------------- */
body.qsp-theme-dark .qsp-sd-footer{color:var(--tf-text-subtle);border-top-color:var(--tf-line)}

/* ---- Small tweaks that read as "premium" ---------------------------- */
.qsp-main{max-width:1360px}
.qsp-sidebar a,.qsp-sd-item{border-radius:10px}
.qsp-icon-btn{border-radius:10px}
body.qsp-theme-dark .qsp-icon-btn{background:var(--tf-ink-800);border-color:var(--tf-line);color:var(--tf-text)}
body.qsp-theme-dark .qsp-icon-btn:hover{border-color:var(--tf-teal);color:var(--tf-teal)}

/* ---- Selection ------------------------------------------------------- */
::selection{background:rgba(63,226,199,.35);color:#04121A}
body.qsp-theme-dark ::selection{background:rgba(63,226,199,.35);color:#04121A}

/* ---- Scrollbar (dark) ----------------------------------------------- */
body.qsp-theme-dark ::-webkit-scrollbar{width:10px;height:10px}
body.qsp-theme-dark ::-webkit-scrollbar-track{background:var(--tf-ink-900)}
body.qsp-theme-dark ::-webkit-scrollbar-thumb{background:var(--tf-line-strong);border-radius:10px}
body.qsp-theme-dark ::-webkit-scrollbar-thumb:hover{background:#2E3B72}

/* ========================================================================== 
   TradeForm editorial login — v5.18.2
   ========================================================================== */
body:has(.qsp-login-shell){margin:0;background:#07101f;overflow-x:hidden}
.qsp-login-shell{
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr)!important;
  padding:0!important;
  background:#07101f!important;
  color:#f7fafc;
}
.tf-login-story{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:38px clamp(34px,5vw,84px) 34px;
  border-right:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(90deg,rgba(7,16,31,.96),rgba(7,16,31,.80)),
    radial-gradient(circle at 76% 28%,rgba(20,184,166,.18),transparent 34%),
    #07101f;
}
.tf-login-story:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.40;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:68px 68px;mask-image:linear-gradient(90deg,#000,transparent 92%);
}
.tf-login-story:after{
  content:"";position:absolute;width:560px;height:560px;right:-210px;bottom:-220px;
  border:1px solid rgba(63,226,199,.14);border-radius:50%;box-shadow:0 0 0 70px rgba(63,226,199,.025),0 0 0 140px rgba(63,226,199,.018);
}
.tf-login-story__top,.tf-login-story__content,.tf-login-story__footer{position:relative;z-index:2}
.tf-login-story__top,.tf-login-story__footer{display:flex;justify-content:space-between;align-items:center;gap:20px}
.tf-login-brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.tf-login-brand img{width:24px;height:24px;object-fit:contain}
.tf-login-kicker,.tf-login-index,.tf-login-access__eyebrow{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#3fe2c7;
}
.tf-login-story__content{max-width:700px;margin:auto 0;padding:8vh 0 5vh}
.tf-login-index{margin:0 0 22px}
.tf-login-story h1{
  margin:0;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,7vw,112px);
  line-height:.84;font-weight:400;letter-spacing:-.07em;
}
.tf-login-story h1 em{font-weight:400;color:#dce8ea}
.tf-login-lede{max-width:510px;margin:32px 0 0;font-size:clamp(15px,1.4vw,19px);line-height:1.65;color:#aab9c9}
.tf-login-rule{width:100%;height:1px;background:linear-gradient(90deg,#3fe2c7,rgba(255,255,255,.08));margin:42px 0 24px}
.tf-login-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tf-login-proof div{display:flex;flex-direction:column;gap:4px}
.tf-login-proof strong{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;color:#fff}
.tf-login-proof span{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:#71849a}
.tf-login-story__footer{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#60748a}
.tf-login-grid{position:absolute;right:4%;top:18%;width:38%;height:55%;border:1px solid rgba(63,226,199,.10);transform:skewY(-10deg);opacity:.8}
.tf-login-grid:before,.tf-login-grid:after{content:"";position:absolute;inset:16%;border:1px solid rgba(63,226,199,.08)}
.tf-login-grid:after{inset:34%}

.tf-login-access{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(34px,6vw,90px);position:relative;
  background:radial-gradient(600px 420px at 100% 0%,rgba(20,184,166,.12),transparent 62%),#0b1527;
}
.tf-login-access__inner{width:min(100%,460px)}
.tf-login-access__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#8fa2b8}
.tf-login-access__eyebrow span{width:28px;height:1px;background:#3fe2c7}
.qsp-login-card{
  width:100%!important;max-width:none!important;padding:clamp(28px,4vw,46px)!important;
  background:#101c31!important;border:1px solid rgba(144,168,194,.19)!important;
  border-radius:2px!important;box-shadow:0 32px 80px rgba(0,0,0,.34)!important;
}
.tf-login-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:52px}
.tf-login-card-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(63,226,199,.25);background:rgba(63,226,199,.06)}
.tf-login-card-mark img{width:20px!important;height:20px!important;margin:0!important;object-fit:contain}
.tf-login-status{display:flex;align-items:center;gap:7px;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#70849a}
.tf-login-status i{width:6px;height:6px;border-radius:50%;background:#3fe2c7;box-shadow:0 0 12px rgba(63,226,199,.7)}
.qsp-login-card h2{margin:0 0 9px;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,4vw,52px);line-height:.98;font-weight:400;letter-spacing:-.045em}
.qsp-login-card h2 em{font-weight:400;color:#c8d5df}
.qsp-login-card p.sub{text-align:left!important;margin:0 0 34px!important;color:#8295aa!important;font-size:14px!important}
.qsp-login-card .row{margin-bottom:19px!important}
.qsp-login-card label{display:block;color:#9eb0c2!important;font-size:9px!important;font-weight:700!important;letter-spacing:.15em!important;text-transform:uppercase!important}
.qsp-login-card input:not([type="checkbox"]){
  width:100%;height:52px;margin-top:9px!important;padding:0 15px!important;
  border:1px solid #2a3c54!important;border-radius:2px!important;background:#0b1628!important;
  color:#fff!important;font-size:15px!important;box-sizing:border-box;
}
.qsp-login-card input:not([type="checkbox"]):hover{border-color:#425a75!important}
.qsp-login-card input:not([type="checkbox"]):focus{border-color:#3fe2c7!important;box-shadow:0 0 0 3px rgba(63,226,199,.12)!important}
.tf-login-remember{display:flex!important;align-items:center;gap:10px;margin:4px 0 24px;color:#95a7b8!important;font-size:12px!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer}
.tf-login-remember input{appearance:none;width:16px!important;height:16px!important;margin:0!important;border:1px solid #40546c!important;border-radius:2px!important;background:#0b1628!important;display:grid;place-items:center}
.tf-login-remember input:checked{background:#3fe2c7!important;border-color:#3fe2c7!important}
.tf-login-remember input:checked:after{content:"✓";font-size:11px;font-weight:900;color:#07101f}
.qsp-login-card .qsp-btn{
  width:100%;height:54px!important;margin:0!important;padding:0 19px!important;justify-content:space-between!important;
  border:0!important;border-radius:2px!important;background:#3fe2c7!important;color:#07101f!important;
  font-size:11px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.12em;
  box-shadow:none!important;
}
.qsp-login-card .qsp-btn:hover{transform:translateY(-1px);background:#69ecd5!important;box-shadow:0 14px 30px rgba(20,184,166,.16)!important}
.tf-login-help{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.6;color:#62768b}
.tf-login-legal{text-align:center;margin:16px 0 0;font-size:10px;color:#53677c}
.qsp-login-error{border-radius:2px!important;margin:-18px 0 20px!important}
.qsp-theme-toggle-floating{top:22px!important;right:22px!important;border-radius:2px!important;background:#111e32!important;border-color:#2b3e57!important;color:#a9b9c8!important}

body:not(.qsp-theme-dark):has(.qsp-login-shell) .qsp-login-shell{background:#eef3f6!important}
body:not(.qsp-theme-dark) .tf-login-access{background:#f6f8fa}
body:not(.qsp-theme-dark) .qsp-login-card{background:#fff!important;border-color:#dbe2e8!important;box-shadow:0 30px 70px rgba(15,23,42,.10)!important}
body:not(.qsp-theme-dark) .qsp-login-card h2{color:#0f172a}
body:not(.qsp-theme-dark) .qsp-login-card h2 em{color:#526173}
body:not(.qsp-theme-dark) .qsp-login-card p.sub{color:#64748b!important}
body:not(.qsp-theme-dark) .qsp-login-card label{color:#536276!important}
body:not(.qsp-theme-dark) .qsp-login-card input:not([type="checkbox"]){background:#f8fafc!important;color:#0f172a!important;border-color:#cbd5e1!important}
body:not(.qsp-theme-dark) .tf-login-remember{color:#64748b!important}
body:not(.qsp-theme-dark) .tf-login-remember input{background:#fff!important;border-color:#94a3b8!important}
body:not(.qsp-theme-dark) .tf-login-help{border-color:#e2e8f0;color:#64748b}
body:not(.qsp-theme-dark) .tf-login-access__eyebrow{color:#64748b}
body:not(.qsp-theme-dark) .qsp-theme-toggle-floating{background:#fff!important;border-color:#d9e1e8!important;color:#334155!important}

@media (max-width:900px){
  .qsp-login-shell{grid-template-columns:1fr!important}
  .tf-login-story{min-height:auto;padding:28px 24px 44px;border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  .tf-login-story__content{padding:76px 0 40px}
  .tf-login-story h1{font-size:clamp(54px,14vw,82px)}
  .tf-login-grid{display:none}
  .tf-login-access{min-height:auto;padding:54px 22px 70px}
  .qsp-theme-toggle-floating{position:absolute!important}
}
@media (max-width:560px){
  .tf-login-kicker{display:none}
  .tf-login-story__content{padding:58px 0 28px}
  .tf-login-story h1{font-size:51px}
  .tf-login-lede{margin-top:24px;font-size:14px}
  .tf-login-rule{margin:30px 0 20px}
  .tf-login-proof{grid-template-columns:1fr;gap:13px}
  .tf-login-proof div{display:grid;grid-template-columns:72px 1fr;align-items:baseline}
  .tf-login-proof strong{font-size:18px}
  .tf-login-story__footer{margin-top:32px}
  .tf-login-access{padding:42px 14px 56px}
  .qsp-login-card{padding:28px 22px!important}
  .tf-login-card-head{margin-bottom:38px}
  .qsp-login-card h2{font-size:40px}
}