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

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Vazirmatn', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: #e9e9e9;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

       #app-root {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
        display: flex;
        justify-content: center;
        background-color: #e9e9e9;
        min-height: 100vh;
    }

    /* ===== تنظیم app-container برای نمایش درست ===== */
    .app-container {
        width: 100%;
        max-width: 428px;
        background-color: #fbf7fc;
        min-height: 100vh;
        position: relative;
        padding-bottom: 90px;
        overflow-x: hidden;
        box-shadow: 0 0 40px rgba(0,0,0,0.1);
        border-radius: 0;
        margin: 0 auto;
    }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .avatar-container {
            position: relative;
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #d4af37;
            padding: 2px;
        }
        .greeting h1 {
            font-size: 16px;
            color: #2c1a3b;
            font-weight: 700;
        }
        .greeting p {
            font-size: 12px;
            color: #887a94;
            margin-top: 2px;
        }
        .header-actions {
            display: flex;
            gap: 10px;
        }
        .icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1px solid rgba(0,0,0,0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6a2b86;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
            cursor: pointer;
        }
        .badge {
            position: absolute;
            top: 0;
            right: 0;
            width: 14px;
            height: 14px;
            background-color: #ff4b4b;
            color: white;
            font-size: 9px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #ffffff;
        }

        .content {
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .hero-banner {
            background: linear-gradient(135deg, #d3a4d8 0%, #e1c0e3 40%, #f6e6f7 100%);
            border-radius: 24px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8px 20px rgba(106, 43, 134, 0.06);
            position: relative;
            overflow: hidden;
            min-height: 140px;
        }
        .hero-banner::before {
            content: '';
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 120px;
            height: 120px;
            background-image: url('https://images.unsplash.com/photo-1605367032731-0536c0a6be12?auto=format&fit=crop&w=200&q=80');
            background-size: cover;
            border-radius: 50%;
            opacity: 0.8;
            filter: hue-rotate(270deg) brightness(1.2);
            mix-blend-mode: multiply;
        }
        .hero-text {
            text-align: right;
            z-index: 1;
        }
        .hero-text h2 {
            font-size: 16px;
            font-weight: 800;
            color: #2c1a3b;
            margin-bottom: 4px;
        }
        .hero-text p {
            font-size: 11px;
            color: #554466;
            margin-bottom: 12px;
        }
        .btn-primary {
            background-color: #6a2b86;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .progress-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(#d4af37 0%, rgba(255,255,255,0.5) 0%);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            transition: background 0.3s linear;
        }
        .progress-circle-inner {
            width: 72px;
            height: 72px;
            background-color: #f7eaf7;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #2c1a3b;
        }
        .progress-circle-inner span:first-child {
            font-size: 22px;
            font-weight: 800;
            line-height: 1;
        }
        .progress-circle-inner span:last-child {
            font-size: 9px;
            text-align: center;
            color: #887a94;
            margin-top: 2px;
        }

        .two-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 16px;
            box-shadow: 0 8px 20px rgba(106, 43, 134, 0.06);
            display: flex;
            flex-direction: column;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .card-title {
            font-size: 13px;
            font-weight: 700;
            color: #2c1a3b;
        }
        .session-card .thumb {
            width: 100%;
            height: 80px;
            border-radius: 12px;
            background-image: url('https://images.unsplash.com/photo-1515004944983-05c0d510fba0?auto=format&fit=crop&w=300&q=80');
            background-size: cover;
            margin-bottom: 10px;
        }
        .session-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 4px;
            margin-bottom: 10px;
        }
        .session-info h3 { font-size: 12px; color: #2c1a3b; }
        .session-info span { font-size: 10px; color: #887a94; }
        .progress-bar-container {
            width: 100%;
            height: 4px;
            background-color: #f0f0f0;
            border-radius: 2px;
            margin-bottom: 10px;
        }
        .progress-bar {
            width: 70%;
            height: 100%;
            background-color: #6a2b86;
            border-radius: 2px;
        }
        .btn-outline {
            width: 100%;
            background-color: transparent;
            border: 1px solid rgba(106, 43, 134, 0.2);
            color: #6a2b86;
            padding: 8px 0;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }
        .suggestion-card {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .suggestion-text {
            font-size: 11px;
            color: #887a94;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .suggestion-icon {
            font-size: 40px;
            color: #d4af37;
            margin: 10px 0;
            opacity: 0.8;
        }
        .btn-light {
            background-color: #f4ebf8;
            color: #6a2b86;
            border: none;
            padding: 8px 0;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 700;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .quick-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .stat-item {
            background-color: #ffffff;
            border-radius: 16px;
            padding: 12px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0 8px 20px rgba(106, 43, 134, 0.06);
        }
        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin-bottom: 8px;
            position: relative;
        }
        .stat-icon.messages { background: #eef2ff; color: #4f46e5; }
        .stat-icon.growth { background: transparent; color: #6a2b86; }
        .stat-icon.achievements { background: #fff1f2; color: #e11d48; }
        .stat-icon.practice { background: #fdf4ff; color: #c026d3; }
        .circular-chart {
            display: block;
            margin: 0 auto;
            max-width: 40px;
            max-height: 40px;
        }
        .circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 3.8;
        }
        .circle {
            fill: none;
            stroke-width: 3.8;
            stroke-linecap: round;
            stroke: #6a2b86;
            stroke-dasharray: 42, 100;
        }
        .percentage {
            fill: #2c1a3b;
            font-size: 10px;
            text-anchor: middle;
            font-weight: bold;
        }
        .stat-item h4 { font-size: 11px; color: #2c1a3b; margin-bottom: 4px; }
        .stat-item p { font-size: 9px; color: #887a94; }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 0 4px;
        }
        .section-header h2 { font-size: 14px; color: #2c1a3b; }
        .section-header a { font-size: 11px; color: #887a94; text-decoration: none; }

        .courses-slider {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 10px;
            scrollbar-width: thin;
            scroll-behavior: smooth;
        }
        .courses-slider::-webkit-scrollbar {
            height: 4px;
        }
        .courses-slider::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 10px;
        }
        .courses-slider::-webkit-scrollbar-thumb {
            background: #6a2b86;
            border-radius: 10px;
        }

        .course-card {
            min-width: 110px;
            display: flex;
            flex-direction: column;
        }
        .course-img {
            width: 100%;
            height: 110px;
            border-radius: 16px;
            object-fit: cover;
            margin-bottom: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        .course-card h4 { font-size: 12px; color: #2c1a3b; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .course-card p { font-size: 10px; color: #887a94; text-align: center; margin-bottom: 6px; }
        .course-card .progress-bar-container { background-color: #e5e7eb; height: 3px; }
        .course-card .progress-bar { background-color: #6a2b86; }

        .bottom-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .b-card {
            background-color: #ffffff;
            border-radius: 16px;
            padding: 12px;
            box-shadow: 0 8px 20px rgba(106, 43, 134, 0.06);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }
        .b-card-title {
            font-size: 10px;
            color: #887a94;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .b-card-title i { color: #6a2b86; }
        .quote-text {
            font-size: 10px;
            color: #2c1a3b;
            line-height: 1.6;
            margin-top: 10px;
        }
        .quote-icon { color: #f43f5e; font-size: 10px; margin-top: auto; }
        .webinar-img {
            width: 100%;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 6px;
        }
        .b-card h5 { font-size: 11px; color: #2c1a3b; margin-bottom: 2px; }
        .b-card p.date { font-size: 8px; color: #887a94; margin-bottom: 8px; }
        .btn-tiny {
            background: #f4ebf8;
            color: #6a2b86;
            border: none;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 700;
            width: 100%;
        }
        .counselor-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 4px;
        }
        .btn-tiny-solid {
            background: #6a2b86;
            color: white;
            border: none;
            padding: 4px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 700;
            width: 100%;
            margin-top: auto;
        }

         .bottom-nav{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 15px;
    max-width: 408px;
    margin: 0 auto;

    height: 58px; /* ارتفاع کمتر از دکمه */

    background: #fff;
    border-radius: 18px;

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

    padding: 0 10px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12),
        0 2px 8px rgba(0,0,0,.08);

    z-index: 1000;

    overflow: visible;
}

/* آیتم‌ها */
.nav-fab{
    position:relative;
    overflow:hidden;
}

#sparkCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:50%;
    pointer-events:none;
}

.lgimg{
    position:relative;
    z-index:2;
    width:48px;
}
.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    color:#b0a8b9;
    text-decoration:none;
    font-size:10px;
    font-weight:500;
    font-family:'Vazirmatn',sans-serif;

    border:none;
    background:none;
    cursor:pointer;
    transition:.3s;
    position:relative;
}

.nav-item i{
    font-size:20px;
}

.nav-item.active{
    color:#6a2b86;
}

.nav-item.active::after{
    content:"";
    position:absolute;
    bottom:-8px;
    width:18px;
    height:3px;
    background:#6a2b86;
    border-radius:5px;
}

/* دکمه وسط */

.nav-fab{
    width:70px;
    height:70px;

    border-radius:50%;

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

    position:relative;

    /* فقط کمی بالا */
    top:0px;

  background: linear-gradient( 180deg, #cd1169 0%, #a8438a 35%, #c91b9d 70%, #c91d95 100% );

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

    box-shadow:
        0 12px 24px rgba(60,20,80,.35),
        0 5px 10px rgba(0,0,0,.2),
        inset 0 2px 3px rgba(255,255,255,.45),
        inset 0 -4px 6px rgba(0,0,0,.18);

    filter:drop-shadow(0 0 12px rgba(155,94,199,.35));

    overflow:hidden;
    z-index:20;

    transition:.25s;
}

/* هایلایت بالا */

.nav-fab::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:4px;
    height:40%;
    border-radius:50%;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.45),
        rgba(255,255,255,0)
    );
}

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

.nav-fab:active{
    transform:translateY(1px);
}

.lgimg{
    width:56px;
    height:56px;
    object-fit:contain;
    position:relative;
    z-index:2;
}
        .app-page {
            display: none;
        }
        .app-page.active-page {
            display: block;
        }
        .other-page-content {
            padding: 40px 24px;
            text-align: center;
            color: #2c1a3b;
        }
        .other-page-content h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }
		/* ===== Particle Transition ===== */
        .particle-transition {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 428px;
            height: 100%;
            z-index: 900;
            pointer-events: none;
            overflow: hidden;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .particle-transition.active {
            pointer-events: auto;
            visibility: visible;
            opacity: 1;
        }

        /* پس‌زمینه محو بنفش */
        .particle-transition .transition-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient( 180deg, #cd11692e 0%, #df6cb836 35%, #c91b9d6e 70%, #e952beba 100% );
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .particle-transition.active .transition-overlay {
            opacity: 1;
        }

        #transitionCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }