.td-login-body{min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 20%,rgba(59,130,246,0.15),transparent 70%),var(--bg-body); padding:var(--spacing-4)} .td-login-wrapper{width:100%; max-width:420px; animation:tdFadeUp 0.4s ease-out} @keyframes tdFadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}} .td-login-card{background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-xl); padding:var(--spacing-8); box-shadow:var(--shadow-xl); backdrop-filter:blur(12px)} .td-login-header{text-align:center; margin-bottom:var(--spacing-8)} .td-login-logo{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:var(--color-accent-gradient); border-radius:var(--radius-lg); color:#ffffff; margin-bottom:var(--spacing-4); box-shadow:0 8px 20px var(--color-primary-glow)} .td-login-title{font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); color:var(--text-main); letter-spacing:-0.5px; margin-bottom:var(--spacing-1)} .td-login-subtitle{font-size:var(--font-size-sm); color:var(--text-secondary)} .td-login-form{display:flex; flex-direction:column; gap:var(--spacing-5)} .td-form-group{display:flex; flex-direction:column; gap:var(--spacing-2)} .td-form-label{font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--text-secondary)} .td-input-wrapper{position:relative} .td-form-input{width:100%; padding:var(--spacing-3) var(--spacing-4); background-color:var(--bg-body); border:1px solid var(--border-color); border-radius:var(--radius-md); color:var(--text-main); font-size:var(--font-size-base); outline:none; transition:border-color var(--transition-fast),box-shadow var(--transition-fast)} .td-form-input:focus{border-color:var(--border-focus); box-shadow:0 0 0 3px var(--color-primary-light)} .td-btn-primary{width:100%; padding:var(--spacing-3) var(--spacing-4); background:var(--color-accent-gradient); border:none; border-radius:var(--radius-md); color:#ffffff; font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:var(--spacing-2); transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast); margin-top:var(--spacing-2)} .td-btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px var(--color-primary-glow)} .td-btn-primary:active{transform:translateY(0)} .td-btn-primary:disabled{opacity:0.7; cursor:not-allowed} .td-spinner{width:18px; height:18px; border:2px solid rgba(255,255,255,0.3); border-top-color:#ffffff; border-radius:50%; animation:tdSpin 0.8s linear infinite} @keyframes tdSpin{to{transform:rotate(360deg)}} .td-login-footer{text-align:center; margin-top:var(--spacing-6); padding-top:var(--spacing-4); border-top:1px solid var(--border-color); font-size:var(--font-size-xs); color:var(--text-muted)} @media (max-width:480px){.td-login-body{padding:var(--spacing-3)} .td-login-card{padding:var(--spacing-6) var(--spacing-4); border-radius:var(--radius-lg)} .td-login-header{margin-bottom:var(--spacing-6)} .td-login-logo{width:52px; height:52px; margin-bottom:var(--spacing-3)} .td-login-title{font-size:var(--font-size-xl)} .td-form-input{padding:10px 14px; font-size:16px} .td-btn-primary{padding:12px 16px; font-size:var(--font-size-base)}}