body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
}

/* HEADER */

.header {
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 60px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 150px;
    height: 130px;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    border-radius: 50%;
}

.brand h2 {
    margin: 0;
    color: #0d6efd;
    font-size: 28px;
}

.brand span {
    color: #666;
    font-size: 14px;
}

.header nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}

/* NAVIGATION */

.main-nav {
    display: flex;
    gap: 10px;
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: .3s;
}

.main-nav a:hover {
    color: #0d6efd;
}

.main-nav .active {
    color: #0d6efd;
}

/* BUTTONS */

.login-btn {
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 8px;
    border: 2px solid #0d6efd;
    color: #0d6efd;
    font-weight: bold;
    margin-right: 10px;
}

.register-btn {
    text-decoration: none;
    padding: 11px 24px;
    border-radius: 8px;
    background: #0d6efd;
    color: white;
    font-weight: bold;
}

.account-select {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.logout-btn {
    padding: 10px 20px;
    border: none;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

/* HERO */
/* HERO */

.hero {
    background:
        linear-gradient(rgba(0, 0, 0, .60),
            rgba(0, 0, 0, .60)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80");

    background-size: cover;
    background-position: center;
    min-height: auto;
    padding: 15px 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-overlay {
    width: 90%;
    max-width: 1200px;
}

.hero h1 {
    font-size: 58px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero span {
    color: #4ea5ff;
}

.hero p {
    font-size: 22px;
    color: #ddd;
    margin-bottom: 40px;
}

/* HERO STATS */

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.hero-stat {
    background: rgb(16 15 15 / 12%);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 20px 35px;
    min-width: 170px;
}

.hero-stat h3 {
    font-size: 34px;
    margin: 0;
}

.hero-stat span {
    color: #1527fb;
    font-size: 15px;
}

/* SEARCH */

.search-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background: white;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.search-box input,
.search-box select {
    width: 220px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

.search-box button {
    padding: 12px 26px;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
}

.search-box button:hover {
    background: #0b5ed7;
}

.view-button {
    padding: 12px 26px;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    flex: 1;
}

.view-button:hover {
    background: #0b5ed7;
}

/* ======================================
   LOAD MORE ADS BUTTON
====================================== */

.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.load-more-btn {
    padding: 13px 32px;
    background: #0d6efd;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: .3s;
    box-shadow: 0 5px 15px rgba(13, 110, 253, .20);
}

.load-more-btn:hover {
    background: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 110, 253, .25);
}

.load-more-btn:active {
    transform: translateY(0);
}


/* ===========================
   HOMEPAGE CATEGORY GRID
=========================== */

.categories {
    background: #fff;
    padding: 18px 0;
}

.category-slider {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: 22px 12px;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 12px 24px 20px;
    overflow: visible;
}

.category-item {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}

.category-item i {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #ff7a00;
    font-size: 30px;
    border: 2px solid #ffe5cc;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: .3s;
}

.category-item:hover i {
    transform: translateY(-6px);
    background: #ff7a00;
    color: #fff;
    border-color: #ff7a00;
    box-shadow: 0 16px 35px rgba(255, 122, 0, .30);
}

.category-item span {
    display: block;
    width: 100%;
    min-height: 2.5em;
    margin-top: 9px;
    padding: 0 2px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    color: #333;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.auth-area {
    display: flex;
    justify-content: center;
}

/* ADS */
.ads {
    padding: 50px 40px;
    background: #f7f9fc;
}

#featuredAds {
    gap: 35px;
    margin-top: 40px;
}

.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.ad-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    transition: .3s;
}

.ad-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
}

.ad-card img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #f5f7fb;
    display: block;
}

.ad-image {
    overflow: hidden;
}

.ad-image img {
    transition: .35s;
}

.ad-card:hover .ad-image img {
    transform: scale(1.05);
}

.ad-content {
    padding: 20px;
}

.ad-content h3 {
    margin: 0 0 12px;
    font-size: 22px;
    color: #222;
}

.ad-category {
    color: #0d6efd;
    font-weight: 700;
    margin-bottom: 10px;
}

.ad-location,
.ad-phone {
    color: #666;
    margin: 8px 0;
    font-size: 15px;
}

.ad-location i,
.ad-phone i {
    color: #0d6efd;
    margin-right: 8px;
}

.ad-buttons {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.watch {
    background: #2e7d32;
    color: white;
    border: none;
    padding: 8px;
    margin-top: 10px;
}

/* PLAY BUTTON */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.call {
    flex: 1;
    background: linear-gradient(45deg, #ff7043, #ff5722);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
}

.call {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.call:hover {
    transform: translateY(-2px);
}

/* MODAL BACKGROUND */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

/* MODAL BOX */
.modal-content {
    position: relative;
    width: 60%;
    margin: 5% auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

/* VIDEO */
.modal video {
    width: 100%;
    border-radius: 10px;
}

/* CLOSE BUTTON */
.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 25px;
    cursor: pointer;
}

/* AUTH PAGE */
.auth-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #e8f5e9, #ffffff);
}

.form-box {
    background: white;
    padding: 30px;
    width: 320px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.form-box h2 {
    margin-bottom: 20px;
}

.form-box input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
}

.form-box button {
    width: 100%;
    padding: 10px;
    background: #2e7d32;
    color: white;
    border: none;
    margin-top: 10px;
    cursor: pointer;
}

.form-box span {
    color: #2e7d32;
    cursor: pointer;
}

/* CREATE AD PAGE */
.ad-form-container {
    max-width: 500px;
    margin: 40px auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.ad-form-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.ad-form-container input,
.ad-form-container select,
.ad-form-container textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

.ad-form-container button {
    width: 100%;
    padding: 12px;
    background: #2e7d32;
    color: white;
    border: none;
    cursor: pointer;
}

/* PROFILE PAGE */
.profile-container {
    max-width: 700px;
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.profile-header {
    text-align: center;
}

.profile-video video {
    width: 100%;
    border-radius: 10px;
    margin-top: 15px;
}

.profile-desc {
    margin: 15px 0;
}

.profile-actions {
    display: flex;
    gap: 10px;
}

.doc-upload {
    margin-top: 30px;
    padding: 15px;
    background: #f1f8f2;
    border-radius: 10px;
}

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

    /* HERO */
    .hero h1 {
        font-size: 38px;
    }

    .search-box {
        flex-direction: column;
    }

    .search-box input,
    .search-box select,
    .search-box button {
        width: 92%;
    }

    /* ===========================
   CATEGORY SLIDER
=========================== */

    .category-slider {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px 8px;
        padding: 12px 12px 18px;
    }

    .category-item {
        width: 100%;
        min-width: 0;
    }

    .category-item i {
        width: clamp(54px, 14vw, 68px);
        height: clamp(54px, 14vw, 68px);
        font-size: 26px;
    }

    .category-item:hover i {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(31, 109, 242, .20);
    }

    .category-item span {
        margin-top: 9px;
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.25;
        min-height: 2.5em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .categories {
        padding: 18px 0;
    }

    /* ADS GRID */
    .ad-grid {
        grid-template-columns: 1fr;
    }

    .ad-card {
        width: 100%;
    }

    /* FORM */
    .ad-form-container {
        width: 90%;
        margin: 20px auto;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* PROFILE */
    .profile-container {
        width: 90%;
    }

    /* AUTH */
    .form-box {
        width: 90%;
    }

    /* MODAL */
    .modal-content {
        width: 90%;
        margin-top: 20%;
    }
}

/*==========================================
DASHBOARD OVERVIEW
==========================================*/

.dashboard-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 35px;
}

.overview-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.overview-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #16213e;
}

.overview-card p {
    line-height: 1.8;
    color: #555;
}

.overview-card button {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

.overview-card button:hover {
    background: #0b5ed7;
}

/* ADMIN PANEL */
.admin-container {
    max-width: 600px;
    margin: 30px auto;
}

.admin-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

/*==========================================
USER STATUS BADGES
==========================================*/

.status-badge {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
}

.status-active {
    background: #198754;
}

.status-approved {
    background: #198754;
}

.status-pending {
    background: #ffc107;
    color: #222;
}

.status-banned {
    background: #dc3545;
}

.status-rejected {
    background: #6c757d;
}

.status {
    padding: 5px 10px;
    border-radius: 20px;
}

.pending {
    background: orange;
    color: white;
}

.approved {
    background: green;
    color: white;
}

.rejected {
    background: red;
    color: white;
}

.admin-actions {
    margin-top: 15px;
}

.admin-actions button {
    margin-right: 10px;
    padding: 8px 15px;
    border: none;
    cursor: pointer;
}

.approve {
    background: green;
    color: white;
}

.reject {
    background: red;
    color: white;
}

.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    font-size: 18px;
}

.form-box {
    position: relative;
}

/*==========================================
ADMIN LAYOUT
==========================================*/

.admin-layout {
    display: flex;
    min-height: 100vh;
    background: #f5f7fb;
}

/*==========================
SIDEBAR
==========================*/

.admin-sidebar {
    width: 270px;
    background: #16213e;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 30px 22px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, .12);
    overflow-y: auto;
}

/* LOGO */

.admin-sidebar h2 {
    margin: 0;
    font-size: 32px;
    text-align: center;
    font-weight: 700;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* MENU ITEM */

.admin-sidebar li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

/* HOVER */

.admin-sidebar li:hover {
    background: #0d6efd;
    transform: translateX(6px);
}

/* ACTIVE */

.admin-sidebar li.active {
    background: #0d6efd;
    box-shadow: 0 8px 18px rgba(13, 110, 253, .35);
}


/* SUB TITLE */

.admin-sidebar::after {
    content: "ADMIN PANEL";
    display: block;
    text-align: center;
    color: #8ea6d8;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 8px;
    margin-bottom: 35px;
}

.admin-section {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.admin-section h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 28px;
    color: #16213e;
}

.admin-main h1 {
    font-size: 34px;
    margin-bottom: 30px;
    color: #16213e;
}

/* MAIN */

.admin-main {
    flex: 1;
    margin-left: 270px;
    padding: 45px;
    background: #f5f7fb;
    min-height: 100vh;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.stat-card {
    background: linear-gradient(135deg, #0d6efd, #3f8cff);
    color: #fff;
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 12px 25px rgba(13, 110, 253, .25);
    transition: .3s;
}

.stat-card:hover {
    transform: translateY(-6px);
}

.stat-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.stat-card p {
    margin-top: 18px;
    font-size: 38px;
    font-weight: bold;
}

/*==========================================
FOOTER
==========================================*/

.footer {
    background: #0f172a;
    color: #fff;
    margin-top: 10px;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    padding: 60px 30px 40px;
}

.footer-logo {
    width: 90px;
    height: auto;
    margin-bottom: 15px;
}

.footer-col h2 {
    margin: 0 0 15px;
    color: #fff;
}

.footer-col h3 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 20px;
}

.footer-col p {
    color: #cbd5e1;
    line-height: 1.8;
    margin: 8px 0;
}

.footer-col a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    margin: 10px 0;
    transition: .25s;
}

.footer-col a:hover {
    color: #60a5fa;
    padding-left: 6px;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.footer-social a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e293b;
    color: #fff;
    transition: .25s;
}

.footer-social a:hover {
    background: #2563eb;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    padding: 22px;
    color: #cbd5e1;
    font-size: 14px;
    margin-bottom: 50px;
}

.footer-bottom a {
    color: #60a5fa;
    text-decoration: none;
    margin: 0 8px;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.header a {
    margin-left: 10px;
}

.verification-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: .3s;
}

.verification-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
}

.document-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.document-box {
    background: #f8f9fb;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    border: 1px solid #ececec;
}

.document-box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

.verification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.approve-btn,
.reject-btn,
.ban-btn {
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: .25s;
}

.approve-btn {
    background: #198754;
    color: #fff;
}

.reject-btn {
    background: #ffc107;
    color: #222;
}

.ban-btn {
    background: #dc3545;
    color: #fff;
}

.approve-btn:hover,
.reject-btn:hover,
.ban-btn:hover {
    transform: translateY(-2px);
}

.admin-search {
    margin-bottom: 25px;
}

.admin-search input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #d8dce5;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
}

.admin-search input:focus {
    border-color: #0d6efd;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.admin-table thead {
    background: #16213e;
    color: #fff;
}

.admin-table th,
.admin-table td {
    padding: 16px;
    text-align: left;
    vertical-align: middle;
    word-break: break-word;
}

.admin-table tr:hover {
    background: #f8faff;
}

.admin-table button {
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 6px;
    font-weight: 600;
}

.admin-table button:first-child {
    background: #0d6efd;
    color: #fff;
}

.admin-table button:last-child {
    background: #dc3545;
    color: #fff;
}

.admin-table th {
    background: #16213e;
    color: #fff;
    font-weight: 600;
}

.admin-table td:last-child {
    white-space: nowrap;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

.filter-bar button {
    border: none;
    background: #eef3ff;
    color: #0d6efd;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: .25s;
}

.filter-bar button:hover {
    background: #0d6efd;
    color: #fff;
}

.seller-container {
    padding: 30px;
}

.seller-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.remove-ad {
    background: #f57c00;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
}

.ban-ad {
    background: #d32f2f;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
}

.ban-user {
    background: #d32f2f;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
}

.unban-user {
    background: #2e7d32;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
}

#advertiserDocs {
    margin-top: 15px;
}

#advertiserDocs label {
    display: block;
    text-align: left;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
}

#advertiserDocs input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
}

/* ================================
LATEST ADS
================================ */

.latest-section {
    background: white;
}

/* ================================
WHY NCREATORS
================================ */

.why-section {
    padding: 80px 40px;
    background: #eef4fb;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.why-card {
    background: white;
    padding: 35px;
    text-align: center;
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

.why-card i {
    font-size: 48px;
    color: #0d6efd;
    margin-bottom: 20px;
}

.why-card h3 {
    margin-bottom: 15px;
}

/* ================================
JOIN
================================ */

.join-section {
    background: #0d6efd;
    color: white;
    text-align: center;
    padding: 90px 30px;
}

.join-section h2 {
    font-size: 42px;
    margin-bottom: 20px;
}

.join-section p {
    max-width: 700px;
    margin: auto auto 35px;
    font-size: 18px;
    line-height: 1.7;
}

.join-section .register-btn {
    background: white;
    color: #0d6efd;
}

/*==========================================
 MARKETPLACE CARD
==========================================*/

.market-card {
    background: white;
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    transition: .3s;
}

.market-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, .15);
}

.market-image {
    position: relative;
}

.market-image img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #f5f7fb;
    display: block;
}

.verified-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #0d6efd;
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

.market-body {
    padding: 25px;
}

.market-body h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 25px;
}

.market-body p {
    margin: 12px 0;
    color: #555;
}

.market-body i {
    color: #0d6efd;
    width: 22px;
}

.details-btn {
    margin-top: 20px;
    width: 100%;
    padding: 14px;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.details-btn:hover {
    background: #0b5ed7;
}

/*==========================================
PUBLIC AD DETAILS PAGE
==========================================*/

.public-ad-page {
    max-width: 1300px;
    margin: 40px auto;
}

.public-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

/*==========================================
IMAGE GALLERY
==========================================*/

.public-gallery {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.main-ad-image {
    width: 100%;
    height: 520px;
    object-fit: contain;
    background: #f5f7fb;
    border-radius: 15px;
    display: block;
}

.thumb-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.thumb-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
    border: 3px solid transparent;
}

.thumb-image:hover {
    transform: scale(1.05);
    border-color: #0d6efd;
}

/*==========================================
BUSINESS INFO
==========================================*/

.public-info {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.public-info h1 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 38px;
    color: #222;
}

.public-info p {
    font-size: 18px;
    margin: 18px 0;
    line-height: 1.6;
}

.public-info strong {
    color: #0d6efd;
}

/*==========================================
CONTACT BUTTONS
==========================================*/

.contact-buttons {
    margin-top: 35px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.call-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    background: #0d6efd;
    color: #fff;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    transition: .3s;
}

.call-btn:hover {
    background: #0b5ed7;
}

.whatsapp-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    background: #25D366;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    transition: .25s;
}

.whatsapp-btn:hover {
    background: #1ebe5d;
}

/*==========================================
VIDEO
==========================================*/

.public-video {
    margin-top: 40px;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.public-video h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.public-video video {
    width: 100%;
    border-radius: 15px;
}

/*==========================================
DESCRIPTION
==========================================*/

.public-description {
    margin-top: 40px;
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.public-description h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.public-description p {
    line-height: 1.8;
    font-size: 17px;
    color: #555;
}

/*==========================================
RELATED ADS
==========================================*/

#relatedAds {
    margin-top: 50px;
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/*==========================================
MOBILE
==========================================*/

@media(max-width:900px) {

    .public-top {
        grid-template-columns: 1fr;
    }

    .main-ad-image {
        height: 320px;
    }

    .thumb-image {
        width: 70px;
        height: 70px;
    }

    .contact-buttons {
        flex-direction: column;
    }

    .call-btn,
    .whatsapp-btn {
        width: 100%;
    }

}

/*==========================================
SELLER DASHBOARD
==========================================*/

.seller-dashboard {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 25px;
}

.seller-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.seller-top h1 {
    margin: 0;
    font-size: 38px;
}

.seller-top p {
    margin: 8px 0 0;
    color: #666;
}

.dashboard-menu {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.dashboard-menu a {
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 10px;
    background: white;
    color: #222;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: .3s;
}

.dashboard-menu a:hover {
    background: #0d6efd;
    color: white;
}

.dashboard-menu .active {
    background: #0d6efd;
    color: white;
}

.seller-info-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.quick-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 35px 0;
}

.quick-btn {
    flex: 1;
    min-width: 240px;
    text-align: center;
    text-decoration: none;
    padding: 18px;
    border-radius: 15px;
    background: #0d6efd;
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: .3s;
}

.quick-btn:hover {
    background: #0b5ed7;
}

.dashboard-section {
    margin-top: 45px;
}

.dashboard-section h2 {
    margin-bottom: 25px;
}

.recent-ads-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;
}

.empty-box {
    background: white;
    padding: 50px;
    text-align: center;
    border-radius: 20px;
    color: #777;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

@media(max-width:900px) {

    .dashboard-menu {
        width: 100%;
        justify-content: center;
    }

    .seller-top {
        justify-content: center;
        text-align: center;
    }

    .quick-actions {
        flex-direction: column;
    }
}

/*==========================================
BOTTOM NAVIGATION
==========================================*/

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -3px 15px rgba(0, 0, 0, .10);
    z-index: 9999;
}

.bottom-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: .3s;
    font-size: 13px;
    font-weight: 600;
}

.bottom-item i {
    font-size: 22px;
}

.bottom-item:hover {
    color: #0d6efd;
}

.bottom-item.active {
    color: #0d6efd;
}

/* Desktop */

@media(min-width:901px) {
    .bottom-nav {
        display: none;
    }
}

/* Mobile */

@media(max-width:900px) {
    body {
        padding-bottom: 8px;
    }
}

/*==========================================
CUSTOM MODAL
==========================================*/

.custom-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.custom-modal-box {
    width: 420px;
    max-width: 90%;
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    animation: modalPop .25s ease;
}

@keyframes modalPop {
    from {
        transform: scale(.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.custom-modal-box h2 {
    margin-top: 0;
    color: #16213e;
}

.custom-modal-box p {
    margin: 20px 0;
    color: #555;
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-ok,
.modal-cancel {
    border: none;
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

.modal-ok {
    background: #0d6efd;
    color: #fff;
}

.modal-cancel {
    background: #e9ecef;
}

/*==========================================
MOBILE HAMBURGER MENU
==========================================*/

.menu-toggle,
.mobile-profile {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #222;
}

/* Hide mobile menu on Desktop */

.mobile-menu {
    display: none;
}

@media (max-width:900px) {

    /* Header */

    .header {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        top: 0;
        z-index: 9999;
    }

    /* Hide desktop navigation */

    .main-nav,
    .auth-area,
    #userArea {
        display: none !important;
    }

    /* Show hamburger */

    .menu-toggle {
        display: block;
    }

    /* Show profile icon */

    .mobile-profile {
        display: block;
    }

    /* Make logo smaller */

    .logo {
        width: 90px;
        height: auto;
    }

    .brand h2 {
        font-size: 24px;
    }

    .brand span {
        font-size: 12px;
    }

    /* Mobile Menu */

    .mobile-menu {
        display: block;
        position: fixed;
        top: 80px;
        left: -100%;
        width: 300px;
        max-width: 85%;
        height: calc(100vh - 80px);
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transition: left .3s ease;
        z-index: 99999;
        padding-left: 10px;
    }

    .mobile-menu.active {
        left: 0;
    }

    .mobile-menu a {
        display: block;
        padding: 14px 0;
        color: #222;
        text-decoration: none;
        font-weight: 600;
        border-bottom: 1px solid #eee;
        transition: .3s;
    }

    .mobile-menu a:hover {
        color: #0d6efd;
        padding-left: 8px;
    }

    .categories {
        padding: 18px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-logo {
        margin: auto;
    }
}

/*==============================
 HERO NOTICE
==============================*/

.hero-notice {
    width: 100%;
    overflow: hidden;
    background: #ffffffdd;
    color: #1f6df2;
    border-radius: 10px;
    margin-bottom: 18px;
    padding: 10px 0;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

.notice-track {
    display: inline-block;
    padding-left: 100%;
    animation: noticeScroll 20s linear infinite;
}

@keyframes noticeScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }

}

/* ==========================
   Advertisement Package Popup
========================== */

.package-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

.package-card {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
    animation: popupScale .25s ease;
}

@keyframes popupScale {

    from {
        transform: scale(.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.package-card h2 {
    font-size: 30px;
    color: #1f5eff;
    margin-bottom: 20px;
}

.package-card h1 {
    font-size: 58px;
    color: #111;
    margin-bottom: 25px;
}

.package-card p {
    font-size: 20px;
    color: #444;
    margin: 14px 0;
}

.package-card button {
    margin-top: 30px;
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 12px;
    background: #1f5eff;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
}

.package-card button:hover {
    background: #003ecb;
    transform: translateY(-2px);
}

@media(max-width:600px) {

    .package-card {
        padding: 25px;
    }

    .package-card h1 {
        font-size: 46px;
    }

    .package-card h2 {
        font-size: 24px;
    }

    .package-card p {
        font-size: 18px;
    }
}

/* ======================================
   FORGOT PASSWORD MODAL
====================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .65);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    position: relative;
}

.modal-content input {
    width: 100%;
    margin: 15px 0;
    padding-block: 10px;
}

.modal-content button {
    width: 100%;
    padding-block: 10px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 26px;
    cursor: pointer;
}

/* ==========================================================
   NCREATORS — DARK LUXURY GLASS DESIGN SYSTEM
   Visual layer only: existing layout and functionality kept.
========================================================== */
:root {
    color-scheme: dark;
    --bg: #090a0e;
    --bg-soft: #101218;
    --surface: rgba(24, 26, 34, .72);
    --surface-strong: rgba(29, 31, 40, .92);
    --glass-border: rgba(255, 255, 255, .11);
    --text: #f5f1e8;
    --muted: #aaa7a0;
    --accent: #d8b56d;
    --accent-bright: #f0d99f;
    --accent-deep: #9b7134;
    --danger: #e46f75;
    --success: #71c6a0;
    --shadow: 0 18px 55px rgba(0, 0, 0, .38);
    --glass-blur: blur(18px) saturate(145%);
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(ellipse at 12% 0%, rgba(216, 181, 109, .11), transparent 34rem),
        radial-gradient(ellipse at 92% 22%, rgba(105, 115, 150, .10), transparent 32rem),
        linear-gradient(145deg, #090a0e 0%, #101117 52%, #090a0e 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

body,
input,
select,
textarea,
button {
    color-scheme: dark;
}

a {
    color: var(--accent-bright);
}

a:hover {
    color: #fff0c7;
}

::selection {
    background: rgba(216, 181, 109, .32);
    color: #fff;
}

/* Shared header and navigation */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px clamp(18px, 4vw, 58px);
    background: rgba(10, 11, 15, .78);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(216, 181, 109, .18);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 17px;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .3);
}

.brand h2 {
    margin: 0;
    color: #f5e5bd;
    font-size: clamp(20px, 2vw, 27px);
    letter-spacing: .045em;
    font-weight: 750;
}

.brand span {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(10px, 1.5vw, 24px);
}

.main-nav a,
.header nav a {
    color: #d3d0c9;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-bright);
}

.auth-area,
.user-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-btn,
.register-btn,
.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 18px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
}

.login-btn {
    color: var(--accent-bright);
    border: 1px solid rgba(216, 181, 109, .55);
    background: rgba(216, 181, 109, .06);
}

.register-btn {
    color: #17130c;
    border: 1px solid #e5c987;
    background: linear-gradient(135deg, #f0d99f, #b98c49);
}

.logout-btn {
    background: rgba(228, 111, 117, .15);
    border: 1px solid rgba(228, 111, 117, .35);
    color: #ffc4c5;
    cursor: pointer;
}

.login-btn:hover,
.register-btn:hover,
.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .25);
}

.menu-toggle {
    color: var(--accent-bright);
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 13px;
}

.mobile-menu {
    background: rgba(13, 14, 19, .96);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}

.mobile-menu a {
    color: var(--text);
}

/* Glass surfaces, cards and sections */
.search-box,
.hero-stat,
.category-item,
.why-card,
.ad-card,
.market-card,
.package-card,
.overview-card,
.stat-card,
.admin-card,
.form-box,
.auth-container,
.profile-container,
.seller-info-card,
.verification-card,
.document-box,
.empty-box,
.modal-content,
.custom-modal-box,
.package-popup,
.filter-bar,
.seller-card,
.public-info,
.public-description,
.join-section,
.latest-section,
.why-section,
.categories,
.dashboard-section,
.admin-section {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.search-box {
    padding: 18px;
}

.hero {
    color: var(--text);
    background-color: #0b0c11;
}

.hero h1,
h1,
h2,
h3,
h4 {
    color: #f4eee1;
}

.hero p,
p {
    color: inherit;
}

.hero span,
.hero-stat span {
    color: var(--accent-bright);
}

.hero-stat {
    background: rgba(18, 19, 25, .55);
    border: 1px solid rgba(255, 255, 255, .13);
}

.hero-stat h3 {
    color: var(--accent-bright);
}

/* Inputs and forms */
input,
select,
textarea,
.account-select,
.search-box input,
.search-box select {
    color: var(--text);
    background: rgba(8, 9, 13, .62);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

input::placeholder,
textarea::placeholder {
    color: #88868a;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(216, 181, 109, .75);
    box-shadow: 0 0 0 3px rgba(216, 181, 109, .12);
}

select option {
    color: var(--text);
    background: #171920;
}

label {
    color: #ded9ce;
}

button,
.search-box button,
.view-button,
.details-btn,
.quick-btn,
.load-more-btn,
.play-btn,
.call-btn,
.whatsapp-btn {
    border-radius: 12px;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.search-box button,
.view-button,
.details-btn,
.quick-btn,
.load-more-btn {
    color: #17130c;
    background: linear-gradient(135deg, #f0d99f, #b98c49);
    border: 1px solid rgba(255, 231, 176, .55);
    font-weight: 750;
}

button:hover,
.search-box button:hover,
.view-button:hover,
.details-btn:hover,
.quick-btn:hover,
.load-more-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* Marketplace cards and content */
.ad-card,
.market-card,
.seller-card,
.category-item,
.why-card,
.overview-card,
.stat-card,
.package-card,
.verification-card {
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ad-card:hover,
.market-card:hover,
.category-item:hover,
.why-card:hover,
.stat-card:hover,
.verification-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216, 181, 109, .42);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .48);
}

.ad-content,
.ad-category,
.ad-location,
.ad-phone,
.profile-desc,
.public-description,
.public-info,
.document-box {
    color: #e6e0d5;
}

.status,
.status-badge {
    border-radius: 999px;
}

.approve,
.approve-btn {
    background: #1c654c;
    color: #d7ffeb;
}

.reject,
.reject-btn,
.ban-btn {
    background: #6b3036;
    color: #ffe0e1;
}

.pending {
    color: #f0d99f;
}

/* Admin and dashboard */
.admin-container,
.admin-layout,
.admin-main,
.dashboard-overview,
.dashboard-menu,
.profile-header,
.seller-dashboard,
.seller-top,
.profile-actions,
.quick-actions,
.stats-grid,
.admin-sidebar {
    color: var(--text);
}

.admin-sidebar {
    background: rgba(13, 14, 19, .88);
    border-right: 1px solid var(--glass-border);
}

.admin-sidebar a,
.dashboard-menu a {
    color: #d9d3c8;
}

.admin-sidebar a:hover,
.dashboard-menu a:hover {
    color: var(--accent-bright);
}

.admin-table {
    color: var(--text);
    background: rgba(15, 16, 22, .7);
}

.admin-table th {
    color: var(--accent-bright);
    background: rgba(216, 181, 109, .10);
}

.admin-table td,
.admin-table th {
    border-color: rgba(255, 255, 255, .10);
}

/* Footer */
.footer {
    color: #d5d0c7;
    background: rgba(7, 8, 11, .9);
    border-top: 1px solid rgba(216, 181, 109, .2);
}

.footer h2,
.footer h3 {
    color: #f0d99f;
}

.footer a {
    color: #c9c2b5;
}

.footer a:hover {
    color: var(--accent-bright);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #928e86;
}

.footer-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 16px;
}

/* Tables, separators and helper text */
hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

small,
.muted,
.text-muted {
    color: var(--muted);
}

.admin-search,
.filter-bar {
    background: var(--surface);
}

/* Responsive adjustments */
@media (max-width:900px) {
    .header {
        padding: 10px 16px;
        gap: 12px;
    }

    .main-nav {
        gap: 10px;
    }

    .brand span {
        letter-spacing: .07em;
    }
}

@media (max-width:600px) {
    .header {
        padding: 9px 12px;
    }

    .logo {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .brand h2 {
        font-size: 20px;
    }

    .brand span {
        font-size: 9px;
    }

    .search-box {
        padding: 13px;
    }

    .search-box input,
    .search-box select {
        width: 100%;
        box-sizing: border-box;
    }

    .hero h1 {
        font-size: clamp(32px, 9vw, 46px);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   NCREATORS — IMAGE-MATCHED DARK LUXURY GLASS HOMEPAGE SYSTEM
   Shared visual language for every page; no JS or API changes.
   ============================================================ */
:root {
    --nc-black: #050505;
    --nc-ink: #0b0a09;
    --nc-panel: rgba(22, 19, 16, .62);
    --nc-gold: #e8bd82;
    --nc-gold-bright: #ffd79d;
    --nc-gold-deep: #9b6637;
    --nc-line: rgba(232, 189, 130, .28);
    --nc-white: #f8f4ee;
    --nc-muted: #b9b0a5;
    --nc-glass: rgba(255, 255, 255, .055);
    --nc-blur: blur(22px) saturate(150%);
}

body {
    color: var(--nc-white);
    background: #070605;
}

.header {
    min-height: 76px;
    padding: 10px clamp(18px, 5vw, 76px);
    background: rgba(5, 5, 5, .78);
    border-bottom: 1px solid rgba(255, 220, 177, .16);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(232, 189, 130, .16);
}

.brand h2 {
    color: #f4d2aa;
    font-size: clamp(19px, 2vw, 25px);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.brand span {
    color: #c9b49e;
    font-size: 9px;
    letter-spacing: .2em;
}

.main-nav {
    gap: clamp(12px, 1.8vw, 28px);
}

.main-nav a,
.header nav a {
    color: #e8e0d7;
    font-size: 13px;
    letter-spacing: .01em;
}

.main-nav a.active,
.main-nav a:hover {
    color: var(--nc-gold-bright);
    text-shadow: 0 0 18px rgba(255, 198, 126, .45);
}

.login-btn {
    color: #f3d4ad;
    border-color: rgba(232, 189, 130, .5);
    background: rgba(0, 0, 0, .25);
}

.register-btn {
    color: #21160d;
    background: linear-gradient(120deg, #ffe0a8, #c58b4d);
    border: 1px solid #f5ce91;
}

.nc-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 78px) 34px;
    background: radial-gradient(ellipse at 77% 28%, rgba(155, 92, 43, .24), transparent 34%), radial-gradient(ellipse at 8% 80%, rgba(117, 69, 34, .15), transparent 32%), linear-gradient(115deg, #050505 0%, #100d0a 58%, #090706 100%);
}

.nc-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image: linear-gradient(115deg, transparent 0 48%, rgba(255, 220, 177, .08) 49%, transparent 50%), radial-gradient(circle at 20% 20%, #d99b60 0 1px, transparent 2px);
    background-size: 100% 100%, 75px 75px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.nc-hero-glow {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.nc-glow-one {
    right: 12%;
    top: 5%;
    background: rgba(194, 119, 60, .17);
}

.nc-glow-two {
    left: -220px;
    bottom: 0;
    background: rgba(160, 100, 52, .12);
}

.nc-hero-inner {
    width: min(1420px, 100%);
    min-height: 440px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 3vw;
}

.nc-hero-copy {
    position: relative;
    z-index: 2;
    padding: 12px 0 24px;
}

.nc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 17px;
    border: 1px solid rgba(232, 189, 130, .4);
    border-radius: 999px;
    color: #f4c987;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    background: rgba(20, 15, 10, .42);
    backdrop-filter: var(--nc-blur);
}

.nc-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f2bd78;
    box-shadow: 0 0 12px #f2bd78;
}

.nc-hero h1 {
    margin: 22px 0 15px;
    color: #fff;
    font-size: clamp(39px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 850;
}

.nc-hero h1 em {
    color: #efc181;
    font-style: normal;
    text-shadow: 0 0 28px rgba(220, 158, 91, .15);
}

.nc-hero-description {
    max-width: 610px;
    color: #c9c2bb;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.75;
}

.nc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.nc-button {
    min-height: 52px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 750;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.nc-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .38), 0 0 24px rgba(226, 166, 99, .16);
}

.nc-button-gold {
    color: #21160d;
    background: linear-gradient(120deg, #ffe1ae, #d49a59);
    border: 1px solid #f7d09a;
    box-shadow: 0 7px 28px rgba(198, 129, 66, .2);
}

.nc-button-glass {
    color: #f7e7d2;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(12, 11, 10, .48);
    backdrop-filter: var(--nc-blur);
}

.nc-button-glass i {
    color: #efbd7b;
    font-size: 20px;
}

.nc-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 42px;
}

.nc-hero-stats>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nc-hero-stats>div>i {
    color: #eab977;
    font-size: 27px;
    text-shadow: 0 0 18px rgba(231, 171, 103, .25);
}

.nc-hero-stats span {
    display: grid;
    gap: 1px;
}

.nc-hero-stats strong {
    color: #fff;
    font-size: 16px;
}

.nc-hero-stats small {
    color: #aaa198;
    font-size: 11px;
}

.nc-hero-stats>b {
    height: 34px;
    width: 1px;
    background: rgba(255, 255, 255, .15);
}

.nc-hero-visual {
    position: relative;
    min-height: 450px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

.nc-brand-plaque {
    position: relative;
    z-index: 2;
    width: min(330px, 62%);
    aspect-ratio: .82;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    border: 1px solid rgba(255, 222, 184, .72);
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(20, 14, 10, .65) 45%, rgba(177, 111, 59, .18));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), 0 30px 75px rgba(0, 0, 0, .65), 0 0 55px rgba(211, 143, 78, .2);
    backdrop-filter: blur(26px) saturate(160%);
    transform: rotateY(-9deg) rotateX(3deg);
}

.nc-brand-plaque:before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 225, 190, .24);
    border-radius: 23px;
    pointer-events: none;
}

.nc-plaque-mark {
    width: 126px;
    height: 126px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(241, 199, 147, .4);
    border-radius: 50%;
    background: rgba(0, 0, 0, .22);
    box-shadow: 0 0 40px rgba(227, 164, 102, .13);
}

.nc-plaque-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(235, 182, 124, .24));
}

.nc-plaque-name {
    margin-top: 18px;
    color: #f6d4ae;
    font-size: clamp(21px, 2.5vw, 31px);
    font-weight: 900;
    letter-spacing: .045em;
}

.nc-plaque-tagline {
    color: #e8c49c;
    font-size: 9px;
    letter-spacing: .22em;
    margin-top: 5px;
}

.nc-plaque-tagline span {
    padding: 0 5px;
}

.nc-orbit {
    position: absolute;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(234, 179, 119, .22);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(-20deg);
    box-shadow: 0 0 35px rgba(221, 156, 92, .1);
}

.nc-orbit-b {
    width: 460px;
    height: 460px;
    transform: rotateX(68deg) rotateZ(35deg);
    border-color: rgba(255, 255, 255, .1);
}

.nc-plinth {
    position: absolute;
    bottom: 7px;
    width: 90%;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(13, 11, 9, .9));
    border: 1px solid rgba(240, 190, 135, .48);
    box-shadow: 0 20px 35px #000, 0 0 35px rgba(223, 157, 90, .18);
}

.nc-float-card {
    position: absolute;
    z-index: 3;
    min-width: 112px;
    padding: 17px 13px;
    display: grid;
    justify-items: center;
    gap: 9px;
    color: #f5dfc5;
    text-align: center;
    font-size: 11px;
    border: 1px solid rgba(255, 222, 184, .35);
    border-radius: 18px;
    background: rgba(19, 16, 13, .62);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .13);
    backdrop-filter: blur(18px);
}

.nc-float-card i {
    color: #efbd7b;
    font-size: 27px;
}

.nc-float-growth {
    top: 9%;
    left: 2%;
}

.nc-float-community {
    top: 5%;
    right: 0;
}

.nc-float-earn {
    bottom: 5%;
    left: 0;
}

.nc-float-trust {
    bottom: 5%;
    right: 2%;
}

.nc-hero-search-wrap {
    width: min(1180px, 85%);
    margin: 30px auto 25px;
    padding: 19px 22px;
    border: 1px solid rgba(255, 224, 190, .27);
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: var(--nc-blur);
}

.nc-search-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: 0 2px 13px;
}

.nc-search-heading span {
    color: #f0c38c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.nc-search-heading small {
    color: #aaa198;
}

.nc-search-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.nc-search-box input,
.nc-search-box select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    color: #f7eee5;
    background: rgba(0, 0, 0, .38);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
}

.nc-search-box button {
    min-height: 48px;
    padding: 0 22px;
    color: #20150d;
    background: linear-gradient(120deg, #ffe0a8, #c88c4d);
    border: 1px solid #f4cb91;
}

.nc-feature-strip {
    width: min(1420px, 90%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 19px 12px;
    border: 1px solid rgba(255, 222, 184, .3);
    border-radius: 22px;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: var(--nc-blur);
}

.nc-feature-strip>div {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 10px clamp(10px, 2vw, 28px);
    border-right: 1px solid rgba(255, 221, 183, .23);
}

.nc-feature-strip>div:last-child {
    border: 0;
}

.nc-feature-strip i {
    color: #eeb978;
    font-size: 30px;
}

.nc-feature-strip span {
    display: grid;
    gap: 4px;
}

.nc-feature-strip strong {
    color: #fff2e4;
    font-size: 14px;
}

.nc-feature-strip small {
    color: #bdb3a8;
    font-size: 11px;
    line-height: 1.5;
}

.categories,
.latest-section,
.ads,
.why-section,
.join-section {
    width: min(1380px, calc(100% - 40px));
    margin: 45px auto;
    padding: clamp(22px, 3vw, 40px);
    box-sizing: border-box;
    border: 1px solid rgba(255, 220, 177, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .035);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

.section-title {
    color: #f3d1a9 !important;
    text-align: center;
    letter-spacing: .015em;
}

.section-subtitle {
    color: #b9afa3 !important;
    text-align: center;
}

.category-item {
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(232, 189, 130, .2) !important;
}

.category-item i {
    color: #eabd82 !important;
}

.category-item span {
    color: #f3e7da !important;
}

.footer {
    background: rgba(4, 4, 4, .94);
    border-top: 1px solid rgba(232, 189, 130, .2);
}

/* Universal glass treatment for secondary pages */
.form-box,
.auth-container,
.profile-container,
.seller-info-card,
.verification-card,
.document-box,
.empty-box,
.modal-content,
.custom-modal-box,
.package-popup,
.filter-bar,
.seller-card,
.public-info,
.public-description,
.admin-card,
.stat-card,
.overview-card,
.package-card,
.why-card,
.ad-card,
.market-card,
.admin-table,
.dashboard-menu,
.admin-sidebar {
    background: rgba(22, 19, 16, .62) !important;
    border: 1px solid rgba(232, 189, 130, .2) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .055) !important;
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
    color: #f4eee7;
}

input,
select,
textarea {
    background: rgba(0, 0, 0, .38) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #f7eee5 !important;
}

input::placeholder,
textarea::placeholder {
    color: #9d958c !important;
}

button,
.view-button,
.details-btn,
.quick-btn,
.load-more-btn {
    transition: transform .22s, box-shadow .22s, filter .22s;
}

@media(max-width:1050px) {
    .nc-hero-inner {
        grid-template-columns: 1fr 0.85fr;
    }

    .nc-feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .nc-feature-strip>div:nth-child(2) {
        border-right: 0;
    }

    .nc-feature-strip>div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 221, 183, .2);
    }
}

@media(max-width:760px) {
    .nc-hero {
        padding: 42px 16px 25px;
    }

    .nc-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nc-hero-copy {
        text-align: center;
    }

    .nc-eyebrow {
        margin: auto;
    }

    .nc-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .nc-hero-actions,
    .nc-hero-stats {
        justify-content: center;
    }

    .nc-hero-visual {
        min-height: 350px;
    }

    .nc-brand-plaque {
        width: 230px;
    }

    .nc-plaque-mark {
        width: 94px;
        height: 94px;
    }

    .nc-orbit {
        width: 300px;
        height: 300px;
    }

    .nc-orbit-b {
        width: 350px;
        height: 350px;
    }

    .nc-float-card {
        min-width: 88px;
        padding: 12px 9px;
        font-size: 9px;
    }

    .nc-float-card i {
        font-size: 21px;
    }

    .nc-float-growth {
        left: 1%;
    }

    .nc-float-community {
        right: 0;
    }

    .nc-search-box {
        grid-template-columns: 1fr;
    }

    .nc-search-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .nc-feature-strip {
        grid-template-columns: 1fr;
    }

    .nc-feature-strip>div {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 221, 183, .2);
    }

    .nc-feature-strip>div:last-child {
        border-bottom: 0;
    }

    .categories,
    .latest-section,
    .ads,
    .why-section,
    .join-section {
        width: calc(100% - 24px);
        margin: 24px auto;
        padding: 20px 14px;
    }
}

@media(max-width:420px) {
    .nc-hero h1 {
        font-size: 37px;
    }

    .nc-hero-stats {
        gap: 10px;
    }

    .nc-hero-stats>div {
        gap: 6px;
    }

    .nc-hero-stats>div>i {
        font-size: 19px;
    }

    .nc-hero-stats small {
        font-size: 9px;
    }

    .nc-button {
        width: 100%;
    }

    .nc-hero-actions {
        gap: 10px;
    }
}

/* NCREATORS HOMEPAGE — LUXURY FROSTED GLASS VISUAL OVERRIDES */
:root {
    --nc-gold: #e9b978;
    --nc-bright: #ffd99d;
    --nc-muted: #b9afa3;
    --nc-border: rgba(229, 190, 143, .25);
    --nc-shadow: 0 18px 55px rgba(0, 0, 0, .42)
}

html {
    scroll-behavior: smooth
}

body {
    color: #f5eee4;
    background: radial-gradient(ellipse at 50% 5%, rgba(131, 78, 34, .16), transparent 38%), #080706
}

.header {
    background: rgba(8, 7, 6, .9) !important;
    border-bottom: 1px solid var(--nc-border);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    backdrop-filter: blur(22px)
}

.brand h2 {
    color: var(--nc-bright) !important;
    letter-spacing: 2px
}

.brand span {
    color: #c9b49a !important;
    letter-spacing: 2px
}

.main-nav a {
    color: #e8ded2 !important
}

.main-nav a:hover,
.main-nav .active {
    color: var(--nc-bright) !important
}

.login-btn {
    border: 1px solid rgba(231, 187, 130, .58) !important;
    color: var(--nc-bright) !important;
    background: rgba(255, 255, 255, .025);
    border-radius: 13px !important
}

.register-btn,
.join-section .register-btn {
    color: #17100a !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 223, 177, .7);
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(197, 137, 66, .18)
}

.categories {
    width: min(1115px, calc(100% - 40px));
    margin: 26px auto 34px;
    padding: 30px 28px !important;
    border: 1px solid var(--nc-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)) !important;
    box-shadow: var(--nc-shadow), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(20px)
}

.category-slider {
    max-width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 8px !important
}

.category-item {
    min-height: 112px;
    justify-content: center;
    gap: 10px;
    padding: 16px 8px;
    border: 1px solid rgba(231, 190, 139, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 10px 26px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px)
}

.category-item i {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto !important;
    color: var(--nc-gold) !important;
    background: rgba(226, 177, 115, .10) !important;
    border: 1px solid rgba(232, 190, 139, .34) !important;
    box-shadow: 0 0 22px rgba(214, 158, 91, .10) !important;
    font-size: 23px !important
}

.category-item span {
    color: #f1e7db !important;
    font-weight: 650
}

.category-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 211, 157, .58);
    background: linear-gradient(145deg, rgba(229, 178, 115, .17), rgba(255, 255, 255, .035))
}

.category-item:hover i {
    transform: none !important;
    color: #160f08 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important
}

.ads {
    width: min(1115px, calc(100% - 40px));
    box-sizing: border-box;
    margin: 0 auto 34px;
    padding: 38px 30px !important;
    border: 1px solid var(--nc-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)) !important;
    box-shadow: var(--nc-shadow);
    backdrop-filter: blur(18px)
}

.section-title {
    color: var(--nc-bright) !important
}

.section-subtitle {
    color: var(--nc-muted) !important
}

.ad-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 22px !important
}

.ad-card {
    color: #f5eee4 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025)) !important;
    border: 1px solid rgba(231, 190, 139, .25);
    border-radius: 19px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(16px)
}

.ad-card:hover {
    border-color: rgba(255, 211, 157, .58);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .42), 0 0 24px rgba(210, 153, 87, .09) !important
}

.ad-card img {
    background: rgba(255, 255, 255, .045) !important
}

.ad-content h3 {
    color: #f6eadb !important
}

.ad-content p,
.ad-category,
.ad-location {
    color: #c8bdb0 !important
}

.ad-location i,
.ad-phone i {
    color: var(--nc-gold) !important
}

.ad-buttons {
    gap: 10px
}

.ad-buttons .view-button,
.view-button {
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 223, 177, .5) !important
}

.whatsapp-btn {
    background: rgba(37, 211, 102, .13) !important;
    border: 1px solid rgba(68, 220, 127, .45);
    color: #8ce5ac !important
}

.whatsapp-btn:hover {
    background: rgba(37, 211, 102, .23) !important
}

.load-more-btn {
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    box-shadow: 0 8px 25px rgba(197, 137, 66, .17) !important
}

.why-section {
    width: min(1115px, calc(100% - 40px));
    box-sizing: border-box;
    margin: 0 auto 34px;
    padding: 42px 30px !important;
    border: 1px solid var(--nc-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)) !important;
    box-shadow: var(--nc-shadow)
}

.why-grid {
    gap: 18px !important;
    margin-top: 30px !important
}

.why-card {
    color: #f5eee4 !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)) !important;
    border: 1px solid rgba(231, 190, 139, .23);
    border-radius: 19px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(16px)
}

.why-card i {
    color: var(--nc-gold) !important
}

.why-card h3 {
    color: #f5e7d6 !important
}

.why-card p {
    color: #c6b9aa !important
}

.join-section {
    width: min(1115px, calc(100% - 40px));
    box-sizing: border-box;
    margin: 0 auto 34px;
    padding: 60px 28px !important;
    color: #f5eee4 !important;
    border: 1px solid rgba(231, 190, 139, .36);
    border-radius: 24px;
    background: radial-gradient(ellipse at 50% 0%, rgba(184, 117, 54, .20), transparent 62%), linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .018)) !important;
    box-shadow: var(--nc-shadow)
}

.join-section h2 {
    color: var(--nc-bright) !important
}

.join-section p {
    color: #d1c4b5 !important
}

.footer {
    margin-top: 36px !important;
    border-top: 1px solid var(--nc-border);
    background: rgba(7, 6, 5, .96) !important
}

.footer-col h2,
.footer-col h3 {
    color: var(--nc-bright) !important
}

.footer-col p,
.footer-col a {
    color: #c6b9aa !important
}

.footer-col a:hover {
    color: var(--nc-bright) !important
}

.footer-social a {
    color: var(--nc-bright) !important;
    background: rgba(231, 190, 139, .09) !important;
    border: 1px solid var(--nc-border)
}

.footer-bottom {
    color: #a99b8c !important;
    border-top: 1px solid rgba(231, 190, 139, .14)
}

.footer-bottom a {
    color: var(--nc-gold) !important
}

.search-box {
    color: #f5eee4 !important;
    background: rgba(27, 23, 19, .78) !important;
    border: 1px solid rgba(231, 190, 139, .3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(20px)
}

.search-box input,
.search-box select {
    color: #f2e7da !important;
    background: rgba(8, 7, 6, .58) !important;
    border: 1px solid rgba(231, 190, 139, .22) !important
}

.search-box input::placeholder {
    color: #a99b8c !important
}

.search-box select option {
    color: #f2e7da;
    background: #17120e
}

.search-box button {
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important
}

.bottom-nav {
    background: rgba(10, 8, 6, .92) !important;
    border-top: 1px solid var(--nc-border);
    backdrop-filter: blur(18px)
}

.bottom-nav a {
    color: #d8c8b7 !important
}

.bottom-nav a.active,
.bottom-nav a:hover {
    color: var(--nc-bright) !important
}

@media(max-width:900px) {
    .category-slider {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important
    }

    .ads,
    .why-section,
    .join-section,
    .categories {
        width: calc(100% - 28px);
        padding: 26px 18px !important
    }
}

@media(max-width:600px) {
    .category-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important
    }

    .category-item {
        min-height: 100px;
        padding: 12px 5px
    }

    .category-item i {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important
    }

    .ad-grid {
        grid-template-columns: 1fr !important
    }

    .ad-card img {
        height: 230px
    }

    .ads,
    .why-section,
    .join-section,
    .categories {
        width: calc(100% - 20px);
        margin-bottom: 20px
    }

    .join-section h2 {
        font-size: 29px !important
    }
}


/* MOBILE MARKETPLACE REFINEMENTS — desktop styles remain unchanged */
.mobile-ad-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 18px;
}

.mobile-filter-toggle,
.mobile-sort-select,
.mobile-filter-panel select,
.mobile-filter-panel input,
.mobile-filter-apply,
.mobile-filter-reset {
    min-height: 38px;
    border: 1px solid rgba(232, 189, 130, .34);
    border-radius: 11px;
    color: #f6e6d2;
    background: rgba(18, 15, 12, .78);
    font: inherit;
}

.mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    cursor: pointer;
}

.mobile-filter-toggle i,
.mobile-sort-control i {
    color: #efbd7b;
}

.mobile-sort-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mobile-sort-select {
    padding: 0 28px 0 10px;
    cursor: pointer;
}

.mobile-filter-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(232, 189, 130, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    backdrop-filter: blur(16px);
}

.mobile-filter-panel[hidden] {
    display: none;
}

.mobile-filter-panel select,
.mobile-filter-panel input {
    flex: 1 1 150px;
    min-width: 0;
    padding: 0 10px;
}

.mobile-filter-panel select option {
    color: #f4eee7;
    background: #17120e;
}

.mobile-filter-apply,
.mobile-filter-reset {
    padding: 0 14px;
    cursor: pointer;
}

.mobile-filter-apply {
    color: #1b1209;
    background: linear-gradient(135deg, #ffe0aa, #d49a55);
    border-color: #e9bd83;
    font-weight: 700;
}

.mobile-filter-reset {
    background: rgba(255, 255, 255, .04);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.category-photo {
    display: none;
}

@media(max-width:600px) {
    .categories {
        padding: 14px 12px !important;
    }

    .category-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 2px !important;
    }

    .category-item {
        min-height: 76px !important;
        height: 76px;
        padding: 7px 5px !important;
        gap: 5px !important;
        border-radius: 14px !important;
        overflow: hidden;
    }

    .category-photo {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: cover;
        border-radius: 11px;
        border: 1px solid rgba(239, 189, 123, .38);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
    }

    .category-item i {
        display: none !important;
    }

    .category-item span {
        font-size: 12px !important;
        line-height: 1.1;
        text-align: center;
    }

    .ads {
        padding: 17px 12px !important;
    }

    .ads .section-title {
        font-size: 21px !important;
        margin: 2px 0 6px !important;
    }

    .ads .section-subtitle {
        font-size: 13px !important;
        margin: 0 0 13px !important;
    }

    .mobile-ad-tools {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 13px;
    }

    .mobile-filter-toggle {
        min-height: 35px;
        padding: 0 11px;
        font-size: 12px;
    }

    .mobile-sort-control {
        margin-left: auto;
    }

    .mobile-sort-select {
        min-height: 35px;
        max-width: 132px;
        font-size: 12px;
    }

    .mobile-filter-panel {
        padding: 9px;
        gap: 7px;
    }

    .mobile-filter-panel select,
    .mobile-filter-panel input,
    .mobile-filter-apply,
    .mobile-filter-reset {
        min-height: 35px;
        font-size: 12px;
    }

    .ad-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch;
    }

    .ad-card {
        min-width: 0;
        border-radius: 13px !important;
        overflow: hidden;
    }

    .ad-image {
        height: clamp(112px, 34vw, 155px) !important;
        overflow: hidden;
    }

    .ad-card img {
        width: 100%;
        height: 100% !important;
        object-fit: cover !important;
    }

    .ad-content {
        padding: 10px 9px !important;
    }

    .ad-content h3 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.5em;
        margin: 0 0 6px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    .ad-category,
    .ad-location {
        font-size: 10px !important;
        margin: 5px 0 !important;
    }

    .ad-location {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .ad-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-top: 9px !important;
    }

    .ad-buttons a,
    .ad-buttons button,
    .view-button,
    .whatsapp-btn {
        width: 100%;
        min-width: 0;
        min-height: 34px !important;
        padding: 5px 4px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .load-more-container {
        margin-top: 14px;
    }
}

@media(max-width:360px) {
    .category-item {
        height: 70px;
        min-height: 70px !important;
    }

    .category-photo {
        width: 37px;
        height: 37px;
    }

    .category-item span {
        font-size: 11px !important;
    }

    .ad-grid {
        gap: 8px !important;
    }

    .ad-content {
        padding: 8px 7px !important;
    }

    .ad-content h3 {
        font-size: 12px !important;
    }

    .ad-buttons a,
    .ad-buttons button {
        font-size: 10px !important;
    }
}


/* CONSISTENT CATEGORY IMAGE TREATMENT — desktop and mobile */
.category-item {
    gap: 9px !important;
}

.category-item .category-photo {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px;
    object-fit: cover !important;
    object-position: center;
    border-radius: 14px !important;
    border: 1px solid rgba(239, 189, 123, .48) !important;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .30), 0 0 14px rgba(214, 158, 91, .08) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-item>i {
    display: none !important;
}

.category-item:hover .category-photo {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 9px 22px rgba(0, 0, 0, .38), 0 0 18px rgba(214, 158, 91, .16) !important;
}

.category-item span {
    color: #f3e7da !important;
}

@media (max-width: 600px) {
    .category-item {
        gap: 5px !important;
    }

    .category-item .category-photo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        border-radius: 11px !important;
    }
}

@media (max-width: 360px) {
    .category-item .category-photo {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px;
    }
}

/* ============================================================
   NCREATORS AUTH — DARK LUXURY FROSTED GLASS REDESIGN
   Login, registration and forgot-password styling only.
   Existing form IDs, inputs, buttons and JavaScript handlers stay intact.
   ============================================================ */
.auth-container {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 104px 20px 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(174, 105, 48, .22), transparent 42%),
        radial-gradient(circle at 12% 78%, rgba(213, 157, 91, .09), transparent 27%),
        radial-gradient(circle at 88% 72%, rgba(213, 157, 91, .08), transparent 25%),
        #080706 !important;
}

.auth-container::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(620px, 90vw);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(232, 189, 130, .10);
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(185, 117, 57, .08), inset 0 0 90px rgba(185, 117, 57, .035);
    pointer-events: none;
}

.form-box {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 440px) !important;
    padding: 38px 36px 32px !important;
    margin: 0 auto;
    border: 1px solid rgba(232, 189, 130, .34) !important;
    border-radius: 25px !important;
    background: linear-gradient(145deg, rgba(40, 31, 23, .82), rgba(16, 14, 12, .78)) !important;
    box-shadow: 0 28px 85px rgba(0, 0, 0, .58), 0 0 45px rgba(183, 119, 62, .09), inset 0 1px rgba(255, 240, 218, .10) !important;
    -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
    backdrop-filter: blur(26px) saturate(145%) !important;
    text-align: center;
    color: #f6eee4 !important;
    overflow: visible;
}

.form-box::before {
    content: "";
    display: block;
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    background: url("ncreators-monogram.png") center/contain no-repeat;
    filter: drop-shadow(0 0 15px rgba(225, 174, 117, .22));
}

.form-box h2 {
    margin: 0 0 25px !important;
    color: #f5d2a4 !important;
    font-family: inherit;
    font-size: clamp(25px, 4vw, 30px) !important;
    font-weight: 750;
    letter-spacing: .02em;
}

.form-box input,
.form-box select,
.form-box .account-select {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px;
    margin: 12px 0 !important;
    padding: 13px 15px !important;
    color: #f5eee5 !important;
    background: rgba(5, 5, 5, .48) !important;
    border: 1px solid rgba(232, 189, 130, .22) !important;
    border-radius: 13px !important;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-box input::placeholder {
    color: #a99d90 !important;
    opacity: 1;
}

.form-box input:focus,
.form-box select:focus {
    border-color: rgba(255, 213, 157, .78) !important;
    background: rgba(8, 7, 6, .72) !important;
    box-shadow: 0 0 0 3px rgba(224, 171, 108, .12), 0 0 22px rgba(224, 171, 108, .07) !important;
}

.form-box select {
    color: #e9d9c7 !important;
    cursor: pointer;
}

.form-box select option {
    color: #f4e9dc;
    background: #17110d;
}

.form-box button {
    box-sizing: border-box;
    width: 100%;
    min-height: 49px;
    margin: 13px 0 8px;
    padding: 13px 18px;
    color: #21150b !important;
    background: linear-gradient(135deg, #ffe1b0 0%, #e7b978 48%, #c88d4d 100%) !important;
    border: 1px solid rgba(255, 229, 190, .72) !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 27px rgba(194, 133, 70, .20), inset 0 1px rgba(255, 255, 255, .35);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.form-box button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(194, 133, 70, .28), inset 0 1px rgba(255, 255, 255, .4);
}

.form-box p {
    margin: 17px 0 0 !important;
    color: #c9bdb0 !important;
    font-size: 14px;
    line-height: 1.6;
}

.form-box p span {
    color: #f1c58f !important;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease;
}

.form-box p span:hover {
    color: #ffe1b0 !important;
    text-decoration: underline;
}

.form-box .close-btn {
    z-index: 2;
    top: 15px !important;
    right: 17px !important;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #f2c48c !important;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(232, 189, 130, .22);
    border-radius: 50%;
    font-size: 19px !important;
    line-height: 1;
}

#advertiserDocs {
    margin: 14px 0;
    padding: 14px;
    text-align: left;
    border: 1px solid rgba(232, 189, 130, .20);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

#advertiserDocs label {
    display: block;
    margin: 10px 0 5px;
    color: #e8c79f !important;
    font-size: 13px;
    font-weight: 650;
}

#advertiserDocs input[type="file"] {
    min-height: unset;
    padding: 9px !important;
    font-size: 12px;
}

#forgotPasswordModal {
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .76) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#forgotPasswordModal .modal-content {
    box-sizing: border-box;
    width: min(100%, 430px) !important;
    padding: 38px 30px 30px !important;
    color: #f5eee4 !important;
    background: linear-gradient(145deg, rgba(40, 31, 23, .96), rgba(15, 13, 11, .96)) !important;
    border: 1px solid rgba(232, 189, 130, .34) !important;
    border-radius: 22px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .08) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

#forgotPasswordModal h2 {
    color: #f5d2a4 !important;
}

#forgotPasswordModal p {
    color: #c9bdb0 !important;
}

#forgotPasswordModal input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 15px;
    color: #f5eee5;
    background: rgba(5, 5, 5, .55);
    border: 1px solid rgba(232, 189, 130, .24);
    border-radius: 13px;
}

#forgotPasswordModal .close-btn {
    color: #f2c48c !important;
}

@media(max-width:600px) {
    .auth-container {
        min-height: 100vh;
        min-height: 100svh;
        padding: 34px 15px;
        align-items: center;
    }

    .form-box {
        width: 100% !important;
        max-width: 440px;
        padding: 30px 21px 25px !important;
        border-radius: 21px !important;
    }

    .form-box::before {
        width: 58px;
        height: 58px;
        margin-bottom: 13px;
    }

    .form-box h2 {
        margin-bottom: 20px !important;
        font-size: 26px !important;
    }

    .form-box input,
    .form-box select,
    .form-box .account-select {
        min-height: 47px;
        margin: 10px 0 !important;
    }

    .form-box p {
        font-size: 13px;
    }

    #forgotPasswordModal .modal-content {
        padding: 34px 21px 24px !important;
    }
}

@media(max-height:720px) and (min-width:601px) {
    .auth-container {
        align-items: flex-start;
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .form-box {
        padding-top: 25px !important;
        padding-bottom: 23px !important;
    }

    .form-box::before {
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
    }

    .form-box h2 {
        margin-bottom: 16px !important;
    }
}


/* =========================================================
   NCREATORS ADMIN CONTROL CENTER — LUXURY GLASS THEME
   Styles only; existing admin.js IDs/actions/data flow remain.
========================================================= */
body:has(.admin-layout) {
    background:
        radial-gradient(ellipse at 72% 0%, rgba(131, 78, 34, .16), transparent 36%),
        radial-gradient(ellipse at 0% 70%, rgba(111, 67, 31, .10), transparent 32%),
        #080706 !important;
    color: #f4eadc;
}

.admin-layout {
    min-height: 100vh;
    background: transparent !important;
    color: #f4eadc !important;
}

.admin-sidebar {
    width: 264px !important;
    box-sizing: border-box;
    padding: 28px 17px 24px !important;
    background: rgba(12, 10, 8, .94) !important;
    color: #f5eadc !important;
    border-right: 1px solid rgba(229, 190, 143, .24);
    box-shadow: 14px 0 42px rgba(0, 0, 0, .32) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 1001;
}

.admin-sidebar>.logo {
    display: block;
    width: 76px !important;
    height: 76px !important;
    object-fit: contain;
    margin: 0 auto 12px;
    border-radius: 18px;
    filter: drop-shadow(0 0 15px rgba(226, 174, 108, .14));
}

.admin-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0 0 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(229, 190, 143, .16);
    text-align: center;
}

.admin-brand-lockup strong {
    color: #f3c98f;
    font-size: 19px;
    letter-spacing: 2.5px;
}

.admin-brand-lockup span {
    color: #a99a87;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.admin-sidebar::after {
    content: none !important;
}

.admin-sidebar ul {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 !important;
    padding: 0 !important;
}

.admin-sidebar li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 47px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 13px !important;
    color: #cfc2b2 !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 650;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.admin-sidebar li i {
    width: 19px;
    color: #d6a96e;
    text-align: center;
    font-size: 15px;
}

.admin-sidebar li:hover {
    color: #ffe0b0 !important;
    background: rgba(224, 174, 111, .10) !important;
    border-color: rgba(229, 190, 143, .20);
    transform: translateX(3px) !important;
}

.admin-sidebar li.active {
    color: #ffe0b0 !important;
    background: linear-gradient(110deg, rgba(225, 174, 107, .19), rgba(225, 174, 107, .055)) !important;
    border-color: rgba(236, 193, 139, .34);
    box-shadow: inset 3px 0 #e6b879, 0 8px 22px rgba(0, 0, 0, .20) !important;
}

.admin-sidebar li.active i {
    color: #ffd69b;
}

.admin-sidebar li[onclick*="logout"] {
    margin-top: 16px !important;
    color: #e4b2a9 !important;
}

.admin-sidebar li[onclick*="logout"] i {
    color: #d98a7f;
}

.admin-main {
    min-width: 0;
    margin-left: 264px !important;
    padding: 34px clamp(18px, 3vw, 42px) 48px !important;
    background: transparent !important;
    color: #f4eadc !important;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 27px;
    padding: 21px 24px;
    border: 1px solid rgba(229, 190, 143, .24);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022));
    box-shadow: 0 16px 42px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.admin-eyebrow {
    margin: 0 0 7px;
    color: #d9aa70;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.admin-main .admin-topbar h1 {
    margin: 0 !important;
    color: #f6d3a2 !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    line-height: 1.15;
}

.admin-topbar-subtitle {
    margin: 8px 0 0;
    color: #b9ad9e;
    font-size: 13px;
}

.admin-console-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 10px 14px;
    color: #e8d4bb;
    border: 1px solid rgba(229, 190, 143, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    font-size: 12px;
    font-weight: 650;
}

.admin-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #83ce9d;
    box-shadow: 0 0 12px rgba(131, 206, 157, .75);
}

.admin-section {
    min-width: 0;
    margin-bottom: 24px !important;
    padding: clamp(18px, 2.3vw, 28px) !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .22);
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.admin-section h2 {
    color: #f3c98f !important;
    font-size: 22px !important;
    letter-spacing: .1px;
}

.admin-section h3,
.admin-section h4 {
    color: #ead4b8 !important;
}

.admin-section p {
    color: #c4b7a7;
}

.dashboard-overview {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 22px !important;
}

.overview-card {
    min-width: 0;
    padding: 23px !important;
    color: #e9ddce !important;
    border: 1px solid rgba(229, 190, 143, .22);
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .20) !important;
}

.overview-card h3 {
    color: #f2cb94 !important;
}

.overview-card p {
    color: #bfb2a2 !important;
}

.overview-card button {
    color: #1c130b !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-weight: 750;
}

.overview-card button:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 15px !important;
    margin-top: 0 !important;
}

.stat-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 22px 18px !important;
    text-align: left !important;
    color: #f4e8d9 !important;
    border: 1px solid rgba(229, 190, 143, .28);
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(211, 157, 91, .15), rgba(255, 255, 255, .035)) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06) !important;
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -45px;
    bottom: -60px;
    border: 1px solid rgba(237, 190, 132, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 12px rgba(237, 190, 132, .025), 0 0 0 25px rgba(237, 190, 132, .02);
}

.stat-card h3 {
    color: #cdbda9 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.stat-card p {
    margin: 13px 0 0 !important;
    color: #f4c98f !important;
    font-size: 34px !important;
    font-weight: 800 !important;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.admin-search input,
.admin-section input[type="text"],
.admin-section input[type="search"],
.admin-section input[type="email"],
.admin-section input[type="number"],
.admin-section select,
.admin-section textarea {
    box-sizing: border-box;
    color: #f1e5d7 !important;
    background: rgba(8, 7, 6, .60) !important;
    border: 1px solid rgba(229, 190, 143, .24) !important;
    border-radius: 11px !important;
    outline: none;
}

.admin-search input {
    padding: 13px 15px !important;
}

.admin-section input::placeholder,
.admin-search input::placeholder {
    color: #968b7e !important;
}

.admin-section input:focus,
.admin-section select:focus,
.admin-section textarea:focus,
.admin-search input:focus {
    border-color: rgba(244, 196, 135, .68) !important;
    box-shadow: 0 0 0 3px rgba(220, 168, 104, .10);
}

.admin-section select option {
    color: #f4eadc;
    background: #17120e;
}

.filter-bar {
    gap: 8px !important;
    padding: 10px;
    border: 1px solid rgba(229, 190, 143, .17);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025) !important;
}

.filter-bar button {
    color: #e5d5c2 !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(229, 190, 143, .18) !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
}

.filter-bar button:hover,
.filter-bar button:focus {
    color: #1a120a !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
}

.admin-table {
    width: 100%;
    min-width: 720px;
    margin-bottom: 18px;
    color: #e9dfd2 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid rgba(229, 190, 143, .20);
    border-radius: 13px;
    overflow: hidden;
    background: rgba(8, 7, 6, .40) !important;
}

.admin-table thead {
    background: rgba(214, 166, 103, .12) !important;
}

.admin-table th {
    color: #f2c98f !important;
    background: rgba(214, 166, 103, .12) !important;
    border-bottom: 1px solid rgba(229, 190, 143, .22) !important;
    font-size: 12px;
    letter-spacing: .35px;
}

.admin-table td {
    color: #d8cdbf !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
    font-size: 13px;
}

.admin-table tr:hover td {
    background: rgba(226, 175, 110, .055) !important;
}

.admin-table button {
    margin: 3px 5px 3px 0 !important;
    padding: 8px 12px !important;
    color: #21170e !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 9px !important;
    font-weight: 750;
}

.admin-table button:last-child {
    background: rgba(172, 83, 70, .18) !important;
    color: #f0b1a7 !important;
    border-color: rgba(216, 122, 108, .38) !important;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(229, 190, 143, .22);
    background: rgba(255, 255, 255, .06);
    color: #e7d9c8 !important;
    font-size: 11px;
    font-weight: 750;
}

.status-approved {
    color: #9fddb0 !important;
    background: rgba(74, 162, 101, .12);
    border-color: rgba(113, 196, 136, .3);
}

.status-pending {
    color: #f0cd91 !important;
    background: rgba(196, 139, 62, .12);
    border-color: rgba(224, 177, 108, .3);
}

.status-banned {
    color: #e9a59b !important;
    background: rgba(174, 76, 66, .12);
    border-color: rgba(218, 119, 108, .3);
}

.verification-card,
.seller-card {
    padding: 22px !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .24);
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24) !important;
}

.verification-card h3 {
    color: #f3c98f !important;
}

.verification-card p,
.seller-card p {
    color: #c8b9a7 !important;
}

.document-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
}

.document-box {
    padding: 12px !important;
    color: #e8ddcf !important;
    border: 1px solid rgba(229, 190, 143, .20) !important;
    border-radius: 13px !important;
    background: rgba(8, 7, 6, .42) !important;
}

.document-box img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 9px;
    border: 1px solid rgba(229, 190, 143, .15);
}

.document-box h4 {
    color: #edc58f !important;
}

.package-system-box,
#packageUserList {
    color: #e6dacb !important;
    border: 1px solid rgba(229, 190, 143, .22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .035) !important;
}

#packageUserList {
    overflow-x: hidden;
}

#packageSystemStatus {
    color: #f1c98e;
    font-weight: 750;
}

.admin-section label {
    color: #d7c7b4;
}

.admin-section button:not(.switch):not(.slider) {
    border-radius: 10px;
}

.custom-modal {
    background: rgba(0, 0, 0, .72) !important;
    backdrop-filter: blur(9px);
}

.custom-modal-box {
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .36);
    background: linear-gradient(145deg, #211a13, #100e0b) !important;
    border-radius: 19px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .06) !important;
}

.custom-modal-box h2 {
    color: #f3c98f !important;
}

.custom-modal-box p {
    color: #cbbdab !important;
}

.modal-cancel {
    color: #e9dac8 !important;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(229, 190, 143, .22) !important;
}

.modal-ok {
    color: #1a1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 0 !important;
}

@media (max-width: 1050px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-main {
        padding: 25px 20px 36px !important;
    }
}

@media (max-width: 780px) {
    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: sticky !important;
        top: 0;
        left: auto;
        bottom: auto;
        width: 100% !important;
        height: auto;
        padding: 10px 12px !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(229, 190, 143, .24);
    }

    .admin-sidebar>.logo {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px;
        margin: 0 !important;
    }

    .admin-brand-lockup {
        align-items: flex-start;
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        padding: 0 12px 0 0;
        border: 0;
        border-right: 1px solid rgba(229, 190, 143, .17);
    }

    .admin-brand-lockup strong {
        font-size: 12px;
        letter-spacing: 1.3px;
    }

    .admin-brand-lockup span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .admin-sidebar ul {
        min-width: 0;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        padding: 3px 0 6px !important;
    }

    .admin-sidebar li {
        flex: 0 0 auto;
        min-height: 37px;
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .admin-sidebar li i {
        width: auto;
        font-size: 12px;
    }

    .admin-sidebar li:hover {
        transform: translateY(-1px) !important;
    }

    .admin-main {
        margin-left: 0 !important;
        padding: 16px 12px 30px !important;
    }

    .admin-topbar {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 16px;
    }

    .admin-main .admin-topbar h1 {
        font-size: 23px !important;
    }

    .admin-topbar-subtitle {
        font-size: 11px;
    }

    .admin-console-pill {
        padding: 8px 10px;
        font-size: 10px;
    }

    .admin-section {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .admin-section h2 {
        font-size: 19px !important;
    }

    .dashboard-overview {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 16px 13px !important;
        border-radius: 14px !important;
    }

    .stat-card h3 {
        font-size: 11px !important;
    }

    .stat-card p {
        font-size: 27px !important;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .filter-bar button {
        flex: 0 0 auto;
    }

    .verification-card {
        padding: 15px !important;
    }

    .document-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .admin-sidebar {
        gap: 8px;
    }

    .admin-sidebar>.logo {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px;
    }

    .admin-brand-lockup {
        display: none;
    }

    .admin-sidebar li {
        gap: 6px;
        padding: 8px !important;
        font-size: 10px !important;
    }

    .admin-sidebar li i {
        font-size: 11px;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .admin-console-pill {
        align-self: flex-start;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .document-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   NCREATORS MEMBER DASHBOARD — LUXURY GLASS V6
   Scoped to profile.html via .dashboard-page.
   Existing profile.js functions and data IDs are preserved.
========================================================= */
body:has(.dashboard-page) {
    min-height: 100vh;
    padding: 0 0 40px;
    color: #f5eee4;
    background:
        radial-gradient(ellipse at 78% 0%, rgba(142, 86, 39, .18), transparent 37%),
        radial-gradient(ellipse at 5% 54%, rgba(113, 67, 31, .10), transparent 33%),
        #080706 !important;
}

.dashboard-page {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 54px;
    color: #f4eadc;
}

.dashboard-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(250px, 1fr);
    grid-template-areas:
        "brand welcome"
        "nav nav";
    align-items: center;
    gap: 22px 30px;
    margin: 0 0 24px !important;
    padding: 21px 24px !important;
    border: 1px solid rgba(229, 190, 143, .26);
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.dashboard-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    color: inherit;
    text-decoration: none;
}

.dashboard-brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(224, 173, 109, .15));
}

.dashboard-brand span {
    display: grid;
    gap: 4px;
}

.dashboard-brand strong {
    color: #f3c98f;
    font-size: 17px;
    letter-spacing: 2.2px;
}

.dashboard-brand small {
    color: #a99a87;
    font-size: 8px;
    letter-spacing: 1.8px;
    font-weight: 800;
}

.dashboard-welcome {
    grid-area: welcome;
    min-width: 0;
}

.dashboard-eyebrow {
    margin: 0 0 6px !important;
    color: #d6a96e !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.dashboard-welcome h1 {
    margin: 0 !important;
    color: #f6d3a2 !important;
    font-size: clamp(23px, 2.7vw, 32px) !important;
    line-height: 1.2;
}

.dashboard-welcome h1 span {
    color: #ffe0b0 !important;
}

.dashboard-welcome>p:last-child {
    margin: 7px 0 0 !important;
    color: #b9ad9e !important;
    font-size: 13px;
    line-height: 1.55;
}

.dashboard-menu {
    grid-area: nav;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(229, 190, 143, .17) !important;
    border-radius: 15px !important;
    background: rgba(0, 0, 0, .20) !important;
}

.dashboard-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px !important;
    color: #d8c9b8 !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-menu a i {
    color: #d7a96c;
}

.dashboard-menu a:hover,
.dashboard-menu a.active {
    color: #ffe0b0 !important;
    background: linear-gradient(110deg, rgba(225, 174, 107, .18), rgba(225, 174, 107, .055)) !important;
    border-color: rgba(236, 193, 139, .25);
}

.dashboard-menu a:hover i,
.dashboard-menu a.active i {
    color: #ffd69b;
}

.dashboard-page .seller-info-card,
.dashboard-page .dashboard-section {
    margin: 0 0 22px !important;
    padding: 23px !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .23) !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dashboard-page .dashboard-account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dashboard-heading-icon,
.dashboard-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    color: #f0c184;
    border: 1px solid rgba(232, 189, 130, .32);
    border-radius: 14px;
    background: rgba(226, 177, 115, .09);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07);
}

.dashboard-card-kicker {
    margin: 0 0 3px !important;
    color: #b79a75 !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.dashboard-page .seller-info-card h2 {
    margin: 0 !important;
    color: #f3c98f !important;
    font-size: 18px !important;
}

.account-detail-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.account-detail-row p {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    color: #cbbba8 !important;
    font-size: 12px;
}

.account-detail-row strong {
    color: #ad9a84;
    font-weight: 650;
}

.account-detail-row span {
    color: #f3dfc4;
    font-weight: 750;
}

.account-detail-row .account-status-value {
    display: inline-flex;
    padding: 5px 10px;
    color: #f3d19a;
    border: 1px solid rgba(229, 190, 143, .28);
    border-radius: 999px;
    background: rgba(210, 157, 89, .10);
    text-transform: capitalize;
}

.dashboard-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 15px !important;
    margin: 0 0 22px !important;
}

.dashboard-page .stat-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    min-width: 0;
    overflow: hidden;
    padding: 20px !important;
    text-align: left !important;
    color: #f4e8d9 !important;
    border: 1px solid rgba(229, 190, 143, .27) !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(211, 157, 91, .14), rgba(255, 255, 255, .035)) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06) !important;
}

.dashboard-page .dashboard-stat-icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.dashboard-page .stat-card h3 {
    margin: 0 !important;
    color: #cdbda9 !important;
    font-size: 11px !important;
    line-height: 1.3;
}

.dashboard-page .stat-card p {
    margin: 6px 0 0 !important;
    color: #f4c98f !important;
    font-size: clamp(22px, 2.3vw, 30px) !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere;
}

.dashboard-page .stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 211, 157, .44) !important;
}

.dashboard-page .dashboard-section {
    margin-top: 0 !important;
}

.dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px !important;
    color: #f3c98f !important;
    font-size: 19px !important;
}

.dashboard-section-title i {
    color: #e6b879;
    font-size: 17px;
}

.dashboard-referral-card {
    margin: 0 !important;
    padding: 17px 18px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, .19) !important;
    box-shadow: none !important;
}

.dashboard-referral-card p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #cdbda9 !important;
    margin: 8px 0 !important;
    font-size: 13px;
}

.dashboard-referral-card strong {
    color: #d9b98f;
}

.dashboard-referral-card span {
    color: #f5dfbe;
    font-weight: 750;
}

.dashboard-referral-card button {
    width: auto !important;
    min-width: 160px;
    margin: 12px 8px 0 0 !important;
    padding: 11px 15px !important;
    color: #21170e !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 750;
}

#myReferrals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

#myReferrals .seller-info-card {
    margin: 0 !important;
    padding: 15px !important;
    border-radius: 13px !important;
    background: rgba(0, 0, 0, .18) !important;
    box-shadow: none !important;
}

#myReferrals .seller-info-card p {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px 0 !important;
    color: #c9bba9 !important;
    font-size: 12px;
}

#myReferrals .seller-info-card strong {
    color: #dfbd8f;
}

.dashboard-page .recent-ads-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 15px !important;
}

.dashboard-page .market-card {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: #f4eadc !important;
    border: 1px solid rgba(229, 190, 143, .24) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
    box-shadow: 0 13px 32px rgba(0, 0, 0, .26) !important;
}

.dashboard-page .market-image img {
    width: 100%;
    height: 170px !important;
    object-fit: cover !important;
    background: rgba(255, 255, 255, .04) !important;
}

.dashboard-page .market-body {
    padding: 15px !important;
}

.dashboard-page .market-body h2 {
    margin: 0 0 10px !important;
    color: #f3d4ac !important;
    font-size: 16px !important;
    line-height: 1.35;
}

.dashboard-page .market-body p {
    margin: 6px 0 !important;
    color: #c7b9a7 !important;
    font-size: 12px;
}

.dashboard-page .market-body .details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin-top: 13px !important;
    padding: 10px 13px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    text-decoration: none;
}

.dashboard-page .empty-box {
    grid-column: 1 / -1;
    padding: 30px !important;
    color: #b9ad9e !important;
    border: 1px dashed rgba(229, 190, 143, .25) !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
}

.dashboard-page .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    margin: 0 !important;
}

.dashboard-action-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0 !important;
    padding: 15px 12px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-decoration: none;
}

.dashboard-action-link:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.dashboard-action-link i {
    font-size: 14px;
}

.dashboard-logout-link {
    color: #f0b9ae !important;
    background: rgba(160, 74, 62, .13) !important;
    border-color: rgba(210, 119, 106, .32) !important;
}

@media (max-width: 1050px) {
    .dashboard-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-page .recent-ads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-topbar {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "welcome" "nav";
    }
}

@media (max-width: 650px) {
    .dashboard-page {
        width: calc(100% - 22px);
        padding: 12px 0 35px;
    }

    .dashboard-topbar {
        gap: 14px;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .dashboard-brand img {
        width: 43px;
        height: 43px;
    }

    .dashboard-brand strong {
        font-size: 14px;
    }

    .dashboard-brand small {
        font-size: 7px;
    }

    .dashboard-welcome h1 {
        font-size: 23px !important;
    }

    .dashboard-welcome>p:last-child {
        font-size: 11px;
    }

    .dashboard-menu {
        display: flex !important;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px !important;
        scrollbar-width: thin;
    }

    .dashboard-menu a {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    .dashboard-page .seller-info-card,
    .dashboard-page .dashboard-section {
        padding: 15px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-page .dashboard-account-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .account-detail-row {
        justify-content: flex-start;
        gap: 9px 17px;
    }

    .account-detail-row p {
        font-size: 11px;
    }

    .dashboard-page .stats-grid {
        gap: 9px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-page .stat-card {
        grid-template-columns: 37px 1fr;
        column-gap: 9px;
        padding: 13px 11px !important;
        border-radius: 13px !important;
    }

    .dashboard-page .dashboard-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 11px;
    }

    .dashboard-page .stat-card h3 {
        font-size: 10px !important;
    }

    .dashboard-page .stat-card p {
        font-size: 23px !important;
    }

    .dashboard-section-title {
        font-size: 17px !important;
        margin-bottom: 13px !important;
    }

    .dashboard-page .recent-ads-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .dashboard-page .market-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .dashboard-page .market-image img {
        height: 100% !important;
        min-height: 140px;
        object-fit: cover !important;
    }

    .dashboard-page .market-body {
        padding: 11px !important;
    }

    .dashboard-page .market-body h2 {
        font-size: 14px !important;
    }

    .dashboard-page .market-body p {
        font-size: 10px;
    }

    .dashboard-page .market-body .details-btn {
        margin-top: 8px !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    .dashboard-page .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .dashboard-action-link {
        justify-content: flex-start;
        padding: 13px !important;
        font-size: 12px !important;
    }

    #myReferrals {
        grid-template-columns: 1fr;
    }

    .dashboard-referral-card button {
        width: 100% !important;
        margin: 8px 0 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .dashboard-page *,
    .dashboard-page *::before,
    .dashboard-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* =========================================================
   NCREATORS — BUSINESS PROFILE & MY ADVERTISEMENTS V7
   Scoped page classes; existing business and ad scripts kept.
========================================================= */
body:has(.business-profile-page),
body:has(.my-ads-page) {
    min-height: 100vh;
    padding: 0 0 42px;
    color: #f5eee4;
    background:
        radial-gradient(ellipse at 75% 0%, rgba(142, 86, 39, .16), transparent 38%),
        radial-gradient(ellipse at 4% 65%, rgba(113, 67, 31, .09), transparent 32%),
        #080706 !important;
}

.business-profile-page,
.my-ads-page {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 25px 0 52px;
    color: #f4eadc;
}

.account-page-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr);
    grid-template-areas: "brand intro" "nav nav";
    align-items: center;
    gap: 20px 28px;
    margin: 0 0 23px !important;
    padding: 20px 23px !important;
    border: 1px solid rgba(229, 190, 143, .25);
    border-radius: 21px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.account-page-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    text-decoration: none;
}

.account-page-brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(224, 173, 109, .16));
}

.account-page-brand span {
    display: grid;
    gap: 4px;
}

.account-page-brand strong {
    color: #f3c98f;
    font-size: 17px;
    letter-spacing: 2.1px;
}

.account-page-brand small {
    color: #a99a87;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.account-page-intro {
    grid-area: intro;
    min-width: 0;
}

.account-page-eyebrow {
    margin: 0 0 6px !important;
    color: #d6a96e !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.account-page-intro h1 {
    margin: 0 !important;
    color: #f6d3a2 !important;
    font-size: clamp(23px, 2.8vw, 31px) !important;
    line-height: 1.2;
}

.account-page-intro>p:last-child {
    margin: 7px 0 0 !important;
    color: #b9ad9e !important;
    font-size: 13px;
    line-height: 1.5;
}

.account-page-topbar .dashboard-menu {
    grid-area: nav;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(229, 190, 143, .17) !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, .20) !important;
}

.account-page-topbar .dashboard-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 8px 13px !important;
    color: #d8c9b8 !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.account-page-topbar .dashboard-menu a i {
    color: #d7a96c;
}

.account-page-topbar .dashboard-menu a.active,
.account-page-topbar .dashboard-menu a:hover {
    color: #ffe0b0 !important;
    background: linear-gradient(110deg, rgba(225, 174, 107, .18), rgba(225, 174, 107, .055)) !important;
    border-color: rgba(236, 193, 139, .25);
}

.account-page-topbar .dashboard-menu a.active i,
.account-page-topbar .dashboard-menu a:hover i {
    color: #ffd69b;
}

.business-info-panel,
.business-profile-page .dashboard-section {
    margin: 0 0 20px !important;
    padding: 23px !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .23) !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.business-profile-page .account-summary-panel {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 20px;
}

.account-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.account-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #efc486;
    border: 1px solid rgba(232, 189, 130, .32);
    border-radius: 14px;
    background: rgba(226, 177, 115, .09);
}

.account-panel-heading small {
    display: block;
    margin-bottom: 4px;
    color: #b79a75;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.account-panel-heading h2 {
    margin: 0 !important;
    color: #f3c98f !important;
    font-size: 18px !important;
}

.account-summary-panel .account-panel-heading {
    margin-bottom: 0;
}

.account-summary-panel>p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 !important;
    color: #cbbba8 !important;
    font-size: 12px;
}

.account-summary-panel strong {
    color: #d9b98f;
}

.account-summary-panel span {
    color: #f5dfbe;
    overflow-wrap: anywhere;
}

.business-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.business-profile-fields br {
    display: none;
}

.business-profile-fields input,
.business-profile-fields textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 13px 14px !important;
    color: #f1e5d7 !important;
    background: rgba(8, 7, 6, .58) !important;
    border: 1px solid rgba(229, 190, 143, .23) !important;
    border-radius: 11px !important;
    outline: none;
}

.business-profile-fields input:focus,
.business-profile-fields textarea:focus {
    border-color: rgba(244, 196, 135, .68) !important;
    box-shadow: 0 0 0 3px rgba(220, 168, 104, .10);
}

.business-profile-fields textarea {
    grid-column: 1 / -1;
    resize: vertical;
    min-height: 125px;
}

.business-profile-fields input::placeholder,
.business-profile-fields textarea::placeholder {
    color: #968b7e !important;
}

.business-profile-fields .business-save-button {
    justify-self: start;
    min-height: 43px;
    padding: 11px 17px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .48) !important;
    border-radius: 11px !important;
    font-weight: 800;
    cursor: pointer;
}

.business-profile-fields .business-save-button:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.verification-docs-panel .document-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
}

.verification-docs-panel .document-box {
    min-width: 0;
    padding: 14px !important;
    color: #e8ddcf !important;
    border: 1px solid rgba(229, 190, 143, .20) !important;
    border-radius: 14px !important;
    background: rgba(8, 7, 6, .40) !important;
    text-align: left !important;
}

.verification-docs-panel .document-box h4 {
    margin: 0 0 10px !important;
    color: #edc58f !important;
    font-size: 13px;
}

.verification-document-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(229, 190, 143, .15);
    background: rgba(255, 255, 255, .035);
}

.business-profile-page .account-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px !important;
    color: #f3c98f !important;
    font-size: 19px !important;
}

.business-profile-page .account-section-heading i {
    color: #e6b879;
}

.business-profile-page .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    margin: 0 !important;
}

.business-profile-page .business-quick-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 15px 12px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    text-decoration: none;
}

.business-profile-page .business-quick-btn i {
    font-size: 14px;
}

/* My Advertisements page */
.my-ads-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 20px 22px;
    border: 1px solid rgba(229, 190, 143, .19);
    border-radius: 17px;
    background: rgba(255, 255, 255, .035);
}

.my-ads-page-heading h2 {
    margin: 0 0 6px !important;
    color: #f3c98f !important;
    font-size: 20px !important;
}

.my-ads-page-heading p:last-child {
    margin: 0 !important;
    color: #b9ad9e !important;
    font-size: 12px;
    line-height: 1.5;
}

.my-ads-create-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 15px;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55);
    border: 1px solid rgba(255, 221, 177, .45);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.my-ads-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 16px !important;
}

.my-ads-grid .market-card {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: #f4eadc !important;
    border: 1px solid rgba(229, 190, 143, .24) !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
    box-shadow: 0 13px 32px rgba(0, 0, 0, .27) !important;
}

.my-ads-grid .market-image img {
    display: block;
    width: 100%;
    height: 205px !important;
    object-fit: cover !important;
    background: rgba(255, 255, 255, .04) !important;
}

.my-ads-grid .market-body {
    padding: 16px !important;
}

.my-ads-grid .market-body h2 {
    margin: 0 0 10px !important;
    color: #f3d4ac !important;
    font-size: 17px !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.my-ads-grid .market-body p {
    margin: 7px 0 !important;
    color: #c7b9a7 !important;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.my-ads-grid .market-body>div[style] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: 13px !important;
}

.my-ads-grid .details-btn {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 7px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 800;
}

.my-ads-grid .details-btn:last-child {
    color: #f0b9ae !important;
    background: rgba(160, 74, 62, .13) !important;
    border-color: rgba(210, 119, 106, .32) !important;
}

.my-ads-grid .empty-box {
    grid-column: 1 / -1;
    padding: 36px !important;
    color: #b9ad9e !important;
    border: 1px dashed rgba(229, 190, 143, .25) !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: none !important;
}

@media (max-width: 1050px) {
    .my-ads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .account-page-topbar {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "intro" "nav";
    }
}

@media (max-width: 680px) {

    .business-profile-page,
    .my-ads-page {
        width: calc(100% - 22px);
        padding: 12px 0 34px;
    }

    .account-page-topbar {
        gap: 14px;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .account-page-brand img {
        width: 43px;
        height: 43px;
    }

    .account-page-brand strong {
        font-size: 14px;
    }

    .account-page-brand small {
        font-size: 7px;
    }

    .account-page-intro h1 {
        font-size: 23px !important;
    }

    .account-page-intro>p:last-child {
        font-size: 11px;
    }

    .account-page-topbar .dashboard-menu {
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px !important;
        scrollbar-width: thin;
    }

    .account-page-topbar .dashboard-menu a {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    .business-info-panel,
    .business-profile-page .dashboard-section {
        padding: 15px !important;
        margin-bottom: 14px !important;
    }

    .business-profile-page .account-summary-panel {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .account-summary-panel .account-panel-heading {
        margin-bottom: 0;
    }

    .account-summary-panel>p {
        font-size: 11px;
    }

    .business-profile-fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .business-profile-fields textarea {
        grid-column: auto;
    }

    .verification-docs-panel .document-grid {
        grid-template-columns: 1fr !important;
    }

    .verification-document-image {
        height: 190px;
    }

    .business-profile-page .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .business-profile-page .business-quick-btn {
        justify-content: flex-start;
        font-size: 12px !important;
        padding: 13px !important;
    }

    .my-ads-page-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px;
    }

    .my-ads-page-heading h2 {
        font-size: 18px !important;
    }

    .my-ads-create-link {
        width: 100%;
        box-sizing: border-box;
    }

    .my-ads-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .my-ads-grid .market-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .my-ads-grid .market-image img {
        height: 100% !important;
        min-height: 152px;
        object-fit: cover !important;
    }

    .my-ads-grid .market-body {
        min-width: 0;
        padding: 11px !important;
    }

    .my-ads-grid .market-body h2 {
        font-size: 14px !important;
    }

    .my-ads-grid .market-body p {
        font-size: 10px;
    }

    .my-ads-grid .market-body>div[style] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px !important;
    }

    .my-ads-grid .details-btn {
        padding: 8px 3px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 390px) {
    .my-ads-grid .market-card {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .my-ads-grid .market-image img {
        min-height: 148px;
    }

    .my-ads-grid .market-body {
        padding: 9px !important;
    }

    .my-ads-grid .market-body>div[style] {
        grid-template-columns: 1fr;
    }
}

/* Align seller profile details as a tidy responsive data grid */
.business-profile-page .account-summary-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.business-profile-page .account-summary-details>p {
    margin: 0 !important;
}

@media(max-width:680px) {
    .business-profile-page .account-summary-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* =========================================================
   NCREATORS — CREATE / EDIT ADVERTISEMENT V8
   Visual redesign only; form fields and JavaScript logic stay.
========================================================= */
body.create-ad-body,
body.edit-ad-body {
    min-height: 100vh;
    padding-bottom: 42px;
    color: #f5eee4;
    background:
        radial-gradient(ellipse at 78% 0%, rgba(142, 86, 39, .16), transparent 38%),
        radial-gradient(ellipse at 4% 65%, rgba(113, 67, 31, .09), transparent 32%),
        #080706 !important;
}

.create-ad-page,
.edit-ad-page {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 25px 0 52px;
    color: #f4eadc;
}

.ad-workspace-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr);
    grid-template-areas: "brand intro" "nav nav";
    align-items: center;
    gap: 20px 28px;
    margin: 0 0 23px !important;
    padding: 20px 23px !important;
    border: 1px solid rgba(229, 190, 143, .25);
    border-radius: 21px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.ad-workspace-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    text-decoration: none;
}

.ad-workspace-brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 13px rgba(224, 173, 109, .16));
}

.ad-workspace-brand span {
    display: grid;
    gap: 4px;
}

.ad-workspace-brand strong {
    color: #f3c98f;
    font-size: 17px;
    letter-spacing: 2.1px;
}

.ad-workspace-brand small {
    color: #a99a87;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ad-workspace-intro {
    grid-area: intro;
    min-width: 0;
}

.ad-workspace-eyebrow {
    margin: 0 0 6px !important;
    color: #d6a96e !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ad-workspace-intro h1 {
    margin: 0 !important;
    color: #f6d3a2 !important;
    font-size: clamp(23px, 2.8vw, 31px) !important;
    line-height: 1.2;
}

.ad-workspace-intro>p:last-child {
    margin: 7px 0 0 !important;
    color: #b9ad9e !important;
    font-size: 13px;
    line-height: 1.5;
}

.ad-workspace-topbar .dashboard-menu {
    grid-area: nav;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(229, 190, 143, .17) !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, .20) !important;
}

.ad-workspace-topbar .dashboard-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 8px 13px !important;
    color: #d8c9b8 !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ad-workspace-topbar .dashboard-menu a i {
    color: #d7a96c;
}

.ad-workspace-topbar .dashboard-menu a.active,
.ad-workspace-topbar .dashboard-menu a:hover {
    color: #ffe0b0 !important;
    background: linear-gradient(110deg, rgba(225, 174, 107, .18), rgba(225, 174, 107, .055)) !important;
    border-color: rgba(236, 193, 139, .25);
}

.ad-workspace-topbar .dashboard-menu a.active i,
.ad-workspace-topbar .dashboard-menu a:hover i {
    color: #ffd69b;
}

.ad-form-container {
    width: min(900px, 100%) !important;
    box-sizing: border-box;
    margin: 0 auto !important;
    padding: clamp(19px, 3vw, 34px) !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .24) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ad-form-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(229, 190, 143, .16);
}

.ad-form-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #efc486;
    border: 1px solid rgba(232, 189, 130, .32);
    border-radius: 15px;
    background: rgba(226, 177, 115, .09);
    font-size: 18px;
}

.ad-form-kicker {
    margin: 0 0 5px !important;
    color: #b79a75 !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ad-form-heading h2 {
    margin: 0 !important;
    color: #f3c98f !important;
    font-size: 21px !important;
}

.ad-form-heading p:last-child {
    margin: 7px 0 0 !important;
    color: #b9ad9e !important;
    font-size: 12px;
    line-height: 1.5;
}

#adForm,
#editForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

#adForm>input:not([type="file"]),
#adForm>select,
#adForm>textarea,
#editForm>input:not([type="file"]),
#editForm>select,
#editForm>textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 47px;
    margin: 0 !important;
    padding: 12px 14px !important;
    color: #f1e5d7 !important;
    background: rgba(8, 7, 6, .58) !important;
    border: 1px solid rgba(229, 190, 143, .23) !important;
    border-radius: 11px !important;
    outline: none;
    font-size: 13px;
}

#adForm>textarea,
#editForm>textarea {
    grid-column: 1 / -1;
    min-height: 135px;
    resize: vertical;
}

#adForm>input:focus,
#adForm>select:focus,
#adForm>textarea:focus,
#editForm>input:focus,
#editForm>select:focus,
#editForm>textarea:focus {
    border-color: rgba(244, 196, 135, .68) !important;
    box-shadow: 0 0 0 3px rgba(220, 168, 104, .10);
}

#adForm input::placeholder,
#adForm textarea::placeholder,
#editForm input::placeholder,
#editForm textarea::placeholder {
    color: #968b7e !important;
}

#adForm select option,
#editForm select option {
    color: #f4eadc;
    background: #17120e;
}

#adForm>label:not(.photo-select-btn),
#editForm>label {
    grid-column: 1 / -1;
    align-self: end;
    margin: 5px 0 -8px !important;
    color: #e4c69e !important;
    font-size: 12px;
    font-weight: 750;
}

#adForm small {
    grid-column: 1 / -1;
    margin-top: -7px;
    color: #a99b8a !important;
    font-size: 11px;
    line-height: 1.5;
}

.hidden-file-input {
    display: none !important;
}

.photo-select-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: 8px;
    min-height: 38px;
    margin: 0 !important;
    padding: 9px 14px !important;
    color: #21170e !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .45) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.photo-select-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.main-image-preview,
.extra-image-preview {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0 !important;
    padding: 10px;
    border: 1px dashed rgba(229, 190, 143, .20);
    border-radius: 12px;
    background: rgba(0, 0, 0, .16);
}

.main-image-preview:empty,
.extra-image-preview:empty {
    display: none;
}

.main-image-preview img {
    width: 112px !important;
    height: 112px !important;
    object-fit: cover;
    border: 1px solid rgba(229, 190, 143, .35) !important;
    border-radius: 11px !important;
}

.extra-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 9px !important;
}

.extra-image-preview img {
    width: 76px !important;
    height: 76px !important;
    object-fit: cover;
    border: 1px solid rgba(229, 190, 143, .28) !important;
    border-radius: 9px !important;
}

#adForm input[type="file"]:not(.hidden-file-input),
#editForm input[type="file"] {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 9px !important;
    color: #cbbba8 !important;
    background: rgba(8, 7, 6, .45) !important;
    border: 1px dashed rgba(229, 190, 143, .28) !important;
    border-radius: 11px !important;
    font-size: 11px;
}

#adForm input[type="file"]::file-selector-button,
#editForm input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 11px;
    color: #21170e;
    background: linear-gradient(135deg, #ffe0aa, #d49a55);
    border: 0;
    border-radius: 8px;
    font-weight: 750;
    cursor: pointer;
}

#adForm>br,
#editForm>br {
    display: none;
}

#postAdBtn,
#editForm>button[type="submit"] {
    grid-column: 1 / -1;
    min-height: 48px;
    margin-top: 8px !important;
    padding: 13px 18px !important;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 1px solid rgba(255, 221, 177, .52) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(197, 137, 66, .16);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .2px;
    cursor: pointer;
}

#postAdBtn:disabled {
    opacity: .58;
    filter: saturate(.65);
    cursor: wait;
    transform: none;
}

/* Package gate keeps its existing display and purchase flow. */
body.create-ad-body #packagePopup {
    position: fixed !important;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#packagePopup .package-card {
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 30px !important;
    color: #eee2d2 !important;
    border: 1px solid rgba(229, 190, 143, .34) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #241b12, #100d09) !important;
    box-shadow: 0 25px 75px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .07) !important;
    text-align: center;
}

#packagePopup .package-card h2 {
    color: #f3c98f !important;
}

#packagePopup .package-card h1 {
    color: #ffd99d !important;
    font-size: 48px;
}

#packagePopup .package-card p {
    color: #d0c1af !important;
}

#packagePopup .package-card button {
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    color: #1b1209 !important;
    background: linear-gradient(135deg, #ffe0aa, #d49a55) !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-weight: 850;
}

/* Edit page's selected media controls */
.edit-ad-page #editForm {
    position: relative;
}

.edit-ad-page #editForm label {
    color: #e4c69e !important;
}

.edit-ad-page #editForm input[type="file"] {
    min-height: 44px;
}

.edit-ad-page #editForm select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media(max-width:1050px) {
    .ad-workspace-topbar {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "intro" "nav";
    }
}

@media(max-width:680px) {

    .create-ad-page,
    .edit-ad-page {
        width: calc(100% - 22px);
        padding: 12px 0 34px;
    }

    .ad-workspace-topbar {
        gap: 14px;
        padding: 14px !important;
        border-radius: 17px !important;
    }

    .ad-workspace-brand img {
        width: 43px;
        height: 43px;
    }

    .ad-workspace-brand strong {
        font-size: 14px;
    }

    .ad-workspace-brand small {
        font-size: 7px;
    }

    .ad-workspace-intro h1 {
        font-size: 23px !important;
    }

    .ad-workspace-intro>p:last-child {
        font-size: 11px;
    }

    .ad-workspace-topbar .dashboard-menu {
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px !important;
        scrollbar-width: thin;
    }

    .ad-workspace-topbar .dashboard-menu a {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }

    .ad-form-container {
        padding: 16px !important;
        border-radius: 17px !important;
    }

    .ad-form-heading {
        gap: 11px;
        margin-bottom: 19px;
        padding-bottom: 15px;
    }

    .ad-form-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .ad-form-heading h2 {
        font-size: 18px !important;
    }

    .ad-form-heading p:last-child {
        font-size: 11px;
    }

    #adForm,
    #editForm {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #adForm>input:not([type="file"]),
    #adForm>select,
    #adForm>textarea,
    #editForm>input:not([type="file"]),
    #editForm>select,
    #editForm>textarea {
        min-height: 44px;
        font-size: 12px;
    }

    #adForm>textarea,
    #editForm>textarea {
        min-height: 120px;
        grid-column: auto;
    }

    #adForm>label:not(.photo-select-btn),
    #editForm>label {
        margin: 6px 0 -4px !important;
    }

    #adForm small {
        font-size: 10px;
    }

    .photo-select-btn {
        min-height: 36px;
        font-size: 11px !important;
    }

    #postAdBtn,
    #editForm>button[type="submit"] {
        min-height: 46px;
        font-size: 13px;
    }

    #packagePopup .package-card {
        padding: 23px !important;
    }
}



/* =========================================================
   NCREATORS V9 — PRIVATE AD DETAILS + PUBLIC AD LISTING
   Visual-only layer. Existing API and interaction logic retained.
========================================================= */

/* Private advertiser details page */
.ad-detail-page {
    width: min(1180px, calc(100% - 44px));
    margin: 0 auto;
    padding: 24px 0 64px;
    color: #f7f1e9;
}

.ad-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 20px;
    border: 1px solid rgba(232, 189, 130, .23);
    border-radius: 19px;
    background: rgba(19, 16, 13, .72);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .07);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.ad-detail-brand,
.public-ad-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #f8f2e9;
    text-decoration: none;
}

.ad-detail-brand img,
.public-ad-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.ad-detail-brand span,
.public-ad-brand span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ad-detail-brand strong,
.public-ad-brand strong {
    color: #f5d09b;
    font-size: 14px;
    letter-spacing: .18em;
    font-weight: 850;
}

.ad-detail-brand small,
.public-ad-brand small {
    color: #aa9c8b;
    font-size: 8px;
    letter-spacing: .16em;
    font-weight: 700;
}

.ad-detail-nav,
.public-ad-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ad-detail-nav a,
.public-ad-header-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c9bdae;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: .2s ease;
}

.ad-detail-nav a:hover,
.ad-detail-nav a.active,
.public-ad-header-actions a:hover {
    color: #ffd99e;
    border-color: rgba(232, 189, 130, .25);
    background: rgba(232, 189, 130, .08);
}

.ad-detail-intro {
    padding: 38px 4px 22px;
}

.ad-detail-eyebrow,
.ad-detail-card-kicker {
    margin: 0 0 10px;
    color: #d9ad75;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .19em;
}

.ad-detail-intro h1 {
    margin: 0;
    color: #fff8ef;
    font-size: clamp(27px, 4vw, 39px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.ad-detail-intro>p:last-child {
    margin: 11px 0 0;
    color: #b9ad9e;
    font-size: 13px;
    line-height: 1.7;
}

.ad-detail-content {
    min-height: 160px;
}

.ad-detail-loading,
.public-ad-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 125px;
    padding: 25px;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 18px;
    background: rgba(22, 19, 16, .62);
    color: #cbbba7;
}

.ad-detail-loader {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border: 2px solid rgba(232, 189, 130, .25);
    border-top-color: #e8bd82;
    border-radius: 50%;
    animation: ncDetailSpin .8s linear infinite;
}

@keyframes ncDetailSpin {
    to {
        transform: rotate(360deg);
    }
}

.ad-detail-card {
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid rgba(232, 189, 130, .25);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(31, 25, 19, .86), rgba(13, 12, 11, .8));
    box-shadow: 0 22px 58px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .07);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.ad-detail-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(232, 189, 130, .15);
}

.ad-detail-card-heading h2 {
    margin: 0 0 10px;
    color: #fff4e5;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.2;
}

.ad-detail-id {
    color: #a99a88;
    font-size: 11px;
    letter-spacing: .04em;
}

.ad-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid rgba(232, 189, 130, .23);
    border-radius: 999px;
    color: #f0cf9e;
    background: rgba(232, 189, 130, .08);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ad-detail-status>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70c995;
    box-shadow: 0 0 10px rgba(112, 201, 149, .55);
}

.ad-detail-status.is-banned {
    color: #f0aaa0;
    border-color: rgba(225, 105, 94, .3);
    background: rgba(160, 54, 45, .12);
}

.ad-detail-status.is-banned>span {
    background: #df786e;
    box-shadow: 0 0 10px rgba(223, 120, 110, .5);
}

.ad-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 23px 0;
}

.ad-detail-info-item {
    min-width: 0;
    padding: 16px 17px;
    border: 1px solid rgba(232, 189, 130, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.ad-detail-info-item span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #bba990;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ad-detail-info-item span i {
    color: #dfb77e;
}

.ad-detail-info-item strong {
    display: block;
    color: #f3e9dc;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ad-detail-created {
    grid-column: 1 / -1;
}

.ad-detail-description {
    padding: 20px;
    border: 1px solid rgba(232, 189, 130, .15);
    border-radius: 15px;
    background: rgba(0, 0, 0, .16);
}

.ad-detail-section-label {
    color: #d9ad75;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .17em;
}

.ad-detail-description p {
    margin: 12px 0 0;
    color: #d5c9bb;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ad-detail-card-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.ad-detail-card-actions button,
.ad-detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 17px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition: .2s ease;
}

.ad-detail-edit {
    border: 1px solid rgba(255, 218, 164, .65);
    color: #20160d;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
    box-shadow: 0 8px 22px rgba(190, 133, 67, .15);
}

.ad-detail-edit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.ad-detail-secondary,
.ad-detail-back {
    border: 1px solid rgba(232, 189, 130, .26);
    color: #e8d6bf;
    background: rgba(255, 255, 255, .045);
}

.ad-detail-secondary:hover,
.ad-detail-back:hover {
    border-color: rgba(255, 215, 157, .55);
    background: rgba(232, 189, 130, .1);
}

.ad-detail-footer {
    padding-top: 19px;
}

/* Public advertisement page */
.public-ad-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px clamp(18px, 5vw, 70px);
    border-bottom: 1px solid rgba(232, 189, 130, .18);
    background: rgba(7, 6, 5, .86);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.public-ad-header-actions .public-ad-post-link {
    color: #1d140a;
    border-color: transparent;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
}

.public-ad-header-actions .public-ad-post-link:hover {
    color: #1d140a;
    filter: brightness(1.06);
}

.public-ad-layout {
    width: min(1260px, calc(100% - 44px));
    margin: 0 auto;
    padding: 24px 0 70px;
}

.public-ad-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 2px 0 20px;
}

.public-ad-breadcrumb a {
    color: #c7b9a7;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.public-ad-breadcrumb a:hover {
    color: #f3cb91;
}

.public-ad-breadcrumb>span {
    color: #b38b5d;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .18em;
}

.public-ad-page {
    max-width: none;
    margin: 0 auto;
}

.public-top {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: 23px;
    align-items: stretch;
}

.public-gallery {
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(232, 189, 130, .23);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(28, 23, 18, .88), rgba(12, 11, 10, .84));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07);
}

.main-ad-image {
    width: 100%;
    height: clamp(310px, 43vw, 570px);
    object-fit: contain;
    object-position: center;
    border: 1px solid rgba(232, 189, 130, .1);
    border-radius: 14px;
    background: #080807;
    cursor: zoom-in;
}

.thumb-row {
    gap: 10px;
    margin-top: 13px;
    padding: 2px 1px 3px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}

.thumb-image {
    flex: 0 0 78px;
    width: 78px;
    height: 66px;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 10px;
    opacity: .82;
    transition: .2s ease;
}

.thumb-image:hover,
.thumb-image:focus {
    transform: translateY(-2px);
    border-color: #e8bd82;
    opacity: 1;
}

.public-info {
    height: 100%;
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(232, 189, 130, .23) !important;
    border-radius: 21px !important;
    background: linear-gradient(145deg, rgba(31, 25, 19, .87), rgba(13, 12, 11, .83)) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07) !important;
}

.public-info h1 {
    margin: 0 0 24px;
    color: #fff4e5;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.16;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.public-info p {
    margin: 0 0 17px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(232, 189, 130, .11);
    color: #e0d4c5;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.public-info p strong {
    display: block;
    margin-bottom: 5px;
    color: #bd9c72;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.contact-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 25px;
}

.contact-buttons .call-btn,
.contact-buttons .whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 11px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

.contact-buttons .call-btn {
    color: #21160b;
    border: 1px solid rgba(255, 218, 164, .65);
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
}

.contact-buttons .whatsapp-btn {
    color: #f3dfc5;
    border: 1px solid rgba(232, 189, 130, .4);
    background: rgba(232, 189, 130, .08);
}

.contact-buttons .call-btn:hover,
.contact-buttons .whatsapp-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.public-video,
.public-description {
    margin-top: 22px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid rgba(232, 189, 130, .21);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(27, 22, 17, .84), rgba(12, 11, 10, .82)) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .055);
}

.public-video h2,
.public-description h2 {
    margin: 0 0 15px;
    color: #f2ca91;
    font-size: 19px;
}

.public-video video {
    display: block;
    max-height: 620px;
    border: 1px solid rgba(232, 189, 130, .16);
    background: #000;
    border-radius: 14px;
}

.public-description p {
    margin: 0;
    color: #d4c8ba;
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#relatedAds {
    margin-top: 22px;
}

/* Gold styling for the full-screen image viewer */
#fullscreenPhotoViewer {
    background: rgba(4, 4, 4, .98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.photo-viewer-topbar {
    border-bottom: 1px solid rgba(232, 189, 130, .18);
    background: rgba(8, 7, 6, .82);
}

.photo-viewer-counter {
    color: #f1d3a8;
}

.photo-viewer-close,
.photo-viewer-arrow {
    border: 1px solid rgba(232, 189, 130, .35);
    background: rgba(232, 189, 130, .1);
    color: #f7dfbc;
    transition: .2s ease;
}

.photo-viewer-close:hover,
.photo-viewer-arrow:hover {
    background: rgba(232, 189, 130, .22);
}

.photo-viewer-image {
    border-radius: 8px;
    background: #090807;
}

@media (max-width: 900px) {
    .public-top {
        grid-template-columns: 1fr;
    }

    .public-info {
        height: auto;
    }

    .main-ad-image {
        height: clamp(280px, 58vw, 500px);
    }
}

@media (max-width: 680px) {

    .ad-detail-page,
    .public-ad-layout {
        width: calc(100% - 24px);
        padding-top: 13px;
    }

    .ad-detail-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 13px;
        border-radius: 16px;
    }

    .ad-detail-brand img,
    .public-ad-brand img {
        width: 41px;
        height: 41px;
    }

    .ad-detail-brand strong,
    .public-ad-brand strong {
        font-size: 12px;
    }

    .ad-detail-nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .ad-detail-nav a {
        flex: 0 0 auto;
        min-height: 35px;
        padding: 8px 10px;
        font-size: 10px;
    }

    .ad-detail-intro {
        padding: 27px 2px 17px;
    }

    .ad-detail-intro h1 {
        font-size: 26px;
    }

    .ad-detail-intro>p:last-child {
        font-size: 11px;
    }

    .ad-detail-card {
        padding: 17px;
        border-radius: 17px;
    }

    .ad-detail-card-heading {
        flex-direction: column;
        gap: 13px;
        padding-bottom: 18px;
    }

    .ad-detail-card-heading h2 {
        font-size: 23px;
    }

    .ad-detail-info-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 17px 0;
    }

    .ad-detail-created {
        grid-column: auto;
    }

    .ad-detail-info-item {
        padding: 13px 14px;
    }

    .ad-detail-description {
        padding: 15px;
    }

    .ad-detail-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ad-detail-card-actions button,
    .ad-detail-back {
        width: 100%;
    }

    .public-ad-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 10px 14px;
    }

    .public-ad-header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 5px;
    }

    .public-ad-header-actions a {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .public-ad-breadcrumb {
        margin: 0 0 14px;
    }

    .public-ad-breadcrumb>span {
        font-size: 8px;
    }

    .public-gallery {
        padding: 10px;
        border-radius: 16px;
    }

    .main-ad-image {
        height: 280px;
        border-radius: 11px;
    }

    .thumb-image {
        flex-basis: 66px;
        width: 66px;
        height: 58px;
    }

    .public-info {
        padding: 19px;
        border-radius: 16px !important;
    }

    .public-info h1 {
        font-size: 25px;
        margin-bottom: 19px;
    }

    .public-info p {
        margin-bottom: 13px;
        padding-bottom: 11px;
        font-size: 12px;
    }

    .contact-buttons {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .public-video,
    .public-description {
        margin-top: 15px;
        padding: 18px;
        border-radius: 16px;
    }

    .public-video h2,
    .public-description h2 {
        font-size: 17px;
    }

    .photo-viewer-topbar {
        height: 54px;
        padding: 5px 10px;
    }

    .photo-viewer-stage {
        padding-top: 60px;
        padding-bottom: 18px;
    }

    .photo-viewer-image {
        max-width: calc(100vw - 88px);
        max-height: calc(100vh - 95px);
    }
}



/* =========================================================
   NCREATORS V10 — SELLER REVIEW / ADS RESULTS / SUBCATEGORIES
   Scoped visual updates; existing application behavior retained.
========================================================= */

/* Admin: seller details and verification review */
.seller-details-page {
    width: min(1220px, calc(100% - 42px));
    margin: 0 auto;
    padding: 24px 0 64px;
    color: #f5eee4;
}

.seller-details-topbar,
.ads-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 19px;
    border: 1px solid rgba(232, 189, 130, .22);
    border-radius: 18px;
    background: rgba(18, 15, 12, .8);
    box-shadow: 0 17px 43px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.seller-details-brand,
.ads-list-brand,
.subcategory-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #f7efe5;
    text-decoration: none;
}

.seller-details-brand img,
.ads-list-brand img,
.subcategory-brand img {
    width: 47px;
    height: 47px;
    object-fit: contain;
}

.seller-details-brand span,
.ads-list-brand span,
.subcategory-brand span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seller-details-brand strong,
.ads-list-brand strong,
.subcategory-brand strong {
    color: #f1cb94;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .18em;
}

.seller-details-brand small,
.ads-list-brand small,
.subcategory-brand small {
    color: #a99b8a;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em;
}

.seller-details-nav,
.ads-list-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.seller-details-nav a,
.ads-list-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c9bdaf;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
    transition: .2s ease;
}

.seller-details-nav a:hover,
.seller-details-nav a.active,
.ads-list-nav a:hover {
    color: #f5d19c;
    border-color: rgba(232, 189, 130, .24);
    background: rgba(232, 189, 130, .08);
}

.seller-details-nav i,
.ads-list-nav i {
    color: #d9ae78;
}

.seller-details-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 37px 3px 23px;
}

.seller-details-eyebrow,
.ads-list-eyebrow {
    margin: 0 0 9px;
    color: #d5a974;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .19em;
}

.seller-details-intro h1,
.ads-list-hero h1 {
    margin: 0;
    color: #fff5e9;
    font-size: clamp(28px, 4vw, 39px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.seller-details-intro p:not(.seller-details-eyebrow) {
    margin: 10px 0 0;
    color: #bbae9f;
    font-size: 12px;
    line-height: 1.7;
}

.seller-details-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid rgba(232, 189, 130, .25);
    border-radius: 10px;
    color: #e8d4ba;
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.seller-details-back:hover {
    background: rgba(232, 189, 130, .09);
    border-color: rgba(232, 189, 130, .5);
}

.seller-details-page .seller-card {
    margin: 0 0 19px;
    padding: clamp(19px, 3vw, 29px);
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(30, 24, 18, .88), rgba(12, 11, 10, .83));
    box-shadow: 0 19px 49px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .06);
    color: #e6dacb;
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.seller-details-page .seller-card h2 {
    margin: 0 0 17px;
    color: #f5d09a;
    font-size: 19px;
}

.seller-details-info-card>h2 {
    color: #fff1df !important;
    font-size: 25px !important;
}

.seller-details-page .seller-card p {
    color: #d6cabc;
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.seller-details-page .seller-card p strong {
    display: inline-block;
    min-width: 130px;
    color: #c7a276;
    font-size: 10px;
    letter-spacing: .04em;
}

.seller-details-page .seller-card button {
    min-height: 37px;
    margin: 5px 7px 3px 0;
    padding: 8px 13px;
    border: 1px solid rgba(232, 189, 130, .35);
    border-radius: 9px;
    color: #f3d8b2;
    background: rgba(232, 189, 130, .08);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.seller-details-page .seller-card button:hover {
    border-color: #e8bd82;
    background: rgba(232, 189, 130, .17);
    transform: translateY(-1px);
}

.seller-details-page .seller-card button:first-of-type {
    color: #20160c;
    border-color: transparent;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
}

.seller-details-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.seller-details-section-heading h2 {
    margin-bottom: 7px !important;
}

.seller-details-section-heading p:not(.seller-details-eyebrow) {
    margin: 0;
    color: #afa292;
    font-size: 11px;
}

.seller-details-section-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(232, 189, 130, .24);
    border-radius: 14px;
    color: #e8bd82;
    background: rgba(232, 189, 130, .08);
}

.seller-details-documents-card .document-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.seller-details-documents-card .document-box {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(232, 189, 130, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
}

.seller-details-documents-card .document-box h4 {
    margin: 0 0 11px;
    color: #e7c18d;
    font-size: 11px;
}

.seller-details-documents-card .document-box img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 190px;
    object-fit: contain;
    border: 1px solid rgba(232, 189, 130, .14);
    border-radius: 9px;
    background: #090807;
}

.seller-details-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(232, 189, 130, .13);
    border-radius: 12px;
}

.seller-details-page .admin-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: rgba(0, 0, 0, .12);
}

.seller-details-page .admin-table th {
    padding: 14px 13px;
    color: #e7c18d;
    background: rgba(232, 189, 130, .08);
    border-bottom: 1px solid rgba(232, 189, 130, .17);
    font-size: 9px;
    letter-spacing: .11em;
    text-align: left;
    text-transform: uppercase;
}

.seller-details-page .admin-table td {
    padding: 12px 13px;
    color: #d9cdbf;
    border-bottom: 1px solid rgba(232, 189, 130, .1);
    font-size: 11px;
}

.seller-details-page .admin-table tr:last-child td {
    border-bottom: 0;
}

.seller-details-placeholder {
    color: #b7a895;
    font-size: 12px;
}

/* Public marketplace: searchable advertisement results */
.ads-list-header {
    position: sticky;
    top: 0;
    z-index: 45;
    padding: 11px clamp(16px, 5vw, 68px);
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: rgba(7, 6, 5, .9);
}

.ads-list-nav .ads-list-post-link {
    color: #21170d;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
}

.ads-list-nav .ads-list-post-link:hover {
    color: #21170d;
    filter: brightness(1.06);
}

.ads-list-page {
    width: min(1260px, calc(100% - 42px));
    margin: 0 auto;
    padding: 39px 0 70px;
}

.ads-list-hero {
    padding: 4px 2px 27px;
}

.ads-list-hero h1 {
    font-size: clamp(29px, 4vw, 43px);
}

.ads-list-hero>p:last-child {
    max-width: 640px;
    margin: 12px 0 0;
    color: #b6a99a;
    font-size: 13px;
    line-height: 1.7;
}

.ads-list-search-panel {
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid rgba(232, 189, 130, .24);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(31, 25, 19, .88), rgba(13, 12, 11, .84));
    box-shadow: 0 19px 48px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
}

.ads-list-search-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 19px;
}

.ads-list-search-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid rgba(232, 189, 130, .24);
    border-radius: 13px;
    color: #e8bd82;
    background: rgba(232, 189, 130, .08);
}

.ads-list-search-heading h2 {
    margin: 0 0 5px;
    color: #f6e9d8;
    font-size: 16px;
}

.ads-list-search-heading p {
    margin: 0;
    color: #aa9c8b;
    font-size: 10px;
}

.ads-list-search-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin: 0 !important;
}

.ads-list-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ads-list-field>span {
    color: #c9ab82;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ads-list-field>span i {
    margin-right: 5px;
    color: #ddb47d;
}

.ads-list-field input,
.ads-list-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 10px;
    outline: none;
    color: #f1e6d8;
    background: rgba(5, 5, 4, .62);
    font: inherit;
    font-size: 12px;
}

.ads-list-field input::placeholder {
    color: #807568;
}

.ads-list-field input:focus,
.ads-list-field select:focus {
    border-color: rgba(232, 189, 130, .72);
    box-shadow: 0 0 0 3px rgba(232, 189, 130, .08);
}

.ads-list-field select option {
    color: #f3eadf;
    background: #17130f;
}

.ads-list-results-section {
    padding-top: 36px;
}

.ads-list-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.ads-list-results-heading h2 {
    margin: 0;
    color: #fff1df;
    font-size: clamp(20px, 3vw, 26px);
}

.ads-list-results-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b8a58e;
    font-size: 9px;
    font-weight: 750;
}

.ads-list-results-note i {
    color: #d9b37c;
}

.ads-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.ads-list-grid .market-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(29, 23, 17, .91), rgba(12, 11, 10, .9));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .055);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ads-list-grid .market-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 189, 130, .48);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .32);
}

.ads-list-grid .market-image {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: #080706;
}

.ads-list-grid .market-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ads-list-grid .market-card:hover .market-image img {
    transform: scale(1.035);
}

.ads-list-grid .verified-badge {
    position: absolute;
    left: 11px;
    top: 11px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 224, 181, .4);
    border-radius: 999px;
    color: #24190d;
    background: linear-gradient(135deg, #ffe2b7, #d8a263);
    font-size: 9px;
    font-weight: 850;
}

.ads-list-grid .market-body {
    padding: 16px;
}

.ads-list-grid .market-body h2 {
    margin: 0 0 12px;
    color: #fff2e1;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ads-list-grid .market-body p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 9px;
    color: #c0b4a6;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ads-list-grid .market-body p i {
    width: 13px;
    flex: 0 0 13px;
    margin-top: 2px;
    color: #d9ae78;
}

.ads-list-grid .details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 9px;
    border: 1px solid rgba(255, 218, 164, .6);
    border-radius: 10px;
    color: #21170d;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    transition: .2s ease;
}

.ads-list-grid .details-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.ads-list-grid>h3 {
    grid-column: 1 / -1;
    margin: 0;
    padding: 32px 20px;
    border: 1px dashed rgba(232, 189, 130, .27);
    border-radius: 15px;
    color: #c3b39f;
    background: rgba(255, 255, 255, .025);
    text-align: center;
    font-size: 14px;
}

/* Subcategory page */
.subcategory-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(156, 105, 52, .16), transparent 35%),
        radial-gradient(ellipse at 92% 20%, rgba(122, 87, 48, .1), transparent 33%),
        #090807;
    color: #f4ecdf;
}

.subcategory-page {
    width: min(1050px, calc(100% - 42px));
    max-width: 1050px;
    margin: 0 auto;
    padding: 22px 0 65px;
}

.subcategory-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    margin-bottom: 37px;
    padding: 13px 17px;
    border: 1px solid rgba(232, 189, 130, .22);
    border-radius: 17px;
    background: rgba(18, 15, 12, .76);
    box-shadow: 0 15px 38px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.subcategory-brand {
    font-size: inherit;
    letter-spacing: normal;
}

.subcategory-brand img {
    width: 45px;
    height: 45px;
}

.subcategory-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(232, 189, 130, .23);
    border-radius: 10px;
    color: #e7d4bb;
    background: rgba(255, 255, 255, .035);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.subcategory-back:hover {
    color: #f6d4a2;
    border-color: rgba(232, 189, 130, .5);
    background: rgba(232, 189, 130, .08);
}

.subcategory-heading {
    margin-bottom: 22px;
}

.subcategory-eyebrow {
    margin-bottom: 10px;
    color: #d2a46c;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 9px;
    font-weight: 850;
}

.subcategory-heading h1 {
    margin: 0 0 10px;
    color: #fff4e5;
    font-size: clamp(26px, 4vw, 37px);
    line-height: 1.2;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.subcategory-heading p {
    margin: 0;
    color: #b4a798;
    font-size: 12px;
    line-height: 1.7;
}

.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    width: 100%;
    max-width: none;
    margin: 0;
}

.subcategory-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    min-height: 79px;
    padding: 13px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(232, 189, 130, .17);
    border-radius: 14px;
    color: #eee2d3;
    background: linear-gradient(145deg, rgba(31, 25, 19, .82), rgba(13, 12, 11, .8));
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .17), inset 0 1px rgba(255, 255, 255, .045);
    transition: .2s ease;
}

.subcategory-card:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 189, 130, .48);
    background: linear-gradient(145deg, rgba(48, 36, 23, .88), rgba(17, 14, 11, .85));
    box-shadow: 0 15px 30px rgba(0, 0, 0, .26);
}

.subcategory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(255, 223, 180, .2);
    border-radius: 13px;
    color: #e8bd82 !important;
    background: rgba(232, 189, 130, .1) !important;
    font-size: 17px;
}

.subcategory-card-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.subcategory-card-name {
    color: #f0e5d8;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.subcategory-arrow {
    flex-shrink: 0;
    margin-left: auto;
    color: #b99a73;
    font-size: 11px;
}

.subcategory-card.all-category {
    border-color: rgba(232, 189, 130, .32);
    background: linear-gradient(145deg, rgba(72, 51, 28, .72), rgba(20, 16, 12, .86));
}

.subcategory-card.all-category .subcategory-card-name {
    color: #f3d3a5;
}

.subcategory-message {
    margin: 15px 0 0;
    padding: 24px;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 14px;
    color: #c4b5a3;
    background: rgba(24, 20, 16, .82);
    line-height: 1.7;
}

@media (max-width: 900px) {
    .ads-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    .seller-details-page,
    .ads-list-page {
        width: calc(100% - 24px);
    }

    .seller-details-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .seller-details-brand img,
    .ads-list-brand img {
        width: 41px;
        height: 41px;
    }

    .seller-details-nav {
        width: 100%;
    }

    .seller-details-nav a {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .seller-details-intro {
        align-items: flex-start;
        flex-direction: column;
        padding: 27px 2px 17px;
    }

    .seller-details-intro h1 {
        font-size: 27px;
    }

    .seller-details-page .seller-card {
        padding: 16px;
        border-radius: 15px;
    }

    .seller-details-page .seller-card p strong {
        min-width: 105px;
    }

    .seller-details-documents-card .document-grid {
        grid-template-columns: 1fr;
    }

    .seller-details-documents-card .document-box img {
        height: 210px;
    }

    .seller-details-section-heading h2 {
        font-size: 17px;
    }

    .ads-list-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 10px 13px;
    }

    .ads-list-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .ads-list-nav a {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .ads-list-page {
        padding-top: 27px;
    }

    .ads-list-hero {
        padding-bottom: 20px;
    }

    .ads-list-hero h1 {
        font-size: 29px;
    }

    .ads-list-hero>p:last-child {
        font-size: 11px;
    }

    .ads-list-search-panel {
        padding: 15px;
        border-radius: 15px;
    }

    .ads-list-search-bar {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .ads-list-results-section {
        padding-top: 27px;
    }

    .ads-list-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .ads-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ads-list-grid .market-image {
        height: 145px;
    }

    .ads-list-grid .market-body {
        padding: 11px;
    }

    .ads-list-grid .market-body h2 {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .ads-list-grid .market-body p {
        font-size: 9px;
        gap: 5px;
    }

    .ads-list-grid .details-btn {
        min-height: 36px;
        font-size: 9px;
    }

    .subcategory-page {
        width: calc(100% - 24px);
        padding: 13px 0 42px;
    }

    .subcategory-topbar {
        margin-bottom: 26px;
        padding: 11px;
        border-radius: 14px;
    }

    .subcategory-brand img {
        width: 39px;
        height: 39px;
    }

    .subcategory-brand strong {
        font-size: 11px;
    }

    .subcategory-brand small {
        font-size: 7px;
    }

    .subcategory-back {
        padding: 8px 9px;
        font-size: 9px;
    }

    .subcategory-heading h1 {
        font-size: 26px;
    }

    .subcategory-heading p {
        font-size: 11px;
    }

    .subcategory-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .subcategory-card {
        min-height: 68px;
        padding: 10px 12px;
    }

    .subcategory-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 15px;
    }

    .subcategory-card-name {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .ads-list-grid {
        grid-template-columns: 1fr;
    }

    .subcategory-topbar {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================================
   NCREATORS V11 — INFORMATION + SUPPORT + LEGAL PAGES
   About / Contact / Help / Privacy / Terms
========================================================= */

body.info-page {
    min-height: 100vh;
    color: #eee5d9;
    background:
        radial-gradient(ellipse at 12% 5%, rgba(157, 105, 52, .13), transparent 34%),
        radial-gradient(ellipse at 90% 24%, rgba(117, 81, 43, .09), transparent 34%),
        #080706;
}

.info-page .info-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(220px, 29vw, 330px);
    margin: 0;
    padding: 50px 20px;
    overflow: hidden;
    border-bottom: 1px solid rgba(232, 189, 130, .2);
    background:
        linear-gradient(110deg, rgba(5, 5, 5, .93), rgba(10, 8, 6, .78)),
        radial-gradient(ellipse at 52% 15%, rgba(179, 119, 57, .25), transparent 58%),
        #090807;
}

.info-page .info-hero::before,
.info-page .info-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.info-page .info-hero::before {
    inset: 14px;
    border: 1px solid rgba(232, 189, 130, .12);
    border-radius: 22px;
}

.info-page .info-hero::after {
    width: min(520px, 80vw);
    height: min(520px, 80vw);
    border: 1px solid rgba(232, 189, 130, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(232, 189, 130, .018), 0 0 0 90px rgba(232, 189, 130, .012);
}

.info-page .hero-overlay {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.info-page .hero h1 {
    margin: 0 0 13px;
    color: #fff5e8;
    font-size: clamp(31px, 5vw, 51px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.info-page .hero p {
    max-width: 680px;
    margin: 0 auto;
    color: #c8b9a6;
    font-size: clamp(13px, 1.7vw, 17px);
    line-height: 1.7;
}

.info-page .info-main {
    width: min(1100px, calc(100% - 42px));
    box-sizing: border-box;
    margin: 30px auto 34px;
    padding: clamp(22px, 4vw, 43px);
    border: 1px solid rgba(232, 189, 130, .21);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(28, 23, 18, .86), rgba(12, 11, 10, .82));
    box-shadow: 0 22px 58px rgba(0, 0, 0, .29), inset 0 1px rgba(255, 255, 255, .055);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.info-page .info-main>.section-title {
    margin: 36px 0 12px;
    color: #f0c98f !important;
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-align: left;
}

.info-page .info-main>.section-title:first-of-type {
    margin-top: 0;
}

.info-page .info-main>.section-subtitle {
    margin: 0 0 24px;
    color: #b9a995 !important;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

.info-page .info-main>br {
    display: none;
}

.info-page .info-card {
    margin: 0 0 18px;
    padding: clamp(17px, 2.8vw, 25px);
    border: 1px solid rgba(232, 189, 130, .18) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 13px 32px rgba(0, 0, 0, .19), inset 0 1px rgba(255, 255, 255, .05) !important;
    color: #e3d8c9;
}

.info-page .info-card p,
.info-page .info-feature-card p {
    color: #cfc2b2 !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
    overflow-wrap: anywhere;
}

.info-page .info-card p:last-child {
    margin-bottom: 0;
}

.info-page .info-card h3 {
    margin: 0 0 11px;
    color: #f0d0a1;
    font-size: 15px;
}

.info-page .info-card ul {
    margin: 12px 0 0;
    padding-left: 21px;
    color: #d1c5b7;
}

.info-page .info-card li {
    margin: 8px 0;
    padding-left: 4px;
    color: #d1c5b7;
    font-size: 12px;
    line-height: 1.75;
}

.info-page .info-card li::marker {
    color: #d6a66d;
}

.info-page .info-card hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid rgba(232, 189, 130, .15);
}

.info-page .info-main .why-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 13px;
    margin: 19px 0 24px;
}

.info-page .info-feature-card {
    min-width: 0;
    padding: 21px 18px;
    border: 1px solid rgba(232, 189, 130, .17) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 12px 27px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .05) !important;
    text-align: left;
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.info-page .info-feature-card>i {
    display: inline-grid;
    place-items: center;
    width: 41px;
    height: 41px;
    margin: 0 0 14px;
    border: 1px solid rgba(232, 189, 130, .25);
    border-radius: 12px;
    color: #e8bd82 !important;
    background: rgba(232, 189, 130, .09);
    font-size: 17px;
}

.info-page .info-feature-card h3 {
    margin: 0 0 8px;
    color: #f2e4d3 !important;
    font-size: 14px;
    line-height: 1.45;
}

.info-page .info-feature-card h4 {
    margin: -2px 0 10px;
    color: #d7ad79;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.info-page .info-feature-card p {
    margin: 0;
    font-size: 11px !important;
    line-height: 1.75 !important;
}

.info-page .info-cta {
    width: min(1100px, calc(100% - 42px));
    box-sizing: border-box;
    margin: 0 auto 36px;
    padding: clamp(27px, 4vw, 50px) 24px !important;
    border: 1px solid rgba(232, 189, 130, .31) !important;
    border-radius: 21px !important;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(184, 117, 54, .19), transparent 65%),
        linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015)) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .06);
    text-align: center;
}

.info-page .info-cta h2 {
    margin: 0 0 12px;
    color: #f3d1a1 !important;
    font-size: clamp(21px, 3vw, 30px);
}

.info-page .info-cta p {
    max-width: 650px;
    margin: 0 auto 23px;
    color: #c8bba9 !important;
    font-size: 12px;
    line-height: 1.8;
}

.info-page .info-cta .register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 19px;
    border-radius: 11px;
    color: #1d140b !important;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d) !important;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 9px 24px rgba(190, 133, 67, .16);
}

/* Contact page details and message form */
.info-page-contact .info-main>.why-grid:first-of-type .info-feature-card {
    text-align: center;
}

.info-page-contact .info-main>.why-grid:first-of-type .info-feature-card>i {
    margin-left: auto;
    margin-right: auto;
}

.info-page-contact .info-main form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.info-page-contact .info-main form input,
.info-page-contact .info-main form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 12px 14px;
    border: 1px solid rgba(232, 189, 130, .2) !important;
    border-radius: 10px;
    color: #f2e7da !important;
    background: rgba(5, 5, 4, .55) !important;
    font: inherit;
    font-size: 12px;
}

.info-page-contact .info-main form textarea {
    grid-column: 1 / -1;
    min-height: 135px;
    resize: vertical;
}

.info-page-contact .info-main form button {
    justify-self: start;
    min-height: 43px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 218, 164, .65);
    border-radius: 10px;
    color: #21170d;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.info-page-contact .info-main form button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.info-page-contact .info-main a:not(.register-btn) {
    color: #e6bd87;
    text-decoration-color: rgba(230, 189, 135, .35);
    text-underline-offset: 3px;
}

.info-page-help .info-main>.why-grid {
    margin-top: 16px;
}

.info-page-help .info-feature-card h3 {
    color: #f1d2a6 !important;
}

.info-page-privacy-policy .info-card,
.info-page-terms-and-conditions .info-card {
    padding: clamp(17px, 2.5vw, 23px);
}

.info-page-privacy-policy .info-main>.section-title,
.info-page-terms-and-conditions .info-main>.section-title {
    padding-left: 13px;
    border-left: 2px solid rgba(225, 177, 112, .7);
}

/* Shared Ncreators header/footer components used by these pages */
#header .header {
    position: relative;
    z-index: 60;
    border-bottom: 1px solid rgba(232, 189, 130, .22);
    background: rgba(7, 6, 5, .93) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

#header .main-nav a {
    color: #e2d7c9;
    font-size: 11px;
    font-weight: 750;
}

#header .main-nav a:hover,
#header .main-nav a.active {
    color: #f2cf9d !important;
}

#header .mobile-menu {
    z-index: 80;
    border: 1px solid rgba(232, 189, 130, .22);
    background: rgba(13, 11, 9, .97) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .42);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

#header .mobile-menu a {
    color: #e2d7c9;
    border-bottom: 1px solid rgba(232, 189, 130, .1);
}

#header .mobile-menu a:hover {
    color: #f2cf9d;
    background: rgba(232, 189, 130, .07);
}

#footer .footer {
    margin-top: 34px !important;
    border-top: 1px solid rgba(232, 189, 130, .2);
    background: rgba(5, 5, 5, .96) !important;
}

#footer .footer-col h2,
#footer .footer-col h3 {
    color: #efc98f !important;
}

#footer .footer-col p,
#footer .footer-col a {
    color: #c6b9aa !important;
    font-size: 11px;
}

#footer .footer-col a:hover {
    color: #f5d4a3 !important;
}

#footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0cc98 !important;
    background: rgba(232, 189, 130, .08);
    border: 1px solid rgba(232, 189, 130, .19);
}

#footer .footer-social a:hover {
    padding-left: 0;
    border-color: rgba(232, 189, 130, .48);
    background: rgba(232, 189, 130, .15);
}

#footer .footer-bottom {
    color: #a99b8c;
    border-top: 1px solid rgba(232, 189, 130, .13);
}

#footer .footer-bottom a {
    color: #e2b77d !important;
}

@media (max-width: 700px) {
    .info-page .info-hero {
        min-height: 190px;
        padding: 35px 18px;
    }

    .info-page .info-hero::before {
        inset: 8px;
        border-radius: 15px;
    }

    .info-page .hero h1 {
        font-size: clamp(27px, 8vw, 36px);
    }

    .info-page .hero p {
        font-size: 12px;
    }

    .info-page .info-main {
        width: calc(100% - 22px);
        margin: 18px auto 23px;
        padding: 19px 15px;
        border-radius: 17px;
    }

    .info-page .info-main>.section-title {
        margin-top: 26px;
        font-size: 18px;
    }

    .info-page .info-main>.section-subtitle {
        font-size: 11px;
    }

    .info-page .info-main .why-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 14px 0 20px;
    }

    .info-page .info-feature-card {
        padding: 16px;
        border-radius: 13px !important;
    }

    .info-page .info-feature-card>i {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .info-page .info-cta {
        width: calc(100% - 22px);
        margin-bottom: 24px;
        padding: 27px 17px !important;
        border-radius: 17px !important;
    }

    .info-page .info-cta h2 {
        font-size: 22px;
    }

    .info-page-contact .info-main form {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .info-page-contact .info-main form textarea {
        grid-column: auto;
    }

    .info-page-contact .info-main form button {
        width: 100%;
    }
}



/* =========================================================
   NCREATORS V12 — RESET PASSWORD
   Focused premium account-security screen.
========================================================= */
body.password-reset-page {
    min-height: 100vh;
    margin: 0;
    color: #f4ecdf;
    background:
        radial-gradient(ellipse at 18% 12%, rgba(161, 108, 54, .18), transparent 34%),
        radial-gradient(ellipse at 85% 82%, rgba(121, 84, 43, .12), transparent 32%),
        #080706;
}

.password-reset-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    width: min(1120px, calc(100% - 42px));
    margin: 0 auto;
    padding: 22px 0 20px;
    box-sizing: border-box;
}

.password-reset-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 17px;
    border: 1px solid rgba(232, 189, 130, .22);
    border-radius: 17px;
    background: rgba(18, 15, 12, .78);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.password-reset-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #f7efe5;
    text-decoration: none;
}

.password-reset-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.password-reset-brand span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.password-reset-brand strong {
    color: #f1cb94;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .18em;
}

.password-reset-brand small {
    color: #a99b8a;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em;
}

.password-reset-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 37px;
    padding: 8px 12px;
    border: 1px solid rgba(232, 189, 130, .23);
    border-radius: 10px;
    color: #e8d5bc;
    background: rgba(255, 255, 255, .035);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition: .2s ease;
}

.password-reset-back:hover {
    color: #f4d4a4;
    border-color: rgba(232, 189, 130, .5);
    background: rgba(232, 189, 130, .09);
}

.password-reset-card {
    width: min(470px, 100%);
    box-sizing: border-box;
    margin: auto;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(232, 189, 130, .25);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(31, 25, 19, .9), rgba(12, 11, 10, .87));
    box-shadow: 0 24px 65px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07);
    text-align: center;
    backdrop-filter: var(--nc-blur);
    -webkit-backdrop-filter: var(--nc-blur);
}

.password-reset-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border: 1px solid rgba(232, 189, 130, .32);
    border-radius: 18px;
    color: #f0c98f;
    background: linear-gradient(145deg, rgba(232, 189, 130, .16), rgba(232, 189, 130, .045));
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    font-size: 22px;
}

.password-reset-eyebrow {
    margin: 0 0 9px;
    color: #d5a974;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .19em;
}

.password-reset-card h1 {
    margin: 0;
    color: #fff4e5;
    font-size: clamp(25px, 4vw, 31px);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.password-reset-intro {
    max-width: 360px;
    margin: 12px auto 25px;
    color: #bcae9d;
    font-size: 11px;
    line-height: 1.75;
}

.password-reset-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: left;
}

.password-reset-form label {
    margin-top: 5px;
    color: #d7b98f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.password-reset-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-reset-input-wrap>i {
    position: absolute;
    left: 14px;
    color: #bd9a6e;
    font-size: 12px;
    pointer-events: none;
}

.password-reset-input-wrap input {
    box-sizing: border-box;
    width: 100%;
    min-height: 47px;
    padding: 12px 13px 12px 40px;
    border: 1px solid rgba(232, 189, 130, .2);
    border-radius: 10px;
    outline: none;
    color: #f3e8db;
    background: rgba(5, 5, 4, .62);
    font: inherit;
    font-size: 12px;
    transition: .2s ease;
}

.password-reset-input-wrap input::placeholder {
    color: #817668;
}

.password-reset-input-wrap input:focus {
    border-color: rgba(232, 189, 130, .73);
    box-shadow: 0 0 0 3px rgba(232, 189, 130, .08);
}

.password-reset-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 3px 0 7px;
    color: #a99a88;
    font-size: 9px;
    line-height: 1.6;
}

.password-reset-hint i {
    margin-top: 1px;
    color: #d3a66f;
}

.password-reset-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 47px;
    margin-top: 3px;
    border: 1px solid rgba(255, 218, 164, .62);
    border-radius: 11px;
    color: #21170d;
    background: linear-gradient(135deg, #ffe1b2, #d69d5d);
    box-shadow: 0 9px 24px rgba(190, 133, 67, .14);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
}

.password-reset-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.password-reset-submit:active {
    transform: translateY(0);
}

.password-reset-message {
    min-height: 18px;
    margin: 13px 0 0;
    color: #e3bf8b;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.password-reset-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #817465;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
}

.password-reset-divider::before,
.password-reset-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(232, 189, 130, .14);
}

.password-reset-footer {
    margin: 0;
    color: #a99c8d;
    font-size: 10px;
}

.password-reset-footer a {
    margin-left: 4px;
    color: #e5bd86;
    font-weight: 850;
    text-decoration: none;
}

.password-reset-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.password-reset-copyright {
    padding: 13px 0 3px;
    color: #938575;
    text-align: center;
    font-size: 9px;
    letter-spacing: .04em;
}

.password-reset-copyright i {
    margin-right: 6px;
    color: #bd9869;
}

@media (max-width: 600px) {
    .password-reset-layout {
        width: calc(100% - 22px);
        padding: 11px 0 13px;
    }

    .password-reset-header {
        padding: 10px 11px;
        border-radius: 14px;
    }

    .password-reset-brand img {
        width: 39px;
        height: 39px;
    }

    .password-reset-brand strong {
        font-size: 11px;
    }

    .password-reset-brand small {
        font-size: 7px;
    }

    .password-reset-back {
        padding: 8px 9px;
        font-size: 9px;
    }

    .password-reset-card {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .password-reset-intro {
        margin-bottom: 21px;
    }

    .password-reset-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
}



/* =========================================================
   NCREATORS V14 — HOMEPAGE FRAME / BORDER SPACING FIX
   Separates category tiles and search controls cleanly.
========================================================= */

/* The homepage search form shares the legacy .search-box class.
   Remove that old outer frame so only the individual fields and the
   surrounding hero panel have visible borders. */
.nc-hero-search-wrap .nc-search-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: stretch;
    column-gap: 15px !important;
    row-gap: 12px !important;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nc-hero-search-wrap .nc-search-box>input,
.nc-hero-search-wrap .nc-search-box>select,
.nc-hero-search-wrap .nc-search-box>button {
    box-sizing: border-box !important;
    display: block;
    position: relative;
    min-width: 0 !important;
    width: 100%;
    min-height: 50px;
    margin: 0 !important;
    border-radius: 12px !important;
}

.nc-hero-search-wrap .nc-search-box>input,
.nc-hero-search-wrap .nc-search-box>select {
    padding: 0 15px !important;
    border: 1px solid rgba(231, 190, 139, .28) !important;
    background: rgba(8, 7, 6, .72) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .32) !important;
}

.nc-hero-search-wrap .nc-search-box>input:focus,
.nc-hero-search-wrap .nc-search-box>select:focus {
    z-index: 1;
    outline: none;
    border-color: rgba(239, 195, 135, .72) !important;
    box-shadow: 0 0 0 3px rgba(232, 189, 130, .09), inset 0 1px 3px rgba(0, 0, 0, .32) !important;
}

.nc-hero-search-wrap .nc-search-box>button {
    width: auto;
    min-width: 122px;
    padding: 0 20px !important;
    border: 1px solid rgba(255, 218, 164, .68) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .2) !important;
}

/* Keep a visible, even gutter between every category card.
   The small width reduction adds separation even if another global
   layout rule later changes the grid's gap. */
.categories .category-slider {
    column-gap: 18px !important;
    row-gap: 18px !important;
    padding: 10px 8px 16px !important;
    box-sizing: border-box;
}

.categories .category-slider>.category-item {
    box-sizing: border-box !important;
    width: calc(100% - 8px) !important;
    min-width: 0;
    margin: 0 auto !important;
    overflow: hidden;
    border-radius: 17px !important;
    isolation: isolate;
}

.categories .category-slider>.category-item .category-photo {
    display: block !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 1px solid rgba(239, 189, 123, .52) !important;
    border-radius: 13px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

/* On smaller screens preserve the compact 3-column layout while still
   leaving a clear gap between the image-card frames. */
@media (max-width: 900px) {
    .categories .category-slider {
        column-gap: 12px !important;
        row-gap: 14px !important;
    }
}

@media (max-width: 600px) {
    .nc-hero-search-wrap .nc-search-box {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 11px !important;
    }

    .nc-hero-search-wrap .nc-search-box>input,
    .nc-hero-search-wrap .nc-search-box>select,
    .nc-hero-search-wrap .nc-search-box>button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 47px;
    }

    .categories .category-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 12px !important;
        padding: 7px 3px 12px !important;
    }

    .categories .category-slider>.category-item {
        width: calc(100% - 4px) !important;
        min-height: 98px;
        padding: 10px 5px !important;
        border-radius: 14px !important;
    }

    .categories .category-slider>.category-item .category-photo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 11px !important;
    }
}

@media (max-width: 360px) {
    .categories .category-slider {
        column-gap: 8px !important;
        row-gap: 10px !important;
    }

    .categories .category-slider>.category-item {
        width: calc(100% - 3px) !important;
    }
}



/* =========================================================
   NCREATORS V15 — MOBILE CATEGORY PHOTO POSITION FIX
   Desktop category layout is intentionally unchanged.
========================================================= */
@media (max-width: 700px) {
    .categories .category-slider>.category-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 96px !important;
        padding: 11px 5px 10px !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    .categories .category-slider>.category-item .category-photo {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        margin: 0 auto 7px !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
    }

    .categories .category-slider>.category-item>span {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 2px !important;
        text-align: center !important;
        line-height: 1.2 !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .categories .category-slider>.category-item {
        min-height: 88px !important;
        padding: 9px 4px 8px !important;
    }

    .categories .category-slider>.category-item .category-photo {
        flex-basis: 37px !important;
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
        max-width: 37px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }

    .categories .category-slider>.category-item>span {
        font-size: 11px !important;
    }
}