:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f5f5f5}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-width:320px;min-height:100vh}#root{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.container{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;padding:30px;width:100%;max-width:500px}h2{color:#333;margin-bottom:24px;text-align:center}h3{color:#444;margin-bottom:16px}.form-group{margin-bottom:16px}label{display:block;margin-bottom:6px;font-weight:500;color:#555}input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s}input:focus{border-color:#4f46e5;outline:none}button{width:100%;padding:12px;background-color:#4f46e5;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s;margin-top:8px}button:hover{background-color:#4338ca}button:disabled{background-color:#a5a5a5;cursor:not-allowed}.error-message{background-color:#fee2e2;color:#b91c1c;padding:12px;border-radius:4px;margin-bottom:16px}.success-message{background-color:#dcfce7;color:#166534;padding:12px;border-radius:4px;margin-bottom:16px}.link-container{margin-top:20px;text-align:center}.link-container a{color:#4f46e5;text-decoration:none}.link-container a:hover{text-decoration:underline}.user-info{background-color:#f8fafc;padding:16px;border-radius:4px;margin-bottom:24px}.info-item{margin-bottom:12px}.info-item strong{margin-right:8px;color:#555}.logout-button{background-color:#ef4444}.logout-button:hover{background-color:#dc2626}.loading{text-align:center;padding:20px;color:#666}.no-data{text-align:center;padding:20px;color:#888;font-style:italic}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}