html { scroll-behavior:smooth; }
    body {
      font-family:'Plus Jakarta Sans',sans-serif;
      font-feature-settings:'cv11','ss01','ss02';
      -webkit-font-smoothing:antialiased;
    }
    /* Design System typography authority:
       Plus Jakarta Sans = primary/interface, Instrument Serif = editorial accent only. */
    .font-display {
      font-family:'Instrument Serif',serif;
      font-style:italic;
      font-weight:400;
      letter-spacing:-.02em;
    }
    .brand-wordmark {
      font-family:'Plus Jakarta Sans',sans-serif;
      font-weight:700;
      letter-spacing:-.02em;
    }
    .hero-primary {
      font-family:'Plus Jakarta Sans',sans-serif;
      font-weight:700;
      letter-spacing:-.025em;
    }
    .dot-grid {
      background-image:radial-gradient(circle,rgba(15,23,42,.08) 1px,transparent 1px);
      background-size:24px 24px;
    }
    .mesh-gradient {
      background:
        radial-gradient(at 20% 10%,rgba(196,154,58,.08) 0px,transparent 50%),
        radial-gradient(at 80% 0%,rgba(74,114,165,.12) 0px,transparent 50%),
        radial-gradient(at 0% 80%,rgba(15,23,42,.08) 0px,transparent 50%),
        radial-gradient(at 80% 100%,rgba(176,126,43,.06) 0px,transparent 50%);
    }
    .noise { position:relative; }
    .noise::before {
      content:'';
      position:absolute;
      inset:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity:.025;
      pointer-events:none;
      mix-blend-mode:overlay;
    }
    .shine-effect { position:relative; overflow:hidden; }
    .shine-effect::before {
      content:'';
      position:absolute;
      top:0; left:-100%;
      width:100%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
      transition:left .6s;
    }
    .shine-effect:hover::before { left:100%; }
    .press:active { transform:scale(.98); }
    .gold-stroke { position:relative; display:inline-block; z-index:0; }
    .gold-stroke::after {
      content:'';
      position:absolute;
      left:0;right:0;bottom:.08em;
      height:.16em;
      border-radius:999px;
      background:linear-gradient(90deg,rgba(232,206,134,.72),rgba(220,182,87,.12));
      z-index:-1;
    }
    .login-card-glow::before {
      content:'';
      position:absolute;
      width:18rem;height:18rem;
      right:-5rem;top:-5rem;
      border-radius:9999px;
      background:rgba(232,206,134,.2);
      filter:blur(64px);
      z-index:-1;
    }
    .login-card-glow::after {
      content:'';
      position:absolute;
      width:18rem;height:18rem;
      left:-5rem;bottom:-6rem;
      border-radius:9999px;
      background:rgba(156,181,214,.22);
      filter:blur(64px);
      z-index:-1;
    }


    /* Login composition — stronger use of the official Navy + Gold palette */
    .login-bg {
      background:
        radial-gradient(circle at 14% 18%, rgba(201,154,58,.18), transparent 30%),
        radial-gradient(circle at 80% 12%, rgba(76,114,165,.24), transparent 34%),
        radial-gradient(circle at 74% 82%, rgba(220,182,87,.10), transparent 28%),
        linear-gradient(135deg,#0f1828 0%,#1a2740 54%,#263a5b 100%);
    }
    .login-grid {
      background-image:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);
      background-size:28px 28px;
      -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.18));
      mask-image:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.18));
    }
    .auth-card {
      background:linear-gradient(145deg,rgba(253,250,243,.98),rgba(249,241,221,.96));
      border:1px solid rgba(232,206,134,.58);
      box-shadow:0 30px 70px -26px rgba(2,6,23,.58),0 0 0 1px rgba(255,255,255,.30) inset;
    }
    .auth-card::before {
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(135deg,rgba(255,255,255,.32),transparent 38%);
    }
    .hero-rule {
      background:linear-gradient(90deg,#dcb657,rgba(220,182,87,.08));
    }

    /* V4 — denser, product-led login composition */
    .product-stage {
      position:relative;
      border:1px solid rgba(255,255,255,.11);
      background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:0 30px 70px -36px rgba(2,6,23,.75), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(16px);
    }
    .product-stage::before {
      content:'';
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      background:linear-gradient(120deg,rgba(232,206,134,.08),transparent 32%,rgba(156,181,214,.06) 70%,transparent);
    }
    .hub-rail {
      position:relative;
      border-top:1px solid rgba(255,255,255,.10);
      padding-top:14px;
    }
    .hub-access-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .hub-access-pill {
      display:flex;
      min-width:0;
      align-items:center;
      gap:11px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:15px;
      background:rgba(255,255,255,.045);
      transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s;
    }
    .hub-access-pill:hover {
      transform:translateY(-1px);
      border-color:rgba(232,206,134,.26);
      background:rgba(255,255,255,.075);
    }
    .hub-access-pill .module-icon {
      width:34px;height:34px;
      border-radius:11px;
      flex:0 0 auto;
    }
    .hub-access-pill .module-icon svg { width:17px;height:17px; }
    .hub-access-copy { min-width:0; }
    .hub-access-copy b { display:block;font-size:11.5px;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .hub-access-copy span { display:block;margin-top:2px;font-size:9.5px;color:#9cb5d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    @media (max-width:1180px) {
      .hub-access-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    .module-tile {
      position:relative;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.055);
      transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;
    }
    .module-tile:hover {
      transform:translateY(-2px);
      border-color:rgba(232,206,134,.28);
      background:rgba(255,255,255,.085);
    }
    .module-icon {
      display:grid;
      width:34px;height:34px;
      place-items:center;
      border-radius:10px;
      background:rgba(249,241,221,.1);
      border:1px solid rgba(232,206,134,.18);
      color:#e8ce86;
    }
    .metric-float {
      animation:metricFloat 6s ease-in-out infinite;
    }
    .metric-float-delayed {
      animation:metricFloat 6.8s ease-in-out infinite reverse;
    }
    @keyframes metricFloat {
      0%,100% { transform:translateY(0) }
      50% { transform:translateY(-6px) }
    }
    .provider-btn {
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
    }
    .provider-btn:hover { transform:translateY(-1px); }
    .support-box {
      background:linear-gradient(135deg,rgba(240,244,249,.95),rgba(249,241,221,.92));
      border:1px solid rgba(196,211,232,.78);
    }
    .hero-orbit {
      position:absolute;
      width:280px;height:280px;
      border:1px solid rgba(232,206,134,.1);
      border-radius:50%;
      right:-80px;top:-120px;
      pointer-events:none;
    }
    .hero-orbit::before,.hero-orbit::after {
      content:'';position:absolute;border-radius:50%;border:1px solid rgba(156,181,214,.09);
    }
    .hero-orbit::before { inset:34px; }
    .hero-orbit::after { inset:78px; }
    @media (max-width:1023px) {
      .product-stage { display:none; }
    }

    /* V10 — left-side content enlarged one more step for a fuller composition.
       Auth card dimensions remain unchanged; only the product/brand area gains visual weight. */
    /* V8 — viewport fit: desktop login must sit inside one screen at 100% zoom. */
    .login-viewport { min-height:calc(100dvh - 3.5rem); }
    .viewport-grid { min-height:calc(100dvh - 3.5rem); }

    @media (min-width:1024px) {
      html.login-page-active, body.login-page-active { height:100%; }
      body.login-page-active { overflow:hidden; }
      #loginScreen { height:100dvh; min-height:0; overflow:hidden; }
      .login-viewport { height:calc(100dvh - 3.5rem); min-height:0; }
      .viewport-grid {
        height:100%;
        min-height:0;
        padding-top:clamp(14px,2.2vh,22px);
        padding-bottom:clamp(14px,2.2vh,22px);
      }
    }

    /* Common 1366×768 / 1440×800 laptop heights. */
    @media (min-width:1024px) and (max-height:820px) {
      .viewport-grid { gap:28px; padding-top:14px; padding-bottom:14px; }
      .hero-title { margin-top:16px; font-size:clamp(46px,4.15vw,56px); }
      .hero-sub { margin-top:14px; }
      .hub-rail { margin-top:20px; padding-top:13px; }
      .hub-access-pill { padding:10px 12px; gap:10px; border-radius:13px; }
      .hub-access-pill .module-icon { width:30px; height:30px; border-radius:9px; }
      .hub-access-pill .module-icon svg { width:15px; height:15px; }
      .hub-access-copy b { font-size:10.5px; }
      .hub-access-copy span { font-size:9px; }
      .auth-card-fit { padding:18px 20px; border-radius:20px; }
      .auth-card-fit h2 { font-size:23px; }
      .auth-fields { margin-top:13px; gap:10px; }
      .auth-submit { margin-top:10px; }
      .auth-divider { margin-top:10px; margin-bottom:10px; }
      .support-fit { margin-top:10px; padding:10px 11px; }
      .support-fit .grid.h-9.w-9 { width:32px; height:32px; }
    }

    /* Short desktop displays: preserve all actions without page scroll. */
    @media (min-width:1024px) and (max-height:720px) {
      header > div { height:52px !important; }
      .login-viewport { height:calc(100dvh - 52px); }
      .viewport-grid { padding-top:9px; padding-bottom:9px; }
      .hero-title { margin-top:11px; font-size:clamp(40px,3.7vw,47px); }
      .hero-sub { margin-top:10px; }
      .hub-rail { margin-top:14px; }
      .auth-card-fit { padding:14px 18px; }
      .auth-card-fit h2 { font-size:21px; }
      .auth-card-fit p { line-height:1.25rem; }
      .auth-fields { margin-top:10px; gap:8px; }
      .auth-card-fit input { padding-top:8px; padding-bottom:8px; }
      .auth-submit { margin-top:8px; padding-top:8px; padding-bottom:8px; }
      .auth-divider { margin-top:8px; margin-bottom:8px; }
      .provider-btn { padding-top:7px !important; padding-bottom:7px !important; }
      .support-fit { margin-top:8px; padding:8px 10px; }
      .support-fit p:last-of-type { display:none; }
    }

    /* Mobile/tablet may scroll naturally; never crop authentication content. */
    @media (max-width:1023px) {
      body.login-page-active { overflow-y:auto; }
      #loginScreen { min-height:100dvh; }
      .login-viewport, .viewport-grid { min-height:calc(100dvh - 3.5rem); height:auto; }
    }

  
/* Keep Tailwind's login-only reset inside the login screen while the app shell remains modular. */
:where(#loginScreen, #loginScreen *, #loginScreen::before, #loginScreen::after, #loginScreen *::before, #loginScreen *::after) {
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb;
}
:where(#loginScreen) { line-height:1.5; }
:where(#loginScreen blockquote, #loginScreen dl, #loginScreen dd, #loginScreen h1, #loginScreen h2, #loginScreen h3, #loginScreen h4, #loginScreen h5, #loginScreen h6, #loginScreen hr, #loginScreen figure, #loginScreen p, #loginScreen pre) { margin:0; }
:where(#loginScreen h1, #loginScreen h2, #loginScreen h3, #loginScreen h4, #loginScreen h5, #loginScreen h6) { font-size:inherit; font-weight:inherit; }
:where(#loginScreen a) { color:inherit; text-decoration:inherit; }
:where(#loginScreen b, #loginScreen strong) { font-weight:bolder; }
:where(#loginScreen button, #loginScreen input, #loginScreen optgroup, #loginScreen select, #loginScreen textarea) {
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0;
}
:where(#loginScreen button, #loginScreen input[type="button"], #loginScreen input[type="reset"], #loginScreen input[type="submit"]) {
  appearance:button;
  background-color:transparent;
  background-image:none;
}
:where(#loginScreen button, #loginScreen [role="button"]) { cursor:pointer; }
:where(#loginScreen img, #loginScreen svg, #loginScreen video, #loginScreen canvas, #loginScreen audio, #loginScreen iframe, #loginScreen embed, #loginScreen object) {
  display:block;
  vertical-align:middle;
}
:where(#loginScreen img, #loginScreen video) { max-width:100%; height:auto; }
:where(#loginScreen ul, #loginScreen ol, #loginScreen menu) { list-style:none; margin:0; padding:0; }
:where(#loginScreen input::placeholder, #loginScreen textarea::placeholder) { opacity:1; color:#9ca3af; }
#loginScreen.hidden { display:none !important; }
#loginPassword::-ms-reveal,
#loginPassword::-ms-clear { display:none; }
body:not(.login-page-active) > .login-bg,
body:not(.login-page-active) > .login-grid { display:none !important; }
body.login-page-active #floatingRoot { display:none !important; }