/* Ported from supplied pages/company/CompanyLogin.jsx; dynamic branding uses shared CSS variables. */

          @keyframes companyLoginSpin {
            to { transform: rotate(360deg); }
          }
        

        * { box-sizing: border-box; }

        @keyframes ffLoginRise {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }

        @keyframes ffSnowDrift {
          0%,100% { transform: translate3d(0,0,0); opacity: .42; }
          50% { transform: translate3d(10px,14px,0); opacity: .72; }
        }

        @keyframes companyLoginSpin {
          to { transform: rotate(360deg); }
        }

        .ff-company-login {
          --ff-green: #15933b;
          --ff-green-dark: #087232;
          --ff-orange: #f47711;
          --ff-ink: #101820;
          --ff-muted: #617081;
          min-height: 100dvh;
          width: 100%;
          overflow: hidden;
          position: relative;
          display: grid;
          place-items: center;
          padding: clamp(12px,2.2vw,34px);
          font-family: Inter, ui-sans-serif, system-ui, -apple-system,
            BlinkMacSystemFont, "Segoe UI", sans-serif;
          background:
            radial-gradient(circle at 12% 18%,rgba(128,218,255,.24),transparent 28%),
            radial-gradient(circle at 88% 78%,rgba(17,153,103,.22),transparent 34%),
            linear-gradient(135deg,#06172b 0%,#0a3554 48%,#0a536a 100%);
        }

        .ff-login-shell {
          width: min(1240px,100%);
          height: min(720px,calc(100dvh - 24px));
          min-height: min(620px,calc(100dvh - 24px));
          max-height: calc(100dvh - 24px);
          display: grid;
          grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
          position: relative;
          overflow: hidden;
          border-radius: 28px;
          border: 1px solid rgba(255,255,255,.54);
          background: rgba(230,246,252,.86);
          box-shadow:
            0 38px 110px rgba(0,17,34,.34),
            inset 0 1px 0 rgba(255,255,255,.86);
          animation: ffLoginRise .42s ease both;
        }

        .ff-login-visual {
          min-width: 0;
          position: relative;
          overflow: hidden;
          padding: clamp(24px,3.2vw,48px) clamp(24px,3.8vw,56px) 102px;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          isolation: isolate;
          background:
            linear-gradient(180deg,rgba(3,28,48,.04),rgba(2,35,57,.32)),
            radial-gradient(circle at 43% 38%,rgba(214,247,255,.92) 0%,rgba(82,177,208,.48) 25%,transparent 48%),
            linear-gradient(145deg,#164a6b 0%,#357c99 39%,#0e526d 67%,#082f4b 100%);
        }

        .ff-login-visual::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -2;
          opacity: .52;
          background-image:
            linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),
            linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
          background-size: 44px 44px;
          mask-image: linear-gradient(to bottom,#000,rgba(0,0,0,.55) 62%,transparent);
        }

        .ff-login-visual::after {
          content: "";
          position: absolute;
          left: -8%;
          right: -8%;
          bottom: -48px;
          height: 240px;
          z-index: -1;
          transform: rotate(-2.8deg);
          background:
            linear-gradient(180deg,rgba(225,249,255,.15),rgba(230,251,255,.94) 38%,#fff 100%);
          border-top: 1px solid rgba(255,255,255,.84);
          box-shadow: 0 -20px 80px rgba(210,246,255,.30);
        }

        .ff-orchard-badge {
          position: absolute;
          top: 22px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 4;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 13px;
          border-radius: 999px;
          border: 1px solid rgba(255,255,255,.22);
          background: rgba(4,92,54,.28);
          color: rgba(255,255,255,.92);
          box-shadow: 0 10px 30px rgba(0,0,0,.12);
          backdrop-filter: blur(10px);
          font-size: 9px;
          font-weight: 900;
          letter-spacing: .12em;
          white-space: nowrap;
        }

        .ff-cooling-row {
          position: absolute;
          left: clamp(20px,3vw,50px);
          right: clamp(20px,3vw,50px);
          top: clamp(18px,2.4vw,42px);
          display: flex;
          justify-content: space-between;
          gap: 26px;
          opacity: .76;
          pointer-events: none;
        }

        .ff-cooling-unit {
          width: min(280px,34%);
          height: 94px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          gap: 10px;
          padding: 12px 18px;
          border-radius: 9px;
          border: 1px solid rgba(212,242,255,.45);
          background: linear-gradient(150deg,rgba(209,235,245,.66),rgba(63,112,136,.46));
          box-shadow: 0 18px 38px rgba(0,18,35,.24), inset 0 1px 0 rgba(255,255,255,.62);
          backdrop-filter: blur(4px);
        }

        .ff-fan {
          width: 62px;
          height: 62px;
          border-radius: 50%;
          border: 5px solid rgba(10,45,65,.70);
          position: relative;
          background:
            radial-gradient(circle at center,#163d51 0 10%,transparent 11%),
            conic-gradient(from 18deg,
              rgba(7,35,52,.82) 0 15deg,transparent 15deg 72deg,
              rgba(7,35,52,.82) 72deg 87deg,transparent 87deg 144deg,
              rgba(7,35,52,.82) 144deg 159deg,transparent 159deg 216deg,
              rgba(7,35,52,.82) 216deg 231deg,transparent 231deg 288deg,
              rgba(7,35,52,.82) 288deg 303deg,transparent 303deg 360deg);
          box-shadow: inset 0 0 0 2px rgba(210,244,255,.30);
        }

        .ff-snowflake {
          position: absolute;
          color: rgba(231,250,255,.74);
          text-shadow: 0 3px 12px rgba(152,230,255,.28);
          user-select: none;
          pointer-events: none;
          animation: ffSnowDrift 8s ease-in-out infinite;
        }

        .ff-brand-block {
          width: min(650px,100%);
          position: relative;
          z-index: 2;
          margin-top: 30px;
        }

        .ff-platform-logo-wrap {
          width: min(270px,58vw);
          height: 142px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 8px;
        }

        .ff-platform-logo {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          object-position: left center;
          filter: drop-shadow(0 14px 28px rgba(0,0,0,.17));
        }

        .ff-logo-fallback {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          color: #fff;
          font-size: clamp(44px,5.2vw,78px);
          line-height: 1;
          font-style: italic;
          font-weight: 950;
          letter-spacing: -.055em;
          text-shadow: 0 14px 34px rgba(0,0,0,.22);
        }

        .ff-logo-fallback strong { color: #44b943; }
        .ff-logo-fallback em { color: #ff7b14; font-style: italic; }

        .ff-platform-subline {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          color: rgba(255,255,255,.90);
          font-size: 12px;
          font-weight: 850;
          letter-spacing: .19em;
          text-transform: uppercase;
          text-shadow: 0 2px 10px rgba(0,0,0,.20);
        }

        .ff-platform-subline::before,
        .ff-platform-subline::after {
          content: "";
          width: 24px;
          height: 2px;
          border-radius: 99px;
          background: linear-gradient(90deg,var(--ff-green),var(--ff-orange));
        }

        .ff-hero-title {
          margin: 22px 0 0;
          color: #fff;
          font-size: clamp(32px,3.45vw,50px);
          line-height: 1.02;
          letter-spacing: -.045em;
          font-weight: 950;
          text-shadow: 0 7px 28px rgba(0,23,41,.34);
        }

        .ff-hero-title .green { color: #75df91; }
        .ff-hero-title .orange { color: #ff9b48; }

        .ff-hero-copy {
          max-width: 600px;
          margin: 13px 0 0;
          color: rgba(245,252,255,.90);
          font-size: clamp(13px,1.05vw,16px);
          line-height: 1.65;
          font-weight: 560;
          text-shadow: 0 4px 18px rgba(0,20,38,.28);
        }

        .ff-feature-grid {
          width: min(640px,100%);
          margin-top: 23px;
          display: grid;
          grid-template-columns: repeat(4,minmax(0,1fr));
          gap: 14px;
        }

        .ff-feature-card {
          min-height: 94px;
          padding: 11px 8px 9px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-radius: 16px;
          border: 1px solid rgba(255,255,255,.58);
          background: linear-gradient(150deg,rgba(255,255,255,.22),rgba(210,244,255,.10));
          backdrop-filter: blur(12px) saturate(120%);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.30),0 12px 30px rgba(0,24,43,.12);
        }

        .ff-feature-icon {
          width: 36px;
          height: 36px;
          display: grid;
          place-items: center;
          margin-bottom: 8px;
          border-radius: 13px;
          background: rgba(255,255,255,.90);
          color: var(--ff-green);
          font-size: 19px;
          box-shadow: 0 8px 18px rgba(0,30,54,.14);
        }

        .ff-feature-card span:last-child {
          color: #fff;
          font-size: 12px;
          line-height: 1.28;
          font-weight: 850;
          text-shadow: 0 2px 8px rgba(0,28,50,.36);
        }

        .ff-safe-banner {
          width: fit-content;
          margin-top: 18px;
          padding: 11px 17px;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          border-radius: 13px;
          color: #fff;
          background: rgba(0,80,118,.67);
          border: 1px solid rgba(255,255,255,.22);
          box-shadow: 0 12px 28px rgba(0,22,41,.20);
          backdrop-filter: blur(10px);
          font-size: 12px;
          font-weight: 730;
        }

        .ff-safe-banner b { color: #77e48d; }

        .ff-login-panel {
          position: relative;
          min-width: 0;
          padding: clamp(20px,3vw,38px) clamp(20px,3vw,38px) 82px;
          overflow-y: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--ff-ink);
          background:
            linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,248,252,.88));
          box-shadow: -22px 0 70px rgba(2,34,55,.16);
        }

        .ff-login-card {
          width: min(400px,100%);
        }

        .ff-mobile-brand { display: none; }
        .ff-form-company-logo { display:flex; min-height:74px; margin:0 auto 10px; align-items:center; justify-content:center; }
        .ff-form-company-logo img { max-width:min(220px,78%); max-height:68px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(15,23,42,.10)); }
        .ff-form-company-logo .ff-logo-fallback { font-size:34px; text-shadow:none; }

        .ff-login-heading {
          margin: 0;
          color: #0f1922;
          font-size: clamp(29px,2.45vw,38px);
          line-height: 1.05;
          letter-spacing: -.04em;
          font-weight: 950;
        }

        .ff-login-heading .flake {
          display: inline-block;
          margin-left: 7px;
          color: #399ac5;
          font-size: .78em;
          vertical-align: .10em;
        }

        .ff-login-subtitle {
          margin: 8px 0 18px;
          color: #687582;
          font-size: clamp(13px,.95vw,15px);
          line-height: 1.55;
          font-weight: 540;
        }

        .ff-login-subtitle strong {
          color: var(--ff-green);
          font-weight: 900;
        }

        .ff-alert {
          width: 100%;
          margin: 0 0 15px;
          padding: 12px 14px;
          border-radius: 12px;
          font-size: 12px;
          line-height: 1.45;
          font-weight: 700;
        }

        .ff-alert.error {
          color: #9b1c1c;
          border: 1px solid rgba(220,38,38,.18);
          background: rgba(254,226,226,.74);
        }

        .ff-alert.notice {
          color: #08612c;
          border: 1px solid rgba(22,163,74,.18);
          background: rgba(220,252,231,.76);
        }

        .ff-field { display: block; margin-bottom: 12px; }

        .ff-field-label {
          display: block;
          margin-bottom: 6px;
          color: #17212b;
          font-size: 13px;
          font-weight: 850;
        }

        .ff-input-wrap { position: relative; }

        .ff-input-icon {
          position: absolute;
          left: 14px;
          top: 50%;
          transform: translateY(-50%);
          width: 26px;
          height: 26px;
          display: grid;
          place-items: center;
          color: var(--ff-green);
          font-size: 19px;
          pointer-events: none;
        }

        .ff-login-input {
          width: 100%;
          height: 48px;
          padding: 0 44px 0 46px;
          border-radius: 12px;
          border: 1px solid #cfd9e1;
          outline: none;
          color: #17212b;
          background: rgba(255,255,255,.92);
          box-shadow: 0 5px 12px rgba(36,67,86,.09),inset 0 1px 0 #fff;
          font: inherit;
          font-size: 14px;
          font-weight: 620;
          transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
        }

        .ff-login-input::placeholder { color: #87939e; font-weight: 540; }

        .ff-login-input:focus {
          border-color: rgba(21,147,59,.66);
          background: #fff;
          box-shadow: 0 0 0 4px rgba(21,147,59,.09),0 8px 18px rgba(34,76,94,.11);
        }

        .ff-password-toggle {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          width: 38px;
          height: 38px;
          display: grid;
          place-items: center;
          border: 0;
          border-radius: 10px;
          color: #597083;
          background: transparent;
          cursor: pointer;
          font-size: 16px;
        }

        .ff-password-toggle:hover { background: rgba(15,72,96,.06); }

        .ff-login-options {
          margin: 1px 0 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          color: #4f5d68;
          font-size: 13px;
          font-weight: 650;
        }

        .ff-remember {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
        }

        .ff-remember input {
          width: 18px;
          height: 18px;
          margin: 0;
          accent-color: var(--ff-green);
        }

        .ff-forgot {
          padding: 0;
          border: 0;
          color: var(--ff-green-dark);
          background: transparent;
          font: inherit;
          font-weight: 780;
          cursor: pointer;
        }

        .ff-login-button {
          width: 100%;
          height: 48px;
          border: 0;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          color: #fff;
          background: linear-gradient(100deg,#16a13c 0%,#0a7c38 100%);
          box-shadow: 0 12px 22px rgba(8,124,56,.24),inset 0 1px 0 rgba(255,255,255,.22);
          font: inherit;
          font-size: 15px;
          font-weight: 880;
          cursor: pointer;
          transition: transform .18s ease,box-shadow .18s ease,opacity .18s ease;
        }

        .ff-login-button:not(:disabled):hover {
          transform: translateY(-2px);
          box-shadow: 0 16px 28px rgba(8,124,56,.30),inset 0 1px 0 rgba(255,255,255,.22);
        }

        .ff-login-button:disabled { opacity: .62; cursor: not-allowed; }

        .ff-login-footer {
          margin-top: 20px;
          padding-top: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          border-top: 1px solid #dbe3e8;
          color: #65737f;
          font-size: 12px;
          font-weight: 620;
        }

        .ff-support {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          min-width: 0;
        }

        .ff-support a {
          color: var(--ff-green-dark);
          text-decoration: none;
          font-weight: 820;
        }

        .ff-version {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          flex-shrink: 0;
          padding-left: 18px;
          border-left: 1px solid #dbe3e8;
        }

        .ff-metrics {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          min-height: 72px;
          z-index: 8;
          display: grid;
          grid-template-columns: repeat(3,1fr);
          padding: 11px max(22px,6vw);
          color: #075b36;
          background: linear-gradient(180deg,rgba(255,255,255,.89),rgba(248,252,253,.98));
          border-top: 1px solid rgba(18,99,107,.14);
          box-shadow: 0 -8px 28px rgba(8,54,75,.05);
        }

        .ff-metric {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 13px;
          padding: 0 18px;
          border-right: 1px solid #d6e2e5;
        }

        .ff-metric:last-child { border-right: 0; }

        .ff-metric-icon {
          width: 34px;
          height: 34px;
          display: grid;
          place-items: center;
          color: #0b6b4d;
          font-size: 21px;
        }

        .ff-metric strong {
          display: block;
          color: #075b36;
          font-size: 15px;
          line-height: 1.1;
          font-weight: 920;
        }

        .ff-metric small {
          display: block;
          margin-top: 3px;
          color: #667782;
          font-size: 10px;
          font-weight: 650;
        }


        @media (max-height: 820px) and (min-width: 861px) {
          .ff-company-login { padding: 8px; }
          .ff-login-shell { height: calc(100dvh - 16px); min-height: 0; max-height: calc(100dvh - 16px); }
          .ff-login-visual { padding-top: 22px; padding-bottom: 82px; justify-content: center; }
          .ff-cooling-row { top: 12px; }
          .ff-cooling-unit { height: 72px; }
          .ff-fan { width: 47px; height: 47px; }
          .ff-brand-block { margin-top: 28px; }
          .ff-platform-logo-wrap { width: 230px; height: 112px; }
          .ff-hero-title { margin-top: 14px; font-size: clamp(29px,3.1vw,43px); }
          .ff-hero-copy { margin-top: 9px; line-height: 1.45; }
          .ff-feature-grid { margin-top: 15px; gap: 9px; }
          .ff-feature-card { min-height: 72px; padding: 7px; }
          .ff-feature-icon { width: 30px; height: 30px; margin-bottom: 5px; font-size: 16px; }
          .ff-safe-banner { margin-top: 12px; padding: 8px 12px; }
          .ff-login-panel { padding-top: 22px; padding-bottom: 82px; }
          .ff-login-heading { font-size: 34px; }
          .ff-login-subtitle { margin: 7px 0 17px; }
          .ff-field { margin-bottom: 11px; }
          .ff-login-input { height: 49px; }
          .ff-login-options { margin-bottom: 13px; }
          .ff-login-button { height: 49px; }
          .ff-login-footer { margin-top: 20px; padding-top: 12px; }
          .ff-metrics { min-height: 64px; padding-block: 8px; }
        }

        @media (max-width: 1080px) {
          .ff-login-shell {
            grid-template-columns: minmax(0,1fr) minmax(370px,.94fr);
          }
          .ff-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
          .ff-feature-card { min-height: 90px; }
        }

        @media (max-width: 860px) {
          .ff-company-login { padding: 0; }
          .ff-login-shell {
            width: 100%;
            min-height: 100dvh;
            height: auto;
            max-height: none;
            border: 0;
            border-radius: 0;
            grid-template-columns: 1fr;
            overflow-y: auto;
            display: block;
          }
          .ff-login-visual { display: none; }
          .ff-login-panel {
            min-height: 100dvh;
            padding: 24px 18px 20px;
          }
          .ff-mobile-brand {
            display: none;
            width: 100%;
            min-height: 88px;
            margin-bottom: 18px;
            align-items: center;
            justify-content: center;
          }
          .ff-mobile-brand img {
            max-width: min(230px,68vw);
            max-height: 72px;
            object-fit: contain;
          }
          .ff-login-card { width:min(390px,100%); max-width:390px; }
          .ff-form-company-logo { min-height:82px; margin-bottom:14px; }
          .ff-form-company-logo img { max-height:74px; }
          .ff-metrics { position: static; margin-top: 18px; padding: 12px 8px; min-height: 74px; }
          .ff-metric { padding: 0 8px; gap: 8px; }
          .ff-metric strong { font-size: 13px; }
          .ff-metric small { font-size: 8px; }
        }

        @media (max-width: 520px) {
          .ff-login-heading { font-size: 31px; }
          .ff-login-subtitle { margin-bottom: 18px; font-size: 13px; }
          .ff-login-input { height: 48px; }
          .ff-login-button { height: 48px; }
          .ff-login-options { font-size: 12px; }
          .ff-login-footer { margin-top: 24px; flex-direction: column; align-items: flex-start; }
          .ff-version { padding-left: 0; border-left: 0; }
          .ff-metric-icon { display: none; }
          .ff-metric { text-align: center; padding-inline:4px; }
          .ff-metric strong { font-size: 11px; }
          .ff-metric small { font-size: 7.5px; }
        }