*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding-top:80px}.container{width:100%;max-width:700px;padding:0 20px}.card{background:#fff;border-radius:12px;padding:40px;box-shadow:0 2px 8px #00000014}h1{display:flex;align-items:center;gap:12px;color:#333;font-size:1.75rem;font-weight:700;margin-bottom:30px}h1 .logo{height:40px;width:auto}h1 .title-left{text-align:left}h1 .title-right{flex:1;text-align:right}form{display:flex;flex-direction:column;gap:8px}label{color:#333;font-size:.95rem;font-weight:500}input{padding:12px 14px;border:1px solid #ddd;border-radius:6px;font-size:1rem;outline:none;transition:border-color .2s}input:focus{border-color:#0084ff}input::placeholder{color:#999}button{margin-top:8px;padding:14px;background-color:#0084ff;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}button:hover{background-color:#0073e6}button:active{background-color:#06c}.result{background-color:#e8f4fd;border-radius:6px;border-left:4px solid #0084ff;font-size:.95rem;color:#333;overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease-out,opacity .3s ease-out,padding .3s ease-out,margin .3s ease-out;padding:0 16px;margin-top:0}.result.visible{max-height:200px;opacity:1;padding:14px 16px;margin-top:16px}.result.hidden{max-height:0;opacity:0;padding:0 16px;margin-top:0}.result.success{background-color:#e8f8ed;border-left-color:#28a745}.result.error{background-color:#fde8e8;border-left-color:#dc3545}
