/* =========================================
   Design Tokens
========================================= */
:root{
    --brand-purple:   #5B3E8F;
    --brand-purple-2: #7A4FC0;
    --brand-deep:     #2A1B4D;
    --brand-deeper:   #1A1130;
    --brand-magenta:  #7A2B6B;
    --brand-red:      #C41E3A;
    --brand-gold:     #D4AF37;
    --brand-gold-2:   #F5D67B;
    --brand-gold-3:   #B8860B;
    --brand-blue:     #3E6DB5;
    --brand-green:    #2E9E6B;

    --bg:             #F4F2F8;
    --bg-2:           #EDEAF5;
    --surface:        #FFFFFF;
    --surface-2:      #FAF9FD;
    --surface-3:      #F7F5FC;

    --text:           #1A1430;
    --text-muted:     #6B5F88;
    --text-soft:      #9C93B8;
    --text-inv:       #FFFFFF;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius:    16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-xs: 0 2px 8px rgba(42, 27, 77, .06);
    --shadow-sm: 0 4px 14px rgba(42, 27, 77, .08);
    --shadow-md: 0 8px 24px rgba(42, 27, 77, .12);
    --shadow-lg: 0 16px 40px rgba(42, 27, 77, .18);
    --shadow-gold: 0 8px 24px rgba(212, 175, 55, .35);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur: .3s;
    --dur-slow: .5s;
}

*, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    direction: rtl;
    text-align: right;
}

html{ scroll-behavior: smooth; }

body{
    font-family:IRANSans, 'Vazirmatn', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Background pattern */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, .04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(122, 43, 107, .05), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

a{ text-decoration: none; color: inherit; }
button{ font: inherit; cursor: pointer; border: 0; background: none; }
img{ max-width: 100%; display: block; }

/* =========================================
   Modal
========================================= */
.g-modal{
    

}




/* =========================================
   Navigation
========================================= */
.g-nav-holder{
    /*width: 100%;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
   
    margin: auto auto;
    max-width: 768px;
}
.g-nave{
     background: linear-gradient(135deg,
        rgba(20, 13, 40, .96),
        rgba(42, 27, 77, .96));
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(212, 175, 55, .18);
    padding: 3px;
}
.g-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    border:thin dashed rgba(212, 175, 55, .18);
    
    
    color: #FFF;
   border-radius: 12px;
   padding: 2px 8px;
}
.g-nav-item{
    padding: 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.g-nav-item span{
    font-size: 10px;
    color: rgba(230, 230, 230, 0.5);
}
.g-nav-item i{
    font-size: 14px;
}






/* =========================================
   Dashboard 
========================================= */

.g-dashboard{
    z-index: 1;
    max-width: 760px;
    margin: auto auto;
    min-height: 100vh;
    margin-bottom: 80px;

}

.g-main{
    

}

.g-hero{
    position: relative;
    /*margin: 0 -16px 20px;*/
    padding: 22px 22px 70px;
    background:
        radial-gradient(ellipse at 95% -10%, rgba(245, 214, 123, .25), transparent 50%),
        radial-gradient(ellipse at 0% 110%, rgba(122, 43, 107, .45), transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(91, 62, 143, .3), transparent 70%),
        linear-gradient(135deg, #1A1130 0%, #3B2464 55%, #1A1130 100%);
    color: var(--text-inv);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(26, 17, 48, .35);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.g-hero-name{

}
.g-hero-name-1{
    font-size: 18px;
    color: rgba(250, 250, 250, 0.9);
}
.g-hero-name-2{
    font-size: 12px;
    color: rgba(230, 230, 230, 0.5);
}
.g-hero-name-1 b{
    color: var(--brand-gold);
}

.g-holder{
    padding: 12px 8px;
}



.g-dashboard-main{

}
.g-dashboard-topnav{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}
.g-dashboard-topnav-item{
    background: #FFF;
    padding: 8px 12px;
    box-shadow: 0 1px 5px rgba(26, 17, 48, .35);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: 2px solid rgba(26, 17, 48, .35);
}
.g-dashboard-topnav-item:hover{
    box-shadow: 0 3px 12px rgba(26, 17, 48, .35);
}
.g-dashboard-topnav-item i{
    font-size: 24px;
}
.g-dashboard-topnav-item span{
    font-size: 12px;
}
.g-dashboard-container{
    padding: 1px 4px;
    display: none;
}