:root {
    --ax-primary: #6750A4;
    --ax-bg: #f5f5f7;
    --ax-card: rgba(255, 255, 255, 0.75);
    --ax-error: #b3261e;
    --ax-radius: 28px;
}

body {
    background: linear-gradient(135deg, #e2e2e2, #ffffff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;
}

.ax-card {
    background: var(--ax-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--ax-radius);
    padding: 40px; width: 360px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    text-align: center;
}

.ax-input-group { margin-bottom: 18px; text-align: left; }

.ax-input {
    width: 100%; padding: 16px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.6);
    box-sizing: border-box; outline: none; transition: 0.2s;
}

.ax-input:focus { border-color: var(--ax-primary); box-shadow: 0 0 0 3px rgba(103,80,164,0.2); }
.ax-input.invalid { border: 2px solid var(--ax-error); }

.error-msg { color: var(--ax-error); font-size: 11px; margin-top: 4px; display: none; }

.ax-btn {
    width: 100%; padding: 14px; border-radius: 100px;
    border: none; background: var(--ax-primary); color: white;
    font-weight: 600; cursor: pointer; margin-top: 10px;
}

.meter { display: flex; gap: 4px; margin-top: 8px; }
.step { height: 4px; flex: 1; background: #e0e0e0; border-radius: 4px; transition: 0.3s; }