/* ============================================================
   CGT DESIGN SYSTEM v3.0 — LOGIN (WEB)
   File: style_css/login/web.css
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;}
      body{font-family:'Segoe UI',sans-serif;min-height:100vh;background:linear-gradient(135deg,#e8f5e9 0%,#f1f8e9 50%,#e3f2fd 100%);display:flex;flex-direction:column;}
      .login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 16px;}
      .login-card{background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.12);padding:40px 36px;width:100%;max-width:420px;text-align:center;}
      .brand-logo{width:70px;height:70px;border-radius:50%;border:3px solid #2e7d32;object-fit:contain;margin-bottom:16px;padding:6px;}
      .login-title{font-size:1.5rem;font-weight:700;color:#1a1a2e;margin-bottom:6px;}
      .login-subtitle{font-size:.85rem;color:#777;margin-bottom:28px;line-height:1.5;}
      .btn-google{width:100%;padding:13px;border-radius:12px;border:none;background:#fff;color:#333;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 2px 12px rgba(0,0,0,.12);transition:all .2s;border:1.5px solid #e0e0e0;}
      .btn-google:hover{box-shadow:0 4px 20px rgba(0,0,0,.16);transform:translateY(-1px);}
      .btn-google img{width:22px;height:22px;}
      .divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#bbb;font-size:.8rem;}
      .divider::before,.divider::after{content:'';flex:1;height:1px;background:#e8e8e8;}
      .features{display:flex;justify-content:center;gap:20px;margin-top:24px;flex-wrap:wrap;}
      .feature-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:#888;}
      .feature-item i{font-size:1.2rem;color:#2e7d32;}
      .back-link{display:inline-block;margin-top:20px;color:#2e7d32;text-decoration:none;font-size:.82rem;}
      .back-link:hover{text-decoration:underline;}
      .login-header{background:#2e7d32;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;}
      .login-header .brand{display:flex;align-items:center;gap:8px;text-decoration:none;}
      .login-header img{width:auto;height:44px;border-radius:0;border:none;object-fit:contain;filter:brightness(0) invert(1);}
      .login-header span{display:none;}/* logo image already shows brand name */
      #loadingOverlay{display:none;position:fixed;inset:0;background:rgba(255,255,255,.85);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
      #loadingOverlay.show{display:flex;}
      .spinner{width:48px;height:48px;border:4px solid #e8f5e9;border-top-color:#2e7d32;border-radius:50%;animation:spin .8s linear infinite;}
      @keyframes spin{to{transform:rotate(360deg)}}