:root{--bg: #f6f8fb;--bg-2: #eef2ff;--card: #fff;--muted: #6b7280;--text: #111827;--accent: #2563eb;--accent-600: #1e40af;--danger: #e11d48;--glass: rgba(37,99,235,.06);--shadow: 0 6px 18px rgba(17,24,39,.08)}body.dark-mode{--bg: #071021;--bg-2: #05141f;--card: #0f1722;--text: #e6eef8;--muted: #9aa6b2;--accent: #5b6b7a;--accent-600: #32404d;--glass: rgba(255,255,255,.02);--shadow: 0 10px 30px rgba(2,6,23,.6);--danger: #f43f5e}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1100px;margin:0 auto;padding:32px}.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow)}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}#app-root{max-width:1200px;margin:0 auto;padding:32px}.app-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:32px}.app-hero{display:flex;align-items:center;justify-content:space-between;gap:32px}.app-hero h1{margin:0;font-size:2rem;color:var(--accent)}.muted{color:var(--muted)}footer{background:var(--card);padding:18px 12px;text-align:center;color:var(--muted);font-size:1rem;border-top:1px solid rgba(37,99,235,.06);box-shadow:0 -2px 8px #1118270a}footer p{margin:0}:root{--accent: #2563eb;--muted: #6b7280}.home-hero{display:flex;flex-direction:column;align-items:center;gap:32px;padding:64px 20px;background:var(--bg-2)}.title{max-width:900px;margin:0 auto 12px;text-align:center}.title h1{font-size:2.8rem;margin:0 0 12px;color:var(--accent);line-height:1.1;font-weight:700}.title h2{font-size:1.2rem;color:var(--muted);margin:0}.title p{color:var(--muted);margin-top:16px;line-height:1.5}.feature-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin:36px 0;width:100%}.feature-card{background:var(--card);padding:24px;border-radius:14px;box-shadow:var(--shadow);min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.feature-card h2{margin:0 0 10px;font-size:1.15rem;color:var(--accent);font-weight:600}.feature-card p{margin:0;color:var(--muted)}.login{display:flex;justify-content:center;margin-top:24px;width:100%}.login>button{width:100%;max-width:320px;display:inline-flex;align-items:center;justify-content:center;margin:0 auto;padding:14px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 8px 20px var(--accent);cursor:pointer;transition:background .2s,box-shadow .2s}.login>button:hover{background:#1e40af;box-shadow:0 14px 28px #1e40af}.dark-toggle button{background:transparent;border:1px solid var(--accent);padding:8px 10px;border-radius:8px;color:var(--muted);font-size:1.2rem}body.dark-mode .feature-card{background:var(--card);color:var(--text)}body.dark-mode .login>button{background:#5b6b7a;color:#fff}@media(min-width:900px){.home-hero{flex-direction:row;align-items:center;justify-content:space-between}}.login-box{max-width:400px;margin:48px auto;padding:32px 28px;background:var(--card);border-radius:16px;box-shadow:var(--shadow)}.login{display:flex;flex-direction:column;gap:14px}.user,.password-wrapper{width:100%}.password-wrapper{position:relative}.toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--accent);cursor:pointer;font-size:1em;padding:6px;border-radius:6px}.toggle-password:hover{color:var(--accent-600)}#loginbutton{width:100%;padding:14px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 8px 20px var(--accent-600);cursor:pointer;transition:background .2s,box-shadow .2s}#loginbutton:hover{background:var(--accent-600);box-shadow:0 14px 28px var(--accent-600)}#error{display:none;margin-top:8px;color:var(--danger);background:#f43f5e0f;padding:8px;border-radius:6px}body.dark-mode .login-box{background:var(--card);color:var(--text)}body.dark-mode #loginbutton{background:var(--accent-600);color:#fff}.register-box{max-width:400px;margin:48px auto;padding:32px 28px;background:var(--card);border-radius:16px;box-shadow:var(--shadow)}.title h1{margin:0 0 10px;font-size:2rem;color:var(--accent);font-weight:700}.content{padding:8px 0}.register-form{display:flex;flex-direction:column;gap:14px}.user input,.password-wrapper input{width:100%;padding:14px 16px;border:1px solid var(--accent);border-radius:10px;background:var(--bg);color:var(--text);font-size:1.1rem;transition:border-color .2s}.user input:focus,.password-wrapper input:focus{outline:none;border-color:var(--accent-600)}.disclaimer{font-size:.95rem;color:var(--muted);opacity:.95;text-align:center}#register-button{width:100%;padding:14px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 8px 20px var(--accent-600);cursor:pointer;transition:background .2s,box-shadow .2s}#register-button:hover{background:var(--accent-600);box-shadow:0 14px 28px var(--accent-600)}body.dark-mode .register-box{background:var(--card);color:var(--text)}body.dark-mode .user input,body.dark-mode .password-wrapper input{background:var(--bg-2);border-color:var(--accent-600);color:var(--text)}body.dark-mode #register-button{background:var(--accent-600);color:#fff}.verify-wrapper{display:flex;justify-content:center;align-items:center;min-height:80vh;background:var(--bg-2)}.verify-card{max-width:400px;width:100%;background:var(--card);padding:32px 28px;border-radius:16px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;gap:18px}.verify-card h1{margin:0 0 10px;font-size:2rem;color:var(--accent);font-weight:700}.verify-card p{color:var(--muted);margin:0 0 18px;font-size:1.1rem}.code{display:flex;flex-direction:column;gap:14px;align-items:center}.code input{width:100%;max-width:260px;padding:14px 16px;border-radius:10px;border:1px solid var(--accent);background:var(--bg);color:var(--text);font-size:1.1rem;transition:border-color .2s}.code input:focus{outline:none;border-color:var(--accent-600)}.actions{display:flex;gap:12px;justify-content:center;margin-top:10px}.actions button{padding:12px 24px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:1rem;box-shadow:0 4px 12px var(--accent-600);cursor:pointer;transition:background .2s,box-shadow .2s}.actions button:hover{background:var(--accent-600);box-shadow:0 8px 24px var(--accent-600)}.message{margin-top:12px;padding:10px;border-radius:8px;background:var(--glass);color:var(--accent-600);font-size:1rem}.email-display{font-size:1rem;color:var(--muted);margin-bottom:6px}.dark-toggle button{background:transparent;border:1px solid var(--accent-600);padding:8px 10px;border-radius:8px;color:var(--muted);font-size:1.2rem}body.dark-mode .verify-card{background:var(--card);color:var(--text)}body.dark-mode .code input{background:var(--bg-2);border-color:var(--accent-600);color:var(--text)}body.dark-mode .actions button{background:var(--accent-600);color:#fff}:root{--bg-color: #f6f8fb;--text-color: #111827;--button-bg: #2563eb;--button-text: #fff;--error-bg: #e11d48;--accent-color: #2563eb;--card: #fff;--shadow: 0 6px 18px rgba(17,24,39,.08)}body.dark-mode{--bg-color: #071021;--text-color: #e6eef8;--button-bg: #5b6b7a;--button-text: #fff;--error-bg: #f43f5e;--accent-color: #5b6b7a;--card: #0f1722;--shadow: 0 10px 30px rgba(2,6,23,.6)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg-color);color:var(--text-color);transition:background .3s,color .3s}.header{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;background:var(--card);box-shadow:var(--shadow)}.login-and-username{display:flex;align-items:center;gap:18px}#username{font-weight:600;color:var(--accent-color)}#pageContent{display:flex;flex-direction:column;gap:18px;align-items:center;margin-top:32px}.center-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.pass{display:flex;align-items:center;position:relative}#reportPassword{padding:12px 70px 12px 14px;width:320px;font-size:1.1em;border-radius:10px;border:1px solid var(--accent-color);background:var(--card);color:var(--text-color);transition:border-color .2s}#reportPassword:focus{outline:none;border-color:var(--button-bg)}.toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--accent-color);cursor:pointer;font-size:1em;padding:6px;border-radius:6px}.toggle-password:hover{color:var(--button-bg)}#pageContent>button{width:220px;padding:14px;font-size:1.1em;font-weight:600;background:var(--button-bg);color:var(--button-text);border:none;border-radius:10px;box-shadow:0 4px 12px var(--accent-color);cursor:pointer;transition:background .2s,box-shadow .2s}#pageContent>button:hover{background:var(--accent-color);box-shadow:0 8px 24px var(--accent-color)}#loadingOverlay{display:none;position:fixed;inset:0;background:#0006;color:#fff;font-size:1.2em;z-index:9999;align-items:center;justify-content:center;flex-direction:column}.loading-overlay{display:flex!important}.spinner{margin-top:18px;width:40px;height:40px;border:4px solid #fff;border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dark-toggle{position:fixed;top:18px;right:20px}.dark-toggle button{background:transparent;border:1px solid var(--accent-color);padding:8px 10px;border-radius:8px;color:var(--accent-color);font-size:1.2rem}