/* ── Lunar Mint Studio — login.css ──────────────────────────────
   Extracted & formatted from login.html
────────────────────────────────────────────────────────────── */

*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;

}

body {
     min-height: 100vh;
     background: #020510;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Outfit',
sans-serif;

}

body::before {
     content: '';
     position: fixed;
     inset: -50%;
     z-index: 0;
     background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(127,252,255,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 70%, rgba(167,139,250,0.06) 0%, transparent 60%);

}

.grecaptcha-badge {
     visibility: hidden !important;

}

body::after {
     content: '';
     position: fixed;
     inset: 0;
     z-index: 0;
     background-image: radial-gradient(1.5px 1.5px at 10% 20%, rgba(127,252,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(2px 2px at 60% 15%, rgba(167,139,250,0.4) 0%, transparent 100%);

}

.card {
     position: relative;
     z-index: 1;
     width: 100%;
     max-width: 400px;
     margin: 20px;
     background: rgba(255,255,255,0.02);
     border: 1px solid rgba(127,252,255,0.1);
     border-radius: 24px;
     padding: 40px 32px;
     backdrop-filter: blur(24px);
     box-shadow: 0 8px 48px rgba(0,0,0,0.6);

}

.logo {
     text-align: center;
     margin-bottom: 28px;

}

.logo .icon {
     font-size: 36px;
     margin-bottom: 8px;

}

.logo h1 {
     font-size: 24px;
     font-weight: 800;
     color: white;

}

.logo h1 span {
     background: linear-gradient(135deg, #7ffcff, #a78bfa);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;

}

.logo p {
     font-size: 11px;
     color: rgba(255,255,255,0.25);
     margin-top: 3px;
     letter-spacing: 2px;
     text-transform: uppercase;

}

.tabs {
     display: flex;
     background: rgba(255,255,255,0.03);
     border-radius: 12px;
     padding: 4px;
     gap: 4px;
     margin-bottom: 24px;

}

.tab {
     flex: 1;
     padding: 9px;
     border: none;
     border-radius: 9px;
     background: transparent;
     color: rgba(255,255,255,0.4);
     font-family: 'Outfit',
sans-serif;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;

}

.tab.active {
     background: rgba(127,252,255,0.1);
     color: #7ffcff;
     border: 1px solid rgba(127,252,255,0.2);

}

.form-group {
     margin-bottom: 14px;

}

.form-group label {
     display: block;
     font-size: 11px;
     color: rgba(255,255,255,0.4);
     margin-bottom: 5px;
     letter-spacing: .5px;
     text-transform: uppercase;

}

.input-wrap {
     position: relative;

}

.input-wrap .ico {
     position: absolute;
     left: 13px;
     top: 50%;
     transform: translateY(-50%);
     color: rgba(127,252,255,0.35);
     font-size: 13px;
     pointer-events: none;

}

.input-wrap input {
     width: 100%;
     padding: 11px 40px 11px 38px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 10px;
     color: white;
     font-family: 'Outfit',
sans-serif;
     font-size: 13.5px;
     outline: none;
     transition: border-color .2s;

}

.input-wrap input:focus {
     border-color: rgba(127,252,255,0.35);

}

.input-wrap input::placeholder {
     color: rgba(255,255,255,0.18);

}

.eye-btn {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: rgba(255,255,255,0.25);
     cursor: pointer;
     padding: 4px;

}

.eye-btn:hover {
     color: rgba(255,255,255,0.5);

}

.pw-strength {
     margin-top: 6px;
     display: none;

}

.pw-bar {
     height: 3px;
     border-radius: 3px;
     background: rgba(255,255,255,0.06);

}

.pw-fill {
     height: 100%;
     border-radius: 3px;
     transition: all .3s;
     width: 0;

}

.pw-label {
     font-size: 11px;
     margin-top: 3px;

}

.forgot-row {
     text-align: right;
     margin: -6px 0 10px;

}

.forgot-row button {
     background: none;
     border: none;
     color: rgba(127,252,255,0.5);
     font-size: 12px;
     cursor: pointer;
     font-family: 'Outfit',
sans-serif;

}

.forgot-row button:hover {
     color: #7ffcff;

}

.btn-main {
     width: 100%;
     padding: 13px;
     margin-top: 6px;
     background: linear-gradient(135deg, rgba(127,252,255,0.12), rgba(167,139,250,0.12));
     border: 1px solid rgba(127,252,255,0.28);
     border-radius: 12px;
     color: #7ffcff;
     font-family: 'Outfit',
sans-serif;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: all .2s;

}

.btn-main:hover {
     background: linear-gradient(135deg, rgba(127,252,255,0.2), rgba(167,139,250,0.2));

}

.btn-main:disabled {
     opacity: .45;
     cursor: not-allowed;

}

.err {
     display: none;
     margin-top: 12px;
     padding: 10px 13px;
     border-radius: 8px;
     background: rgba(239,68,68,0.1);
     border: 1px solid rgba(239,68,68,0.25);
     color: #fca5a5;
     font-size: 13px;
     text-align: center;

}

.err.show {
     display: block;

}

.recaptcha-note {
     text-align: center;
     margin-top: 12px;
     font-size: 10px;
     color: rgba(255,255,255,0.15);

}


/* Modal */
#modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: rgba(0,0,0,0.8);
     backdrop-filter: blur(8px);
     align-items: center;
     justify-content: center;

}

#modal.open {
     display: flex;

}

.modal-box {
     background: #0a0f25;
     border: 1px solid rgba(127,252,255,0.15);
     border-radius: 20px;
     padding: 36px 28px;
     max-width: 340px;
     width: 90%;
     text-align: center;

}

.modal-icon {
     font-size: 48px;
     margin-bottom: 14px;

}

.modal-title {
     color: white;
     font-size: 19px;
     font-weight: 800;
     margin-bottom: 10px;

}

.modal-desc {
     color: rgba(255,255,255,0.5);
     font-size: 13.5px;
     line-height: 1.7;
     margin-bottom: 24px;

}

.modal-desc a,
.modal-desc .resend {
     color: #7ffcff;
     font-weight: 700;
     cursor: pointer;
     background: none;
     border: none;
     font-family: 'Outfit',
sans-serif;
     font-size: inherit;
     text-decoration: underline;

}

.modal-btn {
     width: 100%;
     padding: 13px;
     border-radius: 12px;
     background: linear-gradient(135deg, rgba(127,252,255,0.14), rgba(167,139,250,0.14));
     border: 1px solid rgba(127,252,255,0.3);
     color: #7ffcff;
     font-family: 'Outfit',
sans-serif;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;

}