@media screen and (min-device-width: 300px) and (max-device-width: 480px) {
        .bar {
            text-align: right;
        }

        .mob-nav {
            text-align: center;
            display: inline-block;
        }

        .bnt {
            margin-bottom: 5px;
        }
    }

    /* request loader css start */
    .request-loader {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #0000007a;
        z-index: 10000;
        display: none;
    }

    .request-loader img {
        position: fixed;
        display: none;
        width: 80px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .request-loader.show {
        display: block;
    }

    .request-loader.show img {
        display: block;
    }

    main {
        margin: 0;
        min-height: 75vh;
        display: grid;
        grid-template-rows: 1fr auto;
    }

    footer {
        background: #6c757d;
        color: #fff;
        padding-top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer p {
        margin-top: 7px;
    }

    .thumb-preview {
        background: #f1f1f1;
        display: inline-block;
        padding: 5px;
        border-radius: 8px;
        max-width: 300px;
    }

    .thumb-preview img {
        max-width: 100%;
    }

    .form-group .upload-btn {
        position: relative;
        overflow: hidden;
    }

    .form-group .upload-btn .img-input,
    .form-group .upload-btn .img-input2,
    .form-group .upload-btn .img-input3,
    .form-group .upload-btn .img-input4,
    .form-group .upload-btn .img-input5,
    .thumb-img-input,
    .cover-img-input,
    .background-img-input {
        position: absolute;
        top: 5px;
        left: 10px;
        margin: 0;
        border: solid transparent;
        width: 112px;
        opacity: 0;
    }

    /* Rounded image utility */
    .rounded-img {
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        display: inline-block;
        object-fit: cover;
        /* keeps aspect while filling the box */
    }

    /* Auth (login) page styles */
    .auth-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f6f8fb 0%, #e9eef7 100%);
        padding: 2rem;
    }

    .auth-card {
        width: 100%;
        max-width: 420px;
        border: none;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(20, 30, 50, 0.12);
        overflow: hidden;
    }

    .auth-card .card-header {
        background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
        padding: 2.25rem 1rem;
        text-align: center;
    }

    .auth-logo {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        display: inline-block;
        background: #fff;
        padding: 6px;
        box-shadow: 0 6px 18px rgba(79, 70, 229, 0.14);
        object-fit: cover;
    }

    .auth-card .card-body {
        padding: 1.75rem;
    }

    .auth-input {
        border-radius: 8px;
        height: 46px;
    }

    .auth-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .auth-forgot {
        font-size: 0.9rem;
    }

    .auth-error-list {
        margin-bottom: 1rem;
    }

    .input-group .btn-outline-secondary {
        border-radius: 0 8px 8px 0;
    }