@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================================
   ROOT
========================================================= */

:root {

    --bg: #07090d;
    --bg-soft: #0b0e14;
    --card: rgba(17, 21, 29, 0.72);
    --card-solid: #11151d;

    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);

    --text: #ffffff;
    --text-soft: #b5bdca;
    --text-muted: #7d8695;

    --purple: #7c5cff;
    --purple-light: #9b87ff;

    --cyan: #00d4ff;

    --success: #35d07f;
    --warning: #ffc857;
    --danger: #ff5f6d;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --container: 1180px;

    --shadow:
        0 25px 80px rgba(0, 0, 0, 0.35);

    --transition: 0.25s ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    min-height: 100vh;

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    background: var(--bg);
    color: var(--text);

    line-height: 1.5;

    overflow-x: hidden;
}

body::selection {
    background: var(--purple);
    color: #fff;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;
}


/* =========================================================
   GLOBAL BACKGROUND
========================================================= */

body::before {
    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -220px;

    background: var(--purple);

    opacity: 0.08;

    filter: blur(150px);

    pointer-events: none;

    z-index: -1;
}

body::after {
    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    background: var(--cyan);

    opacity: 0.06;

    filter: blur(150px);

    pointer-events: none;

    z-index: -1;
}


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

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 18px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #6746ed
        );

    box-shadow:
        0 10px 30px rgba(124, 92, 255, 0.20);
}

.btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(124, 92, 255, 0.32);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--border);

    color: var(--text-soft);
}

.btn-outline:hover {
    border-color: var(--border-light);

    background: rgba(255, 255, 255, 0.06);

    color: #fff;
}

.btn-dark {
    background: rgba(255, 255, 255, 0.045);

    border: 1px solid var(--border);

    color: #fff;
}

.btn-dark:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: var(--border-light);

    transform: translateY(-2px);
}

.btn-large {
    min-height: 52px;

    padding: 0 24px;

    border-radius: 14px;

    font-size: 14px;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(7, 9, 13, 0.72);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-inner {
    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* Logo */

.logo {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.logo-mark {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    color: #fff;

    font-size: 17px;
    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(124, 92, 255, 0.25);
}

.logo-text {
    font-size: 17px;

    font-weight: 800;

    letter-spacing: -0.5px;
}

.logo-text span {
    color: var(--purple-light);
}


/* Navigation */

.nav-links {
    display: flex;

    align-items: center;

    gap: 32px;

    margin-left: auto;
}

.nav-links a {
    color: var(--text-muted);

    font-size: 13px;
    font-weight: 500;

    transition: color var(--transition);
}

.nav-links a:hover {
    color: #fff;
}


/* Nav Actions */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* Mobile menu */

.mobile-menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    background: rgba(255, 255, 255, 0.04);

    border:
        1px solid var(--border);

    border-radius: 12px;

    cursor: pointer;
}

.mobile-menu-btn span {
    width: 18px;
    height: 2px;

    border-radius: 5px;

    background: #fff;

    transition: 0.25s ease;
}


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

.hero {
    position: relative;

    min-height: 690px;

    display: flex;

    align-items: center;

    padding:
        90px
        0
        80px;

    overflow: hidden;
}

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 70px;
}


/* Hero Glow */

.hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.hero-glow-one {
    top: -300px;
    left: 10%;

    background: var(--purple);

    opacity: 0.12;
}

.hero-glow-two {
    bottom: -350px;
    right: 5%;

    background: var(--cyan);

    opacity: 0.07;
}


/* Hero content */

.hero-content {
    position: relative;

    z-index: 2;
}

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    margin-bottom: 22px;

    border:
        1px solid rgba(124, 92, 255, 0.22);

    border-radius: 50px;

    background:
        rgba(124, 92, 255, 0.08);

    color: #b8adff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3px;
}

.pulse-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--purple-light);

    box-shadow:
        0 0 12px var(--purple);

    animation:
        pulse 1.7s infinite;
}

@keyframes pulse {

    0% {
        opacity: 1;

        box-shadow:
            0 0 0 0
            rgba(124, 92, 255, 0.45);
    }

    70% {
        opacity: 0.8;

        box-shadow:
            0 0 0 7px
            rgba(124, 92, 255, 0);
    }

    100% {
        opacity: 1;

        box-shadow:
            0 0 0 0
            rgba(124, 92, 255, 0);
    }
}


/* Hero heading */

.hero h1 {
    max-width: 700px;

    font-size:
        clamp(44px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -3px;

    font-weight: 800;

    margin-bottom: 24px;
}

.hero h1 span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #a696ff 0%,
            #7c5cff 40%,
            #00d4ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* Description */

.hero-description {
    max-width: 570px;

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.75;

    margin-bottom: 30px;
}


/* Hero buttons */

.hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* Trust */

.hero-trust {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 38px;
}

.trust-item {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.trust-item strong {
    font-size: 15px;

    font-weight: 700;
}

.trust-item span {
    color: var(--text-muted);

    font-size: 10px;
}

.trust-divider {
    width: 1px;
    height: 28px;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HERO DASHBOARD PREVIEW
========================================================= */

.hero-preview {
    position: relative;

    perspective: 1000px;
}

.preview-glow {
    position: absolute;

    width: 70%;
    height: 70%;

    top: 15%;
    left: 15%;

    background: var(--purple);

    opacity: 0.16;

    filter: blur(90px);

    pointer-events: none;
}

.dashboard-preview {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 22px;

    background:
        rgba(14, 18, 25, 0.90);

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(124, 92, 255, 0.08);

    transform:
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform 0.5s ease;
}

.dashboard-preview:hover {
    transform:
        rotateY(0deg)
        rotateX(0deg)
        translateY(-5px);
}


/* Preview topbar */

.preview-topbar {
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.025);

    color: #8992a1;

    font-size: 11px;
}

.window-dots {
    display: flex;

    gap: 5px;
}

.window-dots i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.14);
}

.preview-avatar {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    font-size: 9px;

    font-weight: 700;

    color: #fff;
}


/* Preview body */

.preview-body {
    padding: 24px;
}

.preview-welcome {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 20px;
}

.preview-welcome small,
.preview-balance small {
    display: block;

    color: var(--text-muted);

    font-size: 9px;

    margin-bottom: 4px;
}

.preview-welcome h3 {
    font-size: 20px;

    letter-spacing: -0.5px;
}

.preview-balance {
    text-align: right;
}

.preview-balance strong {
    font-size: 17px;
}


/* Preview stats */

.preview-stats {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 16px;
}

.preview-stat {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.025);
}

.preview-stat small {
    display: block;

    color: var(--text-muted);

    font-size: 8px;

    margin-bottom: 2px;
}

.preview-stat strong {
    font-size: 15px;
}

.stat-icon {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-size: 13px;
}

.stat-icon.purple {
    color: #a697ff;

    background:
        rgba(124, 92, 255, 0.12);
}

.stat-icon.cyan {
    color: #5ee6ff;

    background:
        rgba(0, 212, 255, 0.10);
}


/* Preview orders */

.preview-order {
    padding: 15px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.018);
}

.preview-section-head {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    font-size: 10px;
}

.preview-section-head span {
    color: var(--purple-light);

    font-size: 8px;
}

.order-row {
    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    border-top:
        1px solid rgba(255, 255, 255, 0.045);
}

.order-service {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}

.service-mini-icon {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        rgba(124, 92, 255, 0.09);

    color: var(--purple-light);

    font-size: 11px;
}

.order-service div {
    min-width: 0;
}

.order-service strong {
    display: block;

    max-width: 145px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 9px;
}

.order-service small {
    display: block;

    color: var(--text-muted);

    font-size: 7px;

    margin-top: 2px;
}


/* Status badges */

.status-badge {
    padding: 5px 8px;

    border-radius: 50px;

    font-size: 7px;

    font-weight: 600;

    white-space: nowrap;
}

.status-completed {
    color: var(--success);

    background:
        rgba(53, 208, 127, 0.08);

    border:
        1px solid rgba(53, 208, 127, 0.12);
}

.status-progress {
    color: #67cfff;

    background:
        rgba(0, 212, 255, 0.07);

    border:
        1px solid rgba(0, 212, 255, 0.11);
}

.status-pending {
    color: var(--warning);

    background:
        rgba(255, 200, 87, 0.07);

    border:
        1px solid rgba(255, 200, 87, 0.11);
}


/* =========================================================
   STATS
========================================================= */

.stats-section {
    padding: 0 0 50px;
}

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        1px solid var(--border);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.02);

    overflow: hidden;
}

.stat-box {
    min-height: 125px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    gap: 5px;

    border-right:
        1px solid rgba(255, 255, 255, 0.06);
}

.stat-box:last-child {
    border-right: 0;
}

.stat-box strong {
    font-size: 27px;

    letter-spacing: -1px;
}

.stat-box span {
    color: var(--text-muted);

    font-size: 11px;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding: 105px 0;
}

.section-dark {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            rgba(255, 255, 255, 0.025)
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.025);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.025);
}

.section-heading {
    max-width: 680px;

    margin:
        0 auto 55px;

    text-align: center;
}

.section-heading.left {
    margin:
        0;

    text-align: left;
}

.section-label {
    display: inline-block;

    margin-bottom: 13px;

    color: var(--purple-light);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.section-heading h2 {
    font-size:
        clamp(32px, 4vw, 46px);

    line-height: 1.1;

    letter-spacing: -2px;

    margin-bottom: 16px;
}

.section-heading h2 span {
    color: var(--purple-light);
}

.section-heading p {
    max-width: 580px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.75;
}

.section-heading.left p {
    margin: 0;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;
}

.service-card {
    position: relative;

    padding: 26px 23px;

    min-height: 235px;

    display: flex;

    flex-direction: column;

    border:
        1px solid var(--border);

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.018)
        );

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.service-card::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -70px;

    background: var(--purple);

    opacity: 0.10;

    filter: blur(40px);

    border-radius: 50%;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(124, 92, 255, 0.25);

    background:
        rgba(124, 92, 255, 0.045);
}

.service-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 13px;

    background:
        rgba(124, 92, 255, 0.10);

    border:
        1px solid rgba(124, 92, 255, 0.12);

    color: var(--purple-light);

    font-size: 18px;
}

.service-card h3 {
    font-size: 16px;

    margin-bottom: 9px;
}

.service-card p {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.65;
}

.service-card a {
    margin-top: auto;

    padding-top: 20px;

    color: var(--purple-light);

    font-size: 11px;

    font-weight: 600;

    transition: color var(--transition);
}

.service-card a:hover {
    color: #fff;
}


/* =========================================================
   TWO COLUMN / FEATURES
========================================================= */

.two-column {
    display: grid;

    grid-template-columns:
        0.75fr
        1.25fr;

    align-items: center;

    gap: 80px;
}

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

.feature-card {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition),
        border-color var(--transition);
}

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

    border-color:
        rgba(124, 92, 255, 0.22);
}

.feature-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        rgba(124, 92, 255, 0.10);

    font-size: 16px;
}

.feature-card h3 {
    font-size: 13px;

    margin-bottom: 5px;
}

.feature-card p {
    color: var(--text-muted);

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   STEPS
========================================================= */

.steps-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}

.step-card {
    position: relative;

    padding: 32px 27px;

    min-height: 260px;

    border:
        1px solid var(--border);

    border-radius: 21px;

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;
}

.step-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color:
        rgba(255, 255, 255, 0.08);

    font-size: 36px;

    font-weight: 800;

    letter-spacing: -2px;
}

.step-icon {
    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.14),
            rgba(0, 212, 255, 0.07)
        );

    font-size: 19px;
}

.step-card h3 {
    font-size: 15px;

    margin-bottom: 10px;
}

.step-card p {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FAQ
========================================================= */

.faq-container {
    max-width: 850px;
}

.faq-list {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.faq-item {
    border:
        1px solid var(--border);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;
}

.faq-item summary {
    min-height: 62px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 0 20px;

    color: #e8ebf0;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary span {
    color: var(--purple-light);

    font-size: 20px;

    font-weight: 400;

    transition: transform var(--transition);
}

.faq-item[open] summary span {
    transform: rotate(45deg);
}

.faq-item p {
    padding:
        0 20px
        20px;

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    position: relative;

    padding: 100px 0;

    overflow: hidden;
}

.cta-glow {
    position: absolute;

    width: 500px;
    height: 300px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--cyan)
        );

    opacity: 0.10;

    filter: blur(100px);

    pointer-events: none;
}

.cta-box {
    position: relative;

    padding: 70px 30px;

    text-align: center;

    border:
        1px solid rgba(124, 92, 255, 0.17);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 92, 255, 0.075),
            rgba(0, 212, 255, 0.025)
        );

    overflow: hidden;
}

.cta-box h2 {
    font-size:
        clamp(32px, 5vw, 48px);

    letter-spacing: -2px;

    margin-bottom: 13px;
}

.cta-box p {
    color: var(--text-muted);

    font-size: 14px;

    margin-bottom: 28px;
}

.cta-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;
}


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

.footer {
    padding: 60px 0 25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    background:
        rgba(0, 0, 0, 0.18);
}

.footer-main {
    display: flex;

    justify-content: space-between;

    gap: 60px;

    padding-bottom: 45px;
}

.footer-brand {
    max-width: 290px;
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-brand p {
    color: var(--text-muted);

    font-size: 11px;

    line-height: 1.75;
}

.footer-links {
    display: flex;

    gap: 80px;
}

.footer-links > div {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.footer-links h4 {
    margin-bottom: 6px;

    color: #fff;

    font-size: 11px;

    font-weight: 600;
}

.footer-links a {
    color: var(--text-muted);

    font-size: 10px;

    transition: color var(--transition);
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #555e6d;

    font-size: 9px;
}

.footer-bottom div {
    display: flex;

    gap: 20px;
}

.footer-bottom a:hover {
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .nav-links {
        gap: 20px;
    }

    .hero {
        padding-top: 70px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .hero-preview {
        width: min(100%, 650px);

        margin: 0 auto;
    }

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

    .two-column {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .section-heading.left {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    .section-heading.left p {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 700px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }


    /* Navbar */

    .nav-inner {
        height: 68px;
    }

    .nav-links {
        position: absolute;

        top: 68px;

        left: 14px;
        right: 14px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 10px;

        border:
            1px solid var(--border);

        border-radius: 16px;

        background:
            rgba(12, 15, 21, 0.96);

        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.4);

        backdrop-filter: blur(20px);
    }

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

    .nav-links a {
        padding: 13px;

        border-radius: 10px;
    }

    .nav-links a:hover {
        background:
            rgba(255, 255, 255, 0.04);
    }

    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }


    /* Mobile menu animation */

    .mobile-menu-btn.active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* Hero */

    .hero {
        min-height: auto;

        padding:
            65px 0
            55px;
    }

    .hero-grid {
        gap: 42px;
    }

    .hero h1 {
        font-size: 42px;

        letter-spacing: -2px;

        margin-bottom: 19px;
    }

    .hero-description {
        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 25px;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-trust {
        gap: 13px;

        margin-top: 30px;
    }

    .trust-item strong {
        font-size: 13px;
    }

    .trust-item span {
        font-size: 8px;
    }

    .trust-divider {
        height: 25px;
    }


    /* Dashboard preview */

    .dashboard-preview {
        border-radius: 18px;

        transform: none;
    }

    .dashboard-preview:hover {
        transform: none;
    }

    .preview-body {
        padding: 17px;
    }

    .preview-welcome h3 {
        font-size: 16px;
    }

    .preview-balance strong {
        font-size: 14px;
    }

    .preview-stats {
        gap: 7px;
    }

    .preview-stat {
        padding: 11px;
    }

    .preview-order {
        padding: 12px;
    }

    .order-service strong {
        max-width: 105px;
    }


    /* Stats */

    .stats-section {
        padding-bottom: 25px;
    }

    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);

        border-radius: 16px;
    }

    .stat-box {
        min-height: 100px;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.06);
    }

    .stat-box:nth-child(2) {
        border-right: 0;
    }

    .stat-box:nth-child(3),
    .stat-box:nth-child(4) {
        border-bottom: 0;
    }

    .stat-box strong {
        font-size: 23px;
    }


    /* Sections */

    .section {
        padding: 75px 0;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .section-heading h2 {
        font-size: 33px;

        letter-spacing: -1.5px;
    }

    .section-heading p {
        font-size: 12px;
    }


    /* Services */

    .service-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .service-card {
        min-height: auto;

        padding: 21px;
    }

    .service-card a {
        padding-top: 18px;
    }


    /* Features */

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 18px;
    }


    /* Steps */

    .steps-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .step-card {
        min-height: auto;

        padding: 25px;
    }


    /* FAQ */

    .faq-item summary {
        min-height: 57px;

        padding: 0 16px;

        font-size: 12px;
    }

    .faq-item p {
        padding:
            0 16px
            18px;

        font-size: 11px;
    }


    /* CTA */

    .cta-section {
        padding: 70px 0;
    }

    .cta-box {
        padding:
            48px 20px;

        border-radius: 22px;
    }

    .cta-box h2 {
        font-size: 33px;

        letter-spacing: -1.5px;
    }

    .cta-box p {
        font-size: 12px;

        line-height: 1.7;
    }

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

    .cta-actions .btn {
        width: 100%;
    }


    /* Footer */

    .footer {
        padding-top: 45px;
    }

    .footer-main {
        flex-direction: column;

        gap: 35px;

        padding-bottom: 30px;
    }

    .footer-links {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 15px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}


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

@media (max-width: 380px) {

    .container {
        width:
            calc(100% - 22px);
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero-trust {
        gap: 9px;
    }

    .trust-divider {
        height: 22px;
    }

    .trust-item strong {
        font-size: 11px;
    }

    .trust-item span {
        font-size: 7px;
    }

    .preview-welcome {
        flex-direction: column;

        gap: 12px;
    }

    .preview-balance {
        text-align: left;
    }

    .preview-stats {
        grid-template-columns: 1fr;
    }

    .order-service strong {
        max-width: 90px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}

/* ============================================================
   YOURPANEL
   PANEL / AUTH / ADMIN UI
   Append below existing landing-page CSS
============================================================ */


/* ============================================================
   PANEL VARIABLES
============================================================ */

:root {

    --panel-bg: #07090d;
    --panel-bg-soft: #0b0e14;

    --panel-card: rgba(17, 21, 29, 0.78);
    --panel-card-solid: #11151d;

    --panel-border: rgba(255, 255, 255, 0.075);
    --panel-border-hover: rgba(255, 255, 255, 0.13);

    --panel-text: #f5f7fb;
    --panel-muted: #8d95a5;
    --panel-muted-2: #626b7c;

    --panel-purple: #7c5cff;
    --panel-purple-light: #9b87ff;

    --panel-cyan: #00d4ff;

    --panel-green: #28d17c;
    --panel-yellow: #f5b942;
    --panel-red: #ff5c6c;
    --panel-blue: #4c9aff;

    --sidebar-width: 258px;
    --topbar-height: 76px;

    --panel-radius: 18px;
    --panel-radius-sm: 12px;

    --panel-shadow:
        0 18px 50px rgba(0, 0, 0, 0.28);

    --panel-transition:
        0.22s ease;
}


/* ============================================================
   GLOBAL PANEL RESET
============================================================ */

.panel-body {

    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(124, 92, 255, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(0, 212, 255, 0.035),
            transparent 28%
        ),
        var(--panel-bg);

    color: var(--panel-text);

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}


.panel-body *,
.panel-body *::before,
.panel-body *::after {

    box-sizing: border-box;
}


.panel-body a {

    color: inherit;

    text-decoration: none;
}


.panel-body button,
.panel-body input,
.panel-body select,
.panel-body textarea {

    font: inherit;
}


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

.panel-sidebar {

    position: fixed;

    inset:
        0 auto 0 0;

    width:
        var(--sidebar-width);

    height: 100vh;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    padding: 18px 14px;

    background:
        rgba(10, 13, 19, 0.94);

    border-right:
        1px solid var(--panel-border);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255,255,255,.12)
        transparent;
}


.panel-sidebar::-webkit-scrollbar {

    width: 5px;
}


.panel-sidebar::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,.12);

    border-radius: 99px;
}


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

.sidebar-logo-wrap {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 52px;

    padding:
        0 7px 16px;
}


.sidebar-logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -0.5px;
}


.sidebar-logo-text span {

    color:
        var(--panel-purple-light);
}


.sidebar-logo-mark {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: #fff;

    font-size: 16px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            var(--panel-purple),
            #5740d6
        );

    box-shadow:
        0 8px 25px
        rgba(124, 92, 255, .28);
}


.sidebar-close {

    display: none;

    width: 34px;

    height: 34px;

    border: 0;

    border-radius: 9px;

    background:
        rgba(255,255,255,.055);

    color:
        var(--panel-muted);

    cursor: pointer;
}


.sidebar-close svg {

    width: 18px;

    height: 18px;
}


/* ============================================================
   SIDEBAR SECTION LABEL
============================================================ */

.sidebar-section-label {

    padding:
        20px 10px 8px;

    color:
        var(--panel-muted-2);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.15px;
}


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

.sidebar-nav {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.sidebar-nav-item {

    min-height: 45px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        0 11px;

    border:
        1px solid transparent;

    border-radius: 11px;

    color:
        var(--panel-muted);

    font-size: 13px;

    font-weight: 500;

    transition:
        background var(--panel-transition),
        color var(--panel-transition),
        border-color var(--panel-transition),
        transform var(--panel-transition);
}


.sidebar-nav-item:hover {

    color: #fff;

    background:
        rgba(255,255,255,.045);

    border-color:
        rgba(255,255,255,.04);
}


.sidebar-nav-item.active {

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(124,92,255,.18),
            rgba(124,92,255,.07)
        );

    border-color:
        rgba(124,92,255,.20);

    box-shadow:
        inset 3px 0 0
        var(--panel-purple);
}


.sidebar-nav-icon {

    width: 20px;

    height: 20px;

    flex: 0 0 20px;

    display: grid;

    place-items: center;

    color:
        var(--panel-muted-2);
}


.sidebar-nav-icon svg {

    width: 19px;

    height: 19px;
}


.sidebar-nav-item:hover
.sidebar-nav-icon,
.sidebar-nav-item.active
.sidebar-nav-icon {

    color:
        var(--panel-purple-light);
}


.sidebar-nav-text {

    flex: 1;
}


.sidebar-nav-badge {

    min-width: 22px;

    height: 20px;

    padding: 0 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 99px;

    background:
        rgba(124,92,255,.13);

    color:
        var(--panel-purple-light);

    font-size: 10px;

    font-weight: 700;
}


.sidebar-nav-badge.warning {

    background:
        rgba(245,185,66,.13);

    color:
        var(--panel-yellow);
}


.sidebar-logout:hover {

    color:
        var(--panel-red);

    background:
        rgba(255,92,108,.06);
}


.sidebar-logout:hover
.sidebar-nav-icon {

    color:
        var(--panel-red);
}


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

.sidebar-bottom {

    margin-top: auto;

    padding-top: 16px;
}


.sidebar-account-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border:
        1px solid var(--panel-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.025);
}


.sidebar-avatar,
.topbar-avatar {

    width: 36px;

    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--panel-purple),
            #4e3cc0
        );

    color: #fff;

    font-size: 11px;

    font-weight: 800;
}


.sidebar-account-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.sidebar-account-info strong {

    overflow: hidden;

    color: #fff;

    font-size: 12px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.sidebar-account-info span {

    color:
        var(--panel-muted-2);

    font-size: 10px;
}


/* ============================================================
   MAIN PANEL
============================================================ */

.panel-main {

    min-height: 100vh;

    margin-left:
        var(--sidebar-width);
}


/* ============================================================
   TOPBAR
============================================================ */

.panel-topbar {

    position: sticky;

    top: 0;

    z-index: 900;

    height:
        var(--topbar-height);

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        0 28px;

    background:
        rgba(7,9,13,.82);

    border-bottom:
        1px solid var(--panel-border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.topbar-page-title {

    flex: 1;
}


.topbar-page-title h1 {

    margin: 0;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: -.25px;
}


.topbar-actions {

    display: flex;

    align-items: center;

    gap: 13px;
}


.mobile-menu-button {

    display: none;

    width: 40px;

    height: 40px;

    border: 1px solid var(--panel-border);

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    color: #fff;

    cursor: pointer;
}


.mobile-menu-button svg {

    width: 20px;

    height: 20px;
}


/* ============================================================
   TOPBAR WALLET
============================================================ */

.topbar-wallet {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 11px;

    border:
        1px solid var(--panel-border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);

    transition:
        border-color var(--panel-transition);
}


.topbar-wallet:hover {

    border-color:
        rgba(124,92,255,.3);
}


.topbar-wallet-icon {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        rgba(124,92,255,.12);

    color:
        var(--panel-purple-light);
}


.topbar-wallet-icon svg {

    width: 16px;

    height: 16px;
}


.topbar-wallet-text {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.topbar-wallet-text small {

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


.topbar-wallet-text strong {

    color: #fff;

    font-size: 12px;
}


.topbar-icon-button {

    position: relative;

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--panel-border);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);

    color:
        var(--panel-muted);

    cursor: pointer;

    transition:
        color var(--panel-transition),
        background var(--panel-transition);
}


.topbar-icon-button:hover {

    color: #fff;

    background:
        rgba(255,255,255,.055);
}


.topbar-icon-button svg {

    width: 18px;

    height: 18px;
}


.notification-dot {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--panel-red);

    box-shadow:
        0 0 0 3px
        rgba(255,92,108,.12);
}


.topbar-system-status {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 11px;

    border:
        1px solid rgba(40,209,124,.13);

    border-radius: 10px;

    background:
        rgba(40,209,124,.045);

    color:
        #9deac0;

    font-size: 10px;

    font-weight: 600;
}


.status-dot {

    width: 7px;

    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--panel-green);

    box-shadow:
        0 0 0 4px
        rgba(40,209,124,.09);
}


.topbar-user {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-left: 7px;

    border-left:
        1px solid var(--panel-border);
}


.topbar-user-info {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.topbar-user-info strong {

    color: #fff;

    font-size: 11px;
}


.topbar-user-info span {

    max-width: 150px;

    overflow: hidden;

    color:
        var(--panel-muted-2);

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   PANEL CONTENT
============================================================ */

.panel-content {

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    padding:
        30px 30px 50px;
}


.page-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.page-header h2 {

    margin: 0 0 6px;

    color: #fff;

    font-size: 25px;

    font-weight: 750;

    letter-spacing: -.7px;
}


.page-header p {

    margin: 0;

    color:
        var(--panel-muted);

    font-size: 13px;

    line-height: 1.6;
}


.page-header-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}


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

.btn {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 15px;

    border:
        1px solid transparent;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    transition:
        transform var(--panel-transition),
        background var(--panel-transition),
        border-color var(--panel-transition),
        color var(--panel-transition),
        box-shadow var(--panel-transition);
}


.btn:hover {

    transform:
        translateY(-1px);
}


.btn:disabled {

    opacity: .55;

    cursor: not-allowed;

    transform: none;
}


.btn svg {

    width: 16px;

    height: 16px;
}


.btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--panel-purple),
            #6749e8
        );

    box-shadow:
        0 9px 25px
        rgba(124,92,255,.18);
}


.btn-primary:hover {

    box-shadow:
        0 12px 30px
        rgba(124,92,255,.28);
}


.btn-secondary {

    color:
        #d8dce5;

    background:
        rgba(255,255,255,.045);

    border-color:
        var(--panel-border);
}


.btn-secondary:hover {

    background:
        rgba(255,255,255,.075);
}


.btn-danger {

    color: #fff;

    background:
        rgba(255,92,108,.85);

    border-color:
        rgba(255,92,108,.35);
}


.btn-success {

    color: #07100b;

    background:
        var(--panel-green);
}


.btn-warning {

    color: #171006;

    background:
        var(--panel-yellow);
}


.btn-sm {

    min-height: 34px;

    padding:
        0 11px;

    font-size: 11px;

    border-radius: 8px;
}


.btn-icon {

    width: 38px;

    height: 38px;

    padding: 0;
}


/* ============================================================
   FLASH MESSAGES
============================================================ */

.panel-flash-stack {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 20px;
}


.panel-flash {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border:
        1px solid;

    border-radius: 11px;

    font-size: 12px;

    animation:
        panelFadeIn .25s ease;
}


.panel-flash-success {

    color: #a9ebc5;

    background:
        rgba(40,209,124,.06);

    border-color:
        rgba(40,209,124,.16);
}


.panel-flash-error {

    color: #ffb3bb;

    background:
        rgba(255,92,108,.06);

    border-color:
        rgba(255,92,108,.16);
}


.panel-flash-warning {

    color: #f8d994;

    background:
        rgba(245,185,66,.06);

    border-color:
        rgba(245,185,66,.16);
}


.panel-flash-info {

    color: #9fd8ff;

    background:
        rgba(76,154,255,.06);

    border-color:
        rgba(76,154,255,.16);
}


.panel-flash-icon {

    width: 24px;

    height: 24px;

    flex: 0 0 24px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 800;
}


.panel-flash.is-hiding {

    opacity: 0;

    transform:
        translateY(-5px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* ============================================================
   STAT CARDS
============================================================ */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}


.stat-card {

    position: relative;

    min-width: 0;

    padding: 19px;

    overflow: hidden;

    border:
        1px solid var(--panel-border);

    border-radius:
        var(--panel-radius);

    background:
        var(--panel-card);

    box-shadow:
        var(--panel-shadow);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        transform var(--panel-transition),
        border-color var(--panel-transition);
}


.stat-card:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--panel-border-hover);
}


.stat-card::after {

    content: '';

    position: absolute;

    right: -40px;

    bottom: -50px;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background:
        rgba(124,92,255,.06);

    filter:
        blur(20px);
}


.stat-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 16px;
}


.stat-card-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.10);
}


.stat-card-icon svg {

    width: 19px;

    height: 19px;
}


.stat-card-change {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 9px;

    font-weight: 700;
}


.stat-card-change.up {

    color:
        var(--panel-green);
}


.stat-card-change.down {

    color:
        var(--panel-red);
}


.stat-card-label {

    margin-bottom: 5px;

    color:
        var(--panel-muted);

    font-size: 11px;
}


.stat-card-value {

    color: #fff;

    font-size: 24px;

    font-weight: 750;

    letter-spacing: -.8px;
}


.stat-card-sub {

    margin-top: 5px;

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


/* ============================================================
   GENERIC CARDS
============================================================ */

.panel-card {

    border:
        1px solid var(--panel-border);

    border-radius:
        var(--panel-radius);

    background:
        var(--panel-card);

    box-shadow:
        var(--panel-shadow);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.panel-card-header {

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        0 20px;

    border-bottom:
        1px solid var(--panel-border);
}


.panel-card-title {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.panel-card-title h3 {

    margin: 0;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}


.panel-card-title p {

    margin: 0;

    color:
        var(--panel-muted-2);

    font-size: 10px;
}


.panel-card-body {

    padding: 20px;
}


/* ============================================================
   GRID LAYOUTS
============================================================ */

.content-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(280px, .9fr);

    gap: 18px;

    margin-bottom: 20px;
}


.content-grid-equal {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 20px;
}


.content-grid-3 {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 20px;
}


/* ============================================================
   DATA TABLE
============================================================ */

.data-table-wrap {

    width: 100%;

    overflow-x: auto;
}


.data-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 760px;
}


.data-table th {

    padding:
        12px 15px;

    border-bottom:
        1px solid var(--panel-border);

    color:
        var(--panel-muted-2);

    font-size: 9px;

    font-weight: 700;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: .65px;

    white-space: nowrap;
}


.data-table td {

    padding:
        14px 15px;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    color:
        #dce0e8;

    font-size: 11px;

    vertical-align: middle;
}


.data-table tbody tr {

    transition:
        background var(--panel-transition);
}


.data-table tbody tr:hover {

    background:
        rgba(255,255,255,.018);
}


.data-table tbody tr:last-child td {

    border-bottom: 0;
}


.table-primary {

    color: #fff;

    font-weight: 650;
}


.table-secondary {

    display: block;

    margin-top: 3px;

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


.table-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;
}


/* ============================================================
   MOBILE DATA CARDS
============================================================ */

.mobile-cards {

    display: none;

    flex-direction: column;

    gap: 10px;
}


.mobile-data-card {

    padding: 15px;

    border:
        1px solid var(--panel-border);

    border-radius: 14px;

    background:
        rgba(255,255,255,.025);
}


.mobile-data-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 13px;
}


.mobile-data-card-title {

    color: #fff;

    font-size: 12px;

    font-weight: 700;
}


.mobile-data-card-subtitle {

    margin-top: 3px;

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


.mobile-data-card-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding-top: 12px;

    border-top:
        1px solid rgba(255,255,255,.05);
}


.mobile-data-item {

    min-width: 0;
}


.mobile-data-item label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--panel-muted-2);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.mobile-data-item span {

    display: block;

    overflow: hidden;

    color:
        #dfe3ea;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


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

.status-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding:
        0 8px;

    border:
        1px solid transparent;

    border-radius: 99px;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;
}


.status-pending {

    color:
        #f7d58a;

    background:
        rgba(245,185,66,.09);

    border-color:
        rgba(245,185,66,.14);
}


.status-processing {

    color:
        #9dc9ff;

    background:
        rgba(76,154,255,.09);

    border-color:
        rgba(76,154,255,.14);
}


.status-completed,
.status-approved,
.status-resolved {

    color:
        #91e7b8;

    background:
        rgba(40,209,124,.08);

    border-color:
        rgba(40,209,124,.14);
}


.status-failed,
.status-rejected {

    color:
        #ffadb6;

    background:
        rgba(255,92,108,.08);

    border-color:
        rgba(255,92,108,.14);
}


.status-open {

    color:
        #c2b7ff;

    background:
        rgba(124,92,255,.09);

    border-color:
        rgba(124,92,255,.15);
}


.status-closed {

    color:
        #9ca4b4;

    background:
        rgba(156,164,180,.07);

    border-color:
        rgba(156,164,180,.12);
}


.status-default {

    color:
        #b5bdca;

    background:
        rgba(181,189,202,.06);

    border-color:
        rgba(181,189,202,.1);
}


/* ============================================================
   PRIORITY
============================================================ */

.priority-high {

    color:
        #ff9da8;

    font-weight: 700;
}


.priority-normal {

    color:
        #d2d7e0;

    font-weight: 600;
}


.priority-low {

    color:
        #8e97a8;

    font-weight: 600;
}


/* ============================================================
   FORMS
============================================================ */

.form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;
}


.form-group {

    margin-bottom: 17px;
}


.form-grid .form-group {

    margin-bottom: 0;
}


.form-group.full {

    grid-column:
        1 / -1;
}


.form-label {

    display: block;

    margin-bottom: 7px;

    color:
        #dce1e9;

    font-size: 11px;

    font-weight: 600;
}


.form-label small {

    margin-left: 4px;

    color:
        var(--panel-muted-2);

    font-weight: 400;
}


.form-control,
.panel-input,
.panel-select,
.panel-textarea {

    width: 100%;

    min-height: 42px;

    padding:
        0 12px;

    outline: none;

    border:
        1px solid var(--panel-border);

    border-radius: 10px;

    color: #f5f7fb;

    background:
        rgba(255,255,255,.035);

    font-size: 11px;

    transition:
        border-color var(--panel-transition),
        background var(--panel-transition),
        box-shadow var(--panel-transition);
}


.panel-textarea {

    min-height: 110px;

    padding:
        12px;

    resize: vertical;
}


.form-control::placeholder,
.panel-input::placeholder,
.panel-textarea::placeholder {

    color:
        #596273;
}


.form-control:focus,
.panel-input:focus,
.panel-select:focus,
.panel-textarea:focus {

    border-color:
        rgba(124,92,255,.5);

    background:
        rgba(124,92,255,.035);

    box-shadow:
        0 0 0 3px
        rgba(124,92,255,.08);
}


.panel-select {

    appearance: auto;

    cursor: pointer;
}


.panel-select option {

    background:
        #11151d;

    color: #fff;
}


.input-with-icon {

    position: relative;
}


.input-with-icon .form-control {

    padding-left: 38px;
}


.input-with-icon > svg {

    position: absolute;

    top: 50%;

    left: 12px;

    width: 16px;

    height: 16px;

    color:
        var(--panel-muted-2);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.form-help {

    margin-top: 6px;

    color:
        var(--panel-muted-2);

    font-size: 9px;

    line-height: 1.5;
}


.form-error {

    margin-top: 6px;

    color:
        #ff9ca7;

    font-size: 9px;
}


/* ============================================================
   FILTER BAR
============================================================ */

.filter-bar {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 16px;

    padding: 13px;

    border:
        1px solid var(--panel-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.018);
}


.filter-search {

    position: relative;

    flex:
        1 1 220px;

    min-width: 180px;
}


.filter-search input {

    width: 100%;

    height: 38px;

    padding:
        0 12px 0 35px;

    outline: none;

    border:
        1px solid var(--panel-border);

    border-radius: 9px;

    color: #fff;

    background:
        rgba(255,255,255,.035);

    font-size: 10px;
}


.filter-search svg {

    position: absolute;

    top: 50%;

    left: 11px;

    width: 15px;

    height: 15px;

    color:
        var(--panel-muted-2);

    transform:
        translateY(-50%);
}


.filter-control {

    height: 38px;

    min-width: 120px;

    padding:
        0 10px;

    outline: none;

    border:
        1px solid var(--panel-border);

    border-radius: 9px;

    color:
        #dce1e9;

    background:
        rgba(255,255,255,.035);

    font-size: 10px;
}


/* ============================================================
   PAGINATION
============================================================ */

.pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding-top: 18px;
}


.pagination a,
.pagination span {

    min-width: 32px;

    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid var(--panel-border);

    border-radius: 8px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.025);

    font-size: 10px;
}


.pagination a:hover {

    color: #fff;

    background:
        rgba(255,255,255,.055);
}


.pagination .active {

    color: #fff;

    background:
        var(--panel-purple);

    border-color:
        var(--panel-purple);
}


/* ============================================================
   EMPTY STATE
============================================================ */

.empty-state {

    padding:
        50px 20px;

    text-align: center;
}


.empty-state-icon {

    width: 54px;

    height: 54px;

    margin:
        0 auto 14px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--panel-muted-2);

    background:
        rgba(255,255,255,.04);
}


.empty-state-icon svg {

    width: 25px;

    height: 25px;
}


.empty-state h3 {

    margin:
        0 0 6px;

    color: #fff;

    font-size: 14px;
}


.empty-state p {

    max-width: 390px;

    margin:
        0 auto 17px;

    color:
        var(--panel-muted);

    font-size: 10px;

    line-height: 1.6;
}


/* ============================================================
   PROGRESS
============================================================ */

.progress-wrap {

    width: 100%;
}


.progress-track {

    width: 100%;

    height: 6px;

    overflow: hidden;

    border-radius: 99px;

    background:
        rgba(255,255,255,.07);
}


.progress-bar {

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--panel-purple),
            var(--panel-cyan)
        );

    transition:
        width .4s ease;
}


.progress-info {

    display: flex;

    justify-content: space-between;

    margin-top: 6px;

    color:
        var(--panel-muted-2);

    font-size: 8px;
}


/* ============================================================
   ORDER / DETAIL COMPONENTS
============================================================ */

.detail-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, .75fr);

    gap: 18px;
}


.detail-stack {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.detail-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding:
        12px 0;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}


.detail-row:last-child {

    border-bottom: 0;

    padding-bottom: 0;
}


.detail-label {

    color:
        var(--panel-muted-2);

    font-size: 10px;
}


.detail-value {

    max-width: 65%;

    color:
        #e7eaf0;

    font-size: 11px;

    font-weight: 600;

    text-align: right;

    word-break: break-word;
}


.detail-value.muted {

    color:
        var(--panel-muted);
}


.reference-code {

    color:
        var(--panel-purple-light);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 10px;
}


/* ============================================================
   COPY FIELD
============================================================ */

.copy-field {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 10px;

    border:
        1px solid var(--panel-border);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);
}


.copy-field-text {

    flex: 1;

    overflow: hidden;

    color:
        #cbd1dc;

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.copy-button {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 7px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.05);

    cursor: pointer;
}


.copy-button:hover {

    color: #fff;

    background:
        rgba(124,92,255,.13);
}


.copy-button svg {

    width: 14px;

    height: 14px;
}


/* ============================================================
   TIMELINE
============================================================ */

.timeline {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 0;
}


.timeline::before {

    content: '';

    position: absolute;

    top: 8px;

    bottom: 8px;

    left: 9px;

    width: 1px;

    background:
        rgba(255,255,255,.09);
}


.timeline-item {

    position: relative;

    display: grid;

    grid-template-columns: 19px 1fr;

    gap: 12px;

    padding-bottom: 20px;
}


.timeline-item:last-child {

    padding-bottom: 0;
}


.timeline-dot {

    position: relative;

    z-index: 1;

    width: 19px;

    height: 19px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(124,92,255,.35);

    border-radius: 50%;

    color:
        var(--panel-purple-light);

    background:
        #11151d;
}


.timeline-dot::after {

    content: '';

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        currentColor;
}


.timeline-content strong {

    display: block;

    margin-bottom: 4px;

    color:
        #e9ecf2;

    font-size: 10px;
}


.timeline-content span {

    display: block;

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


.timeline-content p {

    margin:
        7px 0 0;

    color:
        var(--panel-muted);

    font-size: 10px;

    line-height: 1.55;
}


/* ============================================================
   WALLET
============================================================ */

.wallet-hero {

    position: relative;

    overflow: hidden;

    padding: 25px;

    border:
        1px solid rgba(124,92,255,.18);

    border-radius:
        var(--panel-radius);

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.15),
            rgba(17,21,29,.82) 55%
        );

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.24);
}


.wallet-hero::after {

    content: '';

    position: absolute;

    width: 230px;

    height: 230px;

    right: -100px;

    top: -120px;

    border-radius: 50%;

    background:
        rgba(124,92,255,.12);

    filter: blur(25px);
}


.wallet-label {

    color:
        var(--panel-muted);

    font-size: 10px;
}


.wallet-balance {

    margin-top: 6px;

    color: #fff;

    font-size: 36px;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.wallet-actions {

    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}


/* ============================================================
   SERVICE CARDS
============================================================ */

.service-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


.service-card {

    padding: 18px;

    border:
        1px solid var(--panel-border);

    border-radius:
        var(--panel-radius);

    background:
        var(--panel-card);

    transition:
        transform var(--panel-transition),
        border-color var(--panel-transition);
}


.service-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(124,92,255,.18);
}


.service-card-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    margin-bottom: 14px;

    border-radius: 11px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.1);
}


.service-card-icon svg {

    width: 19px;

    height: 19px;
}


.service-card h3 {

    margin: 0 0 6px;

    color: #fff;

    font-size: 13px;
}


.service-card p {

    margin: 0;

    color:
        var(--panel-muted);

    font-size: 10px;

    line-height: 1.55;
}


.service-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 14px;
}


.service-meta span {

    padding:
        5px 7px;

    border-radius: 7px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.04);

    font-size: 8px;
}


/* ============================================================
   SUPPORT / TICKET
============================================================ */

.ticket-message {

    display: flex;

    gap: 10px;

    margin-bottom: 18px;
}


.ticket-message.admin {

    flex-direction: row-reverse;
}


.ticket-message-avatar {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background:
        rgba(124,92,255,.18);

    font-size: 9px;

    font-weight: 800;
}


.ticket-message-body {

    max-width: 75%;
}


.ticket-message-bubble {

    padding:
        11px 13px;

    border:
        1px solid var(--panel-border);

    border-radius:
        13px;

    color:
        #dce1e8;

    background:
        rgba(255,255,255,.035);

    font-size: 10px;

    line-height: 1.65;
}


.ticket-message.admin
.ticket-message-bubble {

    border-color:
        rgba(124,92,255,.16);

    background:
        rgba(124,92,255,.065);
}


.ticket-message-time {

    margin-top: 5px;

    color:
        var(--panel-muted-2);

    font-size: 8px;
}


.attachment-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 9px;
}


.attachment-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 9px;

    border:
        1px solid var(--panel-border);

    border-radius: 8px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.025);

    font-size: 9px;
}


/* ============================================================
   UPLOAD BOX
============================================================ */

.upload-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 115px;

    padding: 18px;

    border:
        1px dashed
        rgba(255,255,255,.14);

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);

    text-align: center;

    transition:
        border-color var(--panel-transition),
        background var(--panel-transition);
}


.upload-box:hover {

    border-color:
        rgba(124,92,255,.35);

    background:
        rgba(124,92,255,.025);
}


.upload-box input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;
}


.upload-box-content {

    pointer-events: none;
}


.upload-box-icon {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    margin:
        0 auto 8px;

    border-radius: 9px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.09);
}


.upload-box-icon svg {

    width: 17px;

    height: 17px;
}


.upload-box strong {

    display: block;

    margin-bottom: 4px;

    color: #dfe3ea;

    font-size: 10px;
}


.upload-box span {

    color:
        var(--panel-muted-2);

    font-size: 8px;
}


/* ============================================================
   QR / PAYMENT
============================================================ */

.qr-preview {

    width: 190px;

    height: 190px;

    margin: 0 auto;

    padding: 10px;

    border:
        1px solid var(--panel-border);

    border-radius: 15px;

    background: #fff;
}


.qr-preview img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;
}


.payment-summary {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 10px;
}


.payment-summary-item {

    padding: 13px;

    border:
        1px solid var(--panel-border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);
}


.payment-summary-item label {

    display: block;

    margin-bottom: 5px;

    color:
        var(--panel-muted-2);

    font-size: 8px;

    text-transform: uppercase;
}


.payment-summary-item strong {

    color: #fff;

    font-size: 13px;
}


/* ============================================================
   MODALS
============================================================ */

.global-modal,
.panel-modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.global-modal.is-open,
.panel-modal.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.global-modal-backdrop,
.panel-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.global-modal-dialog,
.panel-modal-dialog {

    position: relative;

    z-index: 1;

    width: min(
        100%,
        460px
    );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    padding: 23px;

    border:
        1px solid var(--panel-border);

    border-radius: 18px;

    background:
        #11151d;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.5);

    transform:
        translateY(8px)
        scale(.98);

    transition:
        transform .2s ease;
}


.global-modal.is-open
.global-modal-dialog,
.panel-modal.is-open
.panel-modal-dialog {

    transform:
        translateY(0)
        scale(1);
}


.global-modal-close,
.panel-modal-close {

    position: absolute;

    top: 13px;

    right: 13px;

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 8px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.04);

    cursor: pointer;
}


.global-modal-close svg,
.panel-modal-close svg {

    width: 15px;

    height: 15px;
}


.global-modal-icon {

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    margin-bottom: 15px;

    border-radius: 13px;

    color:
        var(--panel-yellow);

    background:
        rgba(245,185,66,.09);
}


.global-modal-icon svg {

    width: 23px;

    height: 23px;
}


.global-modal-content h3,
.panel-modal-content h3 {

    margin:
        0 0 7px;

    color: #fff;

    font-size: 16px;
}


.global-modal-content p,
.panel-modal-content p {

    margin: 0;

    color:
        var(--panel-muted);

    font-size: 11px;

    line-height: 1.6;
}


.global-modal-actions,
.panel-modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 22px;
}


.modal-open {

    overflow: hidden;
}


/* ============================================================
   TOAST
============================================================ */

.toast-container {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 3000;

    width:
        min(
            360px,
            calc(100vw - 30px)
        );

    display: flex;

    flex-direction: column;

    gap: 8px;

    pointer-events: none;
}


.toast {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 48px;

    padding:
        9px 11px;

    border:
        1px solid var(--panel-border);

    border-radius: 11px;

    background:
        rgba(17,21,29,.95);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(15px);

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease;

    pointer-events: auto;
}


.toast.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


.toast.is-removing {

    opacity: 0;

    transform:
        translateY(8px);
}


.toast-icon {

    width: 27px;

    height: 27px;

    flex: 0 0 27px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    font-size: 11px;

    font-weight: 800;
}


.toast-success .toast-icon {

    color:
        var(--panel-green);

    background:
        rgba(40,209,124,.1);
}


.toast-error .toast-icon {

    color:
        var(--panel-red);

    background:
        rgba(255,92,108,.1);
}


.toast-warning .toast-icon {

    color:
        var(--panel-yellow);

    background:
        rgba(245,185,66,.1);
}


.toast-info .toast-icon {

    color:
        var(--panel-blue);

    background:
        rgba(76,154,255,.1);
}


.toast-message {

    flex: 1;

    color:
        #dfe3eb;

    font-size: 10px;

    line-height: 1.4;
}


.toast-close {

    border: 0;

    padding: 3px;

    color:
        var(--panel-muted-2);

    background: transparent;

    font-size: 17px;

    cursor: pointer;
}


/* ============================================================
   AUTH PAGES
============================================================ */

.auth-page {

    min-height: 100vh;

    margin: 0;

    color: #fff;

    background:
        #07090d;

    font-family:
        'Inter',
        sans-serif;
}


.auth-wrapper {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 560px);
}


.auth-brand {

    position: relative;

    display: flex;

    align-items: center;

    padding:
        60px 8vw;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(124,92,255,.13),
            transparent 40%
        ),
        #090c12;
}


.auth-brand::before {

    content: '';

    position: absolute;

    width: 550px;

    height: 550px;

    left: -230px;

    bottom: -300px;

    border-radius: 50%;

    border:
        1px solid rgba(124,92,255,.1);

    box-shadow:
        0 0 0 70px rgba(124,92,255,.018),
        0 0 0 140px rgba(124,92,255,.012);
}


.auth-brand-glow {

    position: absolute;

    width: 300px;

    height: 300px;

    right: 10%;

    top: 15%;

    border-radius: 50%;

    background:
        rgba(124,92,255,.08);

    filter:
        blur(80px);
}


.auth-brand-content {

    position: relative;

    z-index: 1;

    width:
        min(
            100%,
            610px
        );
}


.auth-logo {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #fff;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -.6px;
}


.auth-logo > span:last-child span {

    color:
        var(--panel-purple-light);
}


.auth-logo-mark {

    width: 39px;

    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--panel-purple),
            #5740d6
        );

    box-shadow:
        0 12px 35px
        rgba(124,92,255,.25);
}


.auth-brand h1 {

    max-width: 620px;

    margin:
        65px 0 17px;

    color: #fff;

    font-size:
        clamp(
            38px,
            4.2vw,
            62px
        );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.8px;
}


.auth-brand h1 span {

    color:
        var(--panel-purple-light);
}


.auth-brand-message {

    max-width: 510px;

    margin: 0;

    color:
        var(--panel-muted);

    font-size: 14px;

    line-height: 1.75;
}


.auth-features {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 48px;
}


.auth-feature {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius: 12px;

    background:
        rgba(255,255,255,.018);
}


.auth-feature-icon {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.09);
}


.auth-feature-icon svg {

    width: 15px;

    height: 15px;
}


.auth-feature strong {

    display: block;

    margin-bottom: 3px;

    color: #e9ecf3;

    font-size: 9px;
}


.auth-feature span {

    display: block;

    color:
        var(--panel-muted-2);

    font-size: 8px;

    line-height: 1.45;
}


.auth-form-section {

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        45px 55px;

    background:
        #0b0e14;

    border-left:
        1px solid var(--panel-border);
}


.auth-form-container {

    width: 100%;

    max-width: 410px;
}


.auth-mobile-logo {

    display: none;

    margin-bottom: 35px;
}


.auth-heading {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 27px;
}


.auth-heading h2 {

    margin:
        3px 0 5px;

    color: #fff;

    font-size: 27px;

    font-weight: 750;

    letter-spacing: -.7px;
}


.auth-heading p {

    margin: 0;

    color:
        var(--panel-muted);

    font-size: 11px;
}


.auth-eyebrow {

    color:
        var(--panel-purple-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.auth-heading > .admin-login-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    margin-top: 2px;

    border-radius: 11px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.09);
}


.admin-login-icon svg {

    width: 20px;

    height: 20px;
}


.auth-form .form-group {

    margin-bottom: 17px;
}


.auth-form .form-label {

    color:
        #d9dde6;

    font-size: 10px;
}


.form-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.input-wrapper {

    position: relative;
}


.input-wrapper input {

    width: 100%;

    height: 47px;

    padding:
        0 43px;

    outline: none;

    border:
        1px solid var(--panel-border);

    border-radius: 11px;

    color: #fff;

    background:
        rgba(255,255,255,.025);

    font-size: 11px;

    transition:
        border-color var(--panel-transition),
        box-shadow var(--panel-transition),
        background var(--panel-transition);
}


.input-wrapper input:focus {

    border-color:
        rgba(124,92,255,.48);

    background:
        rgba(124,92,255,.025);

    box-shadow:
        0 0 0 3px
        rgba(124,92,255,.07);
}


.input-wrapper input::placeholder {

    color:
        #596273;
}


.input-icon {

    position: absolute;

    top: 50%;

    left: 14px;

    width: 17px;

    height: 17px;

    display: grid;

    place-items: center;

    color:
        var(--panel-muted-2);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.input-icon svg {

    width: 17px;

    height: 17px;
}


.password-toggle {

    position: absolute;

    top: 50%;

    right: 11px;

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 7px;

    color:
        var(--panel-muted-2);

    background: transparent;

    transform:
        translateY(-50%);

    cursor: pointer;
}


.password-toggle:hover {

    color: #fff;

    background:
        rgba(255,255,255,.04);
}


.password-toggle svg {

    width: 16px;

    height: 16px;
}


.password-toggle .eye-closed {

    display: none;
}


.password-toggle.is-visible .eye-open {

    display: none;
}


.password-toggle.is-visible .eye-closed {

    display: block;
}


.forgot-link {

    color:
        var(--panel-purple-light);

    font-size: 9px;

    font-weight: 600;
}


.forgot-link:hover {

    text-decoration: underline;
}


.checkbox-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin:
        3px 0 20px;
}


.custom-checkbox {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--panel-muted);

    font-size: 9px;

    cursor: pointer;
}


.custom-checkbox input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.checkbox-mark {

    width: 15px;

    height: 15px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 4px;

    background:
        rgba(255,255,255,.025);
}


.custom-checkbox input:checked
+ .checkbox-mark {

    border-color:
        var(--panel-purple);

    background:
        var(--panel-purple);
}


.custom-checkbox input:checked
+ .checkbox-mark::after {

    content: '✓';

    color: #fff;

    font-size: 9px;

    font-weight: 800;
}


.auth-submit {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--panel-purple),
            #6749e8
        );

    box-shadow:
        0 12px 30px
        rgba(124,92,255,.17);

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--panel-transition),
        box-shadow var(--panel-transition),
        opacity var(--panel-transition);
}


.auth-submit:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 16px 35px
        rgba(124,92,255,.25);
}


.auth-submit svg {

    width: 16px;

    height: 16px;
}


.auth-submit.is-loading {

    opacity: .7;

    cursor: wait;
}


.auth-register {

    margin-top: 22px;

    color:
        var(--panel-muted);

    font-size: 10px;

    text-align: center;
}


.auth-register a {

    color:
        var(--panel-purple-light);

    font-weight: 650;
}


.auth-back {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 22px;

    color:
        var(--panel-muted-2);

    font-size: 9px;
}


.auth-back:hover {

    color: #fff;
}


.auth-back svg {

    width: 14px;

    height: 14px;
}


.auth-copyright {

    margin:
        24px 0 0;

    color:
        #414958;

    font-size: 8px;

    text-align: center;
}


.auth-alert {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    padding:
        10px 12px;

    border:
        1px solid;

    border-radius: 9px;

    font-size: 9px;

    line-height: 1.5;
}


.auth-alert-error {

    color:
        #ffb2bb;

    background:
        rgba(255,92,108,.055);

    border-color:
        rgba(255,92,108,.15);
}


.auth-alert-success {

    color:
        #a8eac3;

    background:
        rgba(40,209,124,.055);

    border-color:
        rgba(40,209,124,.15);
}


.auth-alert-icon {

    width: 22px;

    height: 22px;

    flex: 0 0 22px;

    display: grid;

    place-items: center;
}


.auth-alert-icon svg {

    width: 16px;

    height: 16px;
}


.password-hint {

    margin-top: 6px;

    color:
        var(--panel-muted-2);

    font-size: 8px;

    line-height: 1.5;
}


.terms-row {

    margin:
        4px 0 18px;
}


.terms-row a {

    color:
        var(--panel-purple-light);
}


.admin-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    padding:
        7px 10px;

    border:
        1px solid rgba(124,92,255,.15);

    border-radius: 99px;

    color:
        #bdb4ff;

    background:
        rgba(124,92,255,.06);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.admin-badge .status-dot {

    width: 5px;

    height: 5px;

    box-shadow:
        0 0 0 3px
        rgba(40,209,124,.08);
}


.admin-security-note {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 17px;

    padding:
        10px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius: 9px;

    color:
        var(--panel-muted-2);

    background:
        rgba(255,255,255,.018);

    font-size: 8px;

    line-height: 1.5;
}


.admin-security-note svg {

    width: 14px;

    height: 14px;

    flex: 0 0 14px;

    color:
        var(--panel-purple-light);
}


/* ============================================================
   ADMIN PAGE SPECIALS
============================================================ */

.admin-action-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.admin-action-card {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border:
        1px solid var(--panel-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.025);

    transition:
        transform var(--panel-transition),
        border-color var(--panel-transition);
}


.admin-action-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(124,92,255,.18);
}


.admin-action-icon {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color:
        var(--panel-purple-light);

    background:
        rgba(124,92,255,.09);
}


.admin-action-icon svg {

    width: 17px;

    height: 17px;
}


.admin-action-card strong {

    display: block;

    margin-bottom: 3px;

    color: #e8ebf1;

    font-size: 10px;
}


.admin-action-card span {

    color:
        var(--panel-muted-2);

    font-size: 8px;
}


/* ============================================================
   SERVICE / CATEGORY ADMIN FORMS
============================================================ */

.form-section {

    padding-bottom: 22px;

    margin-bottom: 22px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.form-section:last-child {

    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0;
}


.form-section-title {

    margin-bottom: 16px;
}


.form-section-title h3 {

    margin: 0 0 4px;

    color: #fff;

    font-size: 13px;
}


.form-section-title p {

    margin: 0;

    color:
        var(--panel-muted-2);

    font-size: 9px;

    line-height: 1.5;
}


.radio-group {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.radio-option {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 36px;

    padding:
        0 10px;

    border:
        1px solid var(--panel-border);

    border-radius: 9px;

    color:
        var(--panel-muted);

    background:
        rgba(255,255,255,.025);

    font-size: 9px;

    cursor: pointer;
}


.radio-option input {

    accent-color:
        var(--panel-purple);
}


.radio-option:has(input:checked) {

    color:
        #dcd7ff;

    border-color:
        rgba(124,92,255,.28);

    background:
        rgba(124,92,255,.07);
}


/* ============================================================
   NOTICE / INFO BOX
============================================================ */

.info-box {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding:
        12px;

    border:
        1px solid rgba(76,154,255,.12);

    border-radius: 10px;

    color:
        #9ecbfa;

    background:
        rgba(76,154,255,.045);

    font-size: 9px;

    line-height: 1.55;
}


.warning-box {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding:
        12px;

    border:
        1px solid rgba(245,185,66,.13);

    border-radius: 10px;

    color:
        #f4d28c;

    background:
        rgba(245,185,66,.045);

    font-size: 9px;

    line-height: 1.55;
}


.danger-box {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding:
        12px;

    border:
        1px solid rgba(255,92,108,.13);

    border-radius: 10px;

    color:
        #ffadb6;

    background:
        rgba(255,92,108,.045);

    font-size: 9px;

    line-height: 1.55;
}


/* ============================================================
   LOADING
============================================================ */

.is-loading {

    position: relative;
}


.is-loading::after {

    content: '';

    width: 13px;

    height: 13px;

    margin-left: 6px;

    border:
        2px solid
        rgba(255,255,255,.3);

    border-top-color:
        #fff;

    border-radius: 50%;

    animation:
        panelSpin .65s linear infinite;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes panelSpin {

    to {
        transform: rotate(360deg);
    }
}


@keyframes panelFadeIn {

    from {

        opacity: 0;

        transform:
            translateY(-4px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1200px) {

    :root {

        --sidebar-width: 235px;
    }


    .stats-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .service-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .admin-action-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


@media (max-width: 1100px) {

    .panel-sidebar {

        transform:
            translateX(-100%);

        transition:
            transform .25s ease;
    }


    .panel-sidebar.is-open {

        transform:
            translateX(0);
    }


    .sidebar-close {

        display: grid;

        place-items: center;
    }


    .panel-main {

        margin-left: 0;
    }


    .mobile-menu-button {

        display: grid;

        place-items: center;
    }


    .sidebar-overlay {

        position: fixed;

        inset: 0;

        z-index: 999;

        background:
            rgba(0,0,0,.65);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }


    .sidebar-overlay.is-visible {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    .sidebar-open {

        overflow: hidden;
    }


    .detail-layout {

        grid-template-columns:
            1fr;
    }


    .content-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 800px) {

    .panel-topbar {

        padding:
            0 17px;
    }


    .panel-content {

        padding:
            22px 17px 40px;
    }


    .topbar-user-info {

        display: none;
    }


    .topbar-user {

        padding-left: 0;

        border-left: 0;
    }


    .topbar-wallet-text {

        display: none;
    }


    .topbar-wallet {

        padding: 5px;
    }


    .topbar-wallet-icon {

        width: 29px;

        height: 29px;
    }


    .page-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .page-header-actions {

        width: 100%;
    }


    .page-header-actions .btn {

        flex: 1;
    }


    .form-grid {

        grid-template-columns: 1fr;
    }


    .form-group.full {

        grid-column: auto;
    }


    .content-grid-equal,
    .content-grid-3 {

        grid-template-columns:
            1fr;
    }


    .payment-summary {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .stats-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }


    .stat-card {

        padding: 14px;
    }


    .stat-card-value {

        font-size: 19px;
    }


    .stat-card-icon {

        width: 32px;

        height: 32px;
    }


    .service-grid {

        grid-template-columns: 1fr;
    }


    .admin-action-grid {

        grid-template-columns: 1fr;
    }


    .data-table-wrap {

        display: none;
    }


    .mobile-cards {

        display: flex;
    }


    .panel-card-header {

        min-height: 58px;

        padding:
            0 15px;
    }


    .panel-card-body {

        padding: 15px;
    }


    .wallet-balance {

        font-size: 31px;
    }


    .detail-row {

        gap: 10px;
    }


    .detail-value {

        max-width: 58%;
    }

}


@media (max-width: 560px) {

    .auth-wrapper {

        display: block;

        min-height: 100vh;
    }


    .auth-brand {

        display: none;
    }


    .auth-form-section {

        min-height: 100vh;

        padding:
            35px 20px;
    }


    .auth-mobile-logo {

        display: block;
    }


    .auth-heading h2 {

        font-size: 24px;
    }


    .auth-features {

        grid-template-columns: 1fr;
    }


    .filter-bar {

        align-items: stretch;

        flex-direction: column;
    }


    .filter-search {

        flex-basis: auto;
    }


    .filter-control {

        width: 100%;
    }


    .wallet-actions {

        flex-direction: column;
    }


    .wallet-actions .btn {

        width: 100%;
    }


    .toast-container {

        right: 15px;

        bottom: 15px;

        width:
            calc(100vw - 30px);
    }


    .global-modal,
    .panel-modal {

        padding: 12px;
    }


    .global-modal-dialog,
    .panel-modal-dialog {

        max-height:
            calc(100vh - 24px);

        padding: 18px;

        border-radius: 15px;
    }

}


@media (max-width: 390px) {

    .panel-topbar {

        gap: 9px;
    }


    .topbar-actions {

        gap: 6px;
    }


    .topbar-system-status {

        display: none;
    }


    .stats-grid {

        grid-template-columns: 1fr;
    }


    .mobile-data-card-grid {

        grid-template-columns: 1fr 1fr;
    }


    .panel-content {

        padding:
            18px 12px 35px;
    }


    .page-header h2 {

        font-size: 21px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .panel-body *,
    .panel-body *::before,
    .panel-body *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}