body, html {
  background-color: #EBECF0;
}

body, p, input, select, textarea, button {
  letter-spacing: -0.2px;
  font-size: 16px;
}

div, p {
  color: #BABECC;
  text-shadow: 1px 1px 1px #FFF;
}

form {
  width: 250px;
  margin: 0 auto;
}

.segment {
  padding: 32px 0;
  text-align: center;
}

button, input {
  border: 0;
  outline: 0;
  font-size: 16px;
  border-radius: 320px;
  padding: 16px;
  background-color: #EBECF0;
  text-shadow: 1px 1px 0 #FFF;
}

label {
  display: block;
  margin-bottom: 24px;
  width: 100%;
}

input {
  box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}
input:focus {
  box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}

button {
  color: #61677C;
  font-weight: bold;
  box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
}
button:hover {
  box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
button:active {
  box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
button .icon {
  margin-right: 8px;
}
button.unit {
  border-radius: 8px;
  line-height: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
  font-size: 19.2px;
}
button.unit .icon {
  margin-right: 0;
}
button.red {
  display: block;
  width: 50%;
  color: #AE1100;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-group label {
  margin: 0;
  flex: 1;
}
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body, html {
            background-color: #EBECF0;
            height: 100%;
            width: 100%;
            font-family: 'Montserrat', sans-serif;
            letter-spacing: -0.2px;
            font-size: 16px;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        /* ===== TYPOGRAPHY & COLORS ===== */
        div, p, label, .form-text {
            color: #BABECC;
            text-shadow: 1px 1px 1px #FFF;
        }

        button, input {
            border: 0;
            outline: 0;
            font-size: 16px;
            border-radius: 320px;
            padding: 16px;
            background-color: #EBECF0;
            text-shadow: 1px 1px 0 #FFF;
            font-family: 'Montserrat', sans-serif;
        }

        label {
            display: block;
            margin-bottom: 24px;
            width: 100%;
        }

        input {
            box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
            width: 100%;
            box-sizing: border-box;
            transition: all 0.2s ease-in-out;
            appearance: none;
            -webkit-appearance: none;
        }

        input:focus {
            box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
        }

        button {
            color: #61677C;
            font-weight: bold;
            box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            font-weight: 600;
        }

        button:hover {
            box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
        }

        button:active {
            box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
        }

        button .icon {
            margin-right: 8px;
        }

        button.unit {
            border-radius: 8px;
            line-height: 0;
            width: 48px;
            height: 48px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 8px;
            font-size: 19.2px;
        }

        button.unit .icon {
            margin-right: 0;
        }

        button.red {
            display: block;
            width: 50%;
            color: #AE1100;
            background: #EBECF0;
        }

        .input-group {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .input-group label {
            margin: 0;
            flex: 1;
        }

        .segment {
            padding: 10px 0px;
            text-align: center;
        }

        .segment h1 {
            font-size: 28px;
            font-weight: 700;
            color: #61677C;
            text-shadow: 1px 1px 0 #FFF;
            letter-spacing: -0.5px;
        }

        /* ===== DIGIT DISPLAY (NEOMORPHIC) ===== */
        .digit-display-container {
            margin: 20px 0 10px;
            width: 100%;
            cursor: pointer;
        }

        .digit-display {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .digit-box {
            width: 52px;
            height: 52px;
            background: #EBECF0;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
            color: #61677C!important;
            text-shadow: 1px 1px 0 #FFF;
            box-shadow: inset 2px 2px 5px #BABECC, inset -3px -3px 7px #FFF;
            transition: all 0.2s ease;
            cursor: pointer;
            user-select: none;
			margin-bottom:20px
        }

        .digit-box.filled {
            box-shadow: -3px -3px 7px #FFF, 3px 3px 7px #BABECC;
            color: #2c3e66;
            text-shadow: 0.5px 0.5px 0 #FFF;
        }

        .digit-box.active {
            box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC, inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
            transform: scale(0.98);
        }

        .digit-separator {
            font-size: 8px;
            font-weight: 600;
            color: #9aa1b5;
            text-shadow: 1px 1px 0 #FFF;
            margin: 0 2px;
        }

        .keyboard-hint {
            text-align: center;
            font-size: 12px;
            color: #9aa1b5;
            margin-top: 12px;
            margin-bottom: 8px;
            text-shadow: 1px 1px 0 #FFF;
        }

        /* ===== PASSWORD SECTION ===== */
        .password-section {
            display: none;
            margin: 20px 0 10px;
            animation: fadeInUp 0.25s ease;
        }

        .password-section.show {
            display: block;
        }

        .input-wrapper {
            position: relative;
            width: 100%;
        } 

        .input-wrapper input {
            width: 100%;
            padding-right: 50px;
            box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
            border-radius: 40px;
        }

        .password-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            box-shadow: none;
            width: auto;
            height: auto;
            padding: 8px;
            color: #8d96ab;
            cursor: pointer;
            border-radius: 50%;
        }

        .password-toggle:hover {
            box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
            background: #EBECF0;
        }

        .password-toggle:active {
            box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
        }

        /* ===== BUTTONS & MESSAGES ===== */
        .action-buttons {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .login-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #EBECF0;
            padding: 14px 32px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 60px;
            color: #61677C;
            box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
            transition: 0.2s;
            cursor: pointer;
            border: none;
            width: auto;
            min-width: 160px;
        }

        .login-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .login-btn:active:not(:disabled) {
            box-shadow: inset 2px 2px 5px #BABECC, inset -3px -3px 7px #FFF;
        }

        .login-message {
            margin: 16px 0 8px;
            padding: 12px 16px;
            border-radius: 60px;
            font-size: 13px;
            font-weight: 500;
            text-align: center;
            display: none;
            background: #EBECF0;
            box-shadow: inset 1px 1px 3px #BABECC, inset -1px -1px 3px #FFF;
            color: #61677C;
        }

        .login-message.error {
            display: block;
            color: #AE1100;
            text-shadow: none;
        }

        .login-message.success {
            display: block;
            color: #2c6e2c;
        }

        .login-message.info {
            display: block;
            color: #2c6e9e;
        }

        .login-message.warning {
            display: block;
            color: #c97e00;
        }

        /* ===== ANIMATIONS ===== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 520px) {

            .digit-box {
                width: 22px;
                height: 32px;
                font-size: 14px;
            }
            .digit-separator {
                font-size: 12px;
                margin: 0 1px;
            }
            .digit-display {
                gap: 5px;
            }
        }

        @media (max-width: 440px) {
            .digit-box {
                width: 48px;
                height: 48px;
                font-size: 20px;
				margin: 15px 5px;
            }
            .digit-separator {
                font-size: 18px;
            }
			.segment {
                padding:10px 0px
            }
        }

        /* ===== LOGO STYLES (NEOMORPHIC ADAPTATION) ===== */
        .svg-container-logo {
            text-align: center;
            margin-bottom: 10px;
        }
        .svg-container-logo svg {
            max-width: 180px;
            height: auto;
            filter: drop-shadow(1px 1px 0 #FFF);
        }
        .fil0, .fil1 {
            fill: #BABECC
        }
.ion-md-log-in:before {
    content: "";
}

.email-section {
    display: none;
    margin-top: 15px;
}

.email-section.show {
    display: block !important;
}