*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{background:#0d0d0d;color:#fff;display:flex;justify-content:center}
.wrapper{max-width:700px;width:100%;padding:30px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bounceIn{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes rotateIn{from{transform:rotate(-90deg);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,215,0,.4)}70%{box-shadow:0 0 0 15px rgba(255,215,0,0)}100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}}
header{text-align:center;margin-bottom:30px;animation:fadeIn .8s}
.logo{width:80px;margin:0 auto 10px;animation:rotateIn 1s}
h1{font-family:'Space Grotesk',sans-serif;color:#FFD700;letter-spacing:.5px}
/* Cards */
.card{background:#1b1b1b;border-radius:10px;padding:20px;margin-bottom:30px;animation:slideDown .6s}
.card label{color:#ccc;font-size:.9rem;margin-bottom:4px;display:block}
.card input,.card select{width:100%;background:#262626;color:#fff;border:none;padding:10px;border-radius:6px;margin-top:4px;margin-bottom:15px}
.btn-main{background:#FFD700;color:#000;border:none;padding:12px 0;font-weight:700;width:100%;border-radius:6px;cursor:pointer;animation:pulse 2s infinite}
.btn-main:hover{background:#e8c300}
/* Result */
.result-card{background:#1b1b1b;border-radius:10px;padding:20px;margin-bottom:30px;animation:bounceIn .6s}
#daysLabel{text-align:center;color:#aaa;margin-bottom:10px}
#plannedLabel{text-align:center;color:#ccc;margin-top:10px}
#plannedValue{font-size:1.8rem;color:#FFD700;text-align:center;margin-top:5px;font-weight:700}
/* Milestone */
#milestone{display:flex;align-items:center;background:#333;border:2px solid #FF7F00;border-radius:8px;padding:15px;gap:12px;margin-top:15px}
#milestone img{width:40px;height:40px}
#mileTitle{color:#FFD700;font-size:1.2rem;margin:0}
#mileTxt{color:#EEE;font-size:1rem;margin:4px 0 0 0}
/* Chat */
.chat{background:#1b1b1b;border-radius:10px;padding:20px;animation:slideDown .6s}
.chat-log{max-height:200px;overflow-y:auto;border:1px solid #333;border-radius:6px;padding:10px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:80%;padding:8px 12px;border-radius:18px;line-height:1.3}
.user{align-self:flex-end;background:#0056ff;color:#fff;border-bottom-right-radius:4px}
.bot{align-self:flex-start;background:#333;color:#FFD700;border-bottom-left-radius:4px}
#chatBox h4{display:flex;align-items:center;gap:8px;color:#FFD700;margin-bottom:12px}
#chatBox h4 img{animation:pulse 2s infinite}
/* Login */
.login{background:#1b1b1b;border:2px solid #FFD700;border-radius:10px;padding:30px;text-align:center;animation:bondceIn .8s}
.login input{width:100%;padding:10px;border:none;border-radius:6px;background:#262626;color:#fff;margin-bottom:15px}
.login button{width:100%;padding:10px;background:#FFD700;border:none;border-radius:6px;font-weight:700;color:#000}
.error{color:#ff6b6b;font-size:.85rem;height:18px}
/* Responsive */
@media(max-width:480px){.wrapper{padding:15px}.logo{width:60px}.btn-main{padding:10px 0}#plannedValue{font-size:1.5rem}#mileTitle{font-size:1rem}}