*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#fefefe;color:#333;line-height:1.6}html,body{width:100%;height:100%;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:#fafafa;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.main-content{flex:1;padding:30px 20px;max-width:700px;margin:0 auto}.header{background-color:#fff;padding:20px 0;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 6px #0000000a}.header-title{color:#222;font-size:2rem;font-weight:600;letter-spacing:.5px}.footer{background-color:#fff;color:#666;text-align:center;padding:12px 0;border-top:1px solid #e0e0e0;font-size:.95rem}.note-form{display:flex;flex-direction:column;gap:12px;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000000d;margin-bottom:30px}.note-input,.note-textarea{padding:12px 15px;border:1px solid #ccc;border-radius:8px;font-size:1rem;transition:border .2s ease}.note-input:focus,.note-textarea:focus{outline:none;border-color:#4a90e2}.note-textarea{resize:vertical;min-height:90px}.note-button{background-color:#4a90e2;color:#fff;border:none;padding:10px;font-size:1rem;border-radius:8px;cursor:pointer;transition:background .3s ease}.note-button:hover{background-color:#357ab8}.note-list{display:flex;flex-direction:column;gap:16px}.note-card{background-color:#fff;padding:18px;border-left:5px solid #4a90e2;border-radius:10px;box-shadow:0 1px 8px #0000000a;transition:transform .2s ease}.note-card:hover{transform:translateY(-2px)}.note-title{margin:0 0 8px;font-size:1.3rem;font-weight:600;color:#333}.note-description{margin:0;color:#555;font-size:1rem}.delete-button{margin-top:10px;background:transparent;color:#e74c3c;border:none;font-size:.9rem;cursor:pointer;padding:0;transition:color .2s ease}.delete-button:hover{color:#c0392b;text-decoration:underline}.no-notes{text-align:center;color:#aaa;font-style:italic;margin-top:20px;font-size:1rem}