@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --green:#0b5c3a;
  --green-dark:#083f2a;
  --green-light:#eaf6ef;
  --navy:#0f2438;
  --bg:#eef6f0;
  --card:#ffffff;
  --border:#dbe6dc;
  --text:#152d24;
  --muted:#4d6154;
  --orange:#f59e0b;
  --orange-bg:#fef3e2;
  --red:#ef4444;
  --red-bg:#fee2e2;
  --blue:#3b82f6;
  --blue-bg:#e8f0fe;
  --purple:#8b5cf6;
  --purple-bg:#f1ebfd;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:radial-gradient(circle at top left, rgba(26,122,60,0.12) 0%, transparent 28%), linear-gradient(180deg,#f7fbf8,#e9f2ec);color:var(--text);min-height:100vh;}
a{text-decoration:none;color:inherit;cursor:pointer;}

.auth-shell{display:grid;grid-template-columns:1.25fr 1.75fr;min-height:100vh;gap:0;}
.auth-brand-panel{position:relative;padding:84px 80px;display:flex;flex-direction:column;justify-content:center;gap:42px;background:linear-gradient(135deg,rgba(28,124,81,0.98), rgba(15,74,47,0.96));color:#f8fbf8;overflow:hidden;}
.auth-brand-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 15%, rgba(255,255,255,0.22), transparent 28%),radial-gradient(circle at 80% 90%, rgba(255,255,255,0.14), transparent 26%);pointer-events:none;}
.auth-brand-panel::after{content:'';position:absolute;bottom:-80px;left:-50px;width:260px;height:260px;background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 65%);border-radius:50%;pointer-events:none;}
.auth-brand-top{position:relative;z-index:1;}
.auth-brand-top .logo{display:flex;align-items:center;gap:18px;}
.auth-brand-top .logo .logo-text h1{font-size:2.6rem;margin:0;font-weight:900;letter-spacing:-0.06em;color:#fff;}
.auth-brand-top .logo .logo-text span{font-size:1rem;color:rgba(255,255,255,0.88);}
.auth-brand-mid{position:relative;z-index:1;max-width:560px;}
.auth-brand-mid .eyebrow{display:inline-flex;padding:14px 22px;border-radius:999px;background:rgba(255,255,255,0.16);color:#e9f8e8;font-size:0.86rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.auth-brand-mid h2{margin:20px 0 16px;font-size:3.4rem;line-height:1.05;font-family:var(--font-display);font-weight:900;color:#fff;}
.auth-brand-mid p{max-width:560px;font-size:1rem;line-height:1.9;color:rgba(255,255,255,0.82);}
.mobile-brand{display:none;}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.field label{font-size:0.95rem;font-weight:700;color:var(--navy);}
.field input{width:100%;min-height:52px;padding:0 18px;border-radius:10px;border:1px solid rgba(15,36,56,0.12);background:#f9fbf9;color:var(--text);font-size:1rem;outline:none;transition:all 0.2s ease;}
.field input:focus{border-color:rgba(214,157,47,0.5);box-shadow:0 0 0 6px rgba(214,157,47,0.12);}
.pw-toggle{position:relative;}
/* Reserve space inside the input for the SHOW button and align it vertically */
.pw-toggle input{padding-right:110px;}
/* Strong vertical centering for the SHOW button to avoid baseline shifts */
.pw-toggle button{position:absolute;top:50% !important;right:12px !important;transform:translateY(-50%) !important;border:none;background:rgba(31,142,106,0.08);color:var(--green-dark);font-weight:700;padding:0 14px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:background 0.18s ease,transform 0.12s ease;color:var(--green-dark);line-height:1;font-size:0.95rem;}
.pw-toggle button:hover{background:rgba(31,142,106,0.08);}
.strength-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.strength-bar span{height:8px;border-radius:999px;background:rgba(15,36,56,0.08);transition:background .25s ease;}
.field-error{color:var(--red);font-size:0.88rem;min-height:1.2em;opacity:0;transform:translateY(-2px);transition:opacity .2s ease,transform .2s ease;}
.field-error.visible{opacity:1;transform:translateY(0);}
.btn.btn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:10px;background:linear-gradient(135deg, #22a26e, #0f6643);color:#fff;font-size:1rem;font-weight:700;box-shadow:0 20px 42px rgba(31,142,106,0.24);border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,filter .2s ease;text-transform:uppercase;letter-spacing:0.04em;}
.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 50px rgba(31,142,106,0.3);background:linear-gradient(135deg, #26a86f, #0f5a3b);filter:brightness(1.03);}
#googleLoginBtn,.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf > div,.nsm7Bb-HzV7m-LgbsSe,.nsm7Bb-HzV7m-LgbsSe *,.L5Fo6c-PQbLGe{border-radius:10px !important;}
#googleLoginBtn .nsm7Bb-HzV7m-LgbsSe{overflow:hidden;}
.btn-block{width:100%;}
.auth-form-panel{display:flex;align-items:center;justify-content:center;padding:90px 72px;background:radial-gradient(circle at top right, rgba(31,142,106,0.18), transparent 34%), #f5fbf7;min-height:100vh;}
.auth-form-wrap{width:min(100%, 860px);max-width:860px;background:rgba(255,255,255,0.98);border-radius:44px;box-shadow:0 52px 130px rgba(15, 36, 56, 0.14);border:1px solid rgba(31,142,106,0.12);padding:64px;position:relative;overflow:hidden;}
.auth-form-wrap::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle, rgba(31,142,106,0.18), transparent 60%);border-radius:50%;pointer-events:none;}
.auth-heading{text-align:left;margin-bottom:36px;}
.auth-shell-reset{font-family:var(--font-body);}
/* Stronger rules to ensure display font is applied on the reset page */
.auth-shell-reset .auth-brand-top .logo .logo-text h1,
.auth-shell-reset .auth-brand-mid h2,
.auth-shell-reset .auth-heading h1{
  font-family:var(--font-display), var(--font-body) !important;
  font-weight:900 !important;
  letter-spacing:-0.04em;
}
.auth-shell-reset .auth-brand-top .logo .logo-text span,
.auth-shell-reset .auth-brand-mid p,
.auth-shell-reset .auth-heading p,
.auth-shell-reset .field label,
.auth-shell-reset .field input,
.auth-shell-reset .pw-toggle button,
.auth-shell-reset .field-error{font-family:var(--font-body);}

/* Fallback to ensure logo uses display font with higher specificity */
.auth-shell-reset a.logo .logo-text h1{font-family:var(--font-display), serif !important;}

/* Ensure logo text keeps its original capitalization and scales on mobile */
.auth-shell-reset a.logo .logo-text h1{
  text-transform: none !important;
  font-size:2.4rem !important;
  line-height:1 !important;
  margin:0 !important;
}
.auth-shell-reset .mobile-brand .logo-text h1{
  font-size:1.25rem !important;
  font-weight:800 !important;
}
.auth-heading h1{margin:0 0 12px;font-size:2.8rem;font-family:var(--font-display);letter-spacing:-0.05em;color:var(--navy);}
.auth-heading p{margin:0;color:var(--muted);line-height:1.8;font-size:1rem;}
.field input{width:100%;min-height:52px;padding:0 20px;border-radius:10px;border:1px solid rgba(31,142,106,0.12);background:#ffffff;color:var(--text);box-shadow:inset 0 1px 2px rgba(15,36,56,0.05);}
.field input:focus{border-color:rgba(31,142,106,0.5);box-shadow:0 0 0 8px rgba(31,142,106,0.08);}
.pw-toggle button{position:absolute;top:50% !important;right:12px !important;transform:translateY(-50%) !important;border:none;background:rgba(31,142,106,0.08);color:var(--green-dark);font-weight:700;padding:0 14px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;transition:background 0.18s ease,transform 0.12s ease;}
.pw-toggle button:hover{background:rgba(31,142,106,0.16);transform:translateY(-50%) scale(1.02);} 
.strength-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.strength-bar span{height:10px;border-radius:999px;background:rgba(15,36,56,0.1);box-shadow:inset 0 1px 2px rgba(15,36,56,0.05);}
.field-error{color:var(--red);font-size:0.9rem;min-height:1.2em;opacity:0;transform:translateY(-2px);transition:opacity .2s ease,transform .2s ease;}
.field-error.visible{opacity:1;transform:translateY(0);}
@media(max-width:1100px){.auth-shell{grid-template-columns:1fr;}.auth-brand-panel{padding:40px 32px;}.auth-form-panel{padding:40px 24px;}.auth-form-wrap{padding:36px;}.mobile-brand{display:block;margin-bottom:28px;}.auth-brand-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;}.auth-heading h1{font-size:1.85rem;}}
@media(max-width:720px){.auth-brand-panel{padding:28px 20px;}.auth-form-panel{padding:28px 18px;}.auth-form-wrap{border-radius:28px;padding:28px;}.auth-brand-mid h2{font-size:2.2rem;}.auth-shell{min-height:auto;}.mobile-brand{display:block;}.auth-brand-panel{display:none;}.auth-form-panel{background:linear-gradient(180deg,#f5fbf7,#eff7f0);} }

/* Signup form refinement */
.signup-page {
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(31, 142, 106, 0.16), transparent 26%), linear-gradient(180deg, #f5faf7 0%, #edf6f0 100%);
}
.signup-page .auth-wrap{height:100vh;min-height:100vh;align-items:stretch;}
.signup-page .auth-left{flex:0.92;height:100vh;min-height:100vh;padding:26px 26px;background:linear-gradient(135deg, rgba(15, 75, 57, 0.92), rgba(11, 92, 58, 0.82)), url('/assets/desktophero.png') left center/cover no-repeat;background-position:left center;border-right:none;}
.signup-page .auth-right{flex:1.08;height:100vh;min-height:100vh;align-items:flex-start;justify-content:flex-start;padding:0;overflow-x:hidden;overflow-y:auto;}
.signup-page .auth-card{width:100%;max-width:none;min-height:100vh;padding:18px clamp(28px, 4vw, 64px) 24px;border-radius:0;border:none;background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,252,250,0.99));box-shadow:0 14px 30px rgba(15,36,36,0.05);position:relative;display:flex;flex-direction:column;justify-content:flex-start;margin:0;}
.signup-page .auth-card::before{content:"";display:none;}
.signup-page .top-row{display:flex;justify-content:flex-end;align-items:center;margin:0 0 6px;padding-right:2px;font-size:11.5px;color:#4f6b62;}
.signup-page .auth-card h2{margin:0 0 6px;font-size:clamp(2.1rem, 2.5vw, 2.9rem);line-height:1.02;letter-spacing:-0.05em;color:#0e2d2a;}
.signup-page .auth-card .sub{margin:0 0 10px;color:#566d64;font-size:14px;line-height:1.45;}
.signup-page form{display:flex;flex-direction:column;gap:4px;}
.signup-page .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;align-items:start;width:100%;}
.signup-page .field{margin-bottom:0;gap:6px;}
.signup-page .field label{font-size:12.5px;font-weight:700;color:#21463c;}
.signup-page .input-ic input,.signup-page .input-ic select{height:42px;border-radius:12px;padding:0 14px;background:#f8faf8;border:1px solid rgba(19,75,61,0.12);box-shadow:none;}
.signup-page .field.full.password-strength{grid-column:1 / -1;margin-top:0;}
.signup-page .strength-bar{gap:5px;}
.signup-page .strength-label{font-size:11px;}
.signup-page .checkline{margin:4px 0 10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#4f6b62;}
.signup-page .checkline input{margin-top:2px;accent-color:#0d8d69;}
.signup-page .btn.btn-primary{min-height:48px;border-radius:14px;font-size:1rem;letter-spacing:0.04em;box-shadow:0 16px 30px rgba(20,116,78,0.18);} 
.signup-page .divider{margin:8px 0 7px;}
.signup-page .auth-right .btn-google{margin-top:2px;}
.signup-page .top-row{display:flex;justify-content:flex-end;align-items:center;margin:0 0 10px;font-size:12px;line-height:1.4;color:#4f6b62;position:relative;z-index:1;}
.signup-page .auth-card h2{margin:0;position:relative;z-index:1;font-size:clamp(1.9rem, 2.1vw, 2.6rem);line-height:1.1;letter-spacing:-0.04em;color:#0f2f2a;}
.signup-page .auth-card .sub{max-width:620px;margin:8px 0 16px;color:#4f6b62;font-size:14px;line-height:1.5;position:relative;z-index:1;}
.signup-page .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;align-items:start;width:100%;position:relative;z-index:1;grid-auto-rows:minmax(40px,auto);}
.signup-page .field{gap:7px;margin-bottom:0;min-width:0;width:100%;}
.signup-page .field label{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:1.35;color:#21463c;font-weight:700;}
.signup-page .optional{font-size:11px;font-weight:600;color:#4f6b62;}
.signup-page .input-ic input,.signup-page .input-ic select{height:44px;border-radius:12px;padding:0 14px;font-size:13px;background:rgba(255,255,255,0.96);border:1px solid rgba(19,75,61,0.12);box-shadow:inset 0 1px 2px rgba(15,36,56,0.02);width:100%;}
.signup-page .input-ic select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#4f6b62 50%),linear-gradient(135deg,#4f6b62 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.signup-page .input-ic input:focus,.signup-page .input-ic select:focus{outline:none;border-color:rgba(31,142,106,.55);box-shadow:0 0 0 5px rgba(31,142,106,.08);}
.signup-page .field.full{grid-column:1 / -1;}
.signup-page .password-strength{gap:6px;margin-top:0;margin-bottom:10px;}
.signup-page .strength-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;}
.signup-page .strength-bar span{height:5px;border-radius:999px;background:rgba(15,36,56,.10);box-shadow:none;}
.signup-page .strength-label{font-size:11px;color:#4f6b62;min-height:16px;font-weight:600;}
.signup-page .strength-label[data-level="weak"]{color:#b45309;}
.signup-page .strength-label[data-level="good"]{color:#28754e;}
.signup-page .strength-label[data-level="strong"]{color:#0f5c46;font-weight:700;}
.signup-page .checkline{display:flex;align-items:flex-start;gap:8px;margin:6px 0 8px;font-size:12px;line-height:1.5;color:#4f6b62;position:relative;z-index:1;}
.signup-page .checkline input{width:16px;height:16px;margin:2px 0 0;accent-color:#0d8d69;flex:0 0 auto;}
.signup-page .btn-block{min-height:46px;margin-top:0;}
.signup-page .form-status{min-height:18px;margin:0 0 6px;color:#d64545;font-size:12px;line-height:1.35;position:relative;z-index:1;}
.signup-page .form-status.success{color:#0d5e4a;}
.signup-page .form-status:empty{display:none;}
.signup-page .field-error{font-size:11px;margin-top:0;}
.signup-page .divider{margin:8px 0;position:relative;z-index:1;}
@media(max-width:760px){
  .signup-page{overflow:auto;}
  .signup-page .auth-wrap{height:auto;min-height:100vh;}
  .signup-page .auth-right{padding:14px 10px 18px;overflow:visible;}
  .signup-page .auth-card{padding:18px 16px;border-radius:14px;}
  .signup-page .auth-card h2{font-size:26px;}
  .signup-page .form-grid{grid-template-columns:1fr;gap:0;}
  .signup-page .field.full{grid-column:auto;}
}

.signup-page .input-ic input,.signup-page .input-ic select{border-radius:12px;background:rgba(255,255,255,0.96);border-color:rgba(19,75,61,0.12);width:100%;}
.signup-page .input-ic input,.signup-page .input-ic select{min-height:0;padding:0 14px;font-family:var(--font-body);font-size:13px;font-weight:500;line-height:42px;letter-spacing:0;}
.signup-page .input-ic input::placeholder{font:inherit;color:#6b756f;opacity:1;}
.signup-page .form-grid{align-items:start;}
.signup-page .field{min-width:0;}
.signup-page .input-ic:has(.eye) input{padding-right:44px;}
.signup-page .input-ic:has(.eye) input,.signup-page .input-ic:has(.eye) select{padding-right:44px;}
.signup-page .input-ic .eye{right:14px;}
.signup-page .input-ic input:focus,.signup-page .input-ic select:focus{outline:none;border-color:rgba(31,142,106,0.55);box-shadow:0 0 0 6px rgba(31,142,106,0.08);} 
.signup-page .strength-bar span{border-radius:999px;background:#d9e0dc;}
.signup-page .btn.btn-primary{border-radius:12px;background:linear-gradient(135deg, #1f9a70, #0e5b46);box-shadow:0 18px 34px rgba(31,142,106,0.22);} 
.signup-page .btn.btn-primary:hover{background:linear-gradient(135deg, #22a875, #0c503d);box-shadow:0 22px 42px rgba(31,142,106,0.26);} 
#googleSignupBtn,.S9gUrf-YoZ4jf,.S9gUrf-YoZ4jf > div,.nsm7Bb-HzV7m-LgbsSe,.nsm7Bb-HzV7m-LgbsSe *,.L5Fo6c-PQbLGe{border-radius:12px !important;}
#googleSignupBtn .nsm7Bb-HzV7m-LgbsSe{overflow:hidden;}
.signup-page .divider{margin-left:0;margin-right:0;}

@keyframes pageFadeIn {
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes cardRise {
  from{opacity:0;transform:translateY(24px) scale(0.99);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes contentFloat {
  from{opacity:0;transform:translateY(18px);} 
  to{opacity:1;transform:translateY(0);}
}
.layout{display:flex;min-height:100vh;}

/* Toast notification used on auth pages */
.auth-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:rgba(15,36,56,0.96);color:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 20px 40px rgba(15,36,56,0.18);z-index:9999;transition:opacity .22s ease,transform .22s ease;opacity:0;font-weight:700;font-size:14px;}

/* Prominent inline error banner for auth forms */
.field-error.visible{
  display:block;
  background:linear-gradient(180deg,#fff5f5,#fff1f0);
  color:var(--red);
  border:1px solid rgba(239,68,68,0.14);
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 12px 36px rgba(239,68,68,0.06);
  font-weight:700;
  margin-bottom:12px;
  animation:slideDown .28s ease;
  position:relative;
}
.field-error.visible::before{
  content:'';
  display:inline-block;width:4px;height:18px;margin:0 10px 0 0;border-radius:999px;background:currentColor;vertical-align:-4px;
}

/* Signup status success styling */
.form-status{display:block;transition:all .2s ease;padding:0;margin:0;font-weight:600}
.form-status.success{background:linear-gradient(180deg,#ecfdf5,#dff7ea);color:var(--green-dark);border:1px solid rgba(31,142,106,0.12);padding:10px 12px;border-radius:10px;box-shadow:0 10px 28px rgba(31,142,106,0.06);}

@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Dismiss button for inline banners */
.field-error, .form-status{position:relative}
.field-error .dismiss-btn, .form-status .dismiss-btn{
  position:absolute;right:10px;top:8px;border:0;background:transparent;color:var(--red);font-size:18px;line-height:1;cursor:pointer;padding:4px;border-radius:6px}
.field-error .dismiss-btn:focus, .form-status .dismiss-btn:focus{outline:2px solid rgba(0,0,0,0.08)}
.form-status .status-text, .field-error .status-text{display:inline-block;padding-right:28px}

/* ---------- Auth pages ---------- */
.auth-wrap{display:flex;min-height:100vh;height:100vh;animation:pageFadeIn .75s ease both;}
.auth-left{flex:1;padding:60px 70px 60px 50px;position:relative;display:flex;flex-direction:column;justify-content:flex-start;height:100vh;min-height:100vh;background:linear-gradient(180deg, rgba(23,42,38,0.18), rgba(23,42,38,0.08)), url('/assets/desktophero.png') right center/cover no-repeat;color:#ffffff;background-attachment:scroll;background-size:cover;}

@media (max-width: 720px) {
  .auth-left {
    background:
      linear-gradient(135deg, rgba(5,18,14,0.84) 0%, rgba(11,30,24,0.76) 38%, rgba(42,67,54,0.72) 100%),
      radial-gradient(circle at 15% 20%, rgba(135,255,205,0.18), transparent 18%),
      radial-gradient(circle at 80% 12%, rgba(255,255,255,0.12), transparent 24%),
      linear-gradient(120deg, #071c17 0%, #0d2d24 34%, #234a3b 100%);
    background-size: cover;
    background-position: center;
  }
}

.auth-left{flex:1;padding:54px 56px 54px 56px;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100vh;background:
  linear-gradient(135deg, rgba(7,18,25,0.88) 0%, rgba(14,58,52,0.82) 34%, rgba(30,110,92,0.74) 68%, rgba(17,72,61,0.86) 100%),
  radial-gradient(circle at 18% 22%, rgba(92,240,169,0.26), transparent 18%),
  radial-gradient(circle at 78% 18%, rgba(255,196,84,0.15), transparent 20%),
  radial-gradient(circle at 50% 80%, rgba(255,255,255,0.14), transparent 32%),
  linear-gradient(120deg, #07141b 0%, #0d433a 35%, #1a7f68 100%);
  color:#ffffff;background-attachment:scroll;background-size:cover;background-position:left center;border-right:1px solid rgba(255,255,255,0.12);box-shadow:inset -1px 0 0 rgba(255,255,255,0.04);}
.auth-left::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
  radial-gradient(circle at 30% 70%, rgba(255,255,255,0.12), transparent 28%),
  linear-gradient(120deg, rgba(10,22,18,0.44) 0%, rgba(13,30,24,0.28) 45%, rgba(5,16,15,0.18) 100%);
  } 
.auth-left > *{position:relative;z-index:1;animation:contentFloat .85s ease both;}
.auth-left .logo{display:flex;align-items:center;justify-content:flex-start;margin:0 0 8px;padding:0;background:none;border:none;border-radius:0;position:relative;width:100%;max-width:100%;align-self:flex-start;box-shadow:none;backdrop-filter:none;}
.auth-left .logo img{height:24px;}
.auth-left .logo .logo-text h1{font-size:13px;margin:0;line-height:1.05;font-weight:700;color:#ffffff;letter-spacing:-0.03em;font-family:var(--font-display);}
.auth-left .logo .logo-text span{font-size:10px;color:rgba(255,255,255,0.75);font-family:var(--font-body);}
.auth-left h1, .auth-card h2{font-family:var(--font-display);}
.auth-left h1{font-size:clamp(2.7rem,4.2vw,4.5rem);color:#ffffff;margin:0 0 18px;line-height:0.96;font-weight:800;letter-spacing:-0.05em;text-shadow:0 18px 40px rgba(0,0,0,0.18);max-width:760px;}
.auth-left .logo .logo-text h1{font-size:30px;margin:0;line-height:1.02;font-weight:800;color:#ffffff;letter-spacing:-0.04em;font-family:var(--font-display);text-shadow:none;max-width:none;display:block;width:fit-content;}
.auth-left h1 span{color:#b7f4d0;display:block;}
.auth-left p{color:rgba(255,255,255,0.82);font-size:17px;max-width:620px;margin:0 0 28px;line-height:1.75;}
.auth-feature{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;margin-top:12px;max-width:620px;width:min(100%, 620px);background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));padding:16px 18px;border-radius:18px;border:1px solid rgba(146,255,203,0.18);box-shadow:0 18px 36px rgba(3,12,8,0.18), inset 0 1px 0 rgba(255,255,255,0.08);transition:transform .35s ease,box-shadow .35s ease,background .35s ease;backdrop-filter:blur(8px);}
.auth-feature:hover{transform:translateY(-2px);box-shadow:0 24px 42px rgba(3,12,8,0.22), inset 0 1px 0 rgba(255,255,255,0.10);background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));}
.auth-feature .fi{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg, rgba(179,255,222,0.28), rgba(63,165,118,0.18));display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid rgba(179,255,222,0.24);box-shadow:inset 0 1px 0 rgba(255,255,255,0.20), 0 10px 22px rgba(34,152,104,0.16);} 
.auth-feature .ft{font-weight:700;font-size:16px;color:#ffffff;line-height:1.3;margin-bottom:4px;}
.auth-feature .fd{font-size:13px;color:rgba(255,255,255,0.78);line-height:1.5;}
/* SVG icon sizing helpers */
.icon-svg{width:20px;height:20px;display:block;color:inherit}
.fi .icon-svg{width:28px;height:28px}
.auth-svg{width:28px;height:28px}
.auth-eye{width:18px;height:18px}
.auth-feature .ft{font-weight:700;font-size:15px;color:#ffffff;}
.auth-feature .fd{font-size:13px;color:rgba(255,255,255,0.8);} 
.auth-right{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:50px;overflow:visible;background:linear-gradient(180deg, rgba(240,248,245,0.96), rgba(232,241,237,0.96));position:relative;}
.auth-right::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top left, rgba(129,255,202,0.18), transparent 25%), radial-gradient(circle at bottom right, rgba(10,115,92,0.12), transparent 28%);pointer-events:none;}
.auth-card{width:100%;max-width:620px;background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,251,248,0.98));border-radius:18px;box-shadow:0 26px 70px rgba(14,58,48,0.13), 0 0 0 1px rgba(16,92,63,0.06);border:1px solid rgba(16,92,63,0.08);padding:28px 30px;animation:cardRise .85s ease both;position:relative;z-index:1;}
.auth-card .top-row{display:flex;justify-content:flex-end;font-size:13px;color:var(--muted);margin-bottom:18px;}
.auth-card h2{font-size:32px;margin:0 0 8px;color:#0f2f2a;letter-spacing:-.04em;line-height:1.05;}
.auth-card .sub{color:#4f6b62;font-size:14px;margin-bottom:24px;line-height:1.6;}
.pw-rules{font-size:11.5px;color:var(--muted);margin:-8px 0 14px;display:flex;gap:10px;flex-wrap:wrap;}
.pw-rules span{color:var(--green);}
.btn-google{width:100%;border:1px solid rgba(15,36,56,0.10);background:#fff;padding:14px 18px;border-radius:12px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.btn-google:hover{transform:translateY(-1px);box-shadow:0 18px 30px rgba(26,122,60,0.10);background:#fafefb;}
.auth-left h1, .auth-left p, .auth-feature, .auth-card{will-change:transform,opacity;}
.input-ic{position:relative;}
.input-ic input{width:100%;padding:13px 16px;height:52px;border-radius:12px;border:1px solid rgba(15,36,56,0.12);background:#fbfefc;box-shadow:inset 0 1px 2px rgba(15,36,56,0.02);}
.input-ic input:focus{border-color:rgba(31,142,106,0.46);box-shadow:0 0 0 5px rgba(31,142,106,0.08);outline:none;}
.input-ic .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:8px;transition:background .2s ease;}
.input-ic .eye:hover{background:rgba(31,142,106,0.06);}
.checkline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:6px 0 18px;}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:18px 0;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(15,36,56,0.10);}
.btn-google{width:100%;border:1px solid rgba(15,36,56,0.10);background:#fff;padding:12px 16px;border-radius:12px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;}

/* Sidebar */
.sidebar{width:230px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;flex-shrink:0;}
.sidebar .logo{display:flex;align-items:center;gap:8px;margin-bottom:22px;padding:0 6px;}
.sidebar .logo img{width:34px;height:34px;object-fit:contain;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#374151;font-size:14px;margin-bottom:2px;}
.nav-item:hover{background:var(--green-light);}
.nav-item.active{background:var(--green-light);color:var(--green-dark);font-weight:600;}
.nav-item .badge{margin-left:auto;background:var(--green);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;}
.nav-icon{width:18px;text-align:center;}
.sidebar-help{margin-top:auto;background:var(--green-light);border-radius:10px;padding:14px;text-align:left;}
.sidebar-help .title{font-weight:600;font-size:13px;margin-bottom:4px;}
.sidebar-help .desc{font-size:12px;color:var(--muted);margin-bottom:10px;}
.sidebar-help button{width:100%;background:var(--green);color:#fff;border:none;padding:8px;border-radius:6px;font-size:12px;cursor:pointer;}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;background:#fff;border-bottom:1px solid var(--border);gap:20px;}
.topbar h1{font-size:20px;margin:0;}
.topbar .subtitle{font-size:12.5px;color:var(--muted);margin-top:2px;}
.topbar-search{flex:1;max-width:420px;position:relative;}
.topbar-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:8px;font-size:13px;}
.topbar-right{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.bell{position:relative;font-size:18px;cursor:pointer;}
.bell .dot{position:absolute;top:-6px;right:-8px;background:var(--green);color:#fff;font-size:10px;border-radius:8px;padding:1px 5px;}
.userchip{display:flex;align-items:center;gap:8px;}
.userchip img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#ddd;}
.userchip .uname{font-size:13px;font-weight:600;}
.userchip .urole{font-size:11px;color:var(--muted);}
.content{padding:22px 26px;flex:1;}

/* Cards / grid */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:20px;}
.stat-grid.n4{grid-template-columns:repeat(4,1fr);}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;}
.stat-card .icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px;}
.stat-card .label{font-size:12.5px;color:var(--muted);}
.stat-card .value{font-size:22px;font-weight:700;margin:2px 0;}
.stat-card .footnote{font-size:11.5px;color:var(--muted);}
.stat-card .footnote.link{color:var(--green);cursor:pointer;}

.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:18px;}
.card h3{margin:0 0 3px 0;font-size:15.5px;}
.card .card-desc{font-size:12.5px;color:var(--muted);margin-bottom:14px;}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
select, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], textarea{
  border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;background:#fff;color:var(--text);
  width:100%;min-width:0;box-sizing:border-box;
}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;min-width:0;}
.field-note{font-size:12px;color:var(--muted);margin-top:-2px;margin-bottom:10px;}
.input-ic{position:relative;min-width:0;}
.input-ic input,
.input-ic select {
  width:100%;
  min-width:0;
  height:48px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-sizing:border-box;
  font-size:13px;
}
.input-ic select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.5L5 5.5L9 1.5' stroke='%23696f79' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:10px 6px;
}
#googleLoginBtn{margin:18px 0;}
.btn-block{width:100%;margin-top:10px;margin-bottom:10px;}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:24px 0;}
.search-box{flex:1;min-width:220px;position:relative;}
.search-box input{width:100%;padding-left:32px;}
.search-box .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);} 

.tabs{display:flex;gap:22px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;}
.tab{padding:8px 2px 12px 2px;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;}
.tab.active{color:var(--green);border-color:var(--green);font-weight:600;}
.tab .count{background:var(--green-light);color:var(--green-dark);border-radius:8px;padding:0 6px;font-size:11px;}

table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:12px;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:12px 8px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.pill.green{background:var(--green-light);color:var(--green-dark);}
.pill.orange{background:var(--orange-bg);color:#b45309;}
.pill.red{background:var(--red-bg);color:#b91c1c;}
.pill.blue{background:var(--blue-bg);color:#1d4ed8;}
.pill.purple{background:var(--purple-bg);color:#6d28d9;}
.pill.gray{background:#f3f4f6;color:#4b5563;}
.dot-ind{width:6px;height:6px;border-radius:50%;display:inline-block;}

.btn{border:none;border-radius:8px;padding:9px 16px;font-size:13px;cursor:pointer;font-weight:600;}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--text);}
.btn-outline:hover{background:#f9fafb;}

/* Success panel styles for forgot-password */
.success-panel{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.success-icon{width:56px;height:56px;border-radius:10px;background:linear-gradient(180deg,#e6fbf0,#dff7ea);display:flex;align-items:center;justify-content:center;color:var(--green);border:1px solid rgba(11,92,58,0.08);box-shadow:0 12px 30px rgba(11,92,58,0.06);font-size:22px;}
.success-panel h2{margin:0;font-size:1.6rem;color:var(--navy);}
.mb-4{margin-bottom:16px;}
.text-slate{color:var(--muted);}
.text-green{color:var(--green);font-weight:700;}
.btn-outline.btn-block{width:auto;padding:10px 18px;border-radius:12px;}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn-block{width:100%;}
.btn-danger{background:#fff;border:1px solid var(--red);color:var(--red);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12.5px;font-weight:600;color:#374151;}
.field input, .field select, .field textarea{width:100%;}
.field.full{grid-column:1/-1;}

.two-col{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start;}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start;}

.row-between{display:flex;align-items:center;justify-content:space-between;}
.toggle{width:38px;height:22px;border-radius:12px;background:#d1d5db;position:relative;cursor:pointer;flex-shrink:0;transition:.2s;}
.toggle.on{background:var(--green);}
.toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:.2s;}
.toggle.on .knob{left:18px;}

.pref-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.pref-row:last-child{border-bottom:none;}
.pref-row .picon{width:34px;height:34px;border-radius:8px;background:var(--green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pref-row .ptext .t{font-size:13.5px;font-weight:600;}
.pref-row .ptext .d{font-size:12px;color:var(--muted);}

.back-link{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-bottom:14px;}
.back-link:hover{color:var(--text);}

.breadcrumb{font-size:12.5px;color:var(--muted);margin-top:2px;}
.breadcrumb .cur{color:var(--green);}

.payment-method-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px;cursor:pointer;}
.payment-method-opt.selected{border-color:var(--green);background:var(--green-light);}
.payment-method-opt .picon{width:38px;height:38px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:18px;}
.payment-method-opt .pm-title{font-weight:600;font-size:13.5px;}
.payment-method-opt .pm-sub{font-size:12px;color:var(--muted);}
.payment-method-opt .radio{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;}
.payment-method-opt.selected .radio{border-color:var(--green);background:var(--green);position:relative;}

.summary-kv{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px solid #f3f4f6;}
.summary-kv:last-child{border-bottom:none;}
.summary-kv .k{color:var(--muted);}
.summary-kv .v{font-weight:600;}

.pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:14px;}
.pagination .pg{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12.5px;cursor:pointer;background:#fff;}
.pagination .pg.active{background:var(--green);color:#fff;border-color:var(--green);}

.veh-thumb{width:52px;height:38px;border-radius:6px;object-fit:cover;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:20px;}

.help-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;}
.contact-opt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;}
.contact-opt .cicon{width:36px;height:36px;border-radius:8px;background:var(--green-light);display:flex;align-items:center;justify-content:center;}
.contact-opt .ctitle{font-size:13px;font-weight:600;}
.contact-opt .csub{font-size:11.5px;color:var(--muted);}

.notif-item{display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);align-items:flex-start;}
.notif-item .nicon{width:38px;height:38px;border-radius:8px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.notif-item .ntitle{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
.notif-item .ndesc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.notif-time{font-size:11.5px;color:var(--muted);text-align:right;min-width:120px;}

.link-green{color:var(--green);font-weight:600;cursor:pointer;}
.route-arrow{color:var(--muted);font-size:11px;}

/* Stepper for Book a Truck */
.stepper{display:flex;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px;}
.step{display:flex;align-items:center;gap:10px;flex:1;}
.step .circ{width:28px;height:28px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;}
.step.done .circ{background:var(--green);border-color:var(--green);color:#fff;}
.step.active .circ{background:var(--green);border-color:var(--green);color:#fff;}
.step .stext{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;}
.step.active .stext,.step.done .stext{color:var(--text);}
.step-line{flex:1;height:2px;background:#e5e7eb;margin:0 6px;}
.step-line.done{background:var(--green);}

.vehicle-opt{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px;cursor:pointer;}
.vehicle-opt.selected{border-color:var(--green);background:var(--green-light);}
.vehicle-opt .radio2{width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0;}
.vehicle-opt.selected .radio2{border-color:var(--green);background:var(--green);}
.req-box{border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;gap:10px;align-items:center;cursor:pointer;}
.req-box.selected{border-color:var(--green);background:var(--green-light);}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.hidden{display:none !important;}

@media (min-width: 901px) {
  .auth-right { align-items: center; justify-content: center; padding: 32px 40px; }
  .auth-card { margin: auto 0; padding: 28px; }
  .auth-card h2 { margin-bottom: 12px; }
  .form-grid { gap: 14px; }
  .field { margin-bottom: 14px; }
  .checkline { margin: 10px 0 14px; }
  .auth-feature { margin-top: 10px; padding: 10px; }
}
@media(max-width:1100px){
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  .two-col{grid-template-columns:1fr;}
  .auth-wrap{flex-direction:column;}
}

@media(max-width:900px){
  .auth-left{padding:32px 22px 40px;}
  .auth-left{background:
      linear-gradient(135deg, rgba(5,18,14,0.84) 0%, rgba(11,30,24,0.76) 38%, rgba(42,67,54,0.72) 100%),
      radial-gradient(circle at 15% 20%, rgba(135,255,205,0.18), transparent 18%),
      radial-gradient(circle at 80% 12%, rgba(255,255,255,0.12), transparent 24%),
      linear-gradient(120deg, #071c17 0%, #0d2d24 34%, #234a3b 100%);
    background-size:cover;
    background-position:center;}
  .auth-left::before{background:linear-gradient(180deg, rgba(13,20,17,0.78) 0%, rgba(13,20,17,0.58) 45%, rgba(13,20,17,0.32) 100%);}
  .auth-wrap{flex-direction:column;min-height:auto;overflow-x:hidden;}
  .auth-left,
  .auth-right{width:100%;max-width:none;padding:32px 22px;}
  .auth-right{align-items:center;justify-content:center;}
  .auth-card{width:100%;max-width:100%;padding:32px;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,0.12);overflow:hidden;background:rgba(255,255,255,0.95);}
  .top-row{justify-content:center;}
  .auth-card h2{font-size:24px;}
  .auth-left h1{font-size:34px;line-height:1.08;margin-bottom:14px;}
  .auth-left p{max-width:100%;font-size:15px;line-height:1.8;}
  .auth-feature{width:100%;padding:16px;box-shadow:0 18px 38px rgba(4,16,10,0.18);background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.16);}
  .auth-feature .fd{font-size:13px;}
  .form-grid{grid-template-columns:1fr;gap:16px;}
  .checkline{flex-wrap:wrap;align-items:flex-start;}
  .field{min-width:0;}
  .input-ic{min-width:0;}
  .input-ic select{width:100%;min-width:0;}
}

@media(max-width:640px){
  .auth-left{padding:24px 18px;}
  .auth-right{padding:22px 18px 26px;}
  .auth-card{padding:24px;}
  .auth-left h1{font-size:30px;}
  .auth-card h2{font-size:22px;}
  .auth-left p{font-size:14px;}
  .form-grid{gap:14px;}
  .auth-feature{gap:10px;padding:14px;}
  .auth-feature .fi{width:44px;height:44px;font-size:18px;}
}

@media(min-width:901px){
  body.login-page{height:100vh;overflow:hidden;}
  .login-page .auth-wrap{height:100vh;min-height:100vh;overflow:hidden;}
  .login-page .auth-right{height:100vh;min-height:0;align-items:flex-start;justify-content:center;padding:0;overflow:hidden;}
  .login-page .auth-card{width:100%;max-width:none;min-height:100vh;margin:0;padding:32px clamp(28px, 4vw, 64px);border-radius:0;border:none;}
}