*{box-sizing:border-box;margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}div{max-width:800px;margin:0 auto;background:#fff;border-radius:16px;padding:30px;box-shadow:0 8px 32px #0000001a}h1{text-align:center;color:#333;margin-bottom:30px;font-size:2.5rem}form{display:flex;flex-direction:column;gap:16px;margin-bottom:30px;background:#f8f9fa;padding:24px;border-radius:12px;border:1px solid #e0e0e0}input[type=text]{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:1.1rem;transition:border-color .2s}input[type=text]:focus{outline:none;border-color:#667eea}textarea{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;min-height:120px;resize:vertical;transition:border-color .2s;font-family:inherit}textarea:focus{outline:none;border-color:#667eea}button[type=submit]{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .2s}button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #66a6ff33}ul{list-style:none;display:flex;flex-direction:column;gap:16px}label{display:flex;align-items:flex-start;gap:16px;background:#f8f9fa;border-radius:12px;padding:20px;transition:transform .2s,box-shadow .2s;border:1px solid #e0e0e0}label:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}li{display:flex;align-items:flex-start;gap:16px;background:#f8f9fa;border-radius:12px;padding:20px;transition:transform .2s,box-shadow .2s;border:1px solid #e0e0e0}li:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.note-content{flex:1}.note-content h2{color:#333;margin-bottom:8px;font-size:1.3rem}.note-content p{color:#666;line-height:1.5;font-size:1rem}button{background:#ff4757;color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:700;transition:background .2s;align-self:flex-start}button:hover{background:#ff3838}@media (max-width: 768px){body{padding:10px}div{padding:20px}h1{font-size:2rem}form{padding:16px}label{flex-direction:column;gap:12px}button{align-self:flex-end}}