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

.pud-dashboard {
    --ink: #242044;
    --muted: #9994b4;
    --purple: #8d4dff;
    --line: #f0edf8;
    direction: rtl;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    background: #faf7ff;
    color: var(--ink);
    font-family: Vazirmatn, Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.8;
    box-sizing: border-box
}

.pud-dashboard * {
    box-sizing: border-box
}

.pud-dashboard a {
    color: inherit;
    text-decoration: none
}

.pud-main {
    min-width: 0;
    grid-column: 1;
    grid-row: 1
}

.pud-sidebar {
    grid-column: 2;
    grid-row: 1;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #f3eefb;
    border-radius: 26px;
    padding: 18px 14px;
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 40px rgba(74, 42, 123, .04);
    height: fit-content;
    position: sticky;
    top: 18px;
}

.pud-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 22px;
    border-bottom: 1px solid var(--line)
}

.pud-brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #a86bff, #7b42f6);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 5px 14px #bfa0ff
}

.pud-brand b,
.pud-brand small,
.pud-profile b,
.pud-profile small {
    display: block
}

.pud-brand b {
    font-size: 12px
}

.pud-brand small,
.pud-profile small {
    font-size: 10px;
    color: var(--muted)
}

.pud-nav-label {
    font-size: 10px;
    color: #b1abc7;
    padding: 18px 12px 8px
}

.pud-nav-spaced {
    margin-top: 2px
}

.pud-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    margin: 2px 0;
    border-radius: 12px;
    color: #827c9f !important;
    font-size: 12px;
    transition: .2s
}

.pud-nav-item:hover,
.pud-nav-item.is-active {
    background: linear-gradient(110deg, #9a54ff, #a64cf0);
    color: #fff !important;
    box-shadow: 0 7px 16px #eadcff
}

.pud-help {
    margin-top: auto;
    background: linear-gradient(140deg, #f3eaff, #fff0f8);
    padding: 15px;
    border-radius: 18px;
    text-align: center;
    margin-top: 45px
}

.pud-help-star {
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    color: #9b52ff
}

.pud-help b {
    font-size: 11px
}

.pud-help p {
    font-size: 10px;
    color: var(--muted);
    margin: 4px 0 10px
}

.pud-help a {
    display: inline-block;
    background: #fff;
    color: #8f4fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px
}

.pud-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding: 14px 6px 0
}

.pud-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f0ddff;
    color: #914aff;
    font-weight: 800
}

.pud-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 2px 18px
}

.pud-topbar h1 {
    font-size: 19px;
    margin: 0;
    font-weight: 800
}

.pud-crumb {
    font-size: 10px;
    color: #a39cb9;
    order: 2
}

.pud-hero {
    position: relative;
    overflow: hidden;
    min-height: 166px;
    border-radius: 22px;
    padding: 24px 26px;
    background: linear-gradient(110deg, #8950fa 0%, #b453e9 58%, #e75fc8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 14px 25px rgba(155, 83, 245, .12)
}

.pud-hero:before,
.pud-hero:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #fff;
    opacity: .07;
    width: 210px;
    height: 210px;
    top: -135px;
    left: 35%
}

.pud-hero:after {
    top: auto;
    left: auto;
    right: 5%;
    bottom: -160px;
    width: 210px;
    height: 210px
}

.pud-hero-art {
    z-index: 1;
    flex: 0 0 100px;
    height: 100px;
    border: 1px solid #ffffff63;
    background: #ffffff16;
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 52px;
    transform: rotate(5deg);
    position: relative
}

.pud-hero-art span {
    font-size: 22px;
    position: absolute;
    top: 20px;
    right: 22px
}

.pud-hero-copy {
    z-index: 1;
    text-align: right;
    max-width: 76%
}

.pud-pill {
    display: inline-block;
    border: 1px solid #ffffff5c;
    border-radius: 18px;
    padding: 3px 10px;
    font-size: 10px;
    background: #ffffff12
}

.pud-hero-copy h2 {
    font-size: 18px;
    margin: 7px 0
}

.pud-hero-copy p {
    font-size: 11px;
    color: #f7eaff;
    margin: 0 0 13px
}

.pud-hero-button {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    color: #8b4cff !important;
    border-radius: 11px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700
}

.pud-section {
    margin-top: 24px
}

.pud-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 3px 12px
}

.pud-section-heading h2 {
    font-size: 14px;
    margin: 0;
    font-weight: 800
}

.pud-section-heading p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 10px
}

.pud-section-heading>a {
    font-size: 10px;
    color: #9251ff !important
}

.pud-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.pud-stat {
    background: #fff;
    border: 1px solid #f4f0fa;
    border-radius: 17px;
    padding: 15px;
    min-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative
}

.pud-stat-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 11px;
    font-size: 16px;
    margin-bottom: 8px
}

.pud-stat-icon.lilac {
    background: #f0e4ff;
    color: #9853ff
}

.pud-stat-icon.mint {
    background: #d8fbf2;
    color: #00b99c
}

.pud-stat-icon.peach {
    background: #fff0df;
    color: #ff9b4b
}

.pud-stat-icon.blue {
    background: #e1f6ff;
    color: #3cbce9
}

.pud-stat strong {
    font-size: 19px;
    line-height: 1.2
}

.pud-stat small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px
}

.pud-learning-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch
}

.pud-card {
    background: #fff;
    border: 1px solid #f3eef9;
    border-radius: 18px;
    padding: 18px;
    min-width: 0
}

.pud-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.pud-card-heading h3,
.pud-activity-list h3 {
    font-size: 13px;
    margin: 0;
    font-weight: 800
}

.pud-card-heading>span {
    font-size: 10px;
    color: var(--muted)
}

.pud-course {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    min-width: 0
}

.pud-course:last-child {
    border-bottom: 0
}

.pud-course-art {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: white;
    font-size: 27px;
    background: linear-gradient(135deg, #9b61f5, #d451df);
    overflow: hidden
}

.pud-art-2 {
    background: linear-gradient(135deg, #34b9e8, #7887ff)
}

.pud-art-3 {
    background: linear-gradient(135deg, #ffb02e, #ff6d91)
}

.pud-course-info {
    flex: 1;
    min-width: 0
}

.pud-course-info>b {
    display: block;
    font-size: 11px;
    overflow-wrap: anywhere
}

.pud-course-info>small {
    display: block;
    color: var(--muted);
    font-size: 9px
}

.pud-progress {
    display: block;
    height: 5px;
    background: #f0edf7;
    border-radius: 9px;
    overflow: hidden;
    margin: 8px 0 3px
}

.pud-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #9d4dff, #e45bd4);
    border-radius: 9px
}

.pud-progress-meta {
    display: flex !important;
    justify-content: space-between
}

.pud-course-arrow {
    color: #b3a6cf
}

.pud-goals-card {
    background: linear-gradient(145deg, #fff 0%, #f3fffc 100%)
}

.pud-text-button {
    border: 0;
    background: #f3eaff;
    color: #9250ff;
    padding: 6px 10px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer
}

.pud-goal-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0 15px
}

.pud-ring {
    --pud-progress: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex: 0 0 88px;
    background: conic-gradient(#12c4a7 calc(var(--pud-progress)*1%), #e2f7f2 0);
    display: grid;
    place-items: center;
    position: relative
}

.pud-ring:before {
    content: "";
    position: absolute;
    inset: 8px;
    background: #f8fffd;
    border-radius: 50%
}

.pud-ring>span {
    position: relative;
    text-align: center
}

.pud-ring b,
.pud-ring small {
    display: block
}

.pud-ring b {
    font-size: 17px
}

.pud-ring small {
    font-size: 9px;
    color: var(--muted)
}

.pud-goal-summary>div:last-child b {
    font-size: 12px
}

.pud-goal-summary p {
    font-size: 10px;
    color: var(--muted);
    margin: 4px 0
}

.pud-goal-form {
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    margin: 4px 0 12px
}

.pud-goal-form label {
    display: block;
    font-size: 10px;
    margin-bottom: 5px
}

.pud-goal-form input {
    width: 100%;
    border: 1px solid #e9e1f5;
    border-radius: 9px;
    padding: 9px;
    font: inherit;
    font-size: 11px;
    outline: none
}

.pud-goal-form input:focus {
    border-color: #a66aff
}

.pud-form-actions {
    display: flex;
    gap: 7px;
    margin-top: 8px
}

.pud-small-primary,
.pud-small-plain {
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: 10px;
    cursor: pointer
}

.pud-small-primary {
    background: #8e4dff;
    color: #fff
}

.pud-small-plain {
    background: #f4f0fa;
    color: #7f7899
}

.pud-goal-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.pud-goal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid #eaf5f2
}

.pud-goal-check {
    width: 18px;
    height: 18px;
    accent-color: #11bfa3;
    flex: 0 0 auto
}

.pud-goal-title {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    overflow-wrap: anywhere
}

.pud-goal-item.is-done .pud-goal-title {
    text-decoration: line-through;
    color: #aaa4bd
}

.pud-goal-edit,
.pud-goal-delete {
    border: 0;
    background: transparent;
    color: #9a8bb8;
    cursor: pointer;
    padding: 3px;
    font-size: 13px
}

.pud-goal-delete {
    color: #e59baf
}

.pud-storage-note {
    font-size: 9px;
    color: #b0a9c3;
    margin: 8px 0 0
}

.pud-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--muted)
}

.pud-empty>span {
    font-size: 30px;
    color: #b17aff
}

.pud-empty b {
    display: block;
    color: var(--ink);
    font-size: 12px
}

.pud-empty p {
    font-size: 10px
}

.pud-empty a {
    color: #9451ff;
    font-size: 11px
}

.pud-activity-card {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 14px
}

.pud-activity-feature,
.pud-activity-list {
    border: 1px solid #f4edf8;
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    min-width: 0
}

.pud-activity-feature {
    background: linear-gradient(130deg, #fff8ed, #fff0f6);
    position: relative;
    overflow: hidden
}

.pud-feature-spark {
    font-size: 30px;
    color: #ffcfcd
}

.pud-pill-warm {
    background: #fff;
    border-color: #f9dfd6;
    color: #ff9d70;
    float: left
}

.pud-activity-feature h3 {
    font-size: 13px;
    margin: 12px 0 4px
}

.pud-activity-feature p {
    font-size: 10px;
    color: var(--muted)
}

.pud-activity-feature a {
    font-size: 10px;
    color: #944dff
}

.pud-activity-list h3 {
    margin-bottom: 10px
}

.pud-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.pud-activity-row:last-child {
    border-bottom: 0
}

.pud-activity-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f1e7ff;
    color: #9950ff;
    flex: 0 0 auto
}

.pud-activity-row:nth-child(3) .pud-activity-icon {
    background: #ddf9f1;
    color: #05b99e
}

.pud-activity-row b,
.pud-activity-row small {
    display: block
}

.pud-activity-row b {
    font-size: 10px
}

.pud-activity-row small,
.pud-muted {
    font-size: 9px;
    color: var(--muted)
}

.pud-footer {
    text-align: left;
    color: #b2abc6;
    font-size: 9px;
    padding: 14px 4px
}

.pud-login {
    direction: rtl;
    padding: 35px;
    text-align: center;
    background: #faf7ff;
    border-radius: 18px;
    font-family: Vazirmatn, Tahoma, sans-serif
}

.pud-button {
    display: inline-block;
    background: #8e4dff;
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 10px
}

@media(max-width:1050px) {
    .pud-dashboard {
        grid-template-columns: 1fr;
        padding: 14px
    }

    .pud-sidebar {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        padding: 12px;
        border-radius: 18px
    }

    .pud-brand {
        padding-bottom: 12px
    }

    .pud-sidebar .pud-nav-label,
    .pud-help,
    .pud-profile {
        display: none
    }

    .pud-sidebar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px
    }

    .pud-brand {
        width: 100%
    }

    .pud-nav-item {
        flex: 1 1 130px;
        justify-content: center;
        padding: 9px
    }

    .pud-main {
        grid-column: 1;
        grid-row: 1
    }

    .pud-learning-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:700px) {
    .pud-dashboard {
        padding: 10px;
        gap: 12px
    }

    .pud-topbar {
        align-items: center
    }

    .pud-topbar h1 {
        font-size: 17px
    }

    .pud-hero {
        padding: 20px;
        min-height: 0
    }

    .pud-hero-art {
        display: none
    }

    .pud-hero-copy {
        max-width: 100%
    }

    .pud-hero-copy h2 {
        font-size: 16px
    }

    .pud-hero-copy p {
        font-size: 10px
    }

    .pud-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .pud-stat {
        min-height: 95px;
        padding: 12px
    }

    .pud-learning-grid,
    .pud-activity-card {
        grid-template-columns: 1fr
    }

    .pud-section {
        margin-top: 20px
    }

    .pud-card {
        padding: 14px
    }

    .pud-course-art {
        width: 52px;
        height: 52px;
        flex-basis: 52px
    }

    .pud-nav-item {
        flex-basis: calc(50% - 5px);
        font-size: 11px
    }

    .pud-nav-item span {
        white-space: nowrap
    }

    .pud-section-heading h2 {
        font-size: 13px
    }
}

@media(max-width:380px) {
    .pud-stats {
        grid-template-columns: 1fr 1fr
    }

    .pud-hero-copy h2 {
        font-size: 14px
    }

    .pud-course {
        gap: 8px
    }

    .pud-course-art {
        width: 43px;
        height: 43px;
        flex-basis: 43px
    }

    .pud-course-info>b {
        font-size: 10px
    }
}

.profile-page {
    direction: rtl;
    color: #282344;
    font-family: inherit;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.profile-header h2 {
    font-size: 21px;
    margin: 0 0 6px;
}

.profile-header p {
    color: #9993b1;
    font-size: 13px;
    margin: 0;
}

.profile-avatar img {
    width: 76px;
    height: 76px;
    border-radius: 22px;
}

.profile-form {
    background: #fff;
    border: 1px solid #f0eafa;
    border-radius: 20px;
    padding: 26px;
}

.profile-section h3 {
    font-size: 15px;
    margin: 0 0 22px;
}

.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.profile-fields label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.profile-fields input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #e9e3f3;
    background: #fdfcff;
    border-radius: 11px;
    padding: 10px 13px;
    font: inherit;
    font-weight: 400;
    color: #282344;
    outline: none;
}

.profile-fields input:focus {
    border-color: #9654ff;
    box-shadow: 0 0 0 3px #9654ff15;
}

.profile-fields input:disabled {
    background: #f5f2fa;
    color: #9993b1;
}

.profile-fields small {
    color: #9993b1;
    font-size: 10px;
    font-weight: 400;
}

.profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.profile-save-btn,
.profile-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    padding: 12px 20px;
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.profile-save-btn {
    background: linear-gradient(110deg, #8c4dff, #b64ee9);
    color: #fff;
}

.profile-cancel-btn {
    background: #f4effb;
    color: #7d55bd;
}

.profile-notice {
    border-radius: 11px;
    padding: 12px 15px;
    margin-bottom: 16px;
    font-size: 12px;
}

.profile-notice.success {
    background: #e4faf2;
    color: #087e67;
}

.profile-notice.error {
    background: #fff0f2;
    color: #b63c5a;
}

@media (max-width: 600px) {
    .profile-fields {
        grid-template-columns: 1fr;
    }

    .profile-form {
        padding: 18px;
    }

    .profile-header h2 {
        font-size: 18px;
    }

    .profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-save-btn,
    .profile-cancel-btn {
        width: 100%;
    }
}