:root {
    --csc-navy: #082f6b;
    --csc-blue: #0b5ed7;
    --csc-blue-dark: #08449a;
    --csc-orange: #f97316;
    --csc-green: #16a34a;
    --csc-ink: #172033;
    --csc-muted: #667085;
    --csc-line: #dce5f1;
    --csc-page: #eef5ff;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh !important;
    margin: 0 !important;
    color: var(--csc-ink) !important;
    font-family: "Inter", "Poppins", Arial, sans-serif !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(56,189,248,.20), transparent 24rem),
        radial-gradient(circle at 90% 88%, rgba(37,99,235,.16), transparent 28rem),
        linear-gradient(135deg, #f8fbff 0%, #eaf3ff 52%, #f4f8ff 100%) !important;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10000;
    background: linear-gradient(
        90deg,
        #ff7a00 0 33.33%,
        #fff 33.33% 66.66%,
        #138808 66.66% 100%
    );
}

.bg-shape {
    opacity: .12 !important;
    filter: blur(90px) !important;
}

.shape-1 {
    background: #38bdf8 !important;
}

.shape-2 {
    background: #2563eb !important;
}

.shape-3 {
    background: #f97316 !important;
}

.navbar {
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    padding: 0 !important;
    color: var(--csc-ink) !important;
    background: rgba(255,255,255,.94) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15,76,150,.11) !important;
    box-shadow: 0 8px 30px rgba(15,76,150,.07) !important;
    backdrop-filter: blur(16px) !important;
}

.nav-container {
    width: min(1180px, calc(100% - 40px)) !important;
    min-height: 76px !important;
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
}

.logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: var(--csc-navy) !important;
    text-decoration: none !important;
    font-size: 0 !important;
    font-weight: 800 !important;
}

.logo img {
    display: none !important;
}

.logo::before {
    content: "C";
    width: 45px;
    height: 45px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #0b5ed7, #073b88);
    box-shadow: 0 9px 20px rgba(11,94,215,.24);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 800;
}

.logo::after {
    content: "CSCHELP";
    color: var(--csc-navy);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.nav-links {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px !important;
    list-style: none;
}

.nav-links li a {
    display: block;
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 10px;
    color: #42526b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none;
    text-shadow: none !important;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--csc-blue) !important;
    background: #eaf3ff !important;
}

.mobile-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--csc-line) !important;
    border-radius: 12px;
    color: var(--csc-navy) !important;
    background: #fff !important;
    place-items: center;
}

.login-container,
.register-container,
.forgot-container,
.contact-container {
    width: 100% !important;
    flex: 1 !important;
    padding: 45px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    z-index: 5;
}

.login-card,
.register-card,
.forgot-card,
.contact-card {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    padding: 34px !important;
    border: 1px solid rgba(174,199,230,.70) !important;
    border-radius: 25px !important;
    color: var(--csc-ink) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow:
        0 28px 70px rgba(25,72,133,.15),
        0 4px 15px rgba(25,72,133,.05) !important;
    backdrop-filter: blur(16px);
    transform: none !important;
    overflow: hidden;
}

.forgot-card {
    max-width: 480px !important;
}

.contact-card {
    max-width: 570px !important;
}

.login-card::before,
.register-card::before,
.forgot-card::before,
.contact-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 30px !important;
    right: 30px !important;
    width: auto !important;
    height: 4px !important;
    border-radius: 0 0 8px 8px !important;
    background: linear-gradient(
        90deg,
        var(--csc-orange),
        var(--csc-blue),
        var(--csc-green)
    ) !important;
}

.login-card:hover,
.register-card:hover,
.forgot-card:hover,
.contact-card:hover {
    transform: none !important;
}

.login-header,
.register-header,
.forgot-header,
.contact-header {
    margin-bottom: 27px !important;
    text-align: center !important;
}

.login-header h1,
.register-header h1,
.forgot-header h1,
.contact-header h1 {
    margin: 0 0 8px !important;
    color: #12284d !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.8px !important;
}

.login-header p,
.register-header p,
.forgot-header p,
.contact-header p {
    margin: 0 !important;
    color: var(--csc-muted) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.contact-icon,
.forgot-header > i {
    width: 54px;
    height: 54px;
    margin: 0 auto 17px !important;
    border-radius: 16px;
    color: #fff !important;
    background: linear-gradient(145deg, #0b5ed7, #073b88);
    box-shadow: 0 9px 20px rgba(11,94,215,.22);
    display: grid !important;
    place-items: center;
    font-size: 26px !important;
}

.form-row {
    display: flex;
    gap: 15px !important;
}

.form-col {
    min-width: 0;
    flex: 1;
}

.form-group {
    margin-bottom: 18px !important;
}

.form-label {
    display: block !important;
    margin-bottom: 7px !important;
    color: #263a59 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.form-control,
.form-select,
.input-group input {
    width: 100% !important;
    min-height: 50px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--csc-line) !important;
    border-radius: 12px !important;
    color: var(--csc-ink) !important;
    background: #f9fbfe !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
}

.form-select option {
    color: var(--csc-ink) !important;
    background: #fff !important;
}

.form-control:focus,
.form-select:focus,
.input-group input:focus {
    border-color: #78aef3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.09) !important;
}

.form-control::placeholder,
.input-group input::placeholder {
    color: #98a6b9 !important;
}

textarea.form-control {
    min-height: 115px !important;
    resize: vertical;
}

.password-input {
    position: relative;
}

.password-input .form-control {
    padding-right: 48px !important;
}

.toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #7890ad !important;
    background: transparent !important;
    display: grid !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    cursor: pointer;
}

.toggle-password:hover {
    color: var(--csc-blue) !important;
    background: #eaf3ff !important;
}

.login-btn,
.register-btn,
.submit-btn {
    width: 100% !important;
    min-height: 51px !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: linear-gradient(100deg, #0b5ed7, #0847a1) !important;
    box-shadow: 0 12px 24px rgba(11,94,215,.23) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.login-btn:hover,
.register-btn:hover,
.submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 28px rgba(11,94,215,.30) !important;
}

.login-link,
.register-link,
.back-to-login,
.check-status-link {
    margin-top: 20px !important;
    color: var(--csc-muted) !important;
    font-size: 12px !important;
    text-align: center !important;
}

.login-link a,
.register-link a,
.back-to-login a,
.check-status-link a {
    color: var(--csc-blue) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.instructions {
    margin: 18px 0 !important;
    padding: 14px !important;
    border: 1px solid #d8e7fa !important;
    border-radius: 12px !important;
    color: #506078 !important;
    background: #f1f7ff !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

.footer {
    padding: 20px !important;
    color: #6c7d92 !important;
    font-size: 11px !important;
    text-align: center !important;
    position: relative;
    z-index: 5;
}

.alert-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 2000 !important;
}

.alert {
    padding: 13px 16px !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: #0b5ed7 !important;
    box-shadow: 0 12px 35px rgba(15,23,42,.20) !important;
}

/* Registration activation payment page */
body > .container:not(.nav-container) {
    width: min(94%, 520px) !important;
    max-width: 520px !important;
    margin: 45px auto !important;
    padding: 0 !important;
    border: 1px solid rgba(174,199,230,.70) !important;
    border-radius: 25px !important;
    background: #fff !important;
    box-shadow: 0 28px 70px rgba(25,72,133,.16) !important;
    overflow: hidden !important;
}

body > .container:not(.nav-container) > .header {
    padding: 27px 25px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 90% 15%, rgba(56,189,248,.35), transparent 15rem),
        linear-gradient(120deg, #0b5ed7, #083b85) !important;
    text-align: center;
}

body > .container:not(.nav-container) > .header h1 {
    margin: 0 0 7px !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

body > .container:not(.nav-container) > .header p {
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 12px !important;
}

body > .container:not(.nav-container) > .content {
    padding: 27px !important;
    text-align: center;
}

.user-info {
    padding: 14px !important;
    border: 1px solid #e0e8f3 !important;
    border-radius: 14px !important;
    color: #43536a !important;
    background: #f7f9fc !important;
}

.user-info h2 {
    margin: 0 0 8px !important;
    color: #183254 !important;
    font-size: 18px !important;
}

.amount {
    margin: 20px 0 !important;
    color: var(--csc-blue) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
}

.qr-container {
    margin: 15px auto !important;
    padding: 14px !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 17px !important;
    background: #fff !important;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(33,67,108,.08);
}

.qr-image {
    width: min(230px, 70vw) !important;
    height: auto !important;
    display: block;
}

.payment-method,
.status,
.utr-section {
    margin: 16px 0 !important;
    padding: 14px !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 13px !important;
    color: #43536a !important;
    background: #f7f9fc !important;
    font-size: 12px !important;
}

.status.pending,
.status.checking {
    color: #8a5a00 !important;
    border-color: #fde6a7 !important;
    background: #fff9e8 !important;
}

.utr-section h3 {
    color: #183254 !important;
    font-size: 16px !important;
}

.input-group {
    position: relative;
    margin: 13px 0;
}

.input-group > i {
    display: none;
}

.btn {
    min-height: 44px;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.btn-success {
    background: #16a34a !important;
}

.btn-secondary {
    background: #64748b !important;
}

@media (max-width: 720px) {
    .mobile-toggle {
        display: grid !important;
    }

    .nav-container {
        flex-wrap: wrap !important;
    }

    .nav-links {
        display: none !important;
        width: 100% !important;
        padding: 10px 0 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links li a {
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .login-card,
    .register-card,
    .forgot-card,
    .contact-card {
        padding: 27px 20px !important;
        border-radius: 21px !important;
    }

    .login-container,
    .register-container,
    .forgot-container,
    .contact-container {
        padding: 30px 12px !important;
    }
}