@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

   :root {
     /* Brand Green Shades */
     --pc-primary: #006747;
     --pc-primary-hover: #005036;
     --pc-primary-active: #003e2a;
     --pc-primary-light: #059669;
     --pc-accent: #00a86b;
     --pc-accent-glow: rgba(0, 168, 107, 0.25);
     --pc-primary-glow: rgba(0, 103, 71, 0.2);
   
     /* Soft Mint & Neutral Backgrounds */
     --pc-bg-mint: #e8f7f0;
     --pc-bg-mint-soft: #edf8f2;
     --pc-bg-mint-subtle: #f4fbf7;
     --pc-bg-page: #f8faf8;
     --pc-bg-card: #ffffff;
   
     /* Typography Colors */
     --pc-text-heading: #0b231c;
     --pc-text-body: #4b5e56;
     --pc-text-muted: #71867c;
     --pc-text-subtle: #96a9a0;
   
     /* Borders & Dividers */
     --pc-border-card: #e2ede7;
     --pc-border-card-hover: #b8ded0;
     --pc-border-input: #d5e2db;
     --pc-border-input-focus: #006747;
   
     /* Typography */
     --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   
     /* Shadows */
     --pc-shadow-card: 0 20px 45px -10px rgba(0, 40, 25, 0.07), 0 4px 16px rgba(0, 0, 0, 0.02);
     --pc-shadow-card-hover: 0 24px 50px -10px rgba(0, 103, 71, 0.12), 0 6px 20px rgba(0, 0, 0, 0.03);
     --pc-shadow-btn: 0 6px 18px rgba(0, 103, 71, 0.25);
     --pc-shadow-btn-hover: 0 10px 25px rgba(0, 103, 71, 0.35);
   }
   
   /* ==========================================================================
      GLOBAL BASE & BACKGROUND EFFECTS
      ========================================================================== */
   body {
     font-family: var(--font-family-base);
     background-color: var(--pc-bg-page);
     color: var(--pc-text-body);
     margin: 0;
     padding: 0;
     min-height: 100vh;
     position: relative;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   /* Ambient Subtle Tech Grid */
   .tech-grid-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
       radial-gradient(rgba(0, 103, 71, 0.06) 1.2px, transparent 1.2px);
     background-size: 28px 28px;
     pointer-events: none;
     z-index: 0;
     opacity: 0.85;
   }
   
   /* Ambient Soft Green Glow Spheres */
   .login-glow-sphere-1 {
     position: fixed;
     top: 8%;
     left: -80px;
     width: 550px;
     height: 550px;
     background: radial-gradient(circle, rgba(0, 168, 107, 0.09) 0%, rgba(232, 247, 240, 0.45) 45%, transparent 70%);
     filter: blur(80px);
     pointer-events: none;
     z-index: 0;
   }
   
   .login-glow-sphere-2 {
     position: fixed;
     bottom: 5%;
     right: -60px;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(0, 103, 71, 0.07) 0%, rgba(209, 250, 229, 0.4) 50%, transparent 70%);
     filter: blur(90px);
     pointer-events: none;
     z-index: 0;
   }
   
   /* ==========================================================================
      MAIN LOGIN SECTION LAYOUT
      ========================================================================== */
   .login-section {
     min-height: calc(100vh - 120px);
     padding: 80px 0 100px;
     position: relative;
     display: flex;
     align-items: center;
     z-index: 2;
   }
   
   @media (max-width: 991.98px) {
     .login-section {
       padding: 50px 0 70px;
     }
   }
   
   /* ==========================================================================
      LEFT COLUMN: CONTEXT, HERO & PLAN SHOWCASE
      ========================================================================== */
   .login-info-col {
     padding-right: 25px;
   }
   
   @media (max-width: 991.98px) {
     .login-info-col {
       padding-right: 0;
       margin-bottom: 40px;
       text-align: center;
     }
   }
   
   /* Top Pill Badge */
   .badge-pill-glow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--pc-bg-mint);
     border: 1px solid #bce6d3;
     color: var(--pc-primary);
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 50px;
     box-shadow: 0 2px 8px rgba(0, 103, 71, 0.06);
     transition: all 0.25s ease;
   }
   
   .badge-pill-glow:hover {
     background: #dff4e9;
     border-color: #a7dcbf;
     transform: translateY(-1px);
   }
   
   .badge-pill-glow .dot-pulse {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--pc-accent);
     position: relative;
     display: inline-block;
   }
   
   .badge-pill-glow .dot-pulse::after {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     right: -3px;
     bottom: -3px;
     border-radius: 50%;
     background: rgba(0, 168, 107, 0.45);
     animation: pulseDot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
   }
   
   @keyframes pulseDot {
     0% {
       transform: scale(0.9);
       opacity: 0.8;
     }
     70% {
       transform: scale(2.2);
       opacity: 0;
     }
     100% {
       transform: scale(0.9);
       opacity: 0;
     }
   }
   
   /* Hero Headline */
   .login-hero-title {
     font-size: clamp(2.1rem, 3.8vw, 3.1rem);
     font-weight: 800;
     line-height: 1.18;
     color: var(--pc-text-heading);
     letter-spacing: -0.03em;
     margin-top: 18px;
     margin-bottom: 20px;
   }
   
   /* Gradient highlight matching the website reference */
   .text-gradient-cyan {
     background: linear-gradient(135deg, #006747 0%, #00a86b 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
     font-weight: 800;
   }
   
   /* Hero Description Text */
   .login-hero-desc {
     font-size: 15.5px;
     line-height: 1.68;
     color: var(--pc-text-body);
     max-width: 530px;
     margin-bottom: 34px;
   }
   
   @media (max-width: 991.98px) {
     .login-hero-desc {
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   /* Plan Feature Card (Matching Reference Feature Box Style) */
   .login-plan-card {
     display: flex;
     align-items: center;
     gap: 18px;
     background: var(--pc-bg-card);
     border: 1px solid var(--pc-border-card);
     border-radius: 20px;
     padding: 22px 24px;
     box-shadow: 0 10px 30px rgba(0, 35, 20, 0.04);
     max-width: 520px;
     transition: all 0.3s ease;
     text-align: left;
   }
   
   .login-plan-card:hover {
     transform: translateY(-3px);
     border-color: var(--pc-border-card-hover);
     box-shadow: var(--pc-shadow-card-hover);
   }
   
   @media (max-width: 991.98px) {
     .login-plan-card {
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   .login-plan-icon-wrap {
     width: 54px;
     height: 54px;
     flex-shrink: 0;
     border-radius: 16px;
     background: linear-gradient(135deg, #eaf7f1 0%, #d8f3e5 100%);
     border: 1px solid #c3e9d6;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 25px;
     color: var(--pc-primary);
     box-shadow: 0 4px 12px rgba(0, 103, 71, 0.08);
     transition: all 0.3s ease;
   }
   
   .login-plan-card:hover .login-plan-icon-wrap {
     transform: scale(1.05);
     background: var(--pc-primary);
     color: #ffffff;
     border-color: var(--pc-primary);
   }
   
   .login-plan-info h4 {
     font-size: 16px;
     font-weight: 700;
     color: var(--pc-text-heading);
     letter-spacing: -0.015em;
     margin-bottom: 5px;
   }
   
   .login-plan-info p {
     font-size: 13px;
     color: var(--pc-text-muted);
     line-height: 1.5;
     margin-bottom: 0;
   }
   
   /* ==========================================================================
      RIGHT COLUMN: LOGIN AUTHENTICATION CARD
      ========================================================================== */
   .login-card-wrapper {
     position: relative;
     z-index: 3;
   }
   
   .login-card {
     position: relative;
     background: var(--pc-bg-card);
     border: 1px solid var(--pc-border-card);
     border-radius: 26px;
     padding: 42px 38px;
     box-shadow: var(--pc-shadow-card);
     overflow: hidden;
     transition: box-shadow 0.3s ease, border-color 0.3s ease;
   }
   
   .login-card:hover {
     box-shadow: var(--pc-shadow-card-hover);
     border-color: #d1e7db;
   }
   
   /* Clean Top Gradient Border Accent */
   .login-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #006747 0%, #00a86b 60%, #10b981 100%);
     border-radius: 26px 26px 0 0;
   }
   
   @media (max-width: 575.98px) {
     .login-card {
       padding: 32px 24px;
       border-radius: 22px;
     }
   }
   
   /* Welcome Back Pill Tag */
   .login-badge-welcome {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 5px 14px;
     border-radius: 50px;
     background: var(--pc-bg-mint);
     border: 1px solid #bce6d3;
     color: var(--pc-primary);
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     margin-bottom: 20px;
   }
   
   .login-badge-welcome .pulse-green {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--pc-accent);
     box-shadow: 0 0 6px rgba(0, 168, 107, 0.6);
     animation: pulseGreen 2s infinite ease-in-out;
   }
   
   @keyframes pulseGreen {
     0% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(0, 168, 107, 0.7);
     }
     70% {
       transform: scale(1);
       box-shadow: 0 0 0 6px rgba(0, 168, 107, 0);
     }
     100% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgba(0, 168, 107, 0);
     }
   }
   
   /* Card Header Typography */
   .login-card-title {
     font-size: 1.85rem;
     font-weight: 800;
     color: var(--pc-text-heading);
     letter-spacing: -0.025em;
     margin-bottom: 8px;
   }
   
   @media (max-width: 575.98px) {
     .login-card-title {
       font-size: 1.6rem;
     }
   }
   
   .login-card-subtitle {
     font-size: 14px;
     color: var(--pc-text-muted);
     line-height: 1.55;
     margin-bottom: 28px;
   }
   
   /* ==========================================================================
      FORM INPUTS & CONTROLS
      ========================================================================== */
   .login-form-group {
     margin-bottom: 20px;
   }
   
   .login-label {
     display: block;
     font-size: 13.5px;
     font-weight: 600;
     color: var(--pc-text-heading);
     margin-bottom: 7px;
     letter-spacing: -0.01em;
   }
   
   .login-input-wrap {
     position: relative;
     display: flex;
     align-items: center;
   }
   
   .login-input-icon {
     position: absolute;
     left: 16px;
     color: var(--pc-text-subtle);
     font-size: 17px;
     pointer-events: none;
     transition: color 0.25s ease, transform 0.25s ease;
     z-index: 2;
   }
   
   .login-input-field {
     width: 100%;
     height: 48px;
     background-color: #fafcfb !important;
     border: 1.5px solid var(--pc-border-input) !important;
     border-radius: 12px !important;
     color: var(--pc-text-heading) !important;
     font-size: 14.5px !important;
     font-weight: 500 !important;
     padding: 10px 18px 10px 46px !important;
     transition: all 0.25s ease !important;
     outline: none !important;
   }
   
   .login-input-field::placeholder {
     color: var(--pc-text-subtle) !important;
     font-size: 14px !important;
     font-weight: 400 !important;
   }
   
   .login-input-field:hover {
     background-color: #ffffff !important;
     border-color: #b8ded0 !important;
   }
   
   .login-input-field:focus {
     background-color: #ffffff !important;
     border-color: var(--pc-border-input-focus) !important;
     box-shadow: 0 0 0 4px rgba(0, 103, 71, 0.12) !important;
   }
   
   .login-input-wrap:focus-within .login-input-icon {
     color: var(--pc-primary);
     transform: scale(1.08);
   }
   
   /* ==========================================================================
      SUBMIT BUTTON (Signature Emerald Rounded-Pill Button)
      ========================================================================== */
   .login-submit-btn {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: var(--pc-primary);
     color: #ffffff !important;
     font-size: 15.5px;
     font-weight: 600;
     letter-spacing: -0.01em;
     padding: 13.5px 28px;
     border-radius: 50px;
     border: none;
     outline: none;
     cursor: pointer;
     box-shadow: var(--pc-shadow-btn);
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     margin-top: 10px;
     position: relative;
     overflow: hidden;
   }
   
   .login-submit-btn:hover {
     background: var(--pc-primary-hover);
     color: #ffffff !important;
     transform: translateY(-2px);
     box-shadow: var(--pc-shadow-btn-hover);
   }
   
   .login-submit-btn:hover #btnText i {
     transform: translateX(4px);
   }
   
   .login-submit-btn:active {
     transform: translateY(0);
     background: var(--pc-primary-active);
     box-shadow: 0 4px 12px rgba(0, 103, 71, 0.22);
   }
   
   .login-submit-btn:disabled {
     opacity: 0.75;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
   }
   
   #btnText {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   #btnText i {
     transition: transform 0.25s ease;
   }
   
   #btnLoader {
     display: inline-flex;
     align-items: center;
     gap: 8px;
   }
   
   /* ==========================================================================
      FOOTER SWITCH LINK
      ========================================================================== */
   .login-footer-switch {
     text-align: center;
     margin-top: 26px;
     padding-top: 22px;
     border-top: 1px solid #ecf3ee;
     font-size: 14px;
     color: var(--pc-text-muted);
   }
   
   .login-footer-switch a {
     color: var(--pc-primary);
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     margin-left: 4px;
     transition: all 0.2s ease;
   }
   
   .login-footer-switch a i {
     font-size: 13px;
     transition: transform 0.2s ease;
   }
   
   .login-footer-switch a:hover {
     color: var(--pc-accent);
   }
   
   .login-footer-switch a:hover i {
     transform: translateX(3px);
   }
   
   /* ==========================================================================
      FORM VALIDATION ERROR STATES (jQuery Validate Compatibility)
      ========================================================================== */
   #loginform label.error {
     display: block !important;
     color: #dc3545 !important;
     font-size: 12.5px !important;
     font-weight: 500 !important;
     margin-top: 6px !important;
     text-align: left !important;
   }
   
   #loginform input.error {
     border-color: #dc3545 !important;
     background-color: #fff8f8 !important;
   }
   
   #loginform input.error:focus {
     border-color: #dc3545 !important;
     box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12) !important;
   }