/* ═══════════════════════════════════════════════════════════
   3DSEARCH.NET – style-auth.css v8 – Light/Dark
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent:     #fa6400;
  --accent-h:   #e05800;
  --danger:     #e53;
  --danger-sub: rgba(238,85,51,0.10);
  --r:          10px;
  --r-lg:       16px;
  --trans:      0.17s ease;
  --font:       'Figtree','DM Sans',system-ui,sans-serif;
  --mono:       'JetBrains Mono',monospace;
}

:root,[data-theme="light"] {
  --bg:        #f4f4f4;
  --bg-card:   #ffffff;
  --bg-input:  #f8f8f8;
  --text:      #111111;
  --text-dim:  #555555;
  --text-muted:#888888;
  --border:    #e5e5e5;
  --border-h:  #cccccc;
  --shadow:    0 8px 32px rgba(0,0,0,0.10);
}

[data-theme="dark"] {
  --bg:        #111111;
  --bg-card:   #1e1e1e;
  --bg-input:  #161616;
  --text:      #f0f0f0;
  --text-dim:  #aaaaaa;
  --text-muted:#606060;
  --border:    #2c2c2c;
  --border-h:  #3d3d3d;
  --shadow:    0 8px 40px rgba(0,0,0,0.40);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;transition:background var(--trans),color var(--trans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.8}

.auth-card{width:100%;max-width:400px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:36px 32px;box-shadow:var(--shadow);position:relative}

/* Theme toggle in corner */
.theme-btn{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:var(--r);background:transparent;border:1.5px solid var(--border);display:grid;place-items:center;color:var(--text-muted);cursor:pointer;transition:all var(--trans)}
.theme-btn:hover{border-color:var(--border-h);color:var(--text)}

.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo a{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.4px;font-family:var(--mono)}
.auth-logo a span{color:var(--accent)}
.auth-logo small{display:block;font-size:12px;color:var(--text-muted);margin-top:4px}

.auth-title{font-size:18px;font-weight:700;text-align:center;margin-bottom:22px;color:var(--text)}

.auth-error{background:var(--danger-sub);color:var(--danger);padding:11px 14px;border-radius:var(--r);border:1px solid rgba(238,85,51,.2);font-size:13px;margin-bottom:16px;text-align:center}
.auth-error a{color:var(--danger);text-decoration:underline}

/* Google button */
.google-btn{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#333;font-size:13px;font-weight:600;border:1.5px solid #e0e0e0;border-radius:var(--r);cursor:pointer;font-family:var(--font);transition:box-shadow var(--trans);text-decoration:none}
.google-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,0.12);opacity:1}
.google-btn svg{width:18px;height:18px;flex-shrink:0}

.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Fields */
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.auth-field input{width:100%;height:42px;padding:0 13px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-size:14px;font-family:var(--font);transition:border-color var(--trans);outline:none}
.auth-field input:focus{border-color:var(--accent)}
.auth-field input::placeholder{color:var(--text-muted)}
.auth-hint{font-size:11px;color:var(--text-muted);margin-top:4px}

.auth-submit{width:100%;height:42px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;border:none;border-radius:var(--r);cursor:pointer;font-family:var(--font);transition:background var(--trans);margin-top:4px}
.auth-submit:hover{background:var(--accent-h)}

.auth-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-muted)}
.auth-footer a{font-weight:600;color:var(--accent)}
.auth-back{display:block;text-align:center;margin-top:12px;font-size:13px}
.auth-back a{color:var(--text-muted)}
.auth-back a:hover{color:var(--accent);opacity:1}

.grecaptcha-badge{visibility:hidden}