/* 1. Global Reset & Variables */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Kumbh Sans', sans-serif;
}

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --dark: #111827;
    --light-bg: #f3f4f6;
    --white: #ffffff;
    --gray-text: #4b5563;
}

body {
    background-color: var(--light-bg);
    color: var(--dark);
    line-height: 1.5;
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* 2. Modern Sticky Navbar */
.navbar {
    background: var(--white);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    align-items: center;
}

#navbar__logo {
    font-weight: 800;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: 1px;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 10px;
}

.navbar__links {
    color: var(--dark);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.navbar__links:hover {
    color: var(--primary);
    background: rgba(16, 185, 129, 0.08);
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 6px;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Mobile Menu Toggle Bar */
.navbar__toggle {
    display: none;
    cursor: pointer;
}

@media screen and (max-width: 1100px) {
    .navbar__toggle {
        display: block;
    }
    .navbar__toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background: var(--dark);
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);   
}
#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); 
}
    .navbar__menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--white);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        opacity: 0;
    }
    
    .navbar__menu.active {
        max-height: 500px;
        padding: 20px 0;
        opacity: 1;
    }
   
    .navbar__links {
        padding: 12px;
        width: 100%;
        text-align: center;
        display: block;
    }
     .navbar__btn {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 10px 0;
    }
}



/* 3. Hero Section */
.main {
    background: linear-gradient(180deg, #ffffff 0%, var(--light-bg) 100%);
    padding: 60px 0;
}

.main__container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    gap: 40px;
}

.main__content h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 15px;
}

.main__content h2 {
    font-size: 2.2rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 700;
}

.main__content p {
    font-size: 1.2rem;
    color: var(--gray-text);
    margin-bottom: 30px;
    line-height: 1.6;
}

.main__btn {
    background: var(--primary);
    color: var(--white);
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

.main__btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.main__img--container {
    text-align: center;
}

#main__img {
    max-width: 100%;
    height: auto;
}

/* 4. Problem & Value Proposition Section */
.problem {
    background: var(--white);
    padding: 80px 30px;
    text-align: center;
}

.problem h1 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 20px;
    max-width: 800px;
    margin-inline-start: auto;
    margin-right: auto;
}

.problem h2 {
    font-size: 2rem;
    color: var(--primary-dark);
    margin: 40px 0 15px 0;
}

.problem p {
    font-size: 1.15rem;
    color: var(--gray-text);
    max-width: 700px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

/* 5. Services Section Grid */
.services {
    padding: 80px 30px;
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.services h1 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--dark);
}

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

.services__card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    text-align: start;
    border-top: 4px solid var(--primary);
    transition: transform 0.2s ease;
}

.services__card:hover {
    transform: translateY(-5px);
}

.services__card h2 {
    font-size: 1.5rem;
    color: var(--dark);
    margin-bottom: 15px;
}

.services__card p {
    color: var(--gray-text);
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .main__container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .main__content h1 {
        font-size: 2.5rem;
    }
    .main__content h2 {
        font-size: 1.8rem;
    }
}

/* How It Works Section */
.how-it-works {
    padding: 80px 30px;
    background: #ffffff;
    text-align: center;
}

.how-it-works .section__title {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 10px;
}

.how-it-works .section__subtitle {
    font-size: 1.15rem;
    color: var(--gray-text);
    margin-bottom: 50px;
}

.how-it-works__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.how-it-works__card {
    background: var(--light-bg);
    padding: 40px 25px;
    border-radius: 12px;
    position: relative;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e5e7eb;
}

.how-it-works__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.step__number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.how-it-works__card h2 {
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 12px;
    font-weight: 700;
}

.how-it-works__card p {
    color: var(--gray-text);
    font-size: 1rem;
    line-height: 1.6;
}

/* Standalone Login Screen Styling */
#loginView {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    background: var(--light-bg);
    padding: 20px;
}

.login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.login-card h2 {
    font-size: 1.8rem;
    color: var(--dark);
    margin-bottom: 10px;
}

.login-card p {
    color: var(--gray-text);
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.input-group {
    margin-bottom: 15px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-group input:focus {
    border-color: var(--primary);
}

.button.full-width {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    margin-top: 10px;
}

.login-footer {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--gray-text);
}

.login-footer a {
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
}

.login-footer a:hover {
    text-decoration: underline;
}
/* Footer Section */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 60px 30px 20px 30px;
    margin-top: auto;
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer__logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
}

.brand-col p {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 300px;
}

.footer__col h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--white);
}

.footer__col ul {
    list-style: none;
}

.footer__col ul li {
    margin-bottom: 10px;
}

.footer__link {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer__link:hover {
    color: var(--primary);
}

.footer__col p {
    color: #9ca3af;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.footer__bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid #374151;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

@media screen and (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 480px) {
    .footer__container {
        grid-template-columns: 1fr;
    }
}



/* BRANDUP Sales Dashboard */

.sales-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px 60px;
    color: #f4f4f5;
}

.sales-heading {
    margin-bottom: 28px;
}

.sales-eyebrow {
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.sales-heading h2 {
    margin: 8px 0;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: #000000;
}

.sales-heading p,
.sales-panel-heading p {
    color: #000000;
}

.sales-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.sales-card,
.sales-panel {
    background: #15151c;
    border: 1px solid #2b2b36;
    border-radius: 16px;
    padding: 22px;
}

.sales-card p {
    color: #a1a1aa;
    margin: 0 0 12px;
}

.sales-card h3 {
    font-size: clamp(1.3rem, 3vw, 2rem);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.sales-card span {
    color: #a78bfa;
    font-size: 0.85rem;
}

.sales-panel {
    margin-bottom: 20px;
}

.sales-panel h3 {
    margin-top: 0;
}

.sales-chart-wrap {
    position: relative;
    height: 300px;
    margin-top: 24px;
}

.sale-form label {
    display: block;
    margin-bottom: 10px;
    color: #d4d4d8;
}

.sale-input-row {
    display: flex;
    gap: 12px;
}

.sale-input-row input {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #3f3f4b;
    border-radius: 8px;
    background: #0d0d12;
    color: #fff;
}

.sale-input-row input:focus {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

#saleMessage {
    min-height: 1.4em;
    color: #a78bfa;
}

#saleMessage.error {
    color: #fca5a5;
}

.sales-table-wrap {
    overflow-x: auto;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.sales-table th,
.sales-table td {
    padding: 14px 10px;
    border-bottom: 1px solid #2b2b36;
}

.sales-table th {
    color: #a1a1aa;
    font-size: 0.85rem;
}

.sales-table td {
    color: #f4f4f5;
}

@media (max-width: 700px) {
    .sales-kpis {
        grid-template-columns: 1fr;
    }

    .sales-dashboard {
        padding: 24px 16px 40px;
    }

    .sale-input-row {
        flex-direction: column;
    }

    .sale-input-row .button {
        width: 100%;
    }

    .sales-chart-wrap {
        height: 240px;
    }
}




/* BRANDUP Social Growth */

.social-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px 60px;
    color: #f4f4f5;
}

.social-header {
    margin-bottom: 26px;
}

.social-eyebrow {
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.social-header h1 {
    margin: 8px 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.social-header p,
.social-panel > p {
    color: #a1a1aa;
}

.social-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.social-card,
.social-panel {
    background: #15151c;
    border: 1px solid #2b2b36;
    border-radius: 16px;
    padding: 22px;
}

.social-card > p {
    color: #a1a1aa;
}

.social-card h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    overflow-wrap: anywhere;
}

.social-card span {
    color: #a78bfa;
    font-size: 0.9rem;
}

.social-panel {
    margin-bottom: 20px;
}

.social-chart-wrap {
    position: relative;
    height: 320px;
    margin-top: 20px;
}

#socialMetricsForm {
    display: grid;
    gap: 10px;
    max-width: 520px;
}

#socialMetricsForm label {
    margin-top: 8px;
    color: #d4d4d8;
}

#socialMetricsForm input,
#socialMetricsForm select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #3f3f4b;
    border-radius: 8px;
    background: #0d0d12;
    color: #fff;
}

#socialMessage {
    color: #a78bfa;
    margin: 12px 0;
}

@media (max-width: 700px) {
    .social-dashboard {
        padding: 24px 16px 40px;
    }

    .social-cards {
        grid-template-columns: 1fr;
    }

    .social-chart-wrap {
        height: 250px;
    }
}



/* BRANDUP Admin Dashboard */

.admin-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 24px 60px;
    color: #f4f4f5;
}

.admin-eyebrow {
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.admin-dashboard > h1 {
    margin: 8px 0;
    font-size: clamp(2rem, 4vw, 2.7rem);
}

.admin-dashboard > p {
    color: #a1a1aa;
}

.admin-panel {
    margin-top: 24px;
    padding: 22px;
    background: #15151c;
    border: 1px solid #2b2b36;
    border-radius: 16px;
}

.admin-panel h2 {
    margin-top: 0;
}

.admin-panel h3 {
    margin-top: 28px;
}

#clientSearch {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 12px 0 18px;
    padding: 12px;
    border: 1px solid #3f3f4b;
    border-radius: 8px;
    background: #0d0d12;
    color: #fff;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.admin-table th,
.admin-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #30303b;
    white-space: nowrap;
}

.admin-table th {
    color: #a1a1aa;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-table td {
    color: #e4e4e7;
    font-size: 0.9rem;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table .button {
    width: auto;
    padding: 8px 14px;
    cursor: pointer;
}

.admin-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.admin-summary > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: 12px;
    background: #20202a;
}

.admin-summary span {
    color: #a1a1aa;
    font-size: 0.9rem;
}

.admin-summary strong {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
}

#adminMessage {
    color: #a78bfa;
    min-height: 1.4em;
}

@media (max-width: 650px) {
    .admin-dashboard {
        padding: 24px 14px 40px;
    }

    .admin-panel {
        padding: 14px;
    }

    .admin-summary {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   BRANDUP PREMIUM HOMEPAGE
   ======================================== */

#homeView.brand-home {
    background: #0b0e16;
    color: #f7f9fc;
    overflow: hidden;
}

#homeView .bu-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

/* HERO */

#homeView .bu-hero {
    padding: 105px 0 95px;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(120, 87, 214, .18),
            transparent 37%
        ),
        radial-gradient(
            circle at 8% 65%,
            rgba(36, 213, 164, .09),
            transparent 36%
        ),
        #0b0e16;
}

#homeView .bu-hero-grid {
    display: grid;
    grid-template-columns: 1.07fr .93fr;
    align-items: center;
    gap: 58px;
}

#homeView .bu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 9px 14px;
    border: 1px solid #24554b;
    border-radius: 100px;
    color: #8af0cf;
    background: rgba(32, 177, 136, .09);
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 800;
}

#homeView .bu-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35e5b0;
    box-shadow: 0 0 0 4px rgba(53,229,176,.12);
}

#homeView .bu-hero h1 {
    font-size: clamp(3rem, 5.4vw, 5.3rem);
    letter-spacing: -.065em;
    line-height: 1.09;
    font-weight: 800;
}

#homeView .bu-hero h1 span {
    display: block;
    color: #39e2b1;
}

#homeView .bu-lead {
    max-width: 540px;
    margin: 25px 0 30px;
    color: #aab4c4;
    line-height: 1.85;
    font-size: 1.07rem;
}

/* BUTTONS */

#homeView .bu-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

#homeView .bu-btn {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 15px 21px;
    min-height: 50px;
    border-radius: 11px;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 800;
    transition: transform .2s ease,
                border-color .2s ease,
                box-shadow .2s ease;
}

#homeView .bu-btn:hover {
    transform: translateY(-3px);
}

#homeView .bu-btn:focus-visible {
    outline: 3px solid #bdacf8;
    outline-offset: 3px;
}

#homeView .bu-btn-primary {
    color: #06241b;
    background: linear-gradient(
        120deg, #39e2b1, #9ef2b6
    );
    box-shadow: 0 12px 32px rgba(40,214,158,.18);
}

#homeView .bu-btn-outline {
    color: #f1f5f9;
    background: rgba(255,255,255,.035);
    border: 1px solid #41495b;
}

#homeView .bu-btn-outline:hover {
    border-color: #7c8aa3;
}

#homeView .bu-microcopy {
    margin-top: 22px;
    color: #78859a;
    font-size: .82rem;
}

/* DASHBOARD PREVIEW */

#homeView .bu-preview {
    background: #171c2a;
    border: 1px solid #343b4f;
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.35),
        0 0 60px rgba(100,82,186,.09);
    overflow: hidden;
}

#homeView .bu-preview-top {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid #303648;
    color: #9ca8bb;
    font-size: .64rem;
    letter-spacing: .09em;
}

#homeView .bu-window-dots {
    display: flex;
    gap: 5px;
}

#homeView .bu-window-dots i {
    width: 7px;
    height: 7px;
    background: #596378;
    border-radius: 50%;
}

#homeView .bu-window-dots i:first-child {
    background: #df797a;
}

#homeView .bu-window-dots i:nth-child(2) {
    background: #d9b566;
}

#homeView .bu-window-dots i:last-child {
    background: #4bd9a7;
}

#homeView .bu-demo-pill {
    margin-inline-start: auto;
    padding: 5px 8px;
    color: #55e0b6;
    border: 1px solid #276b5a;
    border-radius: 5px;
    font-size: .65rem;
}

#homeView .bu-preview-body {
    padding: 25px;
}

#homeView .bu-preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

#homeView .bu-preview-heading small {
    color: #7f8da5;
    font-size: .62rem;
    letter-spacing: .12em;
}

#homeView .bu-preview-heading h2 {
    margin-top: 4px;
    font-size: 1.2rem;
    color: #f3f6fb;
}

#homeView .bu-chart-symbol {
    color: #3de5b4;
    background: #173d35;
    border-radius: 11px;
    padding: 7px 13px;
    font-size: 1.5rem;
}

/* STAT CARDS */

#homeView .bu-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#homeView .bu-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 19px;
    background: #22283a;
    border: 1px solid #353d51;
    border-radius: 12px;
}

#homeView .bu-metric span {
    color: #aab4c6;
    font-size: .8rem;
}

#homeView .bu-metric strong {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -.04em;
}

#homeView .bu-metric small {
    color: #5de1bb;
    font-size: .68rem;
}

/* CHART PREVIEW */

#homeView .bu-chart-card {
    margin-top: 14px;
    padding: 19px 19px 15px;
    background: #202637;
    border: 1px solid #343c50;
    border-radius: 12px;
}

#homeView .bu-chart-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .76rem;
}

#homeView .bu-chart-top span {
    color: #8996ab;
}

#homeView .bu-bars {
    display: flex;
    height: 130px;
    gap: 11px;
    align-items: end;
    margin-top: 16px;
    padding: 0 5px;
    background: repeating-linear-gradient(
        to top,
        transparent 0 31px,
        rgba(255,255,255,.05) 32px 33px
    );
}

#homeView .bu-bars i {
    flex: 1;
    min-width: 0;
    height: var(--bar-height);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(0deg,#149d7d,#43e4b5);
}

#homeView .bu-bars i:last-child {
    background: linear-gradient(0deg,#9b77e5,#bd9cff);
}

#homeView .bu-days {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    color: #8995a8;
    font-size: .72rem;
}

#homeView .bu-preview-note {
    color: #7f8ba0;
    margin-top: 15px;
    font-size: .72rem;
    text-align: center;
}

/* PLATFORMS */

#homeView .bu-platforms {
    background: #111622;
    border-top: 1px solid #242c3b;
    border-bottom: 1px solid #242c3b;
}

#homeView .bu-platforms-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}

#homeView .bu-platforms-inner > span {
    color: #93a0b4;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

#homeView .bu-platforms-inner > div {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 42px);
}

#homeView .bu-platforms-inner b {
    color: #dbe3ef;
    font-size: 1rem;
}

/* SERVICES */

#homeView .bu-section {
    padding: 98px 0;
}

#homeView .bu-section-heading {
    margin-bottom: 38px;
    max-width: 670px;
}

#homeView .bu-section-kicker {
    color: #48e0b7;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: 12px;
}

#homeView .bu-section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -.055em;
    line-height: 1.16;
}

#homeView .bu-section-heading h2 span {
    color: #a78bfa;
}

#homeView .bu-section-heading > p:last-child {
    color: #aab4c4;
    margin-top: 14px;
    line-height: 1.75;
}

#homeView .bu-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 15px;
}

#homeView .bu-service-card {
    background: #171c29;
    border: 1px solid #2e3649;
    border-radius: 15px;
    padding: 25px 21px;
    transition: transform .2s ease,
                border-color .2s ease;
}

#homeView .bu-service-card:hover {
    transform: translateY(-5px);
    border-color: #327e6c;
}

#homeView .bu-service-no {
    color: #8c9ab0;
    font-size: .68rem;
    letter-spacing: .08em;
    font-weight: 800;
}

#homeView .bu-service-icon {
    margin: 27px 0 20px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #53e3ba;
    background: #1c443e;
    font-size: 1.6rem;
}

#homeView .bu-service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

#homeView .bu-service-card p {
    color: #a5b0c3;
    line-height: 1.75;
    font-size: .86rem;
}

/* HOW IT WORKS */

#homeView .bu-process {
    padding: 94px 0;
    background: #111622;
    border-block: 1px solid #242d3d;
}

#homeView .bu-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 30px;
}

#homeView .bu-step {
    padding-top: 24px;
    border-top: 1px solid #415064;
}

#homeView .bu-step > span {
    color: #58e2bd;
    font-weight: 800;
    font-size: 1.65rem;
}

#homeView .bu-step h3 {
    margin: 18px 0 10px;
    font-size: 1.2rem;
}

#homeView .bu-step p {
    color: #a6b1c3;
    line-height: 1.75;
    font-size: .91rem;
}

/* FINAL CONTACT SECTION */

#homeView .bu-cta-section {
    padding: 90px 0 110px;
}

#homeView .bu-cta-panel {
    padding: 65px 28px;
    border-radius: 22px;
    text-align: center;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(116,81,196,.23),
            transparent 45%
        ),
        linear-gradient(135deg,#172e30,#1b1931);
    border: 1px solid #3b4b58;
}

#homeView .bu-cta-panel h2 {
    max-width: 610px;
    margin: 0 auto 14px;
    font-size: clamp(2rem, 4vw, 3.15rem);
    letter-spacing: -.05em;
    line-height: 1.15;
}

#homeView .bu-cta-panel > p:not(.bu-section-kicker) {
    color: #b4bfce;
    margin-bottom: 27px;
}

/* Free consultation contact options */
#homeView .bu-cta-panel .bu-consultation-heading {
    color: #f2faf8;
    font-size: clamp(1.05rem, 2.3vw, 1.32rem);
    font-weight: 700;
    margin-bottom: 10px;
}

#homeView .bu-consultation-options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

#homeView .bu-consultation-options .bu-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#homeView .bu-consultation-options bdi,
.footer__contact-link bdi {
    unicode-bidi: isolate;
}

.footer__contact-link {
    color: #8ce6c4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer__contact-link:hover,
.footer__contact-link:focus-visible {
    color: #c3ffe5;
    text-decoration: underline;
}

/* DARK NAVBAR ON HOMEPAGE ONLY */

body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
#openLoginBtn {
    background: #26d7a5;
    color: #06241b;
}

#homeView #services {
    scroll-margin-top: 95px;
}

/* TABLET */

@media (max-width: 950px) {
    #homeView .bu-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    #homeView .bu-hero-copy {
        max-width: 700px;
    }

    #homeView .bu-preview {
        width: min(100%, 600px);
    }

    #homeView .bu-service-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    body:has(#publicViewsContainer:not(.hidden) #homeView:not(.hidden))
    #publicNav {
        background: #0f1520;
    }
}

/* MOBILE */

@media (max-width: 650px) {
    #homeView .bu-container {
        width: min(100% - 32px, 1180px);
    }

    #homeView .bu-hero {
        padding: 70px 0;
    }

    #homeView .bu-hero h1 {
        font-size: clamp(2.65rem, 11vw, 4rem);
    }

    #homeView .bu-lead {
        font-size: 1rem;
    }

    #homeView .bu-hero-buttons {
        flex-direction: column;
    }

    #homeView .bu-btn {
        width: 100%;
    }

    #homeView .bu-preview-body {
        padding: 15px;
    }

    #homeView .bu-metric {
        padding: 13px;
    }

    #homeView .bu-metric strong {
        font-size: 1.45rem;
    }

    #homeView .bu-bars {
        height: 105px;
        gap: 7px;
    }

    #homeView .bu-platforms-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    #homeView .bu-platforms-inner > div {
        gap: 20px;
    }

    #homeView .bu-section,
    #homeView .bu-process {
        padding: 70px 0;
    }

    #homeView .bu-service-grid,
    #homeView .bu-step-grid {
        grid-template-columns: 1fr;
    }

    #homeView .bu-cta-section {
        padding: 65px 0;
    }

    #homeView .bu-cta-panel {
        padding: 45px 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #homeView .bu-btn,
    #homeView .bu-service-card {
        transition: none;
    }
}



/* ==========================================
   BRANDUP - PREMIUM ABOUT PAGE
   ========================================== */

#aboutView.bu-about {
    background: #0b0e16;
    color: #f7f9fc;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    text-align: start;
    overflow: hidden;
}

#aboutView .bu-about-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

#aboutView .bu-about-eyebrow {
    color: #43e0b4;
    font-size: .75rem;
    letter-spacing: .16em;
    font-weight: 800;
    margin-bottom: 19px;
}

#aboutView h1,
#aboutView h2,
#aboutView h3 {
    color: #f7f9fc;
}

/* HERO SECTION */

#aboutView .bu-about-hero {
    padding: 110px 0 120px;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(133, 95, 210, .17),
            transparent 40%
        ),
        radial-gradient(
            circle at 13% 70%,
            rgba(37, 219, 166, .07),
            transparent 40%
        ),
        #0b0e16;
}

#aboutView .bu-about-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 65px;
    align-items: center;
}

#aboutView .bu-about-intro h1 {
    font-size: clamp(3rem, 5.5vw, 5.3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.065em;
}

#aboutView .bu-about-intro h1 span {
    color: #40e1b1;
    display: block;
}

#aboutView .bu-about-lead {
    max-width: 560px;
    color: #aab4c4;
    font-size: 1.08rem;
    line-height: 1.85;
    margin: 28px 0 32px;
}

#aboutView .bu-about-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* BUTTONS */

#aboutView .bu-about-btn-primary,
#aboutView .bu-about-btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 51px;
    padding: 14px 24px;
    border-radius: 11px;
    font-size: .94rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease,
                box-shadow .2s ease,
                border-color .2s ease;
}

#aboutView .bu-about-btn-primary {
    background: linear-gradient(
        120deg, #39e2b1, #9ef2b6
    );
    color: #06241b;
    box-shadow: 0 12px 32px rgba(40,214,158,.16);
}

#aboutView .bu-about-btn-secondary {
    color: #f1f5f9;
    border: 1px solid #41495b;
    background: rgba(255,255,255,.035);
}

#aboutView .bu-about-btn-primary:hover,
#aboutView .bu-about-btn-secondary:hover {
    transform: translateY(-3px);
}

#aboutView .bu-about-btn-primary:focus-visible,
#aboutView .bu-about-btn-secondary:focus-visible {
    outline: 3px solid #a78bfa;
    outline-offset: 3px;
}

/* BRAND HERO VISUAL */

#aboutView .bu-about-visual {
    position: relative;
    height: 415px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

#aboutView .bu-about-orbit {
    position: absolute;
    border: 1px solid rgba(130, 156, 186, .23);
    border-radius: 50%;
    pointer-events: none;
}

#aboutView .orbit-one {
    width: 300px;
    height: 300px;
}

#aboutView .orbit-two {
    width: 410px;
    height: 410px;
    border-style: dashed;
    border-color: rgba(93, 128, 150, .17);
}

#aboutView .bu-about-brand-circle {
    width: 225px;
    height: 225px;
    display: grid;
    place-items: center;
    border: 1px solid #3c6b63;
    border-radius: 45px;
    transform: rotate(-10deg);
    background:
        radial-gradient(
            circle at 25% 15%,
            rgba(85, 241, 191, .24),
            transparent 65%
        ),
        linear-gradient(135deg, #1c403b, #24203e);
    box-shadow:
        0 25px 75px rgba(0,0,0,.35),
        0 0 90px rgba(51,224,172,.08);
}

#aboutView .bu-about-brand-circle span {
    font-size: 7rem;
    font-weight: 800;
    letter-spacing: -.13em;
    color: #49e5b9;
    transform: rotate(10deg);
}

#aboutView .bu-about-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 19px;
    min-width: 190px;
    border: 1px solid #3e485b;
    border-radius: 13px;
    background: #202638;
    box-shadow: 0 18px 45px rgba(0,0,0,.3);
    z-index: 2;
}

#aboutView .bu-about-floating-card strong {
    display: block;
    font-size: .83rem;
    color: #f4f7fa;
}

#aboutView .bu-about-floating-card small {
    display: block;
    font-size: .73rem;
    color: #95a3b8;
    margin-top: 3px;
}

#aboutView .bu-about-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #214940;
    color: #57ebbf;
    font-size: 1.3rem;
}

#aboutView .card-top {
    top: 30px;
    right: 0;
}

#aboutView .card-bottom {
    bottom: 33px;
    left: 0;
}

/* MISSION */

#aboutView .bu-about-mission {
    padding: 100px 0;
    background: #111622;
    border-top: 1px solid #242c3b;
    border-bottom: 1px solid #242c3b;
}

#aboutView .bu-about-mission-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 95px;
}

#aboutView .bu-about-mission h2,
#aboutView .bu-about-approach h2 {
    font-size: clamp(2rem, 4vw, 3.35rem);
    letter-spacing: -.055em;
    line-height: 1.15;
}

#aboutView .bu-about-mission h2 span,
#aboutView .bu-about-approach h2 span {
    color: #a78bfa;
}

#aboutView .bu-about-mission-text > p,
#aboutView .bu-about-approach-copy > p:not(.bu-about-eyebrow) {
    color: #aab4c4;
    line-height: 1.85;
    margin-bottom: 20px;
    font-size: 1rem;
}

#aboutView .bu-about-mission-note {
    display: flex;
    gap: 17px;
    padding: 22px;
    margin-top: 27px;
    background: #1c2930;
    border-inline-start: 3px solid #39e2b1;
    border-radius: 0 12px 12px 0;
}

#aboutView .bu-about-mission-note span {
    color: #45e5b6;
    font-size: 1.4rem;
}

#aboutView .bu-about-mission-note p {
    color: #d7eee7;
    line-height: 1.7;
    font-weight: 600;
}

/* VALUES */

#aboutView .bu-about-values {
    padding: 105px 0;
}

#aboutView .bu-about-heading {
    max-width: 660px;
    margin-bottom: 42px;
}

#aboutView .bu-about-heading h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.055em;
    line-height: 1.16;
}

#aboutView .bu-about-heading h2 span {
    color: #a78bfa;
}

#aboutView .bu-about-heading > p:last-child {
    margin-top: 16px;
    color: #aab4c4;
    line-height: 1.75;
}

#aboutView .bu-about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

#aboutView .bu-about-value-card {
    padding: 25px 21px;
    background: #171c29;
    border: 1px solid #2e3649;
    border-radius: 15px;
    transition: transform .2s ease,
                border-color .2s ease;
}

#aboutView .bu-about-value-card:hover {
    transform: translateY(-5px);
    border-color: #388a71;
}

#aboutView .bu-about-value-number {
    font-size: .73rem;
    font-weight: 800;
    color: #8594ab;
}

#aboutView .bu-about-value-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border-radius: 12px;
    background: #20443d;
    color: #51e4b8;
    font-size: 1.7rem;
    margin: 27px 0 19px;
}

#aboutView .bu-about-value-card h3 {
    font-size: 1.1rem;
    margin-bottom: 13px;
}

#aboutView .bu-about-value-card p {
    font-size: .88rem;
    color: #a5b0c3;
    line-height: 1.75;
}

/* THE BRANDUP APPROACH */

#aboutView .bu-about-approach {
    padding: 105px 0;
    background: #111622;
    border-top: 1px solid #242d3d;
    border-bottom: 1px solid #242d3d;
}

#aboutView .bu-about-approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

#aboutView .bu-about-approach-card {
    padding: 28px;
    background: #1a2030;
    border: 1px solid #394258;
    border-radius: 19px;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

#aboutView .bu-about-panel-label {
    display: block;
    color: #8e9bb1;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 800;
    margin-bottom: 25px;
}

#aboutView .bu-about-approach-steps {
    display: grid;
    gap: 11px;
}

#aboutView .bu-about-approach-steps > div {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 3px 14px;
    align-items: center;
    background: #242c3e;
    border: 1px solid #353f54;
    border-radius: 11px;
    padding: 15px;
}

#aboutView .bu-about-approach-steps span {
    grid-row: span 2;
    color: #4fe4ba;
    font-size: 1.2rem;
    font-weight: 800;
}

#aboutView .bu-about-approach-steps strong {
    color: #f5f8fb;
}

#aboutView .bu-about-approach-steps small {
    color: #9faabe;
}

#aboutView .bu-about-approach-copy h2 {
    margin-bottom: 24px;
}

/* FINAL CTA */

#aboutView .bu-about-cta {
    padding: 95px 0 115px;
}

#aboutView .bu-about-cta-inner {
    text-align: center;
    padding: 75px 30px;
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(134,95,210,.24),
            transparent 45%
        ),
        linear-gradient(135deg, #172e30, #1b1931);
    border: 1px solid #3b4b58;
    border-radius: 22px;
}

#aboutView .bu-about-cta h2 {
    max-width: 700px;
    margin: 0 auto 20px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.055em;
    line-height: 1.16;
}

#aboutView .bu-about-cta h2 span {
    color: #44e3b6;
}

#aboutView .bu-about-cta-inner > p:not(.bu-about-eyebrow) {
    max-width: 440px;
    margin: 0 auto 30px;
    color: #b4bfce;
    line-height: 1.8;
}

/* MATCH THE HOMEPAGE NAVBAR */

body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
#openLoginBtn {
    background: #26d7a5;
    color: #06241b;
}

/* RESPONSIVE - TABLETS */

@media (max-width: 950px) {
    #aboutView .bu-about-hero-grid,
    #aboutView .bu-about-mission-grid,
    #aboutView .bu-about-approach-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    #aboutView .bu-about-visual {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    #aboutView .bu-about-values-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    body:has(#publicViewsContainer:not(.hidden) #aboutView:not(.hidden))
    #publicNav {
        background: #0f1520;
    }
}

/* RESPONSIVE - MOBILE */

@media (max-width: 650px) {
    #aboutView .bu-about-container {
        width: min(100% - 32px, 1180px);
    }

    #aboutView .bu-about-hero {
        padding: 70px 0;
    }

    #aboutView .bu-about-intro h1 {
        font-size: clamp(2.65rem, 11vw, 4rem);
    }

    #aboutView .bu-about-lead {
        font-size: 1rem;
    }

    #aboutView .bu-about-actions {
        flex-direction: column;
    }

    #aboutView .bu-about-btn-primary,
    #aboutView .bu-about-btn-secondary {
        width: 100%;
    }

    #aboutView .bu-about-visual {
        height: 310px;
    }

    #aboutView .orbit-one {
        width: 220px;
        height: 220px;
    }

    #aboutView .orbit-two {
        width: 290px;
        height: 290px;
    }

    #aboutView .bu-about-brand-circle {
        width: 160px;
        height: 160px;
        border-radius: 33px;
    }

    #aboutView .bu-about-brand-circle span {
        font-size: 5rem;
    }

    #aboutView .bu-about-floating-card {
        min-width: 0;
        padding: 10px;
    }

    #aboutView .bu-about-floating-card strong {
        font-size: .72rem;
    }

    #aboutView .bu-about-floating-card small {
        font-size: .63rem;
    }

    #aboutView .card-top {
        top: 5px;
    }

    #aboutView .card-bottom {
        bottom: 5px;
    }

    #aboutView .bu-about-mission,
    #aboutView .bu-about-values,
    #aboutView .bu-about-approach {
        padding: 70px 0;
    }

    #aboutView .bu-about-values-grid {
        grid-template-columns: 1fr;
    }

    #aboutView .bu-about-cta {
        padding: 65px 0;
    }

    #aboutView .bu-about-cta-inner {
        padding: 50px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #aboutView .bu-about-btn-primary,
    #aboutView .bu-about-btn-secondary,
    #aboutView .bu-about-value-card {
        transition: none;
    }
}



/* ==========================================
   BRANDUP PREMIUM LOGIN PAGE
   ========================================== */

#loginView.bu-login {
    display: block;
    min-height: calc(100vh - 80px);
    padding: 75px 24px 100px;
    background:
        radial-gradient(
            circle at 14% 25%,
            rgba(39, 213, 160, 0.11),
            transparent 38%
        ),
        radial-gradient(
            circle at 83% 65%,
            rgba(136, 96, 222, 0.14),
            transparent 40%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#loginView .bu-login-shell {
    width: min(100%, 1150px);
    margin: 0 auto;
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 75px;
    align-items: center;
}

/* LEFT SIDE */

#loginView .bu-login-intro {
    padding: 25px 0;
}

#loginView .bu-login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    margin-bottom: 29px;
    border: 1px solid #24554b;
    border-radius: 100px;
    background: rgba(32,177,136,.08);
    color: #76ebc7;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

#loginView .bu-login-dot {
    width: 8px;
    height: 8px;
    background: #39e2b1;
    border-radius: 50%;
    box-shadow: 0 0 12px #39e2b1;
}

#loginView .bu-login-intro h1 {
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 5.1rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.065em;
    margin-bottom: 24px;
}

#loginView .bu-login-intro h1 span {
    display: block;
    color: #39e2b1;
}

#loginView .bu-login-lead {
    color: #aab4c4;
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 510px;
    margin-bottom: 34px;
}

/* FEATURE LIST */

#loginView .bu-login-features {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 35px 0 45px;
}

#loginView .bu-login-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

#loginView .bu-login-feature-icon {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #1b3c36;
    border: 1px solid #2c6658;
    border-radius: 12px;
    color: #4be5b8;
    font-size: 1.5rem;
}

#loginView .bu-login-feature h3 {
    color: #f4f7fb;
    font-size: 1rem;
    margin: 0 0 5px;
}

#loginView .bu-login-feature p {
    color: #8f9db2;
    line-height: 1.6;
    font-size: .87rem;
}

/* BRAND SIGNATURE */

#loginView .bu-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid #303848;
    max-width: 420px;
}

#loginView .bu-login-brand-symbol {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 13px;
    background: linear-gradient(
        135deg, #19483d, #332954
    );
    color: #48e5b6;
    font-size: 1.55rem;
    font-weight: 800;
}

#loginView .bu-login-brand strong {
    display: block;
    letter-spacing: .08em;
    font-size: .85rem;
}

#loginView .bu-login-brand small {
    display: block;
    margin-top: 4px;
    color: #8492a7;
    font-size: .75rem;
}

/* LOGIN CARD */

#loginView .bu-login-card {
    background: #171c2a;
    border: 1px solid #353c50;
    border-radius: 22px;
    padding: 38px;
    box-shadow:
        0 25px 75px rgba(0,0,0,.32),
        0 0 65px rgba(130,89,219,.07);
}

#loginView .bu-login-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 28px;
}

#loginView .bu-login-lock {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #1c493d;
    color: #4ce6ba;
    font-size: 1.5rem;
}

#loginView .bu-login-card-top > span {
    color: #62e5bd;
    letter-spacing: .12em;
    font-weight: 800;
    font-size: .7rem;
}

#loginView .bu-login-card h2 {
    color: #ffffff;
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -.045em;
    margin-bottom: 12px;
}

#loginView .bu-login-card-description {
    color: #a2afc1;
    font-size: .92rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* INPUT FIELDS */

#loginView .bu-login-field {
    margin-bottom: 21px;
}

#loginView .bu-login-field label {
    display: block;
    color: #d6deea;
    font-size: .84rem;
    font-weight: 700;
    margin-bottom: 10px;
}

#loginView .bu-login-field input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #3b455c;
    border-radius: 10px;
    background: #101522;
    color: #ffffff;
    font-size: .95rem;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#loginView .bu-login-field input::placeholder {
    color: #77849a;
}

#loginView .bu-login-field input:focus {
    border-color: #39e2b1;
    box-shadow: 0 0 0 3px rgba(57,226,177,.12);
}

/* SIGN IN BUTTON */

#loginView .bu-login-submit {
    width: 100%;
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 28px;
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(
        120deg, #39e2b1, #9ef2b6
    );
    color: #06241b;
    font-weight: 800;
    font-size: .97rem;
    cursor: pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#loginView .bu-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(57,226,177,.2);
}

#loginView .bu-login-submit:focus-visible {
    outline: 3px solid #a78bfa;
    outline-offset: 3px;
}

/* ACCOUNT ACCESS */

#loginView .bu-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 31px 0 20px;
    color: #8290a5;
    font-size: .69rem;
    letter-spacing: .1em;
    font-weight: 800;
    white-space: nowrap;
}

#loginView .bu-login-divider::before,
#loginView .bu-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #343c50;
}

#loginView .bu-login-help {
    color: #a1aec1;
    text-align: center;
    font-size: .85rem;
    line-height: 1.7;
}

#loginView .bu-login-contact {
    display: block;
    text-align: center;
    margin-top: 13px;
    color: #4ce5b8;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
}

#loginView .bu-login-contact:hover {
    text-decoration: underline;
}

#loginView .bu-login-bottom {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #333b4f;
    text-align: center;
}

#loginView .bu-login-bottom a {
    color: #aab6c7;
    text-decoration: none;
    font-size: .86rem;
    transition: color .2s ease;
}

#loginView .bu-login-bottom a:hover {
    color: #42e2b6;
}

/* MATCH DARK NAVBAR */

body:has(
    #publicViewsContainer:not(.hidden)
    #loginView:not(.hidden)
) .navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(
    #publicViewsContainer:not(.hidden)
    #loginView:not(.hidden)
) .navbar__links {
    color: #ecf2f8;
}

body:has(
    #publicViewsContainer:not(.hidden)
    #loginView:not(.hidden)
) .navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(
    #publicViewsContainer:not(.hidden)
    #loginView:not(.hidden)
) .navbar__toggle .bar {
    background: #edf2fa;
}

body:has(
    #publicViewsContainer:not(.hidden)
    #loginView:not(.hidden)
) #openLoginBtn {
    background: #26d7a5;
    color: #06241b;
}

@media (max-width: 900px) {
    #loginView .bu-login-shell {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 620px;
    }

    #loginView .bu-login-intro {
        padding: 0;
    }

    body:has(
        #publicViewsContainer:not(.hidden)
        #loginView:not(.hidden)
    ) #publicNav {
        background: #0f1520;
    }
}

@media (max-width: 600px) {
    #loginView.bu-login {
        padding: 50px 16px 65px;
    }

    #loginView .bu-login-intro h1 {
        font-size: clamp(2.65rem, 10vw, 3.6rem);
    }

    #loginView .bu-login-lead {
        font-size: .95rem;
    }

    #loginView .bu-login-card {
        padding: 27px 21px;
        border-radius: 17px;
    }

    #loginView .bu-login-features {
        gap: 17px;
        margin-bottom: 30px;
    }

    #loginView .bu-login-card h2 {
        font-size: 1.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #loginView .bu-login-submit,
    #loginView .bu-login-field input {
        transition: none;
    }
}




/* ===========================================
   BRANDUP PREMIUM SOCIAL GROWTH DASHBOARD
   =========================================== */

#socialView.bu-social-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 75px 0 105px;
    background:
        radial-gradient(
            circle at 85% 6%,
            rgba(136, 96, 222, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 5% 35%,
            rgba(39, 213, 160, 0.06),
            transparent 35%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#socialView .bu-social-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

/* HERO */

#socialView .bu-social-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 45px;
}

#socialView .bu-social-hero-content {
    max-width: 680px;
}

#socialView .bu-social-eyebrow,
#socialView .bu-social-kicker {
    color: #4ce3b9;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-bottom: 14px;
}

#socialView .bu-social-hero h1 {
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: -.065em;
    color: #ffffff;
    margin-bottom: 20px;
}

#socialView .bu-social-hero h1 span {
    color: #42e3b5;
}

#socialView .bu-social-description {
    color: #aab4c4;
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 590px;
}

#socialView .bu-social-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

#socialView .bu-social-hero-tags span {
    padding: 9px 13px;
    border: 1px solid #344154;
    border-radius: 30px;
    color: #c0cad9;
    font-size: .78rem;
    background: #171e2b;
}

/* HERO DECORATION */

#socialView .bu-social-hero-art {
    position: relative;
    width: 215px;
    height: 215px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

#socialView .bu-social-art-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed #425366;
    border-radius: 50%;
}

#socialView .bu-social-art-ring::before {
    content: "";
    position: absolute;
    inset: 21px;
    border: 1px solid #2d5c53;
    border-radius: 50%;
}

#socialView .bu-social-art-center {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    font-size: 4rem;
    font-weight: 700;
    color: #4fe5b9;
    background: linear-gradient(
        135deg, #1c453e, #30264d
    );
    border: 1px solid #426b63;
    box-shadow: 0 0 80px rgba(57,226,177,.09);
    transform: rotate(-9deg);
}

/* SYSTEM MESSAGES */

#socialView #socialMessage {
    margin: 0 0 25px;
    padding: 12px 16px;
    border: 1px solid #35594f;
    border-radius: 10px;
    background: #172a29;
    color: #bce9dc;
    font-size: .88rem;
}

#socialView #socialMessage:empty {
    display: none;
}

/* SECTION HEADING */

#socialView .bu-social-section-heading {
    margin-bottom: 22px;
}

#socialView .bu-social-section-heading h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #f7f9fc;
    letter-spacing: -.035em;
}

#socialView .bu-social-section-heading p:last-child {
    color: #a3afc1;
    margin-top: 9px;
    font-size: .93rem;
}

/* PLATFORM CARDS */

#socialView .bu-social-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 25px;
}

#socialView .bu-social-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 27px;
    border: 1px solid #333d50;
    border-radius: 18px;
    background: #181e2c;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#socialView .bu-social-card:hover {
    transform: translateY(-5px);
    border-color: #526177;
    box-shadow: 0 20px 35px rgba(0,0,0,.2);
}

#socialView .bu-social-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--platform-color);
}

#socialView .instagram-card {
    --platform-color: #e879f9;
    --platform-bg: #472c54;
}

#socialView .facebook-card {
    --platform-color: #60a5fa;
    --platform-bg: #243b62;
}

#socialView .tiktok-card {
    --platform-color: #34d399;
    --platform-bg: #1c4c42;
}

#socialView .bu-social-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

#socialView .bu-social-platform-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 13px;
    background: var(--platform-bg);
    color: var(--platform-color);
    font-size: 1.5rem;
    font-weight: 800;
}

#socialView .bu-social-card-arrow {
    color: #75849b;
    font-size: 1.4rem;
}

#socialView .bu-social-platform-name {
    color: #f5f7fc;
    font-size: 1.13rem;
    font-weight: 800;
    margin: 0 0 17px;
}

#socialView .bu-social-card-label {
    display: block;
    color: #a5b1c3;
    font-size: .82rem;
    margin-bottom: 7px;
}

#socialView .bu-social-card h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    letter-spacing: -.045em;
    margin-bottom: 22px;
}

#socialView .bu-social-card-footer {
    border-top: 1px solid #343e51;
    padding-top: 15px;
}

#socialView .bu-social-card-footer span {
    display: inline-block;
    color: var(--platform-color);
    font-size: .87rem;
    font-weight: 700;
}

/* CONTENT GRID */

#socialView .bu-social-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

#socialView .bu-social-chart-panel,
#socialView .bu-social-form-panel {
    min-width: 0;
    background: #181e2c;
    border: 1px solid #333d50;
    border-radius: 18px;
    padding: 27px;
    margin: 0;
}

#socialView .bu-social-chart-panel h2,
#socialView .bu-social-form-panel h2 {
    color: #ffffff;
    font-size: 1.45rem;
    letter-spacing: -.035em;
    margin-bottom: 10px;
}

#socialView .bu-social-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
}

#socialView .bu-social-panel-header p:not(.bu-social-kicker) {
    color: #a4afc1;
    line-height: 1.65;
    font-size: .88rem;
}

#socialView .bu-social-chart-badge {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid #345b51;
    border-radius: 30px;
    color: #53e4ba;
    background: #1b3531;
    font-size: .78rem;
    font-weight: 700;
}

/* CHART */

#socialView .bu-social-chart-wrap {
    width: 100%;
    position: relative;
    height: 350px;
    margin-top: 32px;
}

#socialView .bu-social-chart-wrap canvas {
    width: 100% !important;
    max-width: 100%;
}

#socialView .bu-social-chart-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 23px;
    margin-top: 13px;
    border-top: 1px solid #343d50;
    font-size: .8rem;
}

#socialView .bu-social-chart-footer span:nth-child(1) {
    color: #e879f9;
}

#socialView .bu-social-chart-footer span:nth-child(2) {
    color: #60a5fa;
}

#socialView .bu-social-chart-footer span:nth-child(3) {
    color: #34d399;
}

/* FORM */

#socialView .bu-social-form-description {
    color: #a4afc1;
    font-size: .89rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

#socialView #socialMetricsForm.bu-social-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
    max-width: none;
}

#socialView .bu-social-field label {
    display: block;
    margin: 0 0 10px;
    color: #dce4ef;
    font-size: .84rem;
    font-weight: 700;
}

#socialView .bu-social-field input,
#socialView .bu-social-field select {
    width: 100%;
    height: 49px;
    background: #101522;
    color: #f7f9fc;
    padding: 0 14px;
    border: 1px solid #3e4a60;
    border-radius: 10px;
    font-size: .91rem;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#socialView .bu-social-field input::placeholder {
    color: #7d8ca3;
}

#socialView .bu-social-field input:focus,
#socialView .bu-social-field select:focus {
    border-color: #43e2b6;
    box-shadow: 0 0 0 3px rgba(67,226,182,.12);
}

#socialView .bu-social-save-btn {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    margin-top: 4px;
    padding: 14px;
    background: linear-gradient(
        120deg, #39e2b1, #9ef2b6
    );
    color: #08251c;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease;
}

#socialView .bu-social-save-btn:hover {
    background: linear-gradient(
        120deg, #46efc0, #b3f7c9
    );
    transform: translateY(-2px);
}

#socialView .bu-social-save-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

#socialView .bu-social-form-note {
    margin-top: 20px;
    color: #8393a8;
    font-size: .79rem;
    line-height: 1.6;
}

/* BOTTOM BANNER */

#socialView .bu-social-bottom-banner {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 25px;
    padding: 25px 29px;
    background: linear-gradient(
        110deg, #183530, #24213b
    );
    border: 1px solid #3a5857;
    border-radius: 16px;
}

#socialView .bu-social-banner-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #24564a;
    color: #5cebc2;
    font-size: 1.7rem;
}

#socialView .bu-social-bottom-banner h3 {
    color: #f5f8fa;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

#socialView .bu-social-bottom-banner p {
    color: #b6c4d2;
    font-size: .87rem;
    line-height: 1.7;
}

/* DARK NAVBAR ON SOCIAL PAGE */

body:has(#privateViewsContainer:not(.hidden) #socialView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#privateViewsContainer:not(.hidden) #socialView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#privateViewsContainer:not(.hidden) #socialView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#privateViewsContainer:not(.hidden) #socialView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#privateViewsContainer:not(.hidden) #socialView:not(.hidden))
#privateNav {
    background: #0d111a;
}

/* RESPONSIVE TABLET */

@media (max-width: 950px) {

    #socialView .bu-social-content-grid {
        grid-template-columns: 1fr;
    }

    #socialView .bu-social-chart-wrap {
        height: 320px;
    }

    #socialView .bu-social-form-panel {
        padding: 27px;
    }
}

/* RESPONSIVE MOBILE */

@media (max-width: 700px) {

    #socialView.bu-social-page {
        padding: 55px 0 75px;
    }

    #socialView .bu-social-container {
        width: min(100% - 32px, 1180px);
    }

    #socialView .bu-social-hero {
        margin-bottom: 34px;
    }

    #socialView .bu-social-hero-art {
        display: none;
    }

    #socialView .bu-social-hero h1 {
        font-size: clamp(2.65rem, 10vw, 3.7rem);
    }

    #socialView .bu-social-description {
        font-size: .95rem;
    }

    #socialView .bu-social-cards {
        grid-template-columns: 1fr;
    }

    #socialView .bu-social-card {
        padding: 23px;
    }

    #socialView .bu-social-chart-panel,
    #socialView .bu-social-form-panel {
        padding: 21px;
    }

    #socialView .bu-social-chart-wrap {
        height: 250px;
    }

    #socialView .bu-social-chart-badge {
        display: none;
    }

    #socialView .bu-social-bottom-banner {
        align-items: flex-start;
        padding: 20px;
    }

    #socialView .bu-social-banner-icon {
        width: 42px;
        height: 42px;
    }

    #socialView .bu-social-chart-footer {
        gap: 12px;
        font-size: .73rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #socialView .bu-social-card,
    #socialView .bu-social-save-btn {
        transition: none;
    }
}



/* ===========================================
   BRANDUP PREMIUM SALES DASHBOARD
   =========================================== */

#manageView.bu-sales-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 75px 0 105px;
    background:
        radial-gradient(
            circle at 85% 6%,
            rgba(136, 96, 222, .13),
            transparent 32%
        ),
        radial-gradient(
            circle at 5% 35%,
            rgba(39, 213, 160, .06),
            transparent 35%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#manageView .bu-sales-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

/* HERO */

#manageView .bu-sales-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

#manageView .bu-sales-hero-content {
    max-width: 680px;
}

#manageView .bu-sales-eyebrow,
#manageView .bu-sales-kicker {
    color: #4ce3b9;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-bottom: 14px;
}

#manageView .bu-sales-hero h1 {
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: -.065em;
    margin-bottom: 20px;
}

#manageView .bu-sales-hero h1 span {
    color: #42e3b5;
}

#manageView .bu-sales-description {
    color: #aab4c4;
    font-size: 1.05rem;
    line-height: 1.8;
}

#manageView .bu-sales-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

#manageView .bu-sales-tags span {
    padding: 9px 13px;
    border: 1px solid #344154;
    border-radius: 30px;
    color: #c0cad9;
    font-size: .78rem;
    background: #171e2b;
}

/* HERO ART */

#manageView .bu-sales-hero-art {
    position: relative;
    width: 215px;
    height: 215px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

#manageView .bu-sales-art-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed #425366;
    border-radius: 50%;
}

#manageView .bu-sales-art-ring::before {
    content: "";
    position: absolute;
    inset: 21px;
    border: 1px solid #2d5c53;
    border-radius: 50%;
}

#manageView .bu-sales-art-center {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    font-size: 4rem;
    color: #4fe5b9;
    background: linear-gradient(
        135deg, #1c453e, #30264d
    );
    border: 1px solid #426b63;
    transform: rotate(-9deg);
}

/* SECTION HEADERS */

#manageView .bu-sales-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

#manageView .bu-sales-section-heading h2 {
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

#manageView .bu-sales-section-heading p:last-child {
    color: #a3afc1;
    margin-top: 8px;
}

#manageView .bu-sales-currency {
    padding: 8px 15px;
    color: #60e7be;
    background: #1c3731;
    border: 1px solid #356458;
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 800;
}

/* REVENUE CARDS */

#manageView .bu-sales-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

#manageView .bu-sales-card {
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 27px;
    background: #181e2c;
    border: 1px solid #333d50;
    border-radius: 18px;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

#manageView .bu-sales-card:hover {
    transform: translateY(-5px);
    border-color: #527266;
}

#manageView .bu-sales-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent);
}

#manageView .total-card {
    --card-accent: #34d399;
}

#manageView .current-card {
    --card-accent: #a78bfa;
}

#manageView .previous-card {
    --card-accent: #60a5fa;
}

#manageView .bu-sales-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

#manageView .bu-sales-card-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #263b43;
    color: var(--card-accent);
    font-size: 1.5rem;
}

#manageView .bu-sales-card-arrow {
    color: #78869a;
    font-size: 1.4rem;
}

#manageView .bu-sales-card > p {
    color: #a5b1c3;
    font-size: .88rem;
    margin-bottom: 9px;
}

#manageView .bu-sales-card h3 {
    color: #ffffff;
    font-size: clamp(1.3rem, 2.4vw, 2.15rem);
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
    margin-bottom: 24px;
}

#manageView .bu-sales-card-bottom {
    padding-top: 15px;
    border-top: 1px solid #343e51;
}

#manageView .bu-sales-card-bottom span {
    color: var(--card-accent);
    font-size: .82rem;
    font-weight: 700;
}

/* PANELS */

#manageView .bu-sales-panel {
    min-width: 0;
    background: #181e2c;
    border: 1px solid #333d50;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 23px;
}

#manageView .bu-sales-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

#manageView .bu-sales-panel-header h2 {
    font-size: 1.45rem;
    color: #ffffff;
    margin-bottom: 10px;
}

#manageView .bu-sales-panel-header p:not(.bu-sales-kicker) {
    color: #a4afc1;
    line-height: 1.65;
    font-size: .88rem;
}

/* REVENUE CHART */

#manageView .bu-sales-chart-badge {
    flex-shrink: 0;
    padding: 8px 13px;
    background: #1b3531;
    border: 1px solid #345b51;
    border-radius: 30px;
    color: #53e4ba;
    font-size: .78rem;
    font-weight: 700;
}

#manageView .bu-sales-chart-wrap {
    position: relative;
    width: 100%;
    height: 350px;
    margin-top: 32px;
}

#manageView .bu-sales-chart-wrap canvas {
    width: 100% !important;
    max-width: 100%;
}

/* RECENT SALES TABLE */

#manageView .bu-sales-readonly {
    flex-shrink: 0;
    padding: 8px 13px;
    border-radius: 30px;
    border: 1px solid #52607a;
    background: #273044;
    color: #b7c6dc;
    font-size: .78rem;
    font-weight: 700;
}

#manageView .bu-sales-table-wrap {
    overflow-x: auto;
    margin-top: 25px;
}

#manageView .bu-sales-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

#manageView .bu-sales-table th {
    padding: 16px 14px;
    color: #93a5bd;
    font-size: .8rem;
    letter-spacing: .05em;
    background: #20283a;
    border-bottom: 1px solid #364156;
}

#manageView .bu-sales-table td {
    padding: 18px 14px;
    color: #edf3fa;
    border-bottom: 1px solid #30394c;
    font-size: .91rem;
}

#manageView .bu-sales-table td:last-child,
#manageView .bu-sales-table th:last-child {
    text-align: right;
}

#manageView .bu-sales-table tbody tr:hover {
    background: #222b3d;
}

#manageView .bu-sales-table tbody tr:last-child td {
    border-bottom: 0;
}

/* BOTTOM BANNER */

#manageView .bu-sales-bottom-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 29px;
    background: linear-gradient(
        110deg, #183530, #24213b
    );
    border: 1px solid #3a5857;
    border-radius: 16px;
}

#manageView .bu-sales-banner-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #24564a;
    color: #5cebc2;
    font-size: 1.7rem;
}

#manageView .bu-sales-bottom-banner h3 {
    color: #f5f8fa;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

#manageView .bu-sales-bottom-banner p {
    color: #b6c4d2;
    font-size: .87rem;
    line-height: 1.7;
}

/* NAVBAR */

body:has(#privateViewsContainer:not(.hidden) #manageView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#privateViewsContainer:not(.hidden) #manageView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#privateViewsContainer:not(.hidden) #manageView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#privateViewsContainer:not(.hidden) #manageView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#privateViewsContainer:not(.hidden) #manageView:not(.hidden))
#privateNav {
    background: #0d111a;
}

/* RESPONSIVE TABLET */

@media (max-width: 950px) {

    #manageView .bu-sales-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #manageView .bu-sales-chart-wrap {
        height: 320px;
    }
}

/* RESPONSIVE MOBILE */

@media (max-width: 700px) {

    #manageView.bu-sales-page {
        padding: 55px 0 75px;
    }

    #manageView .bu-sales-container {
        width: min(100% - 32px, 1180px);
    }

    #manageView .bu-sales-hero-art {
        display: none;
    }

    #manageView .bu-sales-hero h1 {
        font-size: clamp(2.65rem, 10vw, 3.7rem);
    }

    #manageView .bu-sales-description {
        font-size: .95rem;
    }

    #manageView .bu-sales-kpis {
        grid-template-columns: 1fr;
    }

    #manageView .bu-sales-card {
        padding: 23px;
    }

    #manageView .bu-sales-panel {
        padding: 21px;
    }

    #manageView .bu-sales-chart-wrap {
        height: 250px;
    }

    #manageView .bu-sales-chart-badge {
        display: none;
    }

    #manageView .bu-sales-bottom-banner {
        align-items: flex-start;
        padding: 20px;
    }

    #manageView .bu-sales-banner-icon {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #manageView .bu-sales-card {
        transition: none;
    }
}


/* ============================================
   BRANDUP PREMIUM ADMIN DASHBOARD
   ============================================ */

#adminView.bu-admin-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 75px 0 105px;
    background:
        radial-gradient(
            circle at 85% 7%,
            rgba(136, 96, 222, .14),
            transparent 34%
        ),
        radial-gradient(
            circle at 4% 32%,
            rgba(39, 213, 160, .07),
            transparent 36%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#adminView .bu-admin-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

/* HEADER */

#adminView .bu-admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 38px;
}

#adminView .bu-admin-hero > div:first-child {
    max-width: 700px;
}

#adminView .bu-admin-eyebrow,
#adminView .bu-admin-kicker {
    color: #4ce3b9;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-bottom: 14px;
}

#adminView .bu-admin-hero h1 {
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: -.065em;
    margin-bottom: 20px;
}

#adminView .bu-admin-hero h1 span {
    color: #42e3b5;
}

#adminView .bu-admin-description {
    color: #aab4c4;
    font-size: 1.05rem;
    line-height: 1.8;
}

#adminView .bu-admin-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

#adminView .bu-admin-tags span {
    padding: 9px 13px;
    border: 1px solid #344154;
    border-radius: 30px;
    background: #171e2b;
    color: #c0cad9;
    font-size: .78rem;
}

/* HEADER ART */

#adminView .bu-admin-hero-art {
    position: relative;
    width: 215px;
    height: 215px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

#adminView .bu-admin-art-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed #425366;
    border-radius: 50%;
}

#adminView .bu-admin-art-ring::before {
    content: "";
    position: absolute;
    inset: 21px;
    border: 1px solid #2d5c53;
    border-radius: 50%;
}

#adminView .bu-admin-art-center {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    background: linear-gradient(
        135deg, #1c453e, #30264d
    );
    border: 1px solid #426b63;
    color: #4fe5b9;
    font-size: 3.8rem;
    font-weight: 800;
    transform: rotate(-9deg);
}

/* STATUS */

#adminView #adminMessage {
    padding: 14px 18px;
    margin: 0 0 24px;
    border: 1px solid #34594f;
    border-radius: 11px;
    background: #172a29;
    color: #bce9dc;
    font-size: .88rem;
}

#adminView #adminMessage:empty {
    display: none;
}

/* MAIN PANELS */

#adminView .bu-admin-panel {
    margin: 0 0 24px;
    padding: 29px;
    background: #181e2c;
    border: 1px solid #333d50;
    border-radius: 19px;
    min-width: 0;
}

#adminView .bu-admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 27px;
}

#adminView .bu-admin-panel-header h2 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    margin: 0 0 10px;
}

#adminView .bu-admin-panel-header p:not(.bu-admin-kicker) {
    color: #a6b2c3;
    font-size: .9rem;
    line-height: 1.7;
}

#adminView .bu-admin-header-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #1c443e;
    color: #53e4ba;
    font-size: 1.7rem;
}

#adminView .bu-admin-selected-badge {
    padding: 9px 14px;
    flex-shrink: 0;
    border: 1px solid #3b5e55;
    border-radius: 30px;
    background: #1d3733;
    color: #71eac4;
    font-size: .78rem;
    font-weight: 700;
}

/* CLIENT SEARCH */

#adminView .bu-admin-search-area {
    margin-bottom: 23px;
}

#adminView .bu-admin-search-area label {
    display: block;
    margin-bottom: 11px;
    color: #dbe4ef;
    font-weight: 700;
    font-size: .86rem;
}

#adminView #clientSearch {
    display: block;
    width: 100%;
    max-width: 540px;
    height: 51px;
    padding: 0 16px;
    margin: 0;
    border-radius: 11px;
    border: 1px solid #3e4a60;
    background: #101522;
    color: #f7f9fc;
    font-size: .92rem;
    outline: none;
}

#adminView #clientSearch::placeholder {
    color: #7d8ca3;
}

#adminView #clientSearch:focus {
    border-color: #43e2b6;
    box-shadow: 0 0 0 3px rgba(67,226,182,.12);
}

/* TABLES */

#adminView .bu-admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #343e51;
}

#adminView .bu-admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

#adminView .bu-admin-table th {
    padding: 16px 14px;
    background: #20283a;
    border-bottom: 1px solid #364156;
    color: #a3b0c4;
    font-size: .78rem;
    letter-spacing: .04em;
    white-space: nowrap;
}

#adminView .bu-admin-table td {
    padding: 17px 14px;
    color: #edf3fa;
    font-size: .88rem;
    border-bottom: 1px solid #30394c;
    white-space: nowrap;
}

#adminView .bu-admin-table tbody tr:hover {
    background: #222b3d;
}

#adminView .bu-admin-table tbody tr:last-child td {
    border-bottom: none;
}

#adminView .bu-admin-table .button {
    display: inline-flex;
    justify-content: center;
    padding: 9px 17px;
    border-radius: 9px;
    border: 1px solid #347765;
    background: #214a3f;
    color: #8cf0cb;
    font-size: .82rem;
    font-weight: 800;
    transition: background .2s ease;
}

#adminView .bu-admin-table .button:hover {
    background: #2d6553;
}

/* SUMMARY CARDS */

#adminView .bu-admin-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin: 0 0 25px;
}

#adminView .bu-admin-summary-card {
    min-width: 0;
    padding: 25px;
    border: 1px solid #354057;
    border-radius: 16px;
    background: #202738;
    position: relative;
    overflow: hidden;
}

#adminView .bu-admin-summary-card::before {
    content: "";
    height: 3px;
    position: absolute;
    inset: 0 0 auto;
    background: var(--summary-color);
}

#adminView .revenue-summary {
    --summary-color: #34d399;
}

#adminView .social-summary {
    --summary-color: #a78bfa;
}

#adminView .bu-admin-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 23px;
}

#adminView .bu-admin-summary-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #2a3c48;
    color: var(--summary-color);
    font-size: 1.5rem;
}

#adminView .bu-admin-summary-top > span:last-child {
    color: #8798af;
    font-size: .72rem;
    letter-spacing: .1em;
    font-weight: 800;
}

#adminView .bu-admin-summary-card p {
    color: #b2bed0;
    font-size: .88rem;
    margin-bottom: 9px;
}

#adminView .bu-admin-summary-card strong {
    display: block;
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: -.04em;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

#adminView .bu-admin-summary-card small {
    color: var(--summary-color);
    font-size: .79rem;
}

/* ADMIN RECORD SALE FORM */

#adminView .bu-admin-sale-form {
    margin: 0 0 26px;
    padding: 26px;
    background: linear-gradient(120deg,#1a3231,#25243d);
    border: 1px solid #3c615b;
    border-radius: 16px;
}

#adminView .bu-admin-form-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

#adminView .bu-admin-form-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    background: #245649;
    border-radius: 12px;
    color: #68ebc4;
    font-size: 2rem;
}

#adminView .bu-admin-form-heading h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 1.15rem;
}

#adminView .bu-admin-form-heading p {
    color: #b1c0d0;
    font-size: .85rem;
    line-height: 1.6;
}

#adminView .bu-admin-sale-form > label {
    display: block;
    margin-bottom: 10px;
    color: #dce5f1;
    font-weight: 700;
    font-size: .86rem;
}

#adminView .bu-admin-sale-input {
    display: flex;
    gap: 13px;
}

#adminView #adminSaleAmount {
    flex: 1;
    min-width: 0;
    height: 51px;
    border: 1px solid #4a586d;
    border-radius: 10px;
    padding: 0 15px;
    background: #101b27;
    color: #ffffff;
    font-size: .95rem;
    outline: none;
}

#adminView #adminSaleAmount:focus {
    border-color: #43e2b6;
    box-shadow: 0 0 0 3px rgba(67,226,182,.12);
}

#adminView .bu-admin-save-btn {
    flex-shrink: 0;
    min-height: 51px;
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(120deg,#39e2b1,#9ef2b6);
    border: 0;
    color: #06241b;
    font-size: .91rem;
    font-weight: 800;
}

#adminView .bu-admin-save-btn:hover {
    background: #9ef2b6;
}

#adminView .bu-admin-save-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#adminView #adminSaleMessage {
    min-height: 1.4em;
    margin-top: 14px;
    color: #9df0d3;
    font-size: .85rem;
}

/* SALES AND SOCIAL RECORDS */

#adminView .bu-admin-records-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
    gap: 19px;
    align-items: start;
}

#adminView .bu-admin-record-card {
    min-width: 0;
    background: #202738;
    border: 1px solid #354057;
    border-radius: 15px;
    padding: 22px;
}

#adminView .bu-admin-record-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#adminView .bu-admin-record-heading h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.17rem;
}

#adminView .bu-admin-record-icon {
    color: #4ce6ba;
    font-size: 1.5rem;
}

#adminView .bu-admin-record-description {
    margin: 12px 0 20px;
    color: #9eacc0;
    line-height: 1.6;
    font-size: .83rem;
}

#adminView .bu-admin-record-card .bu-admin-table th,
#adminView .bu-admin-record-card .bu-admin-table td {
    padding: 13px 11px;
    font-size: .77rem;
}

/* BOTTOM BANNER */

#adminView .bu-admin-bottom-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 29px;
    background: linear-gradient(110deg,#183530,#24213b);
    border: 1px solid #3a5857;
    border-radius: 16px;
}

#adminView .bu-admin-banner-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: #24564a;
    color: #5cebc2;
    font-size: 1.7rem;
}

#adminView .bu-admin-bottom-banner h3 {
    color: #f5f8fa;
    font-size: 1.05rem;
    margin: 0 0 6px;
}

#adminView .bu-admin-bottom-banner p {
    color: #b6c4d2;
    font-size: .87rem;
    line-height: 1.7;
}

/* DARK NAVIGATION */

body:has(#privateViewsContainer:not(.hidden) #adminView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#privateViewsContainer:not(.hidden) #adminView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#privateViewsContainer:not(.hidden) #adminView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#privateViewsContainer:not(.hidden) #adminView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#privateViewsContainer:not(.hidden) #adminView:not(.hidden))
#privateNav {
    background: #0d111a;
}

/* TABLET */

@media (max-width: 950px) {
    #adminView .bu-admin-records-grid {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    #adminView.bu-admin-page {
        padding: 55px 0 75px;
    }

    #adminView .bu-admin-container {
        width: min(100% - 32px, 1180px);
    }

    #adminView .bu-admin-hero h1 {
        font-size: clamp(2.65rem,10vw,3.7rem);
    }

    #adminView .bu-admin-hero-art {
        display: none;
    }

    #adminView .bu-admin-description {
        font-size: .95rem;
    }

    #adminView .bu-admin-panel {
        padding: 19px;
    }

    #adminView .bu-admin-panel-header {
        flex-wrap: wrap;
    }

    #adminView .bu-admin-summary {
        grid-template-columns: 1fr;
    }

    #adminView .bu-admin-sale-form {
        padding: 20px;
    }

    #adminView .bu-admin-sale-input {
        flex-direction: column;
    }

    #adminView #adminSaleAmount,
    #adminView .bu-admin-save-btn {
        width: 100%;
    }

    #adminView .bu-admin-record-card {
        padding: 17px;
    }

    #adminView .bu-admin-bottom-banner {
        align-items: flex-start;
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #adminView .bu-admin-table .button {
        transition: none;
    }
}



/* ==========================================
   BRANDUP PREMIUM CLIENT PROFILE
   ========================================== */

#profileView.bu-profile-page {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 75px 0 105px;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(136, 96, 222, .13),
            transparent 34%
        ),
        radial-gradient(
            circle at 5% 35%,
            rgba(39, 213, 160, .06),
            transparent 35%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#profileView .bu-profile-container {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}

/* HERO */

#profileView .bu-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

#profileView .bu-profile-hero > div:first-child {
    max-width: 700px;
}

#profileView .bu-profile-eyebrow,
#profileView .bu-profile-kicker {
    color: #4ce3b9;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-bottom: 14px;
}

#profileView .bu-profile-hero h1 {
    color: #ffffff;
    font-size: clamp(3rem, 5vw, 4.8rem);
    letter-spacing: -.065em;
    line-height: 1.1;
    margin-bottom: 20px;
}

#profileView .bu-profile-hero h1 span {
    color: #42e3b5;
}

#profileView .bu-profile-description {
    color: #aab4c4;
    line-height: 1.8;
    font-size: 1.05rem;
}

#profileView .bu-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

#profileView .bu-profile-tags span {
    padding: 9px 13px;
    background: #171e2b;
    border: 1px solid #344154;
    border-radius: 30px;
    color: #c0cad9;
    font-size: .78rem;
}

/* HERO ART */

#profileView .bu-profile-hero-art {
    position: relative;
    width: 215px;
    height: 215px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

#profileView .bu-profile-art-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed #425366;
    border-radius: 50%;
}

#profileView .bu-profile-art-ring::before {
    content: "";
    position: absolute;
    inset: 21px;
    border: 1px solid #2d5c53;
    border-radius: 50%;
}

#profileView .bu-profile-art-center {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    background: linear-gradient(
        135deg, #1c453e, #30264d
    );
    border: 1px solid #426b63;
    color: #4fe5b9;
    font-size: 3.6rem;
    font-weight: 800;
    transform: rotate(-9deg);
}

/* MAIN PROFILE CARDS */

#profileView .bu-profile-card {
    background: #181e2c;
    border: 1px solid #333d50;
    border-radius: 19px;
    padding: 29px;
    margin-bottom: 24px;
}

#profileView .bu-profile-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 27px;
}

#profileView .bu-profile-section-title h2 {
    color: #ffffff;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    letter-spacing: -.035em;
    margin-bottom: 10px;
}

#profileView .bu-profile-section-title p:not(
    .bu-profile-kicker
) {
    color: #a6b2c3;
    font-size: .9rem;
    line-height: 1.7;
}

#profileView .bu-profile-label {
    padding: 9px 14px;
    background: #1d3733;
    border: 1px solid #3b5e55;
    border-radius: 30px;
    color: #71eac4;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

#profileView .bu-profile-section-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #1c443e;
    border-radius: 13px;
    color: #53e4ba;
    font-size: 1.6rem;
}

/* PROFILE IDENTITY */

#profileView .bu-profile-identity {
    display: flex;
    align-items: center;
    gap: 19px;
    padding: 22px;
    margin-bottom: 24px;
    background: linear-gradient(
        110deg, #202d34, #272338
    );
    border: 1px solid #3b4a59;
    border-radius: 15px;
}

#profileView .bu-profile-avatar {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg, #245b4b, #493b74
    );
    border: 1px solid #527b72;
    border-radius: 19px;
    color: #79f0cb;
    font-size: 2rem;
    font-weight: 800;
}

#profileView .bu-profile-identity h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 6px;
}

#profileView .bu-profile-identity p {
    color: #a6b5c7;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

/* ACCOUNT INFORMATION */

#profileView .bu-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#profileView .bu-profile-info-item {
    padding: 21px;
    border: 1px solid #354057;
    border-radius: 13px;
    background: #202738;
    min-width: 0;
}

#profileView .bu-profile-info-item span {
    display: block;
    color: #94a5bb;
    font-size: .81rem;
    margin-bottom: 11px;
}

#profileView .bu-profile-info-item strong {
    display: block;
    color: #f6f8fb;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

/* BUSINESS NOTICE */

#profileView .bu-profile-notice {
    display: flex;
    gap: 16px;
    margin-top: 23px;
    padding: 20px;
    background: #1d3533;
    border-inline-start: 3px solid #41e1b4;
    border-radius: 0 11px 11px 0;
}

#profileView .bu-profile-notice span {
    color: #4be7b8;
    font-size: 1.4rem;
}

#profileView .bu-profile-notice p {
    color: #c0d6cf;
    line-height: 1.7;
    font-size: .86rem;
}

/* CONNECTED SOCIAL ACCOUNTS */

#profileView .bu-profile-connections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#profileView .bu-profile-connection {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px;
    border: 1px solid #354057;
    border-radius: 13px;
    background: #202738;
}

#profileView .bu-profile-social-icon {
    width: 49px;
    height: 49px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.5rem;
    font-weight: 800;
}

#profileView .bu-profile-social-icon.instagram {
    color: #f0a0fa;
    background: #493052;
}

#profileView .bu-profile-social-icon.facebook {
    color: #8bbdff;
    background: #253f66;
}

#profileView .bu-profile-social-icon.tiktok {
    color: #6de7bc;
    background: #204b41;
}

#profileView .bu-profile-social-info {
    flex: 1;
    min-width: 0;
}

#profileView .bu-profile-social-info h3 {
    color: #f6f8fb;
    font-size: 1rem;
    margin-bottom: 6px;
}

#profileView .bu-profile-social-info p {
    color: #96a6ba;
    font-size: .82rem;
}

#profileView .bu-profile-connect-btn {
    flex-shrink: 0;
    padding: 11px 16px;
    border: 1px solid #425b5a;
    border-radius: 9px;
    background: #23443e;
    color: #82e6c4;
    font-size: .81rem;
    font-weight: 700;
    cursor: not-allowed;
}

#profileView .bu-profile-connect-btn:disabled {
    opacity: .7;
}

#profileView .bu-profile-connection-note {
    margin-top: 17px;
    color: #8495ab;
    font-size: .82rem;
    line-height: 1.7;
}

/* QUICK ACCESS */

#profileView .bu-profile-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

#profileView .bu-profile-quick-card {
    display: block;
    min-width: 0;
    padding: 26px;
    border: 1px solid #354057;
    border-radius: 15px;
    background: #202738;
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

#profileView .bu-profile-quick-card:hover {
    transform: translateY(-4px);
    border-color: #448c75;
}

#profileView .bu-profile-quick-card:focus-visible {
    outline: 3px solid #a78bfa;
    outline-offset: 3px;
}

#profileView .bu-profile-quick-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #244b40;
    color: #56e9bc;
    font-size: 1.6rem;
    margin-bottom: 22px;
}

#profileView .bu-profile-quick-card h3 {
    color: #ffffff;
    font-size: 1.18rem;
    margin-bottom: 12px;
}

#profileView .bu-profile-quick-card p {
    color: #a8b4c6;
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 19px;
}

#profileView .bu-profile-quick-card > span {
    color: #50e2b7;
    font-size: .85rem;
    font-weight: 800;
}

/* BOTTOM BANNER */

#profileView .bu-profile-bottom-banner {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 25px 29px;
    background: linear-gradient(
        110deg, #183530, #24213b
    );
    border: 1px solid #3a5857;
    border-radius: 16px;
}

#profileView .bu-profile-banner-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #24564a;
    border-radius: 14px;
    color: #5cebc2;
    font-size: 1.7rem;
}

#profileView .bu-profile-bottom-banner h3 {
    color: #f5f8fa;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

#profileView .bu-profile-bottom-banner p {
    color: #b6c4d2;
    font-size: .87rem;
    line-height: 1.7;
}

/* DARK NAVIGATION */

body:has(#privateViewsContainer:not(.hidden) #profileView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#privateViewsContainer:not(.hidden) #profileView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#privateViewsContainer:not(.hidden) #profileView:not(.hidden))
.navbar__links:hover {
    color: #44e1b5;
    background: #1b2830;
}

body:has(#privateViewsContainer:not(.hidden) #profileView:not(.hidden))
.navbar__toggle .bar {
    background: #edf2fa;
}

body:has(#privateViewsContainer:not(.hidden) #profileView:not(.hidden))
#privateNav {
    background: #0d111a;
}

/* TABLET */

@media (max-width: 900px) {
    #profileView .bu-profile-hero-art {
        display: none;
    }
}

/* MOBILE */

@media (max-width: 650px) {
    #profileView.bu-profile-page {
        padding: 55px 0 75px;
    }

    #profileView .bu-profile-container {
        width: min(100% - 32px, 1180px);
    }

    #profileView .bu-profile-hero h1 {
        font-size: clamp(2.65rem, 10vw, 3.7rem);
    }

    #profileView .bu-profile-card {
        padding: 20px;
    }

    #profileView .bu-profile-section-title {
        flex-wrap: wrap;
    }

    #profileView .bu-profile-info-grid,
    #profileView .bu-profile-quick-grid {
        grid-template-columns: 1fr;
    }

    #profileView .bu-profile-identity {
        padding: 17px;
    }

    #profileView .bu-profile-avatar {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    #profileView .bu-profile-connection {
        flex-wrap: wrap;
    }

    #profileView .bu-profile-connect-btn {
        width: 100%;
    }

    #profileView .bu-profile-bottom-banner {
        align-items: flex-start;
        padding: 20px;
    }

    #profileView .bu-profile-banner-icon {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #profileView .bu-profile-quick-card {
        transition: none;
    }
}



/* BRANDUP PREMIUM CLIENT UPDATES */

#updatesView.bu-updates-page {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 75px 0 105px;
    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(136,96,222,.14),
            transparent 38%
        ),
        #0b0e16;
    color: #f7f9fc;
}

#updatesView .bu-updates-container {
    width: min(100% - 48px, 1180px);
    margin: auto;
}

#updatesView .bu-updates-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 40px;
}

#updatesView .bu-updates-eyebrow,
#adminView .bu-updates-eyebrow {
    color: #45e3b7;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 14px;
}

#updatesView .bu-updates-hero h1 {
    font-size: clamp(3rem,5vw,4.8rem);
    color: white;
    line-height: 1.1;
    letter-spacing: -.06em;
    margin-bottom: 20px;
}

#updatesView .bu-updates-hero h1 span {
    color: #42e3b5;
}

#updatesView .bu-updates-hero p:last-child {
    color: #aab4c4;
    line-height: 1.8;
    max-width: 660px;
}

#updatesView .bu-updates-hero-icon {
    display: grid;
    place-items: center;
    width: 115px;
    height: 115px;
    flex-shrink: 0;
    border-radius: 28px;
    background: linear-gradient(135deg,#1c453e,#30264d);
    border: 1px solid #426b63;
    color: #4fe5b9;
    font-size: 4rem;
    transform: rotate(-8deg);
}

#updatesView .bu-updates-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    margin-bottom: 25px;
}

#updatesView .bu-updates-summary-card {
    min-width: 0;
    padding: 25px;
    border-radius: 16px;
    background: #181e2c;
    border: 1px solid #354057;
}

#updatesView .bu-updates-summary-card span,
#updatesView .bu-updates-summary-card small {
    display: block;
    color: #aab6c7;
    font-size: .85rem;
}

#updatesView .bu-updates-summary-card strong {
    display: block;
    margin: 12px 0;
    color: #55e9bb;
    font-size: 2.5rem;
}

#updatesView .bu-updates-panel {
    background: #181e2c;
    border: 1px solid #354057;
    border-radius: 19px;
    padding: 28px;
}

#updatesView .bu-updates-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

#updatesView .bu-updates-panel-heading h2 {
    color: white;
    font-size: 1.65rem;
    margin-bottom: 9px;
}

#updatesView .bu-updates-panel-heading p:last-child {
    color: #9eacc0;
    font-size: .9rem;
}

#updatesView .bu-updates-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#updatesView .bu-updates-filters button {
    padding: 10px 15px;
    border: 1px solid #425069;
    border-radius: 9px;
    background: #222b3d;
    color: #cbd5e1;
    font-weight: 700;
    cursor: pointer;
}

#updatesView .bu-updates-filters button[aria-pressed="true"] {
    background: #245545;
    color: #79ebc3;
    border-color: #3e896c;
}

#updatesView #updatesStatus {
    color: #9fc9bc;
    font-size: .85rem;
    margin-bottom: 14px;
}

#updatesView #updatesStatus:empty {
    display: none;
}

#updatesView .bu-updates-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#updatesView .bu-update-card {
    padding: 25px;
    background: #202738;
    border: 1px solid #394459;
    border-radius: 15px;
}

#updatesView .bu-update-card.is-unread {
    border-inline-start: 4px solid #42e3b5;
    background: #1b3033;
}

#updatesView .bu-update-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#updatesView .bu-update-category {
    padding: 7px 12px;
    border-radius: 30px;
    background: #27354a;
    color: #b6a4fc;
    font-size: .73rem;
    font-weight: 800;
}

#updatesView .bu-update-new {
    color: #71ebc2;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}

#updatesView .bu-update-card h3 {
    color: #ffffff;
    font-size: 1.15rem;
    margin-bottom: 11px;
}

#updatesView .bu-update-message {
    color: #b1bfd0;
    line-height: 1.8;
    font-size: .92rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#updatesView .bu-update-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 21px;
    padding-top: 17px;
    border-top: 1px solid #3b4759;
}

#updatesView .bu-update-footer time {
    color: #8d9bb0;
    font-size: .81rem;
}

#updatesView .bu-update-footer button {
    padding: 9px 13px;
    border: 1px solid #3d8a6c;
    border-radius: 9px;
    background: #245443;
    color: #8af0ca;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

#updatesView .bu-updates-empty {
    padding: 45px 20px;
    text-align: center;
    color: #aab7c9;
    background: #202738;
    border-radius: 13px;
}

#updatesView .bu-updates-footer-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    padding: 26px;
    border: 1px solid #3a5857;
    border-radius: 16px;
    background: linear-gradient(110deg,#183530,#24213b);
}

#updatesView .bu-updates-footer-banner > span {
    color: #57e8bb;
    font-size: 2rem;
}

#updatesView .bu-updates-footer-banner h3 {
    color: white;
    margin-bottom: 7px;
}

#updatesView .bu-updates-footer-banner p {
    color: #b6c4d2;
    font-size: .87rem;
    line-height: 1.7;
}

/* NAVIGATION UNREAD BADGE */

.bu-updates-nav-badge {
    display: inline-block;
    margin-inline-start: 7px;
    padding: 2px 7px;
    border-radius: 20px;
    background: #39e2b1;
    color: #09231a;
    font-size: .7rem;
    font-weight: 800;
}

.bu-updates-nav-badge[hidden] {
    display: none !important;
}

/* ADMIN UPDATE COMPOSER */

#adminView .bu-admin-update-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
    margin-bottom: 26px;
    border: 1px solid #3c615b;
    border-radius: 16px;
    background: linear-gradient(120deg,#1a3231,#25243d);
}

#adminView .bu-admin-update-heading {
    margin-bottom: 9px;
}

#adminView .bu-admin-update-heading h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

#adminView .bu-admin-update-heading p:last-child {
    color: #b1c0d0;
    font-size: .86rem;
}

#adminView .bu-admin-update-form label {
    color: #dce5f1;
    font-size: .84rem;
    font-weight: 700;
}

#adminView .bu-admin-update-form input,
#adminView .bu-admin-update-form select,
#adminView .bu-admin-update-form textarea {
    width: 100%;
    padding: 13px;
    background: #101b27;
    color: white;
    border: 1px solid #4a586d;
    border-radius: 10px;
    font: inherit;
    outline: none;
}

#adminView .bu-admin-update-form textarea {
    resize: vertical;
}

#adminView .bu-admin-update-form input:focus,
#adminView .bu-admin-update-form select:focus,
#adminView .bu-admin-update-form textarea:focus {
    border-color: #43e2b6;
}

#adminView .bu-admin-update-submit {
    padding: 14px 22px;
    margin-top: 9px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(120deg,#39e2b1,#9ef2b6);
    color: #09251b;
    font-weight: 800;
    cursor: pointer;
}

#adminView .bu-admin-update-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#adminView #adminUpdateStatus {
    color: #9df0d3;
    font-size: .85rem;
}

/* DARK NAVIGATION */

body:has(#privateViewsContainer:not(.hidden) #updatesView:not(.hidden))
.navbar {
    background: #0d111a;
    border-bottom: 1px solid #242b39;
    box-shadow: none;
}

body:has(#privateViewsContainer:not(.hidden) #updatesView:not(.hidden))
.navbar__links {
    color: #ecf2f8;
}

body:has(#privateViewsContainer:not(.hidden) #updatesView:not(.hidden))
#privateNav {
    background: #0d111a;
}

/* MOBILE */

@media (max-width: 700px) {

    #updatesView.bu-updates-page {
        padding: 55px 0 75px;
    }

    #updatesView .bu-updates-container {
        width: min(100% - 32px,1180px);
    }

    #updatesView .bu-updates-hero-icon {
        display: none;
    }

    #updatesView .bu-updates-summary {
        grid-template-columns: 1fr;
    }

    #updatesView .bu-updates-panel {
        padding: 19px;
    }

    #updatesView .bu-update-card {
        padding: 20px;
    }

    #updatesView .bu-updates-footer-banner {
        align-items: flex-start;
        padding: 20px;
    }

    #adminView .bu-admin-update-form {
        padding: 20px;
    }
}



/* =========================================
   BRANDUP - ADMIN SOCIAL METRICS
   ========================================= */

/* Make client growth chart full width
   now that the entry form is removed */

#socialView .bu-social-content-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Admin social form */

#adminView .bu-admin-social-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 26px;
    padding: 27px;
    background: linear-gradient(
        120deg,
        #1b3232,
        #26243d
    );
    border: 1px solid #3d615b;
    border-radius: 16px;
}

/* Keep it hidden until a client is selected */

#adminView .bu-admin-social-form.hidden {
    display: none !important;
}

#adminView .bu-admin-social-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 12px;
}

#adminView .bu-admin-social-heading h3 {
    color: #ffffff;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

#adminView .bu-admin-social-heading p:last-child {
    color: #adbbcc;
    font-size: .9rem;
    line-height: 1.7;
}

#adminView .bu-admin-social-heading-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex-shrink: 0;
    background: #245447;
    border-radius: 13px;
    color: #58e7ba;
    font-size: 1.6rem;
}

#adminView .bu-admin-social-form label {
    color: #dce5ef;
    font-weight: 700;
    font-size: .86rem;
}

#adminView .bu-admin-social-form input,
#adminView .bu-admin-social-form select {
    width: 100%;
    height: 51px;
    padding: 0 15px;
    background: #101b27;
    color: #ffffff;
    border: 1px solid #4a586d;
    border-radius: 10px;
    font-size: .94rem;
    outline: none;
}

#adminView .bu-admin-social-form input:focus,
#adminView .bu-admin-social-form select:focus {
    border-color: #42e3b5;
    box-shadow: 0 0 0 3px rgba(66,227,181,.12);
}

#adminView .bu-admin-social-save {
    min-height: 52px;
    padding: 14px 20px;
    margin-top: 8px;
    background: linear-gradient(
        120deg,
        #39e2b1,
        #9ef2b6
    );
    color: #08251c;
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
}

#adminView .bu-admin-social-save:hover {
    filter: brightness(1.07);
}

#adminView .bu-admin-social-save:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#adminView #adminSocialMessage {
    color: #9df0d3;
    font-size: .86rem;
    line-height: 1.6;
}

/* Mobile */

@media (max-width: 700px) {
    #adminView .bu-admin-social-form {
        padding: 20px;
    }

    #adminView .bu-admin-social-heading {
        flex-wrap: wrap;
    }
}


/* ==========================================
   BRANDUP ADMIN RECORD MANAGEMENT
   ========================================== */

/* Table action buttons */

#adminView .bu-admin-record-actions {
    white-space: nowrap;
    min-width: 145px;
}

#adminView .bu-admin-action-edit,
#adminView .bu-admin-action-delete {
    padding: 9px 13px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

#adminView .bu-admin-action-edit {
    background: #20483d;
    border: 1px solid #387963;
    color: #8bf0ca;
    margin-right: 7px;
}

#adminView .bu-admin-action-edit:hover {
    background: #2c6653;
}

#adminView .bu-admin-action-delete {
    background: #48272e;
    border: 1px solid #81414b;
    color: #ffb3b8;
}

#adminView .bu-admin-action-delete:hover {
    background: #69313b;
}

#adminView .bu-admin-record-actions button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Edit dialog */

#adminView .bu-admin-editor:not([open]) {
    display: none;
}

#adminView .bu-admin-editor[open] {
    position: fixed;
    inset: 0;
    display: block;
    width: min(92vw, 500px);
    max-height: 90dvh;
    overflow-y: auto;
    margin: auto;
    padding: 30px;
    border: 1px solid #46566d;
    border-radius: 19px;
    background: #181e2c;
    color: #f7f9fc;
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

#adminView .bu-admin-editor::backdrop {
    background: rgba(3, 7, 15, .82);
    backdrop-filter: blur(5px);
}

#adminView .bu-admin-editor-header {
    margin-bottom: 27px;
}

#adminView .bu-admin-editor-header p {
    color: #4ce3b9;
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 800;
    margin-bottom: 10px;
}

#adminView .bu-admin-editor-header h2 {
    color: white;
    font-size: 1.7rem;
}

/* Form fields */

#adminView .bu-admin-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#adminView .bu-admin-edit-fields[hidden] {
    display: none !important;
}

#adminView .bu-admin-edit-fields label {
    color: #dce5ef;
    font-size: .87rem;
    font-weight: 700;
}

#adminView .bu-admin-edit-fields input,
#adminView .bu-admin-edit-fields select {
    width: 100%;
    height: 49px;
    padding: 0 14px;
    margin-bottom: 13px;
    border-radius: 10px;
    border: 1px solid #45536a;
    background: #101522;
    color: #ffffff;
    font: inherit;
    outline: none;
}

#adminView .bu-admin-edit-fields input:focus,
#adminView .bu-admin-edit-fields select:focus {
    border-color: #42e3b5;
    box-shadow: 0 0 0 3px rgba(66,227,181,.12);
}

#adminView #adminEditMessage {
    color: #ffb8b8;
    font-size: .85rem;
    margin: 9px 0;
}

#adminView #adminEditMessage:empty {
    display: none;
}

/* Dialog buttons */

#adminView .bu-admin-editor-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

#adminView .bu-admin-editor-actions button {
    flex: 1;
    padding: 13px 17px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

#adminView .bu-admin-edit-cancel {
    background: #273044;
    color: #d7e0ed;
    border: 1px solid #46536a;
}

#adminView .bu-admin-edit-save {
    background: linear-gradient(
        120deg, #39e2b1, #9ef2b6
    );
    color: #09251b;
    border: 0;
}

#adminView .bu-admin-edit-save:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Keyboard accessibility */

#adminView .bu-admin-record-actions button:focus-visible,
#adminView .bu-admin-editor-actions button:focus-visible {
    outline: 3px solid #a78bfa;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #adminView .bu-admin-editor[open] {
        padding: 22px;
    }

    #adminView .bu-admin-editor-actions {
        flex-direction: column;
    }
}

/* English / Arabic language slider and direction-aware layout */
.language-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    flex-shrink: 0; direction: ltr; padding: 8px 10px; margin-inline-start: auto;
    margin-inline-end: 12px; border: 1px solid #3b625b; border-radius: 999px;
    color: #edfff9; background: #16322d; font: 600 12px/1.5 Arial, sans-serif;
    cursor: pointer; min-height: 44px;
}
.language-toggle:focus-visible { outline: 3px solid #5cf0c4; outline-offset: 4px; }
.language-track { width: 34px; height: 20px; padding: 3px; border-radius: 99px; background: #48655e; }
.language-thumb { display: block; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform .2s; }
.language-toggle[aria-checked="true"] .language-track { background: #159e77; }
.language-toggle[aria-checked="true"] .language-thumb { transform: translateX(14px); }
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input,
html[lang="ar"] select, html[lang="ar"] textarea {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] span,
html[lang="ar"] label { letter-spacing: normal !important; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.45 !important; }
html[lang="ar"] p { line-height: 1.9; }
input[type="email"], input[type="password"], input[type="number"],
#usernameInput, #profileEmail, #profileIdentityEmail, #profileBusinessEmail {
    direction: ltr; unicode-bidi: isolate;
}
#navbar__logo { direction: ltr; unicode-bidi: isolate; flex-shrink: 0; }
html[dir="rtl"] canvas { direction: ltr; }
@media (min-width: 1101px) {
    .navbar__container { gap: 8px; }
    .language-toggle { order: 3; margin-inline-start: 4px; margin-inline-end: 0; }
    .navbar__links { padding-inline: 10px; }
    html[lang="ar"] .navbar__links { font-size: 13px; padding-inline: 7px; }
    html[lang="ar"] .navbar__menu { gap: 3px; }
}
@media (max-width: 1100px) {
    .navbar__container { gap: 10px; padding-inline: 16px; }
    .language-toggle { margin-inline-end: 0; }
    .navbar__toggle { flex-shrink: 0; }
    html[lang="ar"] .navbar__menu.active { max-height: 620px; overflow-y: auto; }
}
@media (max-width: 380px) {
    #navbar__logo { font-size: 1.4rem; }
    .language-toggle { gap: 5px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .language-thumb { transition: none; } }

/* Keep the contact card visible below the sticky navbar after scrolling. */
#contact, #footerContact {
    scroll-margin-top: 96px;
}