/* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      word-wrap: break-word;
      overflow-wrap: break-word;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }
    h1,h2,h3,p,a,span,label { max-width: 100%; word-break: break-word; }

    body {
      background: #ffffff;
      min-height: 100vh;
    }

    .app-wrapper {
      width: 100%;
      min-height: 100vh;
    }

    /* Kill any ::before ghost text injected by external main.css */
    #verifyOTPPage::before {
      display: none !important;
      content: none !important;
    }

    /* Page system: display:none/block at ALL sizes — zero bleed-through possible */
    .page {
      display: none;
      width: 100%;
      min-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .page.active {
      display: block;
    }
    .page::-webkit-scrollbar { width: 6px; }
    .page::-webkit-scrollbar-track { background: #e9eef3; }
    .page::-webkit-scrollbar-thumb { background: #0a66ff; border-radius: 12px; }

    /* ============================================================
       DESIGN TOKENS (from doc3 right-panel theme)
    ============================================================ */
    :root {
      --bg-color: #ffffff;
      --input-bg: #4E4E50;
      --input-text: #FFFFFF;
      --placeholder-color: #A0A0A5;
      --btn-primary: #125092;
      --text-dark: #000000;
      --border-light: #126c92;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
    }

    /* ============================================================
       LOGIN PAGE LAYOUT
    ============================================================ */
    .login-layout {
      display: flex;
      min-height: 100vh;
      width: 100%;
    }

    /* ============================================================
       LEFT PANEL — UNTOUCHED (doc1/doc2 styles preserved)
    ============================================================ */
    .left {
      width: 58%;
      position: relative;
      padding: 30px 60px 50px 60px;
      background: #ffffff;
      overflow: hidden;
    }
    .logo {
      width: 70px; height: 70px;
      background: #0a66ff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 38px; font-weight: 700;
    }
    .main-text { position: absolute; left: 50px; bottom: 90px; line-height: 1; }
    .main-text h1 { font-size: 78px; font-weight: 700; color: #111; }
    .main-text .blue { color: #0a66ff; }
    .cards { position: absolute; top: 120px; left: 38%; transform: translateX(-50%); }
    .card { position: absolute; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.12); background: #fff; }
    .card img { width: 100%; height: 100%; object-fit: cover; }
    .card1 { width: 200px; height: 210px; top: 110px; left: 0; }
    .card2 { width: 260px; height: 430px; top: 0; left: 160px; }
    .card3 { width: 200px; height: 220px; top: 280px; left: 60px; }
    .emoji { position: absolute; font-size: 52px; z-index: 10; }
    .emoji1 { top: 40px; left: -40px; }
    .emoji2 { top: 340px; right: -30px; }
    .time-badge {
      position: absolute; top: 50px; right: -30px;
      background: #6c63ff; color: #fff;
      padding: 10px 18px; border-radius: 18px;
      font-size: 18px; font-weight: 500;
    }
    .doctor-profile {
      position: absolute; width: 150px; height: 150px;
      border-radius: 50%; overflow: hidden;
      border: 6px solid #0a66ff;
      bottom: -40px; left: 170px;
      background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    .doctor-profile img { width: 100%; height: 100%; object-fit: cover; }

    /* ============================================================
       RIGHT PANEL — doc3 styles applied
    ============================================================ */
    .right {
      width: 42%;
      background: var(--bg-color);
      border-left: 1px solid #d0dce8;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 32px;
    }

    .login-box {
      width: 100%;
      max-width: 400px;
    }

    /* Brand logo block (desktop right panel) */
    .login-box .brand-logo-block {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .login-box h2 {
      font-size: 26px;
      font-weight: 600;
      color: var(--text-dark);
      text-align: center;
      margin-bottom: 18px;
      letter-spacing: -0.3px;
    }

    /* Input boxes — dark pill style from doc3 */
    .input-box {
      width: 100%;
      height: 48px;
      background-color: var(--input-bg);
      border: none;
      border-radius: var(--radius-md);
      padding: 0 20px;
      font-size: 15px;
      color: var(--input-text);
      outline: none;
      margin-bottom: 12px;
      transition: box-shadow 0.25s;
    }
    .input-box::placeholder { color: var(--placeholder-color); font-weight: 400; }
    .input-box:focus { box-shadow: 0 0 0 3px rgba(18, 80, 146, 0.25); }

    /* Login button */
    .login-btn {
      width: 100%;
      height: 46px;
      background: var(--btn-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      margin-bottom: 14px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .login-btn:hover { background: #0d3f75; box-shadow: 0 4px 14px rgba(18,80,146,0.3); }

    /* Social divider */
    .social-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0 14px;
    }
    .social-divider::before,
    .social-divider::after { content: ''; flex: 1; height: 1px; background: rgba(18,108,146,0.25); }
    .social-divider span { font-size: 13px; color: #555; white-space: nowrap; font-weight: 400; }

    /* Social buttons — icon-only style from doc3 */
    .social-buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
    }
    .social-btn {
      flex: 1;
      height: 44px;
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #222;
      gap: 8px;
      transition: all 0.2s;
    }
    .social-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
    .social-btn.google:hover  { border-color: #4285F4; background: #f0f5ff; }
    .social-btn.facebook:hover { border-color: #1877F2; background: #f0f4ff; color: #1877F2; }
    .social-btn svg { flex-shrink: 0; width: 20px; height: 20px; }

    /* Forgot link */
    .forgot { text-align: right; margin-bottom: 14px; }
    .forgot a {
      font-size: 13px; color: var(--text-dark);
      text-decoration: none; font-weight: 400; cursor: pointer;
    }
    .forgot a:hover { color: var(--btn-primary); }

    /* Create account row */
    .create-account-row {
      text-align: center;
      margin: 6px 0 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(18,108,146,0.15);
    }
    .divider-text { font-size: 13px; color: #666; margin-bottom: 6px; }
    .create-account-row a {
      text-decoration: none;
      color: var(--btn-primary);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .create-account-row a:hover { text-decoration: underline; }

    /* Ambulance button */
    .ambulance-btn {
      width: 100%;
      height: 46px;
      border: 2px solid #dc2626;
      background: transparent;
      color: #dc2626;
      border-radius: var(--radius-md);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 8px;
      transition: 0.25s;
    }
    .ambulance-btn:hover { background: #dc2626; color: #fff; box-shadow: 0 6px 16px rgba(220,38,38,0.25); }

    /* Footer brand */
    .footer {
      margin-top: 22px;
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      color: var(--btn-primary);
    }

    /* Mobile brand (hidden on desktop) */
    .mobile-brand { display: none; }

    /* ============================================================
       SIGNUP PAGE — doc3 compact styling
    ============================================================ */
    .signup-container {
      width: 100%;
      max-width: 560px;
      background: #fff;
      border-radius: 20px;
      padding: 35px;
      margin: 40px auto;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
    .top-bar {
      display: flex; align-items: center;
      gap: 15px; margin-bottom: 20px;
    }
    .back-btn {
      font-size: 32px; color: var(--btn-primary); cursor: pointer;
      font-weight: 500; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: 0.2s;
    }
    .back-btn:hover { background: #e6f0fb; }

    .signup-container h1 {
      font-size: 28px; color: #111; margin-bottom: 6px; font-weight: 600;
    }
    .subtitle { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 20px; }
    .label {
      font-size: 13px; font-weight: 600;
      margin-bottom: 6px; color: #111; display: block;
    }
    .row { display: flex; gap: 12px; margin-bottom: 4px; }
    .info-text { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 14px; }
    .info-text a { color: var(--btn-primary); text-decoration: none; font-weight: 500; }
    .submit-btn {
      width: 100%;
      height: 48px;
      border: none;
      border-radius: var(--radius-md);
      background: var(--btn-primary);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.25s;
      margin-top: 10px;
    }
    .submit-btn:hover { background: #0d3f75; }
    .password-hint { font-size: 11px; color: #666; margin-top: -8px; margin-bottom: 12px; padding-left: 4px; }

    /* Signup social row */
    .signup-social-row { display: flex; gap: 10px; margin-bottom: 14px; }
    .or-separator {
      text-align: center; font-size: 13px; color: #888;
      margin: 14px 0 12px; position: relative;
    }
    .or-separator::before, .or-separator::after {
      content: ''; position: absolute; top: 50%;
      width: 40%; height: 1px; background: rgba(18,108,146,0.2);
    }
    .or-separator::before { left: 0; }
    .or-separator::after { right: 0; }

    /* ============================================================
       FORGOT PASSWORD PAGE
    ============================================================ */
    .forgot-container {
      width: 100%; max-width: 520px;
      background: #fff; border-radius: 24px;
      padding: 40px; margin: 50px auto;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    }
    .image-box {
      width: 100px; height: 100px;
      background: #e6f0fb; border-radius: 50%;
      display: flex; justify-content: center; align-items: center;
      margin: 0 auto 24px; font-size: 48px;
    }
    .reset-btn {
      width: 100%; height: 52px;
      border: none; border-radius: var(--radius-md);
      background: var(--btn-primary); color: #fff;
      font-size: 17px; font-weight: 600;
      cursor: pointer; transition: 0.25s; margin-bottom: 16px;
    }
    .reset-btn:hover { background: #0d3f75; }
    .back-login { text-align: center; margin-top: 10px; }
    .back-login a { text-decoration: none; color: var(--btn-primary); font-size: 15px; font-weight: 500; cursor: pointer; }
    .back-login a:hover { text-decoration: underline; }

    /* ============================================================
       OTP PAGE — inner wrapper handles flex, not the .page itself
    ============================================================ */
    #verifyOTPPage {
      background: var(--bg-color);
    }
    .otp-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 30px 24px;
      max-width: 480px;
      margin: 0 auto;
      width: 100%;
    }
    .otp-inner .top-bar { width: 100%; margin-bottom: 24px; }
    .otp-inner h2 { font-size: 32px; font-weight: 700; color: #111; margin-bottom: 10px; text-align: center; width: 100%; }
    .otp-inner .otp-subtitle {
      font-size: 15px; color: #555;
      line-height: 1.5; text-align: center;
      margin-bottom: 24px; width: 100%;
    }
    #otpCode {
      width: 100%; height: 60px;
      font-size: 24px; text-align: center;
      letter-spacing: 10px;
      background: var(--input-bg);
      border: none;
      border-radius: var(--radius-md);
      padding: 0 18px; margin-bottom: 18px;
      outline: none; color: #fff; transition: 0.25s;
    }
    #otpCode:focus { box-shadow: 0 0 0 3px rgba(18,80,146,0.25); }
    #verifyOTPBtn {
      width: 100%; height: 54px;
      font-size: 17px; border-radius: var(--radius-md);
      border: none; background: var(--btn-primary);
      color: #fff; font-weight: 600; cursor: pointer;
      margin-bottom: 14px; transition: 0.25s;
    }
    #verifyOTPBtn:hover { background: #0d3f75; }
    #resendOTPBtn {
      width: 100%; height: 48px;
      font-size: 14px; border-radius: var(--radius-md);
      border: 2px solid #d0dce8; background: #fff;
      color: var(--btn-primary); font-weight: 600;
      cursor: pointer; transition: 0.25s;
    }
    #resendOTPBtn:hover { background: #e6f0fb; border-color: var(--btn-primary); }

    /* Loading Toast */
    .loading-toast {
      position: fixed; bottom: 30px; left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1f2937; color: white;
      padding: 12px 24px; border-radius: 50px;
      font-size: 14px; z-index: 1100;
      transition: transform 0.3s ease;
      pointer-events: none;
    }
    .loading-toast.show { transform: translateX(-50%) translateY(0); }

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100%;
      width: 100%;
      padding: 20px;
    }

    /* ============================================================
       RESPONSIVE — ≤768px: hide left, full-width right
    ============================================================ */
    @media (max-width: 768px) {
      body { background: var(--bg-color); }
      .app-wrapper { min-height: 100vh; }

      /* Login page layout */
      .login-layout { flex-direction: column; min-height: 100vh; }
      .left { display: none !important; }
      .right {
        width: 100% !important;
        border-left: none !important;
        padding: 24px 20px !important;
        min-height: 100vh;
        background: var(--bg-color);
        align-items: flex-start;
      }
      .login-box { max-width: 100%; }
      .mobile-brand { display: flex; justify-content: center; margin-bottom: 10px; }
      .login-box h2 { font-size: 26px; }

      .otp-inner { padding: 24px 16px; max-width: 100%; }
      .otp-inner h2 { font-size: 26px; }
      .otp-inner .otp-subtitle { font-size: 14px; margin-bottom: 20px; }

      .input-box { height: 48px; font-size: 15px; margin-bottom: 10px; }
      .login-btn, .submit-btn, .reset-btn { height: 48px; font-size: 15px; }
      .ambulance-btn { height: 48px; font-size: 14px; }
      .footer { font-size: 28px; }
      .social-btn { height: 44px; font-size: 13px; }

      .signup-container, .forgot-container { margin: 16px; padding: 20px; border-radius: 16px; }
      .signup-container h1 { font-size: 22px; }

      #otpCode { height: 54px; font-size: 20px; letter-spacing: 7px; }
      #verifyOTPBtn, #resendOTPBtn { height: 48px; font-size: 14px; }
    }

    @media (max-width: 480px) {
      .right { padding: 16px 14px !important; }
      .login-box h2 { font-size: 22px; }
      .input-box { height: 46px; font-size: 14px; margin-bottom: 8px; }
      .login-btn, .submit-btn, .reset-btn, .ambulance-btn { height: 46px; font-size: 14px; }
      .footer { font-size: 22px; }
      .social-btn { height: 42px; font-size: 12px; }
      .signup-container, .forgot-container { margin: 10px; padding: 16px; }
      .signup-container h1 { font-size: 20px; }
      .otp-inner { padding: 20px 14px; }
      .otp-inner h2 { font-size: 22px; }
      #otpCode { height: 50px; font-size: 18px; letter-spacing: 5px; }
      #verifyOTPBtn, #resendOTPBtn { height: 46px; font-size: 14px; }
    }