/*
body {

    background:
      radial-gradient(circle at top left, rgba(79,70,229,0.10), transparent 30%),
      radial-gradient(circle at bottom right, rgba(147,51,234,0.08), transparent 30%),
      #f5f7fb;
}
*/

body {

    background:
      linear-gradient(
        135deg,
        rgba(79,70,229,0.10) 30%,
        #4f46e5 100%,
        #9333ea 30%
      );

    min-height:100vh;

    position:relative;

    overflow-x:hidden;
}

body::before,
body::after {

    content:'';

    position:fixed;

    width:420px;
    height:420px;

    border-radius:50%;

    filter: blur(80px);

    opacity:.35;

    z-index:-1;

    animation: floatBlob 18s ease-in-out infinite;
}

body::before {

    background:#38bdf8;

    top:-120px;
    left:-120px;
}

body::after {

    background:#d946ef;

    bottom:-120px;
    right:-120px;

    animation-delay:6s;
}

@keyframes floatBlob {

    0%{
        transform:translate(0,0) scale(1);
    }

    33%{
        transform:translate(60px,-40px) scale(1.12);
    }

    66%{
        transform:translate(-40px,50px) scale(.92);
    }

    100%{
        transform:translate(0,0) scale(1);
    }
}
/* ===================================== */
/* HERO */
/* ===================================== */

.dashboard-hero {

    position: relative;

    overflow: hidden;

    border-radius: 34px;

    padding: 34px;

    margin-bottom: 24px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.42)
      );

  backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);

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

    box-shadow:
      0 10px 40px rgba(0,0,0,0.08);
}

.dashboard-hero::before {

    content:'';

    position:absolute;
    inset:0;

    background:

      radial-gradient(
        circle at top left,
        rgba(79,70,229,0.18),
        transparent 35%
      ),

      radial-gradient(
        circle at bottom right,
        rgba(236,72,153,0.14),
        transparent 35%
      );

    pointer-events:none;
}

.dashboard-hero > * {
    position: relative;
    z-index: 2;
}

.hero-top {

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.hero-title {

    flex:1;
}

.hero-title h1 {

    margin:0;

    font-size:36px;

    line-height:1.1;

    letter-spacing:-0.04em;
}

.hero-title p {

    margin-top:10px;

    color:#6b7280;

    font-size:14px;

    max-width:640px;

    line-height:1.6;
}

.hero-pill {

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 16px;

    border-radius:24px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.55)
      );

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

    backdrop-filter: blur(10px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      0 10px 25px rgba(0,0,0,0.05);
}

.hero-pill-icon {

    width:44px;
    height:44px;

    border-radius:18px;

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

    font-size:20px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.55)
      );
}

/* ===================================== */
/* ACTION GRID */
/* ===================================== */

.quick-grid {

    display:grid;

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

    gap:18px;

    margin-bottom:24px;
}

.quick-card {

    position:relative;

    overflow:hidden;

    text-decoration:none;

    color:#111827;

    border-radius:28px;

    padding:20px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.76),
        rgba(255,255,255,0.48)
      );

    backdrop-filter: blur(18px);

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

    box-shadow:
      0 12px 30px rgba(0,0,0,0.06);

    transition:.25s ease;
}

.quick-card:hover {

    transform:
      translateY(-6px)
      scale(1.02);
}

.quick-card::before {

    content:'';

    position:absolute;
    inset:0;

    background:

      radial-gradient(
        circle at top right,
        rgba(79,70,229,0.16),
        transparent 35%
      ),

      radial-gradient(
        circle at bottom left,
        rgba(236,72,153,0.14),
        transparent 35%
      );

    animation:
      dashboardHue 18s linear infinite;

    pointer-events:none;
}

.quick-card > * {
    position:relative;
    z-index:2;
}

.quick-icon {

    width:58px;
    height:58px;

    border-radius:24px;

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

    font-size:26px;

    margin-bottom:16px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.55)
      );
}

.quick-card h3 {

    margin:0;

    font-size:15px;

    letter-spacing:-0.02em;
}

/* ===================================== */
/* LOWER GRID */
/* ===================================== */

.dashboard-grid {

    display:grid;

    grid-template-columns: 1.4fr 1fr;

    gap:20px;
}

.glass-widget {

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:24px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.75),
        rgba(255,255,255,0.46)
      );

    backdrop-filter: blur(18px);

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

    box-shadow:
      0 10px 35px rgba(0,0,0,0.06);
}

.glass-widget::before {

    content:'';

    position:absolute;
    inset:0;

    background:

      radial-gradient(
        circle at top left,
        rgba(79,70,229,0.10),
        transparent 35%
      ),

      radial-gradient(
        circle at bottom right,
        rgba(236,72,153,0.08),
        transparent 35%
      );

    pointer-events:none;
}

.glass-widget > * {
    position:relative;
    z-index:2;
}

.widget-title {

    margin:0 0 18px;

    font-size:18px;

    letter-spacing:-0.03em;
}

.wallet-balance-large {

    font-size:52px;

    line-height:1;

    font-weight:800;

    letter-spacing:-0.05em;

    margin-bottom:10px;
}

.wallet-sub {

    color:#6b7280;

    font-size:13px;

    margin-bottom:22px;
}

.wallet-btn-large {

    display:inline-flex;

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

    padding:14px 18px;

    border-radius:18px;

    text-decoration:none;

    color:white;

    font-weight:700;

    background:
      linear-gradient(
        135deg,
        #4f46e5,
        #9333ea
      );
}

/* ===================================== */
/* RECENTS */
/* ===================================== */

.recent-list {

    display:flex;
    flex-direction:column;
    gap:14px;
}

.recent-item {

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px;

    border-radius:18px;

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

.recent-icon {

    width:48px;
    height:48px;

    border-radius:18px;

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

    font-size:22px;

    background:white;
}

.recent-item h4 {

    margin:0;

    font-size:14px;
}

.recent-item p {

    margin:4px 0 0;

    font-size:12px;

    color:#6b7280;
}

/* ===================================== */
/* BRAND */
/* ===================================== */

.brand-empty {

    text-align:left;
}

.brand-empty-icon {

    width:72px;
    height:72px;

    border-radius:28px;

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

    font-size:32px;

    margin-bottom:18px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.55)
      );
}

.brand-empty p {

    color:#6b7280;

    line-height:1.6;

    font-size:13px;
}

/* ===================================== */
/* ANIMATION */
/* ===================================== */

@keyframes dashboardHue {

    0% {
        filter:hue-rotate(0deg);
    }

    100% {
        filter:hue-rotate(360deg);
    }
}

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

@media (max-width: 768px) {

    .dashboard-hero {

        padding:28px 22px;

        border-radius:34px;
    }

    .hero-top {

        gap:16px;

        flex-wrap:nowrap;
    }

    .hero-title h1 {

        font-size:54px;
        
        font-weight:700;

        line-height:.92;

        letter-spacing:-0.06em;
    }

    .hero-title p {

        font-size:13px;

        max-width:95%;
    }

    .quick-grid {

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

    .dashboard-grid {

        grid-template-columns: 1fr;
    }

    .hero-pill {

        min-width:132px;

        padding:14px 16px;

        border-radius:28px;

        margin-top:8px;
    }

    .wallet-balance-large {

        font-size:42px;
    }
}

.quick-top {

    display:flex;
    align-items:flex-start;

    margin-bottom:18px;
}

.quick-content h3 {

    margin:0 0 6px;

    font-size:15px;
}

.quick-content p {

    margin:0;


    font-size:12px;

    line-height:1.5;
}

.soon-pill {

    position:absolute;

    top:14px;
    right:14px;

    z-index:5;

    padding:7px 11px;

    border-radius:999px;

    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;

    background:#ef4444;

    color:white;

    white-space:nowrap;

    box-shadow:
      0 8px 20px rgba(239,68,68,0.28);

    border:
      1px solid rgba(255,255,255,0.25);
}
@media (max-width: 768px) {

    .hero-title {
        min-width:0;
        flex:1;
    }

    .hero-pill {
        flex-shrink:0;
        min-width:auto;
        max-width:120px;
    }

    .hero-pill-icon {
        width:40px;
        height:40px;
        font-size:18px;
    }
}