:root {
      --primary-color: #d32f2f;
      --primary-glow: rgba(211, 47, 47, 0.4);
      --dark-navy: #080C10;
      --light-navy: #111820;
      --slate: #9BA8B9;
      --light-slate: #EEF2F8;
      --white: #EEF2F8;
      --success: #4CAF50;
      --error: #ff4d4d;
      --font-heading: 'Barlow Condensed', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --border-radius: 8px;
      --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--slate);
      background: linear-gradient(#ffffff, #ffffff), url('/assets/images/mechanic1.jpg') no-repeat center center/cover;
      background-attachment: fixed;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
      background-image:linear-gradient(rgba(211,47,47,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(211,47,47,.03) 1px,transparent 1px);
      background-size:60px 60px}

    .login-container {
      width: 100%;
      max-width: 450px;
      padding: 2rem;
    }

    .login-card {
      background-color: var(--light-navy);
      padding: 2.5rem;
      border-radius: var(--border-radius);
      border: 1px solid #1d2d44;
    }

    .logo {
      text-align: center;
      margin-bottom: 2rem;
    }
    .logo h1 {
      color: var(--white);
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }
    .logo p {
      color: var(--light-slate);
      font-size: 0.9rem;
    }

    .form-group {
      margin-bottom: 1.2rem;
    }
    .form-group label {
      display: block;
      color: var(--light-slate);
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .form-input {
      width: 100%;
      padding: 0.9rem 1rem;
      background-color: var(--dark-navy);
      border: 1px solid #1d2d44;
      border-radius: 8px;
      color: var(--white);
      font-size: 1rem;
      font-family: var(--font-family);
      transition: var(--transition);
    }
    .form-input::placeholder {
      color: var(--slate);
      opacity: 0.7;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px var(--primary-glow);
    }

    .submit-btn {
      width: 100%;
      padding: 1rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1.1rem;
      cursor: pointer;
      transition: var(--transition);
      background-color: var(--primary-color);
      color: var(--dark-navy);
      border: none;
      margin-top: 1rem;
    }
    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 25px var(--primary-glow);
    }
    .submit-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .message {
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      display: none;
      text-align: center;
    }
    .message.success {
      background-color: rgba(76, 175, 80, 0.1);
      border: 1px solid var(--success);
      color: var(--success);
      display: block;
    }
    .message.error {
      background-color: rgba(255, 77, 77, 0.1);
      border: 1px solid var(--error);
      color: var(--error);
      display: block;
    }

    .form-footer {
      text-align: center;
      margin-top: 1.5rem;
      color: var(--slate);
    }
    .form-footer a {
      color: var(--primary-color);
      text-decoration: none;
    }
    .form-footer a:hover {
      text-decoration: underline;
    }

    .home-link {
      text-align: center;
      margin-top: 1.5rem;
    }
    .home-link a {
      color: var(--light-slate);
      text-decoration: none;
      font-size: 0.9rem;
    }
    .home-link a:hover {
      color: var(--primary-color);
    }
    .inline-action {
      text-align: right;
      margin-top: -0.5rem;
      margin-bottom: 0.3rem;
    }
    .inline-action button {
      background: none;
      border: none;
      color: var(--primary-color);
      cursor: pointer;
      font-size: 0.88rem;
      padding: 0;
    }
    .inline-action button:hover {
      text-decoration: underline;
    }
    .reset-panel {
      display: none;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid #1d2d44;
    }
    .reset-panel.open {
      display: block;
    }
    .reset-panel h3 {
      color: var(--white);
      font-size: 1rem;
      margin-bottom: 0.35rem;
    }
    .reset-panel p {
      font-size: 0.85rem;
      color: var(--slate);
      margin-bottom: 1rem;
    }
    .secondary-btn {
      width: 100%;
      padding: 0.95rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      background: transparent;
      color: var(--white);
      border: 1px solid #30445f;
      margin-top: 0.3rem;
    }
    .secondary-btn:hover {
      border-color: var(--primary-color);
      color: var(--primary-color);
    }

    /* Index-style MechWay navbar spacing */

    .navbar-logo, .nav-logo { display: inline-flex !important; align-items: center; flex-shrink: 0; min-width: 64px; }
    .navbar-logo img, .nav-logo img { object-fit: contain; max-width: 150px; }
    .navbar { padding: .35rem 5% !important; min-height: 42px; }
    .navbar.scrolled { padding: .2rem 5% !important; }
    .navbar-container, .nav-inner { max-width: 1200px; margin: 0 auto; }
    .navbar-logo img, .nav-logo img { height: 5rem !important; width: auto; border-radius: 16px; display: block; transition: height .3s ease; }
    .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 4.25rem !important; }
    @media (max-width: 768px) {
      .navbar { padding: .3rem 5% !important; }
      .navbar-logo img, .nav-logo img { height: 4rem !important; }
      .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 3.5rem !important; }
    }
  

    /* Shared shop-style footer */
    .mw-footer {
      --mw-footer-bg: #080C10;
      --mw-footer-panel: #111820;
      --mw-footer-border: rgba(255,255,255,0.08);
      --mw-footer-text: #9BA8B9;
      --mw-footer-soft: #EEF2F8;
      --mw-footer-accent: #d32f2f;
      background: var(--mw-footer-bg);
      border-top: 1px solid var(--mw-footer-border);
      padding: 4rem 5% 0;
      color: var(--mw-footer-text);
    }
    .mw-footer .mw-footer-container { max-width: 1240px; margin: 0 auto; }
    .mw-footer .mw-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
    .mw-footer .mw-footer-logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
    .mw-footer .mw-footer-logo img { height: 4.25rem; width: auto; border-radius: 14px; display: block; }
    .mw-footer .mw-footer-brand p { font-size: .9rem; color: var(--mw-footer-text); line-height: 1.7; max-width: 280px; }
    .mw-footer .mw-footer-social { display: flex; gap: .75rem; margin-top: 1.5rem; }
    .mw-footer .mw-footer-social a { width: 38px; height: 38px; border-radius: 8px; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); color: var(--mw-footer-text); font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: all .25s; text-decoration: none; }
    .mw-footer .mw-footer-social a:hover { background: var(--mw-footer-accent); border-color: var(--mw-footer-accent); color: #fff; transform: translateY(-2px); }
    .mw-footer .mw-footer-col h5 { color: var(--mw-footer-soft); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; margin-bottom: 1.2rem; }
    .mw-footer .mw-footer-col a { display: block; color: var(--mw-footer-text); font-size: .88rem; text-decoration: none; margin-bottom: .6rem; transition: color .2s; }
    .mw-footer .mw-footer-col a:hover { color: var(--mw-footer-accent); }
    .mw-footer .mw-footer-contact-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
    .mw-footer .mw-footer-contact-item i { color: var(--mw-footer-accent); font-size: .9rem; margin-top: .1rem; flex-shrink: 0; }
    .mw-footer .mw-footer-contact-item span { font-size: .88rem; color: var(--mw-footer-text); line-height: 1.5; }
    .mw-footer .mw-footer-contact-item a { color: inherit; text-decoration: none; }
    .mw-footer .mw-footer-bottom { border-top: 1px solid var(--mw-footer-border); padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .mw-footer .mw-footer-bottom p { font-size: .82rem; color: var(--mw-footer-text); margin: 0; }
    .mw-footer .mw-footer-badges { display: flex; gap: .8rem; flex-wrap: wrap; }
    .mw-footer .mw-footer-badge { padding: .35rem .8rem; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); border-radius: 8px; font-size: .75rem; font-weight: 700; color: var(--mw-footer-soft); letter-spacing: 0; }
    @media (max-width: 1024px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr; gap: 2rem; } .mw-footer .mw-footer-bottom { flex-direction: column; text-align: center; } .mw-footer .mw-footer-logo img { height: 3.5rem; } }

  
.inline-mech-login-1 { height:4.5rem;width:auto;border-radius:14px;display:block;margin:0 auto 0.5rem }
.inline-mech-login-2 { margin-top:0.85rem;font-size:0.82rem;color:var(--slate); }
.inline-mech-login-3 { color:var(--primary-color);text-decoration:none; }