body {
           margin: 0;
           font-family: "Segoe UI", Arial, sans-serif;
           background: linear-gradient(135deg, #f68b1e, #ffb347);
       }

       .wrapper {
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 15px;
       }

       .card {
           background: #fff;
           width: 100%;
           max-width: 420px;
           padding: 26px 22px 30px;
           border-radius: 14px;
           box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
       }

       h3 {
           text-align: center;
           margin-bottom: 18px;
           color: #333;
       }

       .input-group {
           position: relative;
           display: flex;
           align-items: center;
           background: #fff;
           border: 1px solid #ddd;
           border-radius: 10px;
           margin-top: 14px;
           padding: 0 12px;
           transition: border .2s, box-shadow .2s;
       }

       .input-group:focus-within {
           border-color: #f68b1e;
           box-shadow: 0 0 0 2px rgba(246, 139, 30, .15);
       }

       .input-group i {
           color: #888;
           font-size: 14px;
           margin-right: 8px;
       }

       .input-group input {
           border: none;
           outline: none;
           flex: 1;
           padding: 13px 6px;
           font-size: 14px;
           background: transparent;
       }

       .toggle {
           position: absolute;
           right: 12px;
           cursor: pointer;
           color: #888;
           font-size: 14px;
       }

       .helper {
           font-size: 12px;
           color: #777;
           margin-top: 6px;
       }

       button {
           width: 100%;
           padding: 14px;
           margin-top: 20px;
           background: #f68b1e;
           color: #fff;
           border: none;
           border-radius: 10px;
           font-size: 16px;
           font-weight: bold;
           cursor: pointer;
           transition: background .2s, transform .1s, opacity .2s;
       }

       button:hover {
           background: #e57e16;
       }

       button:active {
           transform: scale(.98);
       }

       button[disabled] {
           opacity: .7;
           cursor: not-allowed;
       }

       .messages p {
           padding: 11px 12px;
           border-radius: 8px;
           font-size: 14px;
           margin-bottom: 10px;
       }

       .error {
           background: #ffe3e3;
           color: #c00;
       }

       .success {
           background: #e7f9ed;
           color: #1b7f4b;
       }

       .link {
           text-align: center;
           margin-top: 18px;
           font-size: 14px;
       }

       .link a {
           color: #0066ff;
           font-weight: bold;
           text-decoration: none;
       }

       .link a:hover {
           text-decoration: underline;
       }