/* RDO Digital - Professional Login Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Palette */
  --auth-primary: #3B82F6;
  --auth-primary-dark: #1E40AF;
  --auth-primary-light: #EFF6FF;
  --auth-accent: #14B8A6;
  --auth-accent-alt: #6366F1;
  --auth-danger: #EF4444;
  --auth-warning: #F59E0B;
  --auth-success: #10B981;
  --auth-info: #0EA5E9;

  /* Neutrals */
  --auth-text-primary: #0F172A;
  --auth-text-secondary: #475569;
  --auth-text-muted: #94A3B8;
  --auth-text-inverse: #FFFFFF;

  --auth-border-color: #E2E8F0;
  --auth-border-color-soft: #E5E7EB;

  /* Backgrounds */
  --auth-bg-gradient: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 55%, #DBEAFE 100%);
  --auth-bg-card: #FFFFFF;
  --auth-bg-overlay: rgba(255, 255, 255, 0.85);

  /* Shadows */
  --auth-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --auth-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --auth-shadow-lg: 0 10px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.05);
  --auth-shadow-colored: 0 10px 40px -10px rgba(59, 130, 246, 0.30);

  /* Radius */
  --auth-radius-sm: .375rem;
  --auth-radius: .75rem;
  --auth-radius-lg: 1.25rem;
  --auth-radius-xl: 1.75rem;

  /* Spacing */
  --auth-space-xs: .4rem;
  --auth-space-sm: .65rem;
  --auth-space: 1rem;
  --auth-space-md: 1.25rem;
  --auth-space-lg: 1.75rem;
  --auth-space-xl: 2.25rem;
  --auth-space-2xl: 3rem;

  /* Typography */
  --auth-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-xs: .70rem;
  --fs-sm: .8rem;
  --fs: .95rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.6rem;
  --fw-normal: 400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --focus-ring: 0 0 0 3px rgba(59,130,246,.35);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --auth-bg-gradient: linear-gradient(135deg,#0F172A 0%,#1E293B 50%,#0F172A 100%);
    --auth-bg-card: #1E293B;
    --auth-bg-overlay: rgba(30,41,59,0.85);
    --auth-text-primary: #F1F5F9;
    --auth-text-secondary: #CBD5E1;
    --auth-text-muted: #64748B;
    --auth-border-color: #334155;
    --auth-border-color-soft: #475569;
    --auth-shadow-colored: 0 10px 40px -10px rgba(37,99,235,.35);
  }
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; font-family: var(--auth-font); }

body.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  background: var(--auth-bg-gradient);
  color: var(--auth-text-primary);
  -webkit-font-smoothing: antialiased;
}

body.auth-page:before { content:""; position:absolute; inset:0; background:
 radial-gradient(circle at 18% 25%, rgba(59,130,246,.18), transparent 60%),
 radial-gradient(circle at 80% 70%, rgba(20,184,166,.15), transparent 55%),
 radial-gradient(circle at 50% 90%, rgba(99,102,241,.13), transparent 65%);
 pointer-events:none; }
body.auth-page:after { content:""; position:absolute; inset:0; opacity:.55; background:
 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233B82F6' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }

.auth-container { width:100%; max-width:1250px; padding: clamp(1.25rem,2.5vw,2.5rem); display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,4vw,4rem); position:relative; z-index:1; align-items:center; }

@media (max-width:1040px) { .auth-container { grid-template-columns:1fr; max-width:560px; } .auth-hero { display:none; } }

/* Hero */
.auth-hero { padding: var(--auth-space-lg) var(--auth-space-lg) var(--auth-space-xl); }
.auth-logo { display:inline-flex; align-items:center; gap:.85rem; margin-bottom: var(--auth-space-xl); }
.auth-logo-icon { width:58px; height:58px; background:linear-gradient(145deg,#3B82F6,#1E40AF); border-radius:1.25rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.55rem; font-weight: var(--fw-bold); box-shadow: var(--auth-shadow-colored); position:relative; overflow:hidden; }
.auth-logo-icon:after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 65%); mix-blend-mode:overlay; }
.auth-logo-text { display:flex; flex-direction:column; }
.auth-logo-text .main { font-size:1.55rem; font-weight: var(--fw-extrabold); letter-spacing:-.03em; }
.auth-logo-text .sub { font-size:.68rem; font-weight: var(--fw-semibold); letter-spacing:.18em; text-transform:uppercase; color: var(--auth-primary); }

.auth-headline { font-size: clamp(2.2rem,4.2vw,3.1rem); line-height:1.08; font-weight: var(--fw-extrabold); letter-spacing:-.035em; margin:0 0 var(--auth-space); }
.auth-headline .gradient { background:linear-gradient(110deg,var(--auth-primary),var(--auth-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-description { font-size: clamp(.95rem,1.1vw,1.05rem); line-height:1.55; color: var(--auth-text-secondary); max-width:560px; margin:0 0 var(--auth-space-lg); font-weight: var(--fw-medium); }

.auth-stats { display:flex; gap: var(--auth-space-xl); flex-wrap:wrap; border-top:1px solid var(--auth-border-color); padding-top: var(--auth-space-lg); }
.auth-stat { flex:1 1 140px; }
.auth-stat-value { font-size: clamp(1.65rem,2.4vw,2.15rem); font-weight: var(--fw-extrabold); color: var(--auth-primary); line-height:1; margin-bottom:.35rem; }
.auth-stat-label { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight: var(--fw-semibold); color: var(--auth-text-muted); }

/* Card */
.auth-form-card { background: var(--auth-bg-card); border:1px solid var(--auth-border-color); border-radius: var(--auth-radius-xl); padding: clamp(2rem,3vw,2.65rem) clamp(1.75rem,2.5vw,2.75rem) clamp(2.4rem,3vw,2.9rem); box-shadow: var(--auth-shadow-lg), var(--auth-shadow-colored); position:relative; overflow:hidden; }
.auth-form-card:before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--auth-primary),var(--auth-accent)); }
.auth-form-card:after { content:""; position:absolute; width:320px; height:320px; background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.18),transparent 70%); bottom:-140px; right:-140px; filter:blur(8px); opacity:.75; }

@media (prefers-color-scheme: dark) {
  .auth-form-card { background: rgba(30,41,59,.92); }
  .auth-form-card:after { background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.25),transparent 70%); }
}

.auth-form-header { text-align:center; margin-bottom: var(--auth-space-xl); }
.auth-form-title { font-size:1.45rem; font-weight: var(--fw-bold); letter-spacing:-.02em; margin:0 0 .45rem; }
.auth-form-subtitle { font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; font-weight: var(--fw-semibold); color: var(--auth-text-muted); }

/* Float Fields */
.form-field { position:relative; margin-bottom: var(--auth-space-lg); }
.float-label { position:absolute; left: var(--auth-space); top:50%; transform:translateY(-50%); font-size:.8rem; color: var(--auth-text-muted); transition:.22s; pointer-events:none; background: transparent; padding:0 .35rem; }
.form-input { width:100%; padding: 1.05rem var(--auth-space); font-size:.95rem; font-family:var(--auth-font); border:2px solid var(--auth-border-color); border-radius: var(--auth-radius); background:#FFFFFF; outline:none; transition:.22s; font-weight: var(--fw-medium); }
.form-input:hover { border-color:#D0D7E2; }
.form-input:focus { border-color: var(--auth-primary); box-shadow: var(--focus-ring); }
.form-input:not(:placeholder-shown) + .float-label,
.form-input:focus + .float-label { top:0; transform:translateY(-50%) scale(.85); background: var(--auth-bg-card); color: var(--auth-primary); font-weight: var(--fw-semibold); }

@media (prefers-color-scheme: dark) {
  .form-input { background:#1E293B; border-color:#334155; color: var(--auth-text-primary); }
  .form-input:hover { border-color:#475569; }
  .form-input:focus { border-color: var(--auth-primary); }
  .form-input:not(:placeholder-shown) + .float-label,
  .form-input:focus + .float-label { background:#1E293B; }
}

.password-field .password-toggle { position:absolute; top:50%; right:.9rem; transform:translateY(-50%); background:transparent; border:none; font-size:.7rem; letter-spacing:.14em; font-weight: var(--fw-semibold); text-transform:uppercase; color: var(--auth-text-muted); cursor:pointer; transition:.2s; }
.password-field .password-toggle:hover { color: var(--auth-primary); }
.password-field .password-toggle:focus { outline:none; color: var(--auth-primary); }

/* Options */
.form-options { display:flex; justify-content:space-between; align-items:center; gap: var(--auth-space); margin:-.25rem 0 var(--auth-space-xl); flex-wrap:wrap; }
.checkbox-field { display:flex; align-items:center; gap:.55rem; font-size:.8rem; color: var(--auth-text-secondary); }
.checkbox-field input { width:18px; height:18px; accent-color: var(--auth-primary); cursor:pointer; }
.forgot-link { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight: var(--fw-semibold); color: var(--auth-primary); text-decoration:none; transition:.2s; }
.forgot-link:hover { color: var(--auth-primary-dark); text-decoration:underline; }

/* Button */
.btn-submit { width:100%; padding:1.05rem 1.25rem; font-size:.95rem; font-weight: var(--fw-semibold); border:none; border-radius: var(--auth-radius); color:#fff; background:linear-gradient(135deg,var(--auth-primary),var(--auth-primary-dark)); cursor:pointer; position:relative; overflow:hidden; transition:.35s cubic-bezier(.16,.8,.24,1); box-shadow: var(--auth-shadow); letter-spacing:.05em; }
.btn-submit:hover { transform:translateY(-3px); box-shadow: var(--auth-shadow-lg), var(--auth-shadow-colored); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:focus-visible { outline:none; box-shadow: var(--focus-ring), var(--auth-shadow-colored); }
.btn-submit.loading { color:transparent; pointer-events:none; }
.btn-submit.loading:before { content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.btn-submit:after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 60%); opacity:0; transition:.6s; }
.btn-submit:hover:after { opacity:1; }

/* Alerts */
.alert { padding:.9rem 1rem; border-radius: var(--auth-radius); font-size:.75rem; font-weight: var(--fw-medium); display:flex; align-items:center; gap:.65rem; position:relative; border:1px solid transparent; animation: fadeIn .5s ease; }
.alert-error { background:#FEE2E2; color:#991B1B; border-color:#FECACA; }
.alert-success { background:#DCFCE7; color:#065F46; border-color:#BBF7D0; }

@media (prefers-color-scheme: dark) { .alert-error { background:#7F1D1D; color:#FEE2E2; border-color:#991B1B; } .alert-success { background:#064E3B; color:#D1FAE5; border-color:#059669; } }

.security-badge { display:flex; justify-content:center; align-items:center; gap:.55rem; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; padding: var(--auth-space-lg) 0 0; margin-top: var(--auth-space-lg); border-top:1px solid var(--auth-border-color); color: var(--auth-text-muted); font-weight: var(--fw-semibold); }
.security-badge .icon { color: var(--auth-success); }

/* Animations */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(22px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
.auth-hero, .auth-form-card { animation: fadeInUp .7s cubic-bezier(.16,.8,.24,1) forwards; }
.auth-form-card { animation-delay: .12s; animation-fill-mode:both; }

/* Focus / Accessibility */
:focus-visible { outline:2px solid var(--auth-primary); outline-offset:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); margin:-1px; overflow:hidden; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Tooltip (optional micro-interaction placeholder) */
.tooltip { position:relative; cursor:help; }
.tooltip:hover .tooltip-content { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.tooltip-content { position:absolute; left:50%; bottom:100%; transform:translate(-50%,4px); background:#1E293B; color:#fff; padding:.45rem .65rem; border-radius:.5rem; font-size:.65rem; letter-spacing:.05em; opacity:0; pointer-events:none; transition:.25s; white-space:nowrap; box-shadow: var(--auth-shadow-lg); }
@media (prefers-color-scheme: light) { .tooltip-content { background:#334155; } }

/* Dark mode fine-tuning */
@media (prefers-color-scheme: dark) {
  .auth-headline .gradient { background:linear-gradient(110deg,#60A5FA,#14B8A6); -webkit-background-clip:text; background-clip:text; }
  .auth-description { color:#CBD5E1; }
  .auth-stat-label { color:#64748B; }
  .float-label { color:#64748B; }
}