:root{--primary-bg: rgba(44, 43, 94, .8);--secondary-bg: rgba(35, 35, 63, .7);--highlight: #ffbb00;--font-color: #fff;--card-shadow: 0 8px 15px rgba(0, 0, 0, .3);--focus-outline: #FFD700;--button-text-color: #1E1D40}body{color:var(--font-color)}.container{display:flex;align-items:center;flex-direction:column;padding-top:100px;min-height:100vh;width:100%;max-width:1200px;margin:0 auto}h1{color:var(--font-color);font-size:24px;text-align:center;margin-bottom:20px}form{display:flex;flex-direction:column;gap:15px;padding:20px;border-radius:15px;background:var(--primary-bg);width:100%;max-width:400px;margin-bottom:20px;box-shadow:var(--card-shadow)}form button{border-radius:30px;background-color:var(--highlight);height:40px;border:none;font-weight:700;cursor:pointer;color:var(--button-text-color);font-size:14px;transition:all .3s ease}form button:hover{opacity:.9;transform:scale(1.02)}form button:focus{outline:2px solid var(--focus-outline);outline-offset:2px}form input{border:1px solid rgba(255,255,255,.13);border-radius:30px;height:40px;background-color:var(--secondary-bg);color:var(--font-color);font-size:16px;padding:0 15px;outline:none;transition:border-color .3s ease,background-color .3s ease}form input:focus{border-color:var(--focus-outline);background-color:#363653e6}.card{display:flex;justify-content:space-between;align-items:center;background:var(--primary-bg);margin:15px 0;padding:15px 20px;width:100%;max-width:400px;border-radius:15px;color:var(--font-color);box-shadow:var(--card-shadow)}.card div{display:flex;flex-direction:column;gap:5px}.card span{font-weight:400;font-size:14px}.delete-button,.edit-button{background-color:transparent;border:none;cursor:pointer;padding:10px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.delete-button img,.edit-button img{width:20px;height:20px}.delete-button:hover,.edit-button:hover{transform:scale(1.1);color:#fe5f02}@media (max-width: 1024px){.container{padding-top:120px;width:90%;max-width:1024px}form{max-width:80%}h1{font-size:28px}.card{padding:18px}}@media (max-width: 375px){.container{width:95%}form{max-width:90%}h1{font-size:20px}.card{max-width:90%;padding:12px}}@media (min-width: 768px){h1{font-size:30px}form{padding:30px;gap:20px}.card{padding:20px}}@media (min-width: 1024px){.container{padding-top:150px}form{max-width:50%}}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,serif}body{min-height:100vh;width:100vw;background:linear-gradient(135deg,#1e1d40,#6c63ff);background-attachment:fixed;background-size:cover}