*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);background-attachment:fixed;padding:2rem;color:#e0e0e0;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 50%);animation:rotate 30s linear infinite;pointer-events:none;z-index:0}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{max-width:900px;margin:0 auto;background:#ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:3rem;border-radius:24px;box-shadow:0 8px 32px #0000004d,0 0 0 1px #ffffff1a;position:relative;z-index:1;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1{margin-top:0;margin-bottom:2rem;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;letter-spacing:-.5px}h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:#f0f0f0;letter-spacing:-.3px}.form{background:#ffffff14;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:2rem;border-radius:16px;margin-bottom:2.5rem;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.form:hover{background:#ffffff1a;box-shadow:0 8px 24px #8b5cf633}.form-group{margin-bottom:1.5rem;position:relative}.form-group label{display:block;margin-bottom:.75rem;font-weight:500;color:#b8b8d1;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.form-group:before{content:"";position:absolute;right:0;bottom:0;left:0;top:32px;border-radius:12px;padding:2px;background:conic-gradient(from var(--angle),transparent 0%,transparent 30%,#8b5cf6 50%,#f093fb 70%,transparent 90%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:rotateBorder 3s linear infinite;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0}.form-group:focus-within:before{opacity:1}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes rotateBorder{0%{--angle: 0deg}to{--angle: 360deg}}.form-group input{width:100%;padding:.875rem 1rem;border:2px solid transparent;border-radius:12px;font-size:1rem;background:#ffffff0d;color:#fff;font-family:Inter,sans-serif;transition:all .3s ease;outline:none;position:relative;z-index:1}.form-group input::placeholder{color:#fff6}.form-group input:focus{border-color:#8b5cf6;background:#ffffff14;box-shadow:0 0 0 3px #8b5cf633;transform:translateY(-2px)}.actions{display:flex;gap:1rem;margin-top:2rem}button{padding:.875rem 1.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;font-family:Inter,sans-serif;transition:all .3s ease;box-shadow:0 4px 15px #8b5cf64d;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}button:hover:before{left:100%}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf666}button:active{transform:translateY(0)}button[type=button]{background:#ffffff1a;box-shadow:0 4px 15px #0003}button[type=button]:hover{background:#ffffff26;box-shadow:0 6px 20px #0000004d}button.delete-btn{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 15px #f5576c4d}button.delete-btn:hover{box-shadow:0 6px 20px #f5576c66}.error{color:#ff6b9d;background:#ff6b9d1a;padding:1rem;border-radius:12px;margin-bottom:1rem;border:1px solid rgba(255,107,157,.3);font-weight:500;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.list{animation:slideUp .6s ease-out .2s both}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.list p{text-align:center;color:#b8b8d1;font-size:1.1rem;padding:3rem 0;font-style:italic}.list ul{list-style:none;padding:0}.person-item{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;margin-bottom:1rem;background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease;animation:fadeInItem .5s ease-out both}@keyframes fadeInItem{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.person-item:hover{background:#ffffff14;transform:translate(8px);box-shadow:0 8px 24px #8b5cf626;border-color:#8b5cf64d}.person-info{display:flex;flex-direction:column;gap:.5rem}.person-info strong{font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:-.2px}.person-info span{color:#b8b8d1;font-size:.95rem;font-weight:400}.person-actions{display:flex;gap:.75rem}.person-actions button{padding:.625rem 1.25rem;font-size:.9rem}@media (max-width: 768px){body{padding:1rem}.container{padding:2rem 1.5rem}h1{font-size:2rem}.person-item{flex-direction:column;gap:1rem;align-items:flex-start}.person-actions{width:100%}.person-actions button{flex:1}}