body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center;color:#333;background-attachment:fixed}.container{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2.5rem;border-radius:16px;box-shadow:0 20px 50px #00000026;text-align:center;max-width:450px;width:90%;border:1px solid rgba(255,255,255,.2);animation:fadeIn .5s ease-out}h1{color:#2d3748;margin-bottom:.5rem;font-weight:700;font-size:1.8rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{color:#718096;margin-top:0;margin-bottom:1.5rem;font-weight:500;font-size:1.1rem;letter-spacing:.05em}.time-input{margin:1.5rem 0}label{display:block;margin-bottom:.5rem;font-weight:500}input[type=time]{padding:1rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1.2rem;width:100%;box-sizing:border-box;transition:all .3s ease;background:#f8fafc;outline:none}input[type=time]:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:white}button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:.85rem 1.75rem;font-size:1rem;border-radius:12px;cursor:pointer;transition:all .3s ease;margin-top:1rem;font-weight:600;letter-spacing:.02em;box-shadow:0 4px 15px #667eea4d}button:hover{transform:translateY(-3px);box-shadow:0 7px 20px #667eea66}button:active{transform:translateY(-1px)}.result{margin-top:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);border-radius:12px;animation:slideIn .4s ease-out;box-shadow:0 5px 15px #0000000d;border:1px solid rgba(237,242,247,.8)}.sleep-times-container{margin:1.5rem 0}.sleep-time-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;margin-bottom:.8rem;background:white;border-radius:8px;box-shadow:0 2px 8px #0000000d;border:1px solid rgba(237,242,247,.8);transition:all .2s ease}.sleep-time-item:hover{transform:translate(5px);box-shadow:0 3px 10px #00000014}.cycle-number{font-weight:600;color:#667eea;font-size:.9rem}.time-value{font-weight:700;font-size:1.1rem;color:#2d3748;letter-spacing:1px}.recommendation{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(237,242,247,.8);color:#4a5568;font-size:.95rem;line-height:1.5}.quick-times{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}.quick-time{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500;color:#fff;box-shadow:0 2px 5px #0000000d}.quick-time:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a4190 100%);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.quick-time:active{transform:translateY(0);background:linear-gradient(135deg,#4e5bc6 0%,#5e377e 100%)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@media (max-width: 480px){.container{padding:1.5rem;max-width:90%}h1{font-size:1.5rem}.quick-times{gap:.4rem}.quick-time{padding:.5rem .8rem;font-size:.8rem}}body{margin:0;padding:0;box-sizing:border-box}*{box-sizing:inherit}