/* * DNS Manager – Login Styles * Light / Dark Theme via [data-theme="light"] on */ :root { --bg: #0a0c10; --surface: #111418; --border: #1e2530; --accent: #00d4ff; --accent2: #7c3aed; --text: #e2e8f0; --muted: #64748b; --danger: #ef4444; --shadow: rgba(0,0,0,.6); --mono: 'JetBrains Mono', monospace; --sans: 'Space Grotesk', sans-serif; } [data-theme="light"] { --bg: #eef1f8; --surface: #ffffff; --border: #d0d8ec; --accent: #0099bb; --accent2: #7c3aed; --text: #1a2035; --muted: #6b7a9a; --danger: #dc2626; --shadow: rgba(0,0,0,.12); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{ background:var(--bg);color:var(--text);font-family:var(--sans); min-height:100vh;display:flex;align-items:center;justify-content:center; overflow:hidden;transition:background .25s,color .25s; } /* Grid background (dark only) */ body::before{ content:'';position:fixed;inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:40px 40px;opacity:.4;pointer-events:none; transition:opacity .25s; } [data-theme="light"] body::before{opacity:.2} /* Glow orb */ body::after{ content:'';position:fixed;top:-200px;left:50%;transform:translateX(-50%); width:600px;height:600px; background:radial-gradient(circle,rgba(0,212,255,.08) 0%,transparent 70%); pointer-events:none; } [data-theme="light"] body::after{background:radial-gradient(circle,rgba(0,153,187,.05) 0%,transparent 70%)} /* Theme Toggle */ .theme-toggle-login{ position:fixed;top:20px;right:20px; background:var(--surface);border:1px solid var(--border);border-radius:8px; padding:8px 12px;cursor:pointer;color:var(--muted); display:flex;align-items:center;gap:6px;font-size:.75rem; font-family:var(--sans);font-weight:600;transition:all .15s; box-shadow:0 2px 8px var(--shadow); } .theme-toggle-login:hover{color:var(--text);border-color:var(--accent)} .theme-toggle-login svg{width:15px;height:15px} .theme-toggle-login .icon-dark{display:block} .theme-toggle-login .icon-light{display:none} [data-theme="light"] .theme-toggle-login .icon-dark{display:none} [data-theme="light"] .theme-toggle-login .icon-light{display:block} .login-card{ position:relative;width:420px;background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:48px; box-shadow:0 0 0 1px rgba(0,212,255,.05),0 32px 64px var(--shadow); animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards; transition:background .25s,border-color .25s; } [data-theme="light"] .login-card{box-shadow:0 4px 32px var(--shadow)} @keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .logo{text-align:center;margin-bottom:40px} .logo-icon{ display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;background:linear-gradient(135deg,var(--accent2),var(--accent)); border-radius:14px;margin-bottom:16px; } .logo-icon svg{width:28px;height:28px;fill:white} .logo h1{font-family:var(--mono);font-size:1.4rem;font-weight:700;letter-spacing:-.02em} .field{margin-bottom:20px} label{ display:block;font-size:.78rem;font-weight:500;color:var(--muted); letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px; } input{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px; padding:12px 16px;color:var(--text);font-family:var(--mono);font-size:.9rem; outline:none;transition:border-color .2s,box-shadow .2s,background .25s; } input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,.1)} [data-theme="light"] input:focus{box-shadow:0 0 0 3px rgba(0,153,187,.1)} .btn{ width:100%;padding:13px; background:linear-gradient(135deg,var(--accent2),var(--accent)); border:none;border-radius:8px;color:white;font-family:var(--sans); font-size:.95rem;font-weight:700;cursor:pointer;letter-spacing:.02em; transition:opacity .2s,transform .1s;margin-top:8px; } .btn:hover{opacity:.9} .btn:active{transform:scale(.99)} .error{ background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3); border-radius:8px;padding:12px 16px;color:var(--danger); font-size:.85rem;margin-bottom:20px;font-family:var(--mono); } .card-accent{ position:absolute;top:0;left:32px;right:32px;height:2px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); border-radius:2px; }