@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F;
    /* Persian/Arabic */
}


@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF;
    /* Latin */
}



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

html {
    scroll-behavior: smooth;
}

:root {
    --primary: #5B8DEF;
    --primary-light: #EBF1FD;
    --accent: #7EC8C8;
    --accent-light: #E8F7F7;
    --bg: #F7F9FC;
    --white: #FFFFFF;
    --black: #111111;
    --text: #2D3748;
    --text-2: #3e4147;
    --text-muted: #595e66;
    --border: #E2E8F0;
    --sidebar-bg: #FFFFFF;
    --shadow-box: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(91, 141, 239, 0.07);
    --shadow: 0 2px 8px rgba(91, 141, 239, 0.10);
    --radius: 10px;
    --radius-sm: 6px;
}


body {
    font-family: 'Vazirmatn', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
}



html,
body,
p,
span,
div,
h1,
td,
h2,
h3,
h4,
h5,
h6,
a,
li,
ul,
ol,
label,
small,
medium,
strong,
em,
b,
i,
blockquote,
q,
cite,
code,
pre,
button,
input,
textarea,
select,
option {
    font-family: "Vazirmatn", "Roboto", sans-serif;
}





h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a2636;
    margin-bottom: 5px;
}

h2+p {
    font-size: 14px;
    color: #6b7a8d;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e4e8ef;
}

h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a2636;
    margin-bottom: 4px;
}

h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1a2636;
    margin-bottom: 3px;
}

hr {
    border: none;
    border-top: 1px solid #bac0ca;
    margin: 1.2rem 0;
}


label {
    font-size: 14px;
    font-weight: 600;
    color: #4a6fa5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


/* ─── MAIN ─── */
.main {
    margin-right: 250px;
    width: calc(100% - 250px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-logout {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── TOPBAR ─── */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-greeting {
    font-size: 14px;
    color: var(--text);
}

.topbar-greeting span {
    font-weight: 600;
    color: var(--primary);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    color: var(--text-muted);
}

.icon-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.notif-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    background: var(--primary);
    border-radius: 50%;
    border: 1.5px solid var(--white);
}

.support-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
}

.support-btn:hover {
    box-shadow: 0 2px 8px rgba(91, 140, 239, 0.42);
}

.support-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
}

/* ─── CONTENT ─── */
.content {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px 20px;
}

/* ─── PROFILE CARD ─── */
/* .profile-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
} */

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    position: relative;
}

.avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #66BB6A;
    border-radius: 50%;
    border: 2px solid var(--white);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 3px;
}

.profile-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.profile-meta .dot {
    width: 3px;
    height: 3px;
    background: var(--border);
    border-radius: 50%;
}

.profile-stats {
    display: flex;
    gap: 16px;
}

.stat-item {
    text-align: center;
    padding: 10px 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    min-width: 80px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

.container {}

/* ─── ROADMAP ─── */
.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    stroke-width: 1.5;
}

.section-title .title-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 4px;
}

.roadmap-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.roadmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.roadmap-progress-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.roadmap-percent {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.roadmap-percent-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.roadmap-overall-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
}

.roadmap-overall-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 3px;
    transition: width 1s ease;
}

.roadmap-timeline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    overflow-x: auto;
    padding: 10px 0;
}

.roadmap-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 90px;
    position: relative;
}

.roadmap-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: -50px; */
    left: -62px;
    width: 100%;
    height: 1px;
    background: var(--border);
    z-index: 0;
}

.roadmap-step.done:not(:last-child)::after {
    background: var(--primary);
}

.step-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.roadmap-step.done .step-node {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.roadmap-step.active .step-node {
    background: var(--white);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.step-label {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.roadmap-step.done .step-label,
.roadmap-step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

.step-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

.roadmap-milestones {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.milestone-row {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
}

.milestone-row.active-m {
    /*     border-color: rgba(74, 128, 235, 0.3);
    background: var(--primary-light); */
}

.milestone-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}


.milestone-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.milestone-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
    color: var(--primary);
}

.milestone-info {
    flex: 1;
}

.milestone-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.milestone-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

.milestone-bar-wrap {
    width: 130px;
    display: grid;
    gap: 10px;
}

.milestone-bar {
    height: 5px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 15px;
    margin-top: 4px;
}

.milestone-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
}

.milestone-pct {
    font-size: 10px;
    color: var(--primary);
    font-weight: 600;
    margin-top: 3px;
    text-align: center;
}

.milestone-more-info {
    margin-right: auto;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    margin-top: 3px;
    text-align: left;
}

.milestone-cheklist {
    margin: 5px 0;
}

.milestone-p-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}


.milestone-checklist-list {
    display: inline-grid;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.milestone-checklist {
    padding: 5px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid #d5d5d5;
    background: #e2e7f1;
    display: flex;
    justify-content: space-between;
    box-shadow: var(--shadow-box);
}

.milestone-checklist-done {
    /* text-decoration: line-through; */
    opacity: .6;
    box-shadow: none;
    border: none;
}

/* ─── THREE CARDS ─── */
.three-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-title svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
    color: var(--primary);
}

.card-link {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
}

/* Research Progress */
.research-ring {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.ring-svg {
    width: 80px;
    height: 80px;
}

.ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 6;
}

.ring-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 66;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s ease;
}

.ring-text {
    font-size: 14px;
    font-weight: 700;
    fill: var(--primary);
    text-anchor: middle;
    dominant-baseline: middle;
}

.research-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.research-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.research-item-label {
    color: var(--text-muted);
}

.research-item-val {
    font-weight: 600;
    color: var(--text);
}

.research-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 6px;
}

/* Events */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
}

.event-date {
    text-align: center;
    min-width: 36px;
}

.event-day {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.event-month {
    font-size: 9px;
    color: var(--text-muted);
}

.event-info {
    flex: 1;
}

.event-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.event-loc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

.event-tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}

.tag-blue {
    background: var(--primary-light);
    color: var(--primary);
}

.tag-teal {
    background: var(--accent-light);
    color: #3A9A9A;
}

/* Network */
.network-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.net-stat {
    padding: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    text-align: center;
}

.net-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.net-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.network-avatars {
    display: flex;
    align-items: center;
    gap: -6px;
}

.net-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    margin-left: -6px;
}

.net-avatar:first-child {
    margin-left: 0;
}

.net-more {
    font-size: 10px;
    color: var(--text-muted);
    margin-right: 8px;
}

/* ─── SKILLS ─── */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.skill-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.skill-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.skill-ring-wrap {
    position: relative;
}

.skill-ring-svg {
    width: 64px;
    height: 64px;
}

.skill-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 5;
}

.skill-ring-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.2s ease;
}

.skill-ring-fill.teal {
    stroke: var(--accent);
}

.skill-pct-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.skill-pct-text.teal {
    color: #3A9A9A;
}

.skill-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.skill-level {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}













/* TOPBAR */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.topbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-title svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    stroke-width: 1.5;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-muted);
}

.icon-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-primary:hover {
    opacity: 0.88;
}

.btn-primary svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
}

/* CONTENT LAYOUT */
.content-profile {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.content-detail {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.col-info {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 65%;
}

.col-resume {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 35%;
}

/* SECTION CARD */
.section-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.section-head svg {
    width: 15px;
    height: 15px;
    color: var(--primary);
    stroke-width: 1.5;
    flex-shrink: 0;
}

.section-head-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    flex: 1;
}

.section-head-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 20px;
}

.div-hidden {
    display: none;
}

/* PROFILE HERO */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    position: relative;
}

.avatar-status {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: #66BB6A;
    border-radius: 50%;
    border: 2px solid var(--white);
}

.profile-hero-info {
    flex: 1;
}

.profile-hero-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
}

.profile-hero-sub {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.profile-hero-sub .dot {
    width: 3px;
    height: 3px;
    background: var(--border);
    border-radius: 50%;
}

.profile-tags {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}



.tag.blue {
    background: var(--primary-light);
    color: var(--primary);
    border-color: rgba(91, 141, 239, 0.2);
}

.tag.teal {
    background: var(--accent-light);
    color: #3A9A9A;
    border-color: rgba(126, 200, 200, 0.3);
}

/* INFO ROWS */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon svg {
    width: 13px;
    height: 13px;
    color: var(--primary);
    stroke-width: 1.5;
}

.info-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 1px;
}

.info-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

/* STATS ROW */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.stat-box {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.stat-box-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-box-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* RESEARCH LIST */
.research-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.research-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
}

.research-item-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.research-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.research-item-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.research-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.status-done {
    background: #E8F5E9;
    color: #388E3C;
}

.status-progress {
    background: var(--primary-light);
    color: var(--primary);
}

.status-pending {
    background: #FFF8E1;
    color: #F9A825;
}

/* ─── RESUME STRENGTH ─── */
.strength-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.strength-ring-wrap {
    position: relative;
    flex-shrink: 0;
}

.strength-ring {
    width: 90px;
    height: 90px;
}

.strength-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 7;
}

.strength-ring-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.2s ease;
}

.strength-ring-text {
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.strength-info {
    flex: 1;
}

.strength-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
}

.strength-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
}

.strength-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.strength-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.strength-bar-label {
    font-size: 10.5px;
    color: var(--text-muted);
    width: 80px;
    flex-shrink: 0;
}

.strength-bar-track {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.strength-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.strength-bar-pct {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    width: 28px;
    text-align: left;
}

/* RESUME SECTIONS */
.resume-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resume-item {
    display: flex;
    gap: 12px;
    position: relative;
}

.resume-item::before {
    content: '';
    position: absolute;
    right: 13px;
    top: 28px;
    bottom: -10px;
    width: 1px;
    background: var(--border);
}

.resume-item:last-child::before {
    display: none;
}

.resume-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.resume-dot svg {
    width: 12px;
    height: 12px;
    color: var(--primary);
    stroke-width: 1.5;
}

.resume-dot.teal {
    background: var(--accent-light);
    border-color: var(--accent);
}

.resume-dot.teal svg {
    color: #3A9A9A;
}

.resume-dot.gray {
    background: var(--bg);
    border-color: var(--border);
}

.resume-dot.gray svg {
    color: var(--text-muted);
}

.resume-body {
    flex: 1;
    padding-bottom: 10px;
}

.resume-item-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}

.resume-item-sub {
    font-size: 11px;
    color: var(--primary);
    font-weight: 500;
    margin-top: 1px;
}

.resume-item-date {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.resume-item-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    line-height: 1.6;
}

.resume-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* SKILLS */
.skills-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skill-name {
    font-size: 11.5px;
    color: var(--text);
    width: 110px;
    flex-shrink: 0;
}

.skill-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.skill-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--primary);
    transition: width 1s ease;
}

.skill-fill.teal {
    background: var(--accent);
}

.skill-pct {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    width: 32px;
    text-align: left;
}



/* ── RC: Resume Column Cards ── */
.rc-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.rc-card-head svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* ── Profile Card ── */
.rc-profile-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.rc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.rc-profile-info {
    flex: 1;
    min-width: 0;
}

.rc-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-job-title {
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-meta-item {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── Stats Row ── */
.rc-stat-row {
    display: flex;
    gap: 6px;
}

.rc-stat {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    text-align: center;
}

.rc-stat-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.rc-stat-val--sm {
    font-size: 11px;
}

.rc-stat-lbl {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Identity Chips ── */
.rc-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rc-chip-labeled {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    min-width: 60px;
}

.rc-chip-label {
    font-size: 11px;
    color: var(--text-muted);
}

.rc-chip-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

/* ── Social Pills ── */
.rc-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rc-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid rgba(91, 141, 239, 0.2);
    border-radius: 20px;
    padding: 3px 9px;
    text-decoration: none;
    transition: opacity .15s;
}

.rc-social-pill:hover {
    opacity: 0.75;
}

/* ── Education Inline List ── */
.rc-inline-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-edu-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.rc-edu-degree {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--black);
}

.rc-edu-field {
    font-size: 10.5px;
    color: var(--primary);
}

.rc-edu-uni {
    font-size: 10px;
    color: var(--text-muted);
}

/* ── Labeled Block ── */
.rc-labeled-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-field-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rc-field-txt {
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* ── Badges ── */
.rc-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rc-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 9px;
}

.rc-badge--orange {
    background: #FFF3E0;
    color: #E65100;
}

.rc-badge--blue {
    background: var(--primary-light);
    color: var(--primary);
}

/* ── Goal Box ── */
.rc-goal-box {
    background: var(--bg);
    border-right: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-goal-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rc-goal-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════ROADMAP PAGE
═══════════════════════════════════════ */

/* Overview row */
.rm-overview {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.rm-ov-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rm-ov-main {
    gap: 20px;
}

/* Ring */
.rm-ov-ring-wrap {
    flex-shrink: 0;
}

.rm-ov-ring {
    width: 90px;
    height: 90px;
    transform: rotate(-90deg);
}

.rm-ov-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 10;
}

.rm-ov-ring-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}

.rm-ov-ring-text {
    fill: var(--text-main);
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    transform: rotate(90deg) translate(0, -100px);
}

.rm-ov-ring-sub {
    fill: var(--text-muted);
    font-size: 10px;
    text-anchor: middle;
    transform: rotate(90deg) translate(0, -100px);
}

.rm-ov-main-info {
    flex: 1;
}

.rm-ov-main-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.rm-ov-main-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.rm-ov-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-ov-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}

.rm-ov-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
}

.rm-ov-bar-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Stat cards */
.rm-ov-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rm-ov-icon svg {
    width: 22px;
    height: 22px;
}

.rm-ov-info {
    flex: 1;
}

.rm-ov-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.rm-ov-label {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 6px;
}

.rm-ov-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
}

.rm-badge-blue {
    background: #EBF1FD;
    color: #5B8DEF;
}

.rm-badge-teal {
    background: #E8F7F7;
    color: #3A9A9A;
}

.rm-badge-green {
    background: #F0FDF4;
    color: #4CAF50;
}

.rm-badge-yellow {
    background: #FFF8E1;
    color: #F59E0B;
}

/* ── Page grid ── */
.rm-page-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

/* ── Timeline column ── */
.rm-timeline-col .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 24px;
}

.rm-timeline-col .section-title svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary);
}

.title-badge {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    background: var(--primary-light, #EBF1FD);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 99px;
}

.rm-timeline {
    display: flex;
    flex-direction: column;
}

/* Step */
.rm-step {
    display: flex;
    gap: 16px;
    position: relative;
}

.rm-step-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.rm-step-node {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 1;
}

.rm-node-done {
    background: #4CAF50;
    color: #fff;
}

.rm-node-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(91, 141, 239, .2);
}

.rm-node-upcoming {
    background: var(--white);
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.rm-step-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    margin: 4px 0;
}

.rm-done .rm-step-line {
    background: #4CAF50;
}

.rm-active .rm-step-line {
    background: linear-gradient(to bottom, var(--primary), var(--border));
}

.rm-upcoming .rm-step-line {
    background: var(--border);
}

.rm-step-body {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    transition: box-shadow .2s;
}

.rm-step-body:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.rm-active .rm-step-body {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .1);
}

.rm-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.rm-step-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rm-step-meta-days {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rm-step-meta-days-p {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
}

.rm-step-meta-days-span {
    font-size: 13px;
    font-weight: 500;
}

.rm-step-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.rm-step-period {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 99px;
}

.rm-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.rm-status-done {
    background: #F0FDF4;
    color: #4CAF50;
}

.rm-status-active {
    background: #EBF1FD;
    color: var(--primary);
}

.rm-status-upcoming {
    background: var(--bg);
    color: var(--text-muted);
}

.rm-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}



.rm-step-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.rm-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.tag {
    height: 23px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 99px;
    border: 1px solid #d9dbe1;
    text-align: center;
    display: flex;
    align-items: center;
    width: fit-content;
    white-space: nowrap;
}

.tag-lurge {
    height: 30px;
    font-size: 12px;
    font-weight: 500;
    background: #d9dce2;
    color: var(--text-muted);
    padding: 4px 13px;
    border-radius: 99px;
    border: 1.5px solid #d9dbe1;
    text-align: center;
    align-items: center;
    width: fit-content;
    margin-right: 20px;
    white-space: nowrap;
}

.tag-active {
    background: #EBF1FD;
    color: var(--primary);
    border-color: transparent;
}






/* ── roadmap.css ── */

/* ─── Base Variables ─── */
:root {
    --primary: #5B8DEF;
    --primary-light: #EBF1FD;
    --primary-dark: #3A6DD8;
    --success: #4CAF50;
    --success-light: #F0FDF4;
    --danger: #EF5350;
    --danger-light: #FEF2F2;
    --warning: #F59E0B;
    --text-main: #1A1D23;
    --border: #E8EAEF;
    --bg: #F5F7FB;
    --white: #FFFFFF;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .08);
    --transition: .18s ease;
}

/* ─── Page Wrapper ─── */
.rm-page {

    padding: 42px 55px 64px;
    direction: rtl;
    font-family: inherit;
}


/* ─── Page Header ─── */
.rm-page-header {
    margin-bottom: 36px;
}

.rm-page-header-compact {
    margin-bottom: 28px;
}

.rm-page-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.rm-page-header-inner-profile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    margin: 0 60px
}

.rm-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rm-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    background: #d6e1f6;
    padding: 3px 10px;
    border-radius: 99px;
    align-self: flex-start;
}

.rm-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.25;
}

.rm-page-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.rm-header-badge {
    align-self: flex-start;
}

.rm-badge-status {
    font-size: 11px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-muted);
    padding: 3px 12px;
    border-radius: 99px;
    border: 1px solid var(--border);
}

/* ─── Header Actions ─── */
.rm-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ─── Stats Row ─── */
.rm-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.rm-stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-stat-card-progress {
    grid-column: span 1;
}

.rm-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
}

.rm-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1;
}

.rm-stat-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 4px;
}

/* ─── Progress Bar ─── */
.rm-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-progress-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.rm-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 99px;
    transition: width .4s ease;
}

.rm-fill-done {
    background: linear-gradient(90deg, var(--success), #38A169);
}

.rm-progress-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.rm-progress-sm {
    height: 6px;
}

/* ─── Body ─── */
.rm-body {
    display: flex;
    flex-direction: column;
}

/* ─── Section Title ─── */
.rm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
}

.rm-section-title svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary);
}



/* ─── Timeline ─── */
.rm-timeline {
    display: flex;
    flex-direction: column;
}

.rm-step {
    display: flex;
    gap: 16px;
    position: relative;
}

.rm-step-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}


.rm-node-done {
    background: var(--success);
    color: #fff;
}

.rm-node-done svg {
    width: 16px;
    height: 16px;
}

.rm-node-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(91, 141, 239, .2);
    animation: rsd-pulse 1.5s infinite;
}

.rm-node-upcoming {
    background: var(--white);
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.rm-step-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    margin: 4px 0;
}

.rm-done .rm-step-line {
    background: var(--success);
}

.rm-active .rm-step-line {
    background: linear-gradient(to bottom, var(--primary), var(--border));
}

.rm-upcoming .rm-step-line {
    background: var(--border);
}

/* ─── Step Body ─── */
.rm-step-body {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 16px;
    transition: box-shadow var(--transition);
}

.rm-step-body:hover {
    box-shadow: var(--shadow-md);
}

.rm-active .rm-step-body {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .1);
}

.rm-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rm-step-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rm-step-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.rm-step-period {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 99px;
}

.rm-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

.rm-status-done {
    background: var(--success-light);
    color: var(--success);
}

.rm-status-active {
    background: var(--primary-light);
    color: var(--primary);
}

.rm-status-upcoming {
    background: var(--bg);
    color: var(--text-muted);
}

.rm-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.rm-step-details {
    display: flex;
    gap: 15px;
}

.rm-step-details-right {
    width: 60%;
}

.rm-step-details-left {
    width: 40%;
    margin-top: -17px;
}

.rm-checklist-list {
    display: inline-grid;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    /* border-radius: var(--radius-sm); */
    /* border: 1px solid var(--border); */
    /* background: #fbfcfd; */
    width: 100%;
}

.rm-p-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    display: contents;
}

.rm-resume_output-chips {
    display: flex;
    gap: 10px;
}

.rm-step-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.rm-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}


/* ─── Step Progress ─── */
.rm-step-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rm-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 32px;
}

.rm-step-hr {
    margin: 12px 0;
}

/* ─── Step Footer ─── */
.rm-step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left;
}

.rm-activity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rm-chip {
    font-size: 11px;
    background: var(--bg);
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--border);
}

.rm-chip-done {
    background: var(--success-light);
    color: var(--success);
    border-color: transparent;
    text-decoration: line-through;
}

.rm-checklist-done {
    /* text-decoration: line-through; */
    opacity: .5;
    box-shadow: none;
    border: none;
}

.rm-step-actions {
    display: flex;
    gap: 6px;
}

/* ─── Empty State ─── */
.rm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    background: var(--white);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    text-align: center;
}

.rm-empty svg {
    width: 40px;
    height: 40px;
    stroke: var(--border);
}

.rm-empty p {
    margin: 0;
    font-size: 14px;
}

/* ─── Buttons ─── */
.rm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    background: none;
    width: fit-content;
}

.rm-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.rm-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.rm-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}


.rm-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.rm-btn-ghost:hover {
    background: var(--bg);
    color: var(--text-main);
}

.rm-btn-danger {
    background: var(--white);
    color: var(--danger);
    border-color: var(--border);
}

.rm-btn-danger:hover {
    background: var(--danger-light);
    border-color: var(--danger);
}

.rm-btn-xs {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* ─── Card ─── */
.rm-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.rm-card-mt {
    margin-top: 20px;
}

.rm-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    background: #dfe6f3;
}

.rm-card-header svg {
    width: 16px;
    height: 16px;
    stroke: var(--primary);
    flex-shrink: 0;
}

.rm-card-header-flex {
    justify-content: space-between;
}

.rm-card-body {
    padding: 18px;
}

.rm-card-body-flush {
    padding: 0;
}

.rm-card-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ─── Detail Grid ─── */
.rm-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

.rm-detail-main {
    display: flex;
    flex-direction: column;
}

.rm-detail-side {
    display: flex;
    flex-direction: column;
}

/* ─── Info Rows ─── */
.rm-info-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.rm-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rm-info-row:first-child {
    padding-top: 0;
}

.rm-info-label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
}

.rm-info-val {
    color: var(--text-main);
    flex: 1;
}

/* ─── Activity Table ─── */
.rm-activity-table-wrap {
    overflow-x: auto;
}

.rm-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rm-activity-table th {
    padding: 10px 14px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .04em;
    background: #fafafb;
    border-bottom: 1px solid var(--border);
}

.rm-activity-table td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
    vertical-align: top;
}

.rm-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.rm-activity-table tbody tr:hover {
    background: var(--bg);
}

.rm-row-done td {
    opacity: .5;
    min-width: 100px;
}

.rm-td-title {
    font-weight: 600;
}

.rm-td-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.rm-td-muted {
    color: var(--text-muted);
}

.rm-form-group {
    padding: 10px;
}

#activity-search-input {
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    width: 500px;
    border-radius: 999px;
    height: 39px;
    border: 1.2px solid #d7dbe2;
}


.rm-btn-not-activ {
    color: var(--text-muted);
    display: block;
    width: 100%;
    padding: 7px 14px;
    background: #ced8e6;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
    transition: background 0.15s;
    white-space: nowrap;
    text-align: center;
}


.rm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.rm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.rm-modal-dialog {
    position: relative;
    width: min(900px, 92%);
    max-height: 85vh;
    overflow: hidden;
    background: #fff;
    margin: 40px auto;
    border-radius: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.rm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.rm-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.activity-list {
    display: grid;
    gap: 16px;
}

.activity-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 15px;
    background: #fafafa;
}

.activity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 3px;
}

.activity-badge {
    background: #eef2ff;
    color: #3730a3;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.activity-card-body p {
    font-size: 13px;
    margin: 0 0 5px;
    color: #444;
}

.activity-card-body-item {
    font-size: 13px;
    font-weight: 500;
}

.activity-card-body-strong {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
}

.activity-card-footer {
    margin-top: 12px;
}

.selected-activity-box {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: #f8fafc;
}

.selected-activity-box .placeholder {
    color: #888;
}




/* ─── Outline Button ─── */
.rm-btn-outline {
    background: var(--white);
    color: var(--text-main);
    border-color: var(--border);
}

.rm-btn-outline:hover {
    background: var(--bg);
    color: var(--text-main);
    border-color: var(--primary);
}

/* ─── Two Column Layout For Stage Form ─── */
/* #stage-form .rm-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
} */

#stage-form .rm-detail-main {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

#stage-form .rm-detail-main>.rm-card,
#stage-form .rm-detail-main>.rm-card.rm-card-mt {
    margin-top: 0;
}

#stage-form .rm-detail-main>.rm-card:nth-child(1),
#stage-form .rm-detail-main>.rm-card:nth-child(2) {
    grid-column: 1;
}

#stage-form .rm-detail-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 75px;
}

/* ─── Header Alignment ─── */
.rm-card-header-between,
.rm-card-header.rm-card-header-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ─── Form Base Styles ─── */
.rm-form-group {
    padding: 0;
    margin-bottom: 18px;
}

.rm-form-group:last-child {
    margin-bottom: 0;
    width: 80px;
}

.rm-form-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.rm-form-help {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

.rm-field-errors,
.rm-form-errors {
    margin-top: 8px;
}

.rm-error-text {
    font-size: 12px;
    color: var(--danger);
    background: var(--danger-light);
    border: 1px solid rgba(239, 83, 80, 0.14);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.6;
}

.rm-form-errors {
    margin-bottom: 18px;
}


.rm-card-body textarea {
    min-height: 110px;
    line-height: 1.8;
}

.rm-card-body input:focus,
.rm-card-body select:focus,
.rm-card-body textarea:focus,
.rm-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.12);
}

/* ─── Formset Item ─── */
.rm-formset-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fbfcfe;
    padding: 18px;
    margin-bottom: 16px;
}


.rm-formset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.rm-formset-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.rm-formset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* ─── Delete Checkbox Label ─── */
.rm-delete-label {
    display: flex;
    gap: 5px;
    width: fit-content;
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
}


.rm-delete-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--danger);
}

/* ─── Activity Picker ─── */
.activity-picker-group {
    grid-column: 1 / -1;
}

.activity-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selected-activity-box {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    background: #f8fafc;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.selected-activity-box strong {
    font-size: 13px;
    color: var(--text-main);
}

.selected-activity-box div {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

.selected-activity-box small,
.selected-activity-box .placeholder {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ─── Actions Card ─── */
.rm-action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rm-btn-block {
    width: 150px;
    justify-content: center;
}

/* ─── Modal Search Input Fix ─── */
#activity-search-input {
    width: 100%;
    margin: 0;
    display: block;
}

/* ─── Modal Cards Polish ─── */
.activity-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--white);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.activity-card:hover {
    border-color: #d6def0;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.activity-card-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.activity-card-body p {
    line-height: 1.8;
    color: var(--text-muted);
}

.activity-card-body-item {
    margin-top: 6px;
    color: var(--text-main);
}

/* ─── Responsive ─── */
@media (max-width: 992px) {
    #stage-form .rm-detail-main {
        grid-template-columns: 1fr;
    }

    #stage-form .rm-detail-side {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}

@media (max-width: 768px) {
    .rm-formset-grid {
        grid-template-columns: 1fr;
    }

    .rm-card-header-between {
        align-items: stretch;
    }

    .rm-card-header-between .rm-btn {
        width: 100%;
        justify-content: center;
    }
}



/* ─── Checklist ─── */
.rm-checklist {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    border-radius: var(--radius-sm);
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    box-shadow: var(--shadow-box);
}

.rm-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-main);
    transition: background var(--transition);
}

.rm-checklist-item:last-child {
    border-bottom: none;
}

.rm-checklist-item:hover {
    background: var(--bg);
}

.rm-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--white);
}

.rm-check-done .rm-check-icon {
    background: var(--success);
    border-color: var(--success);
}

.rm-check-done .rm-check-icon svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
}

.rm-check-label {
    flex: 1;
}

.rm-check-done .rm-check-label {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* ─── Stage List (in form) ─── */
.rm-stage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-stage-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.rm-stage-list-item:last-child {
    border-bottom: none;
}

.rm-stage-list-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rm-stage-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.rm-stage-list-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ─── Form ─── */
.rm-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rm-field {
    margin-bottom: 18px;
}

.rm-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.rm-form input,
.rm-form select,
.rm-form textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-main);
    transition: border-color var(--transition);
    box-sizing: border-box;
    outline: none;
}

.rm-form input:focus,
.rm-form select:focus,
.rm-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .12);
}

.rm-field-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
}

.rm-field-error {
    font-size: 11px;
    color: var(--danger);
    margin-top: 5px;
}

.rm-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .rm-page {
        padding: 20px 16px 48px;
    }

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

    .rm-stats-row .rm-stat-card:last-child {
        grid-column: span 2;
    }

    .rm-detail-grid {
        grid-template-columns: 1fr;
    }

    .rm-page-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .rm-header-actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .rm-stats-row {
        grid-template-columns: 1fr;
    }

    .rm-stats-row .rm-stat-card:last-child {
        grid-column: span 1;
    }

    .rm-step-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Sub-milestones */
.rm-submilestones {
    background: var(--bg);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.rm-sub-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-sub-dot-done {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

.rm-sub-dot-current {
    background: var(--primary);
    border-color: var(--primary);
    animation: pulse 1.5s infinite;
}

.rm-sub-name {
    flex: 1;
}

.rm-sub-status {
    font-size: 10px;
    font-weight: 600;
}

.rm-sub-s-done {
    color: #4CAF50;
}

.rm-sub-s-current {
    color: var(--primary);
}

.rm-sub-done .rm-sub-name {
    color: var(--text-main);
}

.rm-sub-current .rm-sub-name {
    color: var(--text-main);
    font-weight: 600;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(91, 141, 239, .4);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(91, 141, 239, 0);
    }
}














/* ─── Step Sections ─── */
.rm-step-section {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.rm-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
    display: block;
}

.rm-section-content {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-main);
    margin: 0;
}

/* ─── Objectives ─── */
.rm-step-objectives {
    border-left-color: #3B82F6;
}

.rm-step-objectives .rm-section-label {
    color: #3B82F6;
}

/* ─── Checklist Redesign ─── */
.rm-step-checklist {
    border-left-color: #8B5CF6;
}

.rm-checklist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.rm-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-main);
    transition: all var(--transition);
}

.rm-checklist-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(91, 141, 239, 0.1);
}

.rm-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--white);
    transition: all var(--transition);
}

.rm-checklist-done .rm-check-icon {
    background: var(--success);
    border-color: var(--success);
}

.rm-checklist-done .rm-check-icon svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}

.rm-check-label {
    flex: 1;
    font-weight: 500;
}

.rm-checklist-done .rm-check-label {
    text-decoration: line-through;
    opacity: 0.6;
}

.rm-check-duration {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ─── Criteria ─── */
.rm-step-criteria {
    border-left-color: #10B981;
}

.rm-criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-criteria-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.6;
}

.rm-criteria-item::before {
    content: "✓";
    flex-shrink: 0;
    font-weight: 700;
    color: var(--success);
    font-size: 16px;
    line-height: 1;
}

/* ─── Milestone ─── */
.rm-step-milestone {
    border-left-color: #F59E0B;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
}

.rm-step-milestone .rm-section-label {
    color: #F59E0B;
}

/* ─── Risks ─── */
.rm-step-risks {
    border-left-color: #EF5350;
}

.rm-risks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rm-risk-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.6;
}

.rm-risk-item::before {
    content: "⚠";
    flex-shrink: 0;
    font-size: 14px;
    color: #EF5350;
}

/* ─── Resources ─── */
.rm-step-resources {
    border-left-color: #6366F1;
}

.rm-resources-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.rm-resource-item {
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all var(--transition);
}

.rm-resource-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(91, 141, 239, 0.1);
}

.rm-resource-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rm-resource-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.rm-resource-type {
    font-size: 10px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.rm-resource-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.rm-resource-text {
    font-size: 13px;
    color: var(--text-main);
    margin: 0;
    line-height: 1.6;
}

/* ─── Badges Redesign ─── */
.rm-step-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ─── Alert Box ─── */
.rm-step-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 12px 0;
    border-left: 3px solid;
}

.rm-alert-info {
    background: #EFF6FF;
    border-left-color: #3B82F6;
}

.rm-step-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #3B82F6;
    margin-top: 2px;
}

.rm-alert-content {
    flex: 1;
}

.rm-alert-label {
    font-size: 11px;
    font-weight: 600;
    color: #1E40AF;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px 0;
}

.rm-alert-value {
    font-size: 14px;
    font-weight: 700;
    color: #1E3A8A;
    margin: 0;
}

/* ─── Step Details Cleanup ─── */
.rm-step-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}

.rm-step-details-right {
    width: 100%;
}

.rm-step-details-left {
    display: none;
}

/* ─── Animations ─── */
@keyframes rsd-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(91, 141, 239, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(91, 141, 239, 0);
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .rm-step-badges {
        justify-content: flex-start;
    }

    .rm-step-section {
        padding: 12px;
    }

    .rm-resource-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rm-resource-type {
        align-self: flex-start;
    }
}










/* ═══════════════════════════════════════════════════════════════
   STAGE DETAIL PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ─── Stats Grid ─── */
.sd-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.sd-status-done {
    color: var(--success);
}

.sd-status-active {
    color: var(--primary);
}

.sd-status-upcoming {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .sd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Detail Grid ─── */
.sd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.sd-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

@media (max-width: 1024px) {
    .sd-detail-grid {
        grid-template-columns: 1fr;
    }

    .sd-sidebar {
        position: static;
        grid-template-columns: repeat(3, 1fr);
        display: grid;
    }
}

@media (max-width: 768px) {
    .sd-detail-grid {
        grid-template-columns: 1fr;
    }

    .sd-sidebar {
        display: flex;
        flex-direction: column;
    }
}

/* ─── Info Sections ─── */
.sd-info-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.sd-info-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sd-info-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.sd-info-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    margin: 0;
}

/* ─── Specs Grid ─── */
.sd-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.sd-spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-spec-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sd-spec-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

/* ─── Criteria List ─── */
.sd-criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-criteria-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.6;
}

.sd-criteria-item::before {
    content: "✓";
    flex-shrink: 0;
    font-weight: 700;
    color: var(--success);
    font-size: 18px;
    line-height: 1;
}

/* ─── Milestone Box ─── */
.sd-milestone-box {
    padding: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border-left: 4px solid #F59E0B;
    border-radius: 8px;
}

.sd-milestone-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    margin: 0;
}

/* ─── Risks List ─── */
.sd-risks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-risk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #FEF2F2;
    border-left: 4px solid #EF5350;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.6;
}

.sd-risk-item::before {
    content: "⚠";
    flex-shrink: 0;
    font-size: 16px;
}

/* ─── Resources Grid ─── */
.sd-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.sd-resource-card {
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition);
}

.sd-resource-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(91, 141, 239, 0.15);
    transform: translateY(-2px);
}

.sd-resource-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sd-resource-icon {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
    flex-shrink: 0;
}

.sd-resource-type {
    font-size: 10px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 99px;
}

.sd-resource-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.sd-resource-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─── Activity Table ─── */
.sd-td-duration {
    font-weight: 600;
    color: var(--primary);
}

.sd-activity-count {
    margin-right: auto;
    font-size: 11px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 99px;
}

/* ─── Sidebar Widgets ─── */
.sd-widget {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.sd-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* ─── Progress Summary ─── */
.sd-progress-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-progress-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--bg);
    border-radius: 8px;
}

.sd-progress-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.sd-progress-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.sd-progress-done {
    color: var(--success);
}

.sd-progress-pending {
    color: var(--warning);
}

/* ─── Timeline Info ─── */
.sd-timeline-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-timeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: var(--bg);
    border-radius: 8px;
}

.sd-timeline-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.sd-timeline-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

/* ─── Quick Actions ─── */
.sd-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.sd-action-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 141, 239, 0.2);
}

.sd-action-btn svg {
    width: 14px;
    height: 14px;
}

/* ─── Quick Info (roadmap_detail) ─── */
.rm-step-quick-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.rm-quick-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 6px;
}

.rm-quick-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.rm-quick-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.rm-quick-truncate {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ─── Responsive ─── */
@media (max-width: 768px) {
    .sd-resources-grid {
        grid-template-columns: 1fr;
    }

    .sd-detail-grid {
        grid-template-columns: 1fr;
    }

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

    .acm-box {
        width: 95%;
    }
}


/* ═══════════════ DASHBOARD FOOTER ═══════════════ */

.dashboard-footer {
    background: #ffffff;
    color: var(--black);
    margin-top: 60px;
    padding-top: 50px;
    font-family: inherit;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.dashboard-footer h4 {
    font-size: 15px;
    margin-bottom: 18px;
    color: var(--black);
    font-weight: 600;
}

.dashboard-footer p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-muted);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.footer-logo svg {
    width: 26px;
    height: 26px;
    stroke: #38bdf8;
}

.footer-links a,
.footer-support a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 12px;
    transition: 0.3s;
}

.footer-links a:hover,
.footer-support a:hover {
    color: #38bdf8;
    transform: translateX(-4px);
}

.footer-links svg,
.footer-support svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.footer-social .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    background: #f4f4f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.footer-social a:hover {
    background: #38bdf8;
    transform: translateY(-4px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

.footer-bottom {
    border-top: 1px solid #bdbdbd;
    text-align: center;
    padding: 18px;
    font-size: 13px;
    color: #64748b;
    margin-top: 40px;
}


/* Graduation card */
.rm-grad-card {
    background: linear-gradient(135deg, var(--primary), #7B6CF6);
    border-color: transparent;
}

.rm-grad-card .rm-side-card-title svg {
    stroke: rgba(255, 255, 255, .8);
}

.rm-grad-countdown {
    text-align: center;
    padding: 10px 0 4px;
}

.rm-grad-num {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.rm-grad-unit {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    margin-top: 4px;
}

.rm-grad-date {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 1100px) {
    .rm-overview {
        grid-template-columns: 1fr 1fr;
    }

    .rm-ov-main {
        grid-column: 1 / -1;
    }

    .rm-page-grid {
        grid-template-columns: 1fr;
    }

    .rm-sidebar-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .rm-grad-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .rm-overview {
        grid-template-columns: 1fr;
    }

    .rm-sidebar-col {
        grid-template-columns: 1fr;
    }
}







/* ═══════════════════════════════════════
   ROADMAP STEP DETAIL PAGE
═══════════════════════════════════════ */

/* ── Breadcrumb ── */
.rsd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12px;
}

.rsd-bc-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.rsd-bc-link:hover {
    text-decoration: underline;
}

.rsd-breadcrumb svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
}

.rsd-bc-current {
    color: var(--text-main);
    font-weight: 600;
}

.rsd-bc-badge {
    margin-right: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}

/* ── Hero ── */
.rsd-hero {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.rsd-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #EBF1FD, #F3F0FD);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-hero-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--primary);
}

.rsd-hero-info {
    flex: 1;
}

.rsd-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.rsd-hero-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: #EBF1FD;
    padding: 2px 8px;
    border-radius: 99px;
}

.rsd-hero-sep {
    color: var(--text-muted);
}

.rsd-hero-period {
    font-size: 11px;
    color: var(--text-muted);
}

.rsd-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 6px;
}

.rsd-hero-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 560px;
}

.rsd-hero-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    background: var(--bg);
    border-radius: 14px;
    padding: 16px 20px;
}

.rsd-hero-stat {
    text-align: center;
}

.rsd-hero-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.rsd-hero-stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.rsd-hero-stat-div {
    width: 1px;
    height: 36px;
    background: var(--border);
}

/* ── Top grid: Pentagon + Sidebar ── */
.rsd-top-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    margin-bottom: 28px;
    align-items: start;
}

/* ── Pentagon card ── */
.rsd-pentagon-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.rsd-penta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.rsd-penta-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.rsd-penta-title svg {
    width: 16px;
    height: 16px;
    stroke: var(--primary);
}

.rsd-penta-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.rsd-penta-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* SVG chart */
.rsd-penta-chart-wrap {
    width: 100%;
    max-width: 380px;
}

.rsd-penta-svg {
    width: 100%;
    height: auto;
}

.rsd-grid-poly {
    fill: none;
    stroke-width: 1;
}

.rsd-grid-4 {
    stroke: var(--border);
}

.rsd-grid-3 {
    stroke: var(--border);
    opacity: .8;
}

.rsd-grid-2 {
    stroke: var(--border);
    opacity: .6;
}

.rsd-grid-1 {
    stroke: var(--border);
    opacity: .4;
}

.rsd-axis {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.rsd-data-poly {
    fill: url(#pentaGrad);
    stroke: url(#pentaStroke);
    stroke-width: 2.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 12px rgba(91, 141, 239, .25));
    animation: rsd-poly-in .8s ease forwards;
}

@keyframes rsd-poly-in {
    from {
        opacity: 0;
        transform: scale(.85);
        transform-origin: 160px 160px;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rsd-data-dot {
    fill: #fff;
    stroke: var(--primary);
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 4px rgba(91, 141, 239, .3));
}

.rsd-grid-lbl {
    fill: var(--text-muted);
    font-size: 8px;
}

.rsd-axis-lbl {
    fill: var(--text-main);
    font-size: 11px;
    font-weight: 600;
}

.rsd-val-lbl {
    fill: var(--primary);
    font-size: 10px;
    font-weight: 700;
}

/* Legend */
.rsd-penta-legend {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rsd-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.rsd-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.rsd-legend-dot-grid {
    background: transparent;
    border: 1.5px solid var(--border);
}

/* ── Pentagon sidebar ── */
.rsd-penta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsd-ps-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
}

.rsd-ps-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
}

.rsd-ps-card-title svg {
    width: 14px;
    height: 14px;
    stroke: var(--primary);
}

/* Score ring card */
.rsd-ps-score-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #EBF1FD 0%, #F3F0FD 100%);
    border-color: transparent;
}



/* ── Axis details (inside sidebar card) ── */
.rsd-axes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsd-axis-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.rsd-axis-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rsd-axis-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-axis-icon svg {
    width: 14px;
    height: 14px;
}

.rsd-axis-info {
    flex: 1;
    min-width: 0;
}

.rsd-axis-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.rsd-axis-desc {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rsd-axis-pct {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.rsd-axis-bar-wrap {
    padding-right: 40px;
}

.rsd-axis-bar {
    height: 5px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.rsd-axis-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s ease;
}


.rsd-ps-score-ring-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rsd-ps-ring-note {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rsd-ps-ring {
    width: 90px;
    height: 90px;
    transform: rotate(-90deg);
}

.rsd-ps-ring-bg {
    fill: none;
    stroke: rgba(235, 235, 235, 0.718);
    stroke-width: 7;
}

.rsd-ps-ring-fill {
    stroke-dasharray: 201;
    /* محاسبه خودکار افست بر اساس متغیر --percent */
    stroke-dashoffset: calc(201 - (201 * var(--percent, 0) / 100));

    /* تنظیمات ظاهری (اگر از قبل دارید نیاز نیست) */
    fill: transparent;

    stroke: var(--primary);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s ease;
}

.rsd-ps-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rsd-ps-ring-text-roadmaps {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rsd-ps-ring-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.rsd-ps-ring-sub {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rsd-ps-score-info {
    flex: 1;
}

.rsd-ps-score-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 3px;
}

.rsd-ps-score-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.rsd-ps-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #4CAF50;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
    padding: 3px 8px;
    border-radius: 99px;
}

.rsd-ps-score-badge svg {
    width: 10px;
    height: 10px;
    stroke: #4CAF50;
}

/* Axis details */
.rsd-ps-axes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsd-ps-axis-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rsd-ps-axis-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-ps-axis-icon svg {
    width: 14px;
    height: 14px;
}

.rsd-ps-axis-body {
    flex: 1;
    min-width: 0;
}

.rsd-ps-axis-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.rsd-ps-axis-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.rsd-ps-axis-pct {
    font-size: 11px;
    font-weight: 700;
}

.rsd-ps-axis-bar {
    height: 5px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.rsd-ps-axis-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s ease;
}

.rsd-ps-axis-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Weak point alert */
.rsd-ps-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF8F0;
    border: 1px solid #FDDCB5;
    border-radius: 12px;
    padding: 12px 14px;
}

.rsd-ps-alert-icon {
    width: 28px;
    height: 28px;
    background: #FFF0DC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-ps-alert-icon svg {
    width: 14px;
    height: 14px;
    stroke: #F59E0B;
}

.rsd-ps-alert-title {
    font-size: 13px;
    font-weight: 700;
    color: #92400E;
    margin-bottom: 3px;
}

.rsd-ps-alert-desc {
    font-size: 12px;
    color: #B45309;
    line-height: 1.6;
}

/* ── Detail grid ── */
.rsd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}

/* ── Section header ── */
.rsd-section-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
}

.rsd-section-hdr svg {
    width: 16px;
    height: 16px;
    stroke: var(--primary);
}

.rsd-section-hdr .title-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    background: #EBF1FD;
    padding: 2px 8px;
    border-radius: 99px;
    margin-right: auto;
}

/* ── Rotation cards ── */
.rsd-rotations {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsd-rot-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
}

.rsd-rot-status-bar {
    width: 4px;
    flex-shrink: 0;
}

.rsd-rot-content {
    flex: 1;
    padding: 16px 18px;
}

.rsd-rot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.rsd-rot-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-rot-icon svg {
    width: 18px;
    height: 18px;
}

.rsd-rot-info {
    flex: 1;
}

.rsd-rot-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.rsd-rot-period {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rsd-rot-progress-wrap {
    margin-bottom: 10px;
}

.rsd-rot-prog-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.rsd-rot-prog-pct {
    font-weight: 700;
    color: var(--primary);
}

.rsd-rot-prog-bar {
    height: 6px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.rsd-rot-prog-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary), #7C3AED);
    transition: width .6s ease;
}

.rsd-rot-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.rsd-rot-stat {
    text-align: center;
}

.rsd-rot-stat-val {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
}

.rsd-rot-stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}

.rsd-rot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* Checklist inside rotation */
.rsd-rot-checklist {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rsd-chk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px;
}

.rsd-chk-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.rsd-chk-done {
    color: var(--text-muted);
    background: var(--bg);
    text-decoration: line-through;
}

.rsd-chk-done svg {
    stroke: #4CAF50;
}

.rsd-chk-current {
    color: var(--primary);
    background: #EBF1FD;
    font-weight: 600;
}

.rsd-chk-current svg {
    stroke: var(--primary);
}

.rsd-chk-pending {
    color: var(--text-muted);
    background: var(--bg);
}

.rsd-chk-pending svg {
    stroke: var(--border);
}

/* ── Goals grid ── */
.rsd-goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rsd-goal-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
}

.rsd-goal-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-goal-check svg {
    width: 12px;
    height: 12px;
}

.rsd-goal-done {
    background: var(--bg);
    color: var(--text-muted);
}

.rsd-goal-active {
    background: #EBF1FD;
    color: var(--primary);
    border-color: #C7D9FB;
}

.rsd-goal-pending {
    background: var(--bg);
    color: var(--text-muted);
}

.rsd-goal-check-done {
    background: #E8F5E9;
}

.rsd-goal-check-done svg {
    stroke: #4CAF50;
}

.rsd-goal-check-active {
    background: #fff;
}

.rsd-goal-check-active svg {
    stroke: var(--primary);
}

.rsd-goal-check-pending {
    background: var(--white);
    border: 1.5px solid var(--border);
}

.rsd-goal-check-pending svg {
    stroke: var(--border);
}

.rsd-goal-done .rsd-goal-text {
    text-decoration: line-through;
}

/* ── Detail sidebar cards ── */
.rsd-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsd-ds-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
}

.rsd-ds-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
}

.rsd-ds-title svg {
    width: 14px;
    height: 14px;
    stroke: var(--primary);
}

/* Mini timeline */
.rsd-timeline-mini {
    display: flex;
    flex-direction: column;
}

.rsd-tm-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.rsd-tm-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.rsd-tm-dot svg {
    width: 10px;
    height: 10px;
}

.rsd-tm-dot-done {
    background: #4CAF50;
}

.rsd-tm-dot-done svg {
    stroke: #fff;
}

.rsd-tm-dot-active {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(91, 141, 239, .2);
    animation: rsd-pulse 1.5s infinite;
    color: #fff;
}

.rsd-tm-dot-pending {
    background: var(--bg);
    border: 2px solid var(--border);
}

@keyframes rsd-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(91, 141, 239, .2);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(91, 141, 239, .1);
    }
}

.rsd-tm-line {
    position: absolute;
    right: 10px;
    top: 22px;
    width: 2px;
    height: calc(100% + 4px);
    transform: translateX(50%);
}

.rsd-tm-line-done {
    background: #4CAF50;
}

.rsd-tm-line-pending {
    background: var(--border);
}

.rsd-tm-info {
    padding: 2px 0 14px;
    flex: 1;
}

.rsd-tm-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.rsd-tm-date {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rsd-tm-date-active {
    color: var(--primary);
    font-weight: 600;
}

/* Score card */
.rsd-scores {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsd-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rsd-score-name {
    font-size: 11px;
    color: var(--text-muted);
    width: 44px;
    flex-shrink: 0;
}

.rsd-score-bar-wrap {
    flex: 1;
}

.rsd-score-bar {
    height: 6px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.rsd-score-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s ease;
}

.rsd-score-striped {
    background: repeating-linear-gradient(90deg,
            var(--primary) 0px,
            var(--primary) 6px,
            transparent 6px,
            transparent 10px);
}

.rsd-score-val {
    font-size: 12px;
    font-weight: 700;
    width: 36px;
    text-align: left;
    flex-shrink: 0;
}

.rsd-score-avg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
}

.rsd-score-avg-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
}

/* Supervisor */
.rsd-supervisor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rsd-sup-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7C3AED);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rsd-sup-info {
    flex: 1;
}

.rsd-sup-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.rsd-sup-role {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rsd-sup-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #F59E0B;
}

.rsd-sup-rating svg {
    width: 13px;
    height: 13px;
}

/* Next step CTA */
.rsd-ds-next {
    background: linear-gradient(135deg, #1E3A5F 0%, #2D1B69 100%);
    border-color: transparent;
}

.rsd-ds-next-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.rsd-ds-next-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.rsd-ds-next-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 14px;
}

.rsd-ds-next-date svg {
    width: 13px;
    height: 13px;
    stroke: rgba(255, 255, 255, .5);
}

.heder-form-edit {
    font-size: 15px;
    font-weight: 700;
    color: #1a2636;
    background: #eef1f6;
    border-right: 3px solid #4a6fa5;
    padding: 0.35rem 0.7rem;
    border-radius: 5px;
    margin-bottom: 0.9rem;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-row {
    padding: 5px 20px;
}

.btn-form-edit {
    display: flex;
    gap: 25px;
}


.rsd-ds-next-bar-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 5px;
}

.rsd-ds-next-bar {
    height: 5px;
    background: rgba(255, 255, 255, .15);
    border-radius: 99px;
    overflow: hidden;
}

.rsd-ds-next-fill {
    height: 100%;
    background: linear-gradient(90deg, #5B8DEF, #A78BFA);
    border-radius: 99px;
    transition: width .6s ease;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .rsd-top-grid {
        grid-template-columns: 1fr;
    }

    .rsd-penta-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rsd-ps-card {
        flex: 1 1 260px;
    }

    .rsd-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .rsd-hero {
        flex-direction: column;
    }

    .rsd-hero-stats {
        width: 100%;
        justify-content: space-around;
    }

    .rsd-goals-grid {
        grid-template-columns: 1fr;
    }

    .rsd-penta-sidebar {
        flex-direction: column;
    }

    .rsd-rot-stats {
        gap: 10px;
    }
}



/* ===== Field Group ===== */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}


/* ===== Inputs ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    color: #58636e;
    background: #fcfdfe;
    border: 1px solid #e8ecf2;
    border-radius: 5px;
    padding: 0.38rem 0.65rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    direction: rtl;
    font-size: 14px;
    font-weight: 500;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #4a6fa5;
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
    background: #fff;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
    border-color: #b8c8e0;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    padding-left: 2rem;
}

textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.6;
    resize: none;
}

textarea {
    border: 1px solid #ccc;
}

textarea::placeholder {
    color: #a8aaad;
    font-size: 12px;
    font-weight: 500;
    opacity: 1;
}

textarea:focus {
    outline: none;
    border: 1px solid #ccc;
    box-shadow: none;
    background: #fcfdfe;
}



.textarea-edit-profile {
    width: 100%;
    max-height: 300px;
    padding: 10px;
}


.checkbox-delete {
    display: flex;
    gap: 5px;
    width: fit-content;
    margin-right: auto;
}

.checkbox-delete p {
    font-size: 12px;
    font-weight: 500;
}

.checkbox-delete input {
    width: 15px;
    height: 15px;
}


/* ===== Rows ===== */
.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}

.row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 18px;
}

.row-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.6rem 1rem;
}

/* ===== Section Note ===== */
.section-note {
    display: block;
    font-size: 0.72rem;
    color: #9aa5b4;
    margin-bottom: 0.5rem;
    margin-top: -0.3rem;
}

/* ===== Repeatable Items ===== */
.repeatable-item {
    background: #f8f9fb;
    border: 1px solid #e2e7ef;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 12px;
    position: relative;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.repeatable-item h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4a6fa5;
    margin-bottom: 12px;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed #d0d7e3;
}

/* ===== Add Button ===== */
.btn-add-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    margin-bottom: 18px;
    padding: 0.32rem 0.85rem;
    background: #eef2f9;
    border: 1px dashed #b0bfd8;
    border-radius: 5px;
    color: #4a6fa5;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-add-form:hover {
    background: #dce7f5;
    border-color: #4a6fa5;
}

.btn-delet-form {
    font-size: 11px;
    font-weight: 500;
    border: none;
    border-radius: 999px;
    padding: 2px 12px;
    background: #ff9494;
    color: #b00404;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
}

.btn-delet-form:hover {
    background: #e97272;
}

/* ===== Submit Button ===== */
button[type="submit"],
.btn-submit {
    display: block;
    width: 100%;
    padding: 7px 14px;
    background: #4a6fa5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    text-align: center;
}

button[type="submit"]:hover,
.btn-submit:hover {
    background: #3a5a8f;
}

/* ===== Required Asterisk ===== */
input:required,
select:required {
    border-left: 2px solid #e8928a;
}

input:required:focus,
select:required:focus {
    border-left-color: #4a6fa5;
}

.upload-file-profile {
    width: 100%;
    margin: 0.3rem 0 15px;
}


/* --- Sections --- */
.form-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.75rem;
}

/* --- Textarea --- */
.textarea-edit-profile {
    width: 100%;
    padding: 0.75rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.textarea-edit-profile:focus {
    border-color: #4a6fa5;
}

/* --- Upload --- */
.upload-file-profile label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 110px;
    background: #eef2f9;
    border: 2px dashed #7c9bcd;
    border-radius: 8px;
    color: #4a6fa5;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.upload-file-profile label:hover {
    background: #dde8f6;
    border-color: #4a6fa5;
}

.upload-file-profile input[type="file"] {
    display: none;
}

.upload-text {
    font-size: 0.85rem;
    font-weight: 600;
}

.upload-hint {
    font-size: 0.72rem;
    color: #7c9bcd;
}

/* --- Submit Button --- */
.btn-submit {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: #4a6fa5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-submit:hover {
    background: #3a5a8a;
}


/* ===== Responsive ===== */
@media (max-width: 600px) {

    #profileForm,
    .form-wrapper {
        padding: 1rem;
    }

    .row-2,
    .row-3,
    .row-4 {
        grid-template-columns: 1fr;
    }
}



.profile-card {
    margin: 0 60px;
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* ===== Header ===== */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e4e8ef;
}

.profile-header-home {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #4a6fa5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-header-info h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2636;
}

.profile-header-info .job-title {
    font-size: 0.8rem;
    color: #4a6fa5;
    font-weight: 600;
    margin-top: 0.1rem;
}

.profile-header-info .meta {
    font-size: 13px;
    color: #6b7a8d;
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}


/* ===== Field Display ===== */
.fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 0.5rem;
}

.fields-grid.col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.fields-grid.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.fields-grid.col-2 {
    grid-template-columns: 1fr 1fr;
}

.fields-grid.col-1 {
    grid-template-columns: 1fr;
}

.field-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.field-item .field-label {
    font-size: 12px;
    font-weight: 600;
    color: #7b818a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    margin-right: -7px;
}

.field-item .field-value {
    font-size: 13px;
    color: #4a4f53;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    background: #fcfdfe;
    border-radius: 5px;
    border: 1px solid #e8ecf2;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.field-value-home {
    font-size: 13px;
    color: #2c3e50;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    display: flex;
    align-items: center;
}


.field-item .field-value.multiline {
    line-height: 1.6;
    min-height: auto;
    align-items: flex-start;
    padding-top: 0.35rem;
    white-space: pre-line;
}

.field-item .field-value a {
    color: #4a6fa5;
    text-decoration: none;
    word-break: break-all;
}

.field-item .field-value a:hover {
    text-decoration: underline;
}

/* ===== Badge ===== */
.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 900px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #e8f0fb;
    color: #4a6fa5;
}

.badge.green {
    background: #e6f7ee;
    color: #27a060;
}

.badge.orange {
    background: #fff3e0;
    color: #e0840a;
}

.badge.purple {
    background: #f0eaff;
    color: #7c4dcc;
}

.badge.gray {
    background: #eef1f6;
    color: #6b7a8d;
}

/* ===== Repeatable Card ===== */
.sub-card {
    background: #f8f9fb;
    border: 1px solid #e2e7ef;
    border-radius: 6px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.5rem;
}

.sub-card-home {
    background: #f8f9fb;
    border: 1px solid #e2e7ef;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

.sub-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: #4a6fa5;
    margin-bottom: 0.55rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed #d0d7e3;
}

.sub-card .fields-grid {
    margin-bottom: 0;
}

/* ===== Social Links ===== */
.social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    background: #eef2f9;
    border: 1px solid #d0d7e3;
    border-radius: 5px;
    color: #4a6fa5;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.social-link:hover {
    background: #dce7f5;
}

/* ===== Goal Box ===== */
.goal-box {
    background: linear-gradient(135deg, #eef2fb 0%, #f5f0ff 100%);
    border: 1px solid #c8d5ee;
    border-radius: 7px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.goal-box .goal-icon {
    font-size: 1.2rem;
}

.goal-box .goal-text {
    font-size: 15px;
    font-weight: 700;
    color: #2d5090;
}

.goal-box .goal-sub {
    font-size: 13px;
    color: #6b7a8d;
    margin-top: 0.05rem;
}

/* ===== Section spacing ===== */
.section-block {
    margin-bottom: 0;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .profile-card {
        padding: 1rem;
    }

    .fields-grid,
    .fields-grid.col-3 {
        grid-template-columns: 1fr;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-header-info .meta {
        justify-content: center;
    }
}






/* Overlay */
.acm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    direction: rtl;
}

.acm-overlay.acm-open {
    display: flex;
}

/* Box */
.acm-box {
    background: var(--color-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: acm-in .22s ease;
}

@keyframes acm-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Header */
.acm-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.acm-header svg {
    color: #f59e0b;
    flex-shrink: 0;
}

.acm-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Warning text */
.acm-warning-text {
    margin: 1rem 1.5rem .5rem;
    font-size: .9rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.7;
}

/* Section */
.acm-section {
    margin: 0 1.5rem 1rem;
}

.acm-section-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-text, #111);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}

.acm-section-hint {
    font-size: .82rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0 0 .75rem;
}

/* Save list */
.acm-save-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.acm-save-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: transparent;
    text-align: right;
}

.acm-save-item:hover {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary-soft, #eef2ff);
}

.acm-save-item.acm-selected {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary-soft, #eef2ff);
}

.acm-save-item.acm-skip {
    border-style: dashed;
    border-color: #d1d5db;
}

.acm-save-item.acm-skip:hover,
.acm-save-item.acm-skip.acm-selected {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Radio dot */
.acm-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border, #d1d5db);
    flex-shrink: 0;
    margin-top: 2px;
    display: grid;
    place-items: center;
    transition: border-color .15s;
}

.acm-save-item.acm-selected .acm-radio-dot {
    border-color: var(--color-primary, #6366f1);
}

.acm-radio-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #6366f1);
    opacity: 0;
    transition: opacity .15s;
}

.acm-save-item.acm-selected .acm-radio-inner {
    opacity: 1;
}

.acm-save-item.acm-skip.acm-selected .acm-radio-dot {
    border-color: #ef4444;
}

.acm-save-item.acm-skip.acm-selected .acm-radio-inner {
    background: #ef4444;
}

/* Item text */
.acm-item-text {}

.acm-item-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text, #111);
    display: block;
}

.acm-item-sub {
    font-size: .78rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: .15rem;
    display: block;
}

/* Footer */
.acm-footer {
    display: flex;
    justify-content: flex-start;
    gap: .75rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    flex-direction: row-reverse;
}

.acm-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.25rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .15s, background .15s;
}

.acm-btn-confirm {
    background: var(--color-primary, #6366f1);
    color: #fff;
}

.acm-btn-confirm:hover {
    opacity: .88;
}

.acm-btn-cancel {
    background: var(--color-surface-2, #f3f4f6);
    color: var(--color-text, #111);
}

.acm-btn-cancel:hover {
    background: #e5e7eb;
}



.processing-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.processing-content {
    background: white;
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
    max-width: 400px;
    width: 90%;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.processing-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.brain-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.05);
    }
}

.processing-text h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.processing-text p {
    color: #7f8c8d;
    font-size: 0.95rem;
    margin: 4px 0;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4A90D9, #67B26F, #4A90D9);
    background-size: 200% 100%;
    border-radius: 3px;
    animation: progressMove 1.5s ease-in-out infinite;
}

@keyframes progressMove {
    0% {
        width: 0%;
        background-position: 0% 50%;
    }

    50% {
        width: 70%;
        background-position: 100% 50%;
    }

    100% {
        width: 100%;
        background-position: 0% 50%;
    }
}



.rm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.rm-modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    direction: rtl;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.rm-modal-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #888;
}

.rm-modal-close:hover {
    color: #333;
}

.rm-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: #1a1a2e;
}

.rm-modal-subtitle {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.rm-field-group {
    margin-bottom: 1.25rem;
}

.rm-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #333;
}

.rm-required {
    color: #e74c3c;
}

.rm-optional {
    color: #999;
    font-weight: 400;
    font-size: 0.85rem;
}

.rm-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fafafa;
    direction: rtl;
}

.rm-select:focus {
    outline: none;
    border-color: #5b6ee1;
}

.rm-hint {
    font-size: 0.82rem;
    color: #888;
    margin: 0.3rem 0 0;
}

.rm-time-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rm-time-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rm-time-card:has(input:checked) {
    border-color: #5b6ee1;
    background: #f0f2ff;
}

.rm-time-card input[type="radio"] {
    accent-color: #5b6ee1;
    flex-shrink: 0;
}

.rm-time-label {
    display: flex;
    flex-direction: column;
}

.rm-time-label strong {
    font-size: 0.95rem;
    color: #222;
    text-align: center;
}

.rm-time-label small {
    font-size: 0.8rem;
    color: #777;
    margin-top: 1px;
}

.rm-textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    direction: rtl;
    background: #fafafa;
    box-sizing: border-box;
}

.rm-textarea:focus {
    outline: none;
    border-color: #5b6ee1;
}

.rm-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}



.alert-error {
    background: #ffa5a6;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-sm);
    position: fixed;
    top: 17px;
    z-index: 1000;
    width: stretch;
    margin: 0 60px;
    text-align: center;
}



/* ================================================================
   NETWORKING.CSS  –  Light theme · Base: #f5f7fb
   ================================================================ */


/* ──────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────── */
:root {
    --bg-page: #f5f7fb;
    --bg-card: #ffffff;
    --bg-subtle: #f8f9fc;
    --bg-input: #ffffff;

    --border-light: #e4e9f2;
    --border-focus: #6c8ebf;

    --accent: #4a6fa5;
    --accent-soft: #eef2fb;
    --accent-hover: #3a5a90;

    --text-primary: #1e2630;
    --text-secondary: #4a5568;
    --text-on-accent: #ffffff;

    --green: #2f9e62;
    --green-soft: #e8f7ee;
    --purple: #7048cc;
    --purple-soft: #f0eaff;
    --amber: #d97706;
    --amber-soft: #fff4e0;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-card: 0 1px 4px rgba(30, 38, 55, .06), 0 4px 16px rgba(30, 38, 55, .07);
    --shadow-hover: 0 4px 12px rgba(30, 38, 55, .10), 0 12px 32px rgba(30, 38, 55, .10);

    --transition: 0.18s ease;
}

/* ──────────────────────────────────────────────
   PAGE BACKGROUND
   ────────────────────────────────────────────── */
body {
    background-color: var(--bg-page);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.nw-header {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
}

.nw-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.nw-header-content {
    position: relative;
    text-align: center;
}

.nw-header-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: -0.02em;
}

.nw-header-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

/* ══════════════════════════════════════════════
   FILTER CARD
   ══════════════════════════════════════════════ */
.nw-filter-wrapper {
    margin-bottom: 2rem;
}

.nw-filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1.75rem 1.25rem;
}

.nw-filter-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-light);
}

.nw-filter-icon {
    font-size: 1.15rem;
}

.nw-filter-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.nw-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .85rem 1rem;
    align-items: end;
}

.nw-form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.nw-search-group {
    grid-column: span 2;
}

.nw-form-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.nw-form-input,
.nw-form-select {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: .48rem .75rem;
    font-size: .875rem;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
    outline: none;
}

.nw-form-input:focus,
.nw-form-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, .12);
}

.nw-filter-buttons {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    padding-top: .1rem;
}

.nw-btn-search,
.nw-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition), transform .1s;
    white-space: nowrap;
}

.nw-btn-search {
    background: var(--accent);
    color: var(--text-on-accent);
}

.nw-btn-search:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 8px rgba(74, 111, 165, .3);
    transform: translateY(-1px);
}

.nw-btn-reset {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.nw-btn-reset:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════
   RESULTS INFO
   ══════════════════════════════════════════════ */
.nw-results-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.4rem;
    font-size: .85rem;
    color: var(--text-secondary);
}

.nw-results-label {
    font-weight: 600;
}

.nw-results-query {
    background: var(--accent-soft);
    color: var(--accent);
    padding: .18rem .6rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: .8rem;
}

.nw-results-badge {
    background: var(--green-soft);
    color: var(--green);
    padding: .18rem .65rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
}

/* ══════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════ */
.nw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.35rem;
}

/* ══════════════════════════════════════════════
   PROFILE CARD
   ══════════════════════════════════════════════ */
.nw-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.nw-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: #c5d3e8;
}

/* ── Card Header ── */
.nw-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.15rem 1.25rem .9rem;
    background: linear-gradient(135deg, #f0f4fc 0%, #f8f9fc 100%);
    border-bottom: 1px solid var(--border-light);
    gap: .75rem;
}

.nw-card-header-info {
    flex: 1;
    min-width: 0;
}

.nw-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.nw-card-title {
    font-size: .78rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nw-card-gender {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: var(--accent);
    flex-shrink: 0;
    border: 1px solid #d0dcee;
}

/* ── Card Body ── */
.nw-card-body {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* Specialty */
.nw-specialty-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-right: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
}

.nw-specialty-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.nw-specialty-text {
    font-size: .82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* Goal */
.nw-goal-box {
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--purple-soft) 100%);
    border: 1px solid #d5dff5;
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nw-goal-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.nw-goal-text {
    font-size: .82rem;
    font-weight: 600;
    color: #2d4f8a;
    margin: 0;
}

/* Info Items */
.nw-info-item {
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.nw-info-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.nw-info-value {
    font-size: .82rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding: .3rem .6rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    min-height: 30px;
    display: flex;
    align-items: center;
}

.nw-info-value.muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Education sub-item */
.nw-edu-item {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

.nw-edu-degree {
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: .1rem .5rem;
    border-radius: 100px;
}

.nw-edu-field {
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nw-edu-uni {
    font-size: .75rem;
    color: var(--text-muted);
}

/* Stats Row */
.nw-stats-row {
    display: flex;
    justify-content: space-around;
    gap: .5rem;
    margin-top: .2rem;
    padding: .75rem .5rem .6rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.nw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    flex: 1;
}

.nw-stat+.nw-stat {
    border-right: 1px solid var(--border-light);
}

.nw-stat-icon {
    font-size: 1rem;
    line-height: 1;
}

.nw-stat-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
}

.nw-stat-label {
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Card Footer ── */
.nw-card-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.nw-btn-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .55rem 1rem;
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition), transform .1s;
    letter-spacing: .01em;
}

.nw-btn-view:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 10px rgba(74, 111, 165, .3);
    transform: translateY(-1px);
    color: #fff;
}

.nw-btn-view i {
    font-size: .8rem;
}

/* ══════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════ */
.nw-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
}

.nw-empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .6;
}

.nw-empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 .5rem;
}

.nw-empty-state-text {
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════ */
.nw-pagination-wrapper {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.nw-pagination {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nw-pagination-item {}

.nw-pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    cursor: pointer;
}

.nw-pagination-link:hover {
    background: var(--accent-soft);
    border-color: var(--border-focus);
}

.nw-pagination-item.active .nw-pagination-link {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(74, 111, 165, .3);
}

.nw-pagination-item.disabled .nw-pagination-link {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}



/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nw-header {
        padding: 2rem 0 1.75rem;
    }

    .nw-header-title {
        font-size: 1.6rem;
    }

    .nw-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .nw-search-group {
        grid-column: span 2;
    }

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

@media (max-width: 480px) {
    .nw-filter-form {
        grid-template-columns: 1fr;
    }

    .nw-search-group {
        grid-column: span 1;
    }

    .nw-filter-buttons {
        flex-direction: column;
    }

    .nw-btn-search,
    .nw-btn-reset {
        width: 100%;
        justify-content: center;
    }

    .nw-card-header {
        padding: .9rem 1rem .75rem;
    }

    .nw-card-body {
        padding: .85rem 1rem;
    }

    .nw-card-footer {
        padding: .75rem 1rem;
    }
}







/* resume/static/resume/css/resume.css */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background: #f0f4f8;
    color: #1a202c;
    direction: rtl;
}

/* ── wrapper ── */
.rs-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px 60px;
}

/* ── progress bar ── */
.rs-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    gap: 0;
}

.rs-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rs-progress__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #cbd5e0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;
    transition: background .3s;
}

.rs-progress__step--active .rs-progress__num {
    background: #2b6cb0;
    box-shadow: 0 0 0 4px #bee3f8;
}

.rs-progress__label {
    font-size: 12px;
    color: #718096;
}

.rs-progress__step--active .rs-progress__label {
    color: #2b6cb0;
    font-weight: 600;
}

.rs-progress__line {
    flex: 1;
    height: 2px;
    background: #cbd5e0;
    margin: 0 8px;
    margin-bottom: 20px;
}

.rs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
    gap: 1.35rem;
    padding: 2rem 0 3rem;
}

/* ── card ── */
.rs-card {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--pr-transition), transform var(--pr-transition), border-color var(--pr-transition);
}

.rs-card--center {
    text-align: center;
}

.rs-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.rs-card__subtitle {
    color: #718096;
    font-size: 14px;
    margin-bottom: 28px;
}

.rs-card__subtitle--error {
    color: #e53e3e;
}

.rs-card__header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* ── purpose grid ── */
.rs-purpose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.rs-purpose-card {
    cursor: pointer;
}

.rs-purpose-card input {
    display: none;
}

.rs-purpose-card__inner {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: border-color .2s, background .2s, transform .15s;
    background: #f7fafc;
}

.rs-purpose-card:hover .rs-purpose-card__inner {
    border-color: #90cdf4;
    background: #ebf8ff;
}

.rs-purpose-card input:checked~.rs-purpose-card__inner {
    border-color: #2b6cb0;
    background: #ebf8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 108, 176, .15);
}

.rs-purpose-card__icon {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
}

.rs-purpose-card__label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* ── examples box ── */
.rs-examples-box {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.rs-examples-box__title {
    font-size: 14px;
    font-weight: 700;
    color: #2b6cb0;
    margin-bottom: 10px;
}

.rs-examples-box__list {
    padding-right: 20px;
}

.rs-examples-box__list li {
    font-size: 13px;
    color: #2d3748;
    margin-bottom: 4px;
}

/* ── template grid ── */
.rs-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}

.rs-template-card {
    cursor: pointer;
}

.rs-template-card input {
    display: none;
}

.rs-template-card__inner {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    background: #fff;
}

.rs-template-card:hover .rs-template-card__inner {
    border-color: #90cdf4;
}

.rs-template-card input:checked~.rs-template-card__inner {
    border-color: #2b6cb0;
    box-shadow: 0 4px 16px rgba(43, 108, 176, .2);
    transform: translateY(-3px);
}

.rs-template-card--recommended .rs-template-card__inner {
    border-color: #f6ad55;
}

.rs-template-card--recommended input:checked~.rs-template-card__inner {
    border-color: #dd6b20;
}

.rs-tpl-preview {
    height: 110px;
    background: #f7fafc;
    overflow: hidden;
}

.rs-tpl-preview__body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rs-tpl-preview__body--two-col {
    flex-direction: row;
    gap: 0;
}

.rs-tpl-preview__line {
    height: 8px;
    background: #cbd5e0;
    border-radius: 4px;
    width: 80%;
}

.rs-tpl-preview__line--wide {
    width: 95%;
    background: #a0aec0;
}

.rs-tpl-preview__line--short {
    width: 55%;
}

.rs-template-card__label {
    font-size: 15px;
    font-weight: 700;
    padding: 10px 12px 4px;
    color: #2d3748;
}

.rs-template-card__desc {
    font-size: 12px;
    color: #718096;
    padding: 0 12px 14px;
    line-height: 1.6;
}

/* ── fields ── */
.rs-field {
    margin-bottom: 20px;
}

.rs-field--wide {
    width: 100%;
}

.rs-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #4a5568;
}

.rs-field__input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #2d3748;
    resize: vertical;
    transition: border-color .2s;
}

.rs-field__input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px #bee3f8;
}

/* ── buttons ── */
.rs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background .2s, transform .15s;
}

.rs-btn--primary {
    background: #2b6cb0;
    color: #fff;
}

.rs-btn--primary:hover {
    background: #2c5282;
    transform: translateY(-1px);
}

.rs-btn--ghost {
    background: transparent;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.rs-btn--ghost:hover {
    background: #f7fafc;
}

.rs-btn--danger {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #fed7d7;
}

.rs-btn--danger:hover {
    background: #fed7d7;
}

.rs-btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}

.rs-btn--large {
    padding: 16px 40px;
    font-size: 17px;
    border-radius: 12px;
}

.rs-btn--download {
    margin: 24px auto;
    display: inline-flex;
}

/* ── actions ── */
.rs-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f4f8;
}

.rs-actions--center {
    justify-content: center;
}

/* ── alert ── */
.rs-alert {
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.rs-alert--error,
.rs-alert--danger {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    color: #c53030;
}

.rs-alert--success {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}

.rs-alert--warning {
    background: #fffff0;
    border: 1px solid #faf089;
    color: #744210;
}

/* ── download page ── */
.rs-success-icon,
.rs-error-icon,
.rs-loading-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
}

.rs-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 28px 0;
}

.rs-info-box {
    background: #f7fafc;
    border-radius: 10px;
    padding: 20px 24px;
    text-align: right;
    margin-bottom: 8px;
}

.rs-info-box h4 {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
}

.rs-info-box ul {
    padding-right: 20px;
}

.rs-info-box li {
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 6px;
    line-height: 1.6;
}

/* ── history ── */
.rs-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rs-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f7fafc;
    gap: 12px;
}

.rs-history-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rs-history-item__purpose {
    font-weight: 600;
    font-size: 14px;
    color: #2d3748;
}

.rs-history-item__tpl,
.rs-history-item__date {
    font-size: 12px;
    color: #718096;
}

.rs-history-item__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rs-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.rs-badge--green {
    background: #c6f6d5;
    color: #276749;
}

.rs-badge--red {
    background: #fed7d7;
    color: #c53030;
}

.rs-badge--gray {
    background: #e2e8f0;
    color: #4a5568;
}

.rs-empty {
    text-align: center;
    padding: 48px 20px;
    color: #a0aec0;
}

.rs-empty p {
    margin-bottom: 20px;
    font-size: 15px;
}

























:root {
    --rs-bg: #f5f7fb;
    --rs-surface: #ffffff;
    --rs-surface-soft: #fcfdfe;
    --rs-primary: #4a6fa5;
    --rs-primary-dark: #355685;
    --rs-primary-light: #e8f0fb;
    --rs-text: #25364a;
    --rs-text-muted: #6b7a8d;
    --rs-border: #dfe6f0;
    --rs-border-strong: #cfd8e6;
    --rs-shadow: 0 10px 30px rgba(47, 79, 124, 0.08);
    --rs-shadow-hover: 0 16px 34px rgba(47, 79, 124, 0.14);
    --rs-danger: #c85151;
    --rs-danger-light: #fdeeee;
    --rs-warning: #e39a18;
    --rs-warning-light: #fff4dd;
    --rs-dark: #314255;
}

.rs-page {
    background: var(--rs-bg);
    min-height: 100vh;
    color: var(--rs-text);
    padding: 35px 25px;
}

.rs-stack-sm>*+* {
    margin-top: 0.75rem;
}

.rs-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}


.rs-page-header {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.rs-page-header-compact {
    margin-bottom: 1.25rem;
}

.rs-page-title {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.rs-page-subtitle {
    font-size: 1.05rem;
    color: #d5d5d5;
    margin-bottom: 12px;
}


.rs-page-title-create {
    font-size: 38px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 0.25rem;
}

.rs-page-subtitle-create {
    font-size: 1.05rem;
    color: #8a8a8a;
    margin-bottom: 12px;
}

.rs-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: 18px;
    box-shadow: var(--rs-shadow);
    overflow: hidden;
}

.rs-soft-card {
    background: linear-gradient(180deg, #fbfcff 0%, #f8fafe 100%);
}

.rs-card-header {
    background: transparent;
    border-bottom: 1px solid var(--rs-border);
    padding: 1rem 1.25rem;
}

.rs-card-body {
    padding: 1.25rem;
}

.rs-card-body-row {
    gap: 15px;
    display: flex;
}

.rs-card-footer {
    padding: 1rem 1.25rem 1.25rem;
    background: transparent;
    border-top: 1px solid var(--rs-border);
}

.rs-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--rs-text);
}

.rs-card-meta,
.rs-card-date {
    color: var(--rs-text-muted);
    font-size: 0.88rem;
}

.rs-card-section-title {
    font-size: 1.03rem;
    font-weight: 800;
    color: var(--rs-primary);
    margin-bottom: 0;
}

.rs-card-section-subtitle {
    font-size: 1rem;
    font-weight: 800;
    color: var(--rs-primary);
    margin-bottom: 1rem;
}

.rs-field-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
}

.rs-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #7b818a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.rs-field-item input[type="text"],
.rs-field-item input[type="email"],
.rs-field-item input[type="number"],
.rs-field-item textarea,
.rs-field-item select,
.rs-field-item .form-control,
.rs-field-item .form-select {
    width: 100%;
    min-height: 46px;
    background: var(--rs-surface-soft);
    border: 1px solid #e3e9f2;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    color: var(--rs-text);
    transition: 0.2s ease;
    box-shadow: none;
}

.rs-field-item textarea:focus,
.rs-field-item input:focus,
.rs-field-item select:focus,
.rs-field-item .form-control:focus,
.rs-field-item .form-select:focus {
    border-color: var(--rs-primary);
    background: #fff;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.12);
    outline: none;
}

.rs-help-text {
    color: var(--rs-text-muted);
    font-size: 0.88rem;
    line-height: 1.8;
    margin-top: 0.75rem;
}

.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.18s ease;
    cursor: pointer;
}

.rs-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.rs-btn-primary {
    background: var(--rs-primary-dark);
    border-color: var(--rs-primary-dark);
    color: #fff;
}

.rs-btn-primary:hover {
    background: #1a437d;
    color: #fff;
}

.rs-btn-danger {
    background: var(--rs-danger);
    border-color: var(--rs-danger);
    color: #fff;
}

.rs-btn-danger:hover {
    background: #b14444;
    border-color: #b14444;
    color: #fff;
}

.rs-btn-outline-primary {
    background: #fff;
    border-color: var(--rs-primary);
    color: var(--rs-primary);
}

.rs-btn-outline-primary:hover {
    background: var(--rs-primary-light);
    color: var(--rs-primary-dark);
}

.rs-btn-outline-secondary {
    background: #fff;
    border-color: var(--rs-border-strong);
    color: var(--rs-dark);
}

.rs-btn-outline-secondary:hover {
    background: #f1f4f9;
    color: var(--rs-dark);
}

.rs-btn-outline-danger {
    background: #fff;
    border-color: #e6bcbc;
    color: var(--rs-danger);
}

.rs-btn-outline-danger:hover {
    background: var(--rs-danger-light);
    color: #a63f3f;
}

.rs-btn-outline-warning {
    background: #fff;
    border-color: #f0d39d;
    color: #a86b08;
}

.rs-btn-outline-warning:hover {
    background: #fff3dc;
    color: #8e5a06;
}

.rs-btn-outline-dark {
    background: #fff;
    border-color: #cfd6df;
    color: #445468;
}

.rs-btn-outline-dark:hover {
    background: #eef2f7;
    color: #2c3d51;
}

.rs-btn-sm {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    font-size: 0.84rem;
    border-radius: 10px;
}


.rs-btn-wide {
    min-width: 180px;
}

.rs-flex-1 {
    flex: 1;
}

.rs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.rs-badge-blue {
    background: #e8f0fb;
    color: var(--rs-primary);
}

.rs-badge-orange {
    background: #fff3e0;
    color: #d28000;
}

.rs-badge-gray {
    background: #eef1f6;
    color: #6b7a8d;
}

.rs-badge-red {
    background: #fdeaea;
    color: #bf3d3d;
}

.rs-inline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.rs-action-row {
    display: flex;
    gap: 0.55rem;
}

.rs-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--rs-surface);
    border: 1px dashed var(--rs-border-strong);
    border-radius: 20px;
    box-shadow: var(--rs-shadow);
}

.rs-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.rs-empty-title {
    font-weight: 800;
    color: var(--rs-text);
}

.rs-empty-text {
    color: var(--rs-text-muted);
    margin-bottom: 1rem;
}

.rs-resume-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rs-resume-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--rs-shadow-hover);
}

.rs-resume-card-top {
    height: 8px;
}

.rs-resume-stripe-classic {
    background: linear-gradient(90deg, #4a6fa5, #6e90c2);
}

.rs-resume-stripe-modern {
    background: linear-gradient(90deg, #334e75, #4a6fa5);
}

.rs-resume-stripe-academic {
    background: linear-gradient(90deg, #3d618f, #6a8fbe);
}

.rs-resume-stripe-minimal {
    background: linear-gradient(90deg, #4d5f77, #7b8ea8);
}

.rs-resume-card-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.rs-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}

#resumeForm {
    gap: 20px;
    display: grid;
}

.rs-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.rs-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e7edf6;
    color: #7a8797;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.rs-step-label {
    font-size: 0.76rem;
    color: #7a8797;
    font-weight: 600;
}

.rs-step.rs-active .rs-step-num {
    background: var(--rs-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(74, 111, 165, 0.25);
}

.rs-step.rs-active .rs-step-label {
    color: var(--rs-primary);
}

.rs-step-line {
    flex: 1;
    height: 2px;
    background: #d9e1ed;
    margin: 0 0 20px;
}

.rs-template-card {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.rs-template-radio {
    display: none;
}

.rs-template-card-inner {
    height: 100%;
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
    transition: all 0.2s ease;
}

.rs-template-card:hover .rs-template-card-inner {
    border-color: var(--rs-primary);
    box-shadow: 0 10px 24px rgba(74, 111, 165, 0.09);
}

.rs-template-selected {
    border-color: var(--rs-primary) !important;
    background: #f7faff;
    box-shadow: 0 10px 24px rgba(74, 111, 165, 0.12);
}

.rs-template-preview {
    height: 64px;
    border-radius: 12px;
    margin-bottom: 0.9rem;
}

.rs-template-swatch {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.rs-template-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #d7deea;
    display: inline-block;
}

.rs-template-title {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--rs-text);
    margin-bottom: 0.35rem;
}

.rs-template-desc {
    font-size: 0.82rem;
    color: var(--rs-text-muted);
    line-height: 1.8;
    margin-bottom: 0.7rem;
}

.rs-template-check {
    color: var(--rs-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.rs-check-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 8px 12px;
    border: 1px solid var(--rs-border);
    border-radius: 12px;
    background: #fbfcff;
    transition: all 0.16s ease;
    margin: 5px 7px;
}

.rs-check-card:hover {
    background: #f4f8fe;
    border-color: #cfdcf0;
}

.rs-check-card input[type="checkbox"] {
    accent-color: var(--rs-primary);
    transform: scale(1.08);
}

.rs-check-label {
    width: 100%;
    margin: 0;
    color: var(--rs-text);
    font-weight: 600;
    cursor: pointer;
}

.rs-switch-row {
    display: flex;
    align-items: center;
}

.rs-switch-row input[type="checkbox"] {
    accent-color: var(--rs-primary);
}

.rs-switch-label {
    font-weight: 700;
    color: var(--rs-text);
    margin: 0 5px;
}

.rs-card-body-check-card {
    display: ruby;
}

.rs-stats-grid {
    display: flex;
    gap: 10px;
    width: 100%;
}

.rs-stats-grid .rs-stat-box {
    height: 100%;
    width: 100%;
}

.rs-stat-box {
    background: #fbfcff;
    border: 1px solid var(--rs-border);
    border-radius: 16px;
    padding: 1rem 0.85rem;
    text-align: center;
}

.rs-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--rs-primary-light);
    color: var(--rs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 0.55rem;
}

.rs-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rs-text);
    line-height: 1.2;
}

.rs-stat-label {
    font-size: 0.78rem;
    color: var(--rs-text-muted);
    margin-top: 0.25rem;
}

.rs-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rs-sidebar-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: 20px;
    box-shadow: var(--rs-shadow);
    padding: 1.25rem;
}

.rs-sidebar-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rs-border);
    margin-bottom: 1rem;
}

.rs-sidebar-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--rs-text);
}

.rs-sidebar-section+.rs-sidebar-section {
    border-top: 1px solid var(--rs-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.rs-sidebar-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--rs-text-muted);
    margin-bottom: 0.85rem;
    letter-spacing: 0.04em;
}

.rs-preview-shell {
    background: #e9eef6;
    border-radius: 22px;
    padding: 1.25rem;
    min-height: 100%;
}

.rs-paper {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    padding: 48px 56px;
    box-shadow: 0 18px 50px rgba(42, 60, 92, 0.12);
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    font-size: 13.5px;
    direction: rtl;
    text-align: right;
    line-height: 1.8;
    color: #222;
}

.rs-paper-header {
    margin-bottom: 26px;
}

.rs-paper-name {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.rs-paper-subtitle {
    font-size: 0.96rem;
    margin-bottom: 8px;
}

.rs-paper-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.83rem;
    color: #5d6977;
}

.rs-paper-section {
    margin-bottom: 22px;
}

.rs-paper-section-title {
    font-size: 1rem;
    font-weight: 800;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.rs-paper-item {
    margin-bottom: 12px;
}

.rs-paper-item-numbered {
    display: flex;
    gap: 8px;
}

.rs-paper-item-num {
    min-width: 22px;
    font-weight: 800;
    color: #617184;
}

.rs-paper-item-title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #1f2d3d;
}

.rs-paper-item-meta {
    font-size: 0.82rem;
    color: #667587;
    margin-top: 2px;
}

.rs-paper-body {
    font-size: 0.88rem;
    color: #43515f;
    margin-bottom: 0;
    line-height: 1.9;
}

.rs-paper-header-classic .rs-paper-name,
.rs-paper-section-title-classic {
    color: #355685;
}

.rs-paper-header-classic .rs-paper-subtitle {
    color: #4a6fa5;
}

.rs-paper-section-title-classic {
    border-bottom: 2px solid #4a6fa5;
}

.rs-paper-header-modern .rs-paper-name,
.rs-paper-section-title-modern {
    color: #304a6f;
}

.rs-paper-header-modern .rs-paper-subtitle {
    color: #4a6fa5;
}

.rs-paper-section-title-modern {
    border-bottom: 2px solid #6f92c7;
}

.rs-paper-header-academic .rs-paper-name,
.rs-paper-section-title-academic {
    color: #3c5d87;
}

.rs-paper-header-academic .rs-paper-subtitle {
    color: #6587b2;
}

.rs-paper-section-title-academic {
    border-bottom: 2px solid #6587b2;
}

.rs-paper-header-minimal .rs-paper-name,
.rs-paper-section-title-minimal {
    color: #2b3745;
}

.rs-paper-header-minimal .rs-paper-subtitle {
    color: #697889;
}

.rs-paper-section-title-minimal {
    border-bottom: 1px solid #b5c0cf;
}

.rs-quartile {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.rs-quartile-Q1 {
    background: #e4f5ec;
    color: #177245;
}

.rs-quartile-Q2 {
    background: #e7f0fd;
    color: #225ea8;
}

.rs-quartile-Q3 {
    background: #fff4dd;
    color: #9d6a05;
}

.rs-quartile-Q4 {
    background: #fdeaea;
    color: #a53b3b;
}

.rs-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.rs-lang-chip {
    font-size: 0.84rem;
    background: #f4f7fb;
    border: 1px solid #e0e7f1;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    color: #3d4d5f;
}

.rs-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.25rem;
}

.rs-radio-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fbfcff;
    border: 1px solid var(--rs-border);
    padding: 8px 10px;
    border-radius: 12px;
}

.rs-radio-item input[type="radio"] {
    accent-color: var(--rs-primary);
}

.rs-danger-card {
    border-color: #f0d2d2;
}

.rs-danger-header {
    background: linear-gradient(135deg, #d96565 0%, #c85151 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.rs-confirm-text {
    color: var(--rs-text);
    font-size: 0.96rem;
}

.rs-confirm-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rs-dark);
    margin-bottom: 0.6rem;
}

.rs-danger-note {
    color: var(--rs-danger);
    font-size: 0.84rem;
    margin-bottom: 0;
}

.rs-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rs-alert {
    border-radius: 14px;
}

@media (max-width: 991px) {

    .rs-page-header,
    .rs-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rs-paper {
        padding: 30px 24px;
    }
}

@media (max-width: 767px) {
    .rs-step-label {
        font-size: 0.68rem;
    }

    .rs-step-line {
        margin-bottom: 18px;
    }

    .rs-action-row {
        flex-wrap: wrap;
    }

    .rs-preview-shell {
        padding: 0.75rem;
    }
}

@media (max-width: 600px) {
    .rs-page-title {
        font-size: 1.45rem;
    }

    .rs-paper-contact {
        flex-direction: column;
        gap: 6px;
    }

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





/* file: project/static/project/css/project.css */

/* ================================================================
   PROJECT.CSS – Light theme · Base: #f5f7fb
   Prefix: pr-
   ================================================================ */

:root {
    --pr-bg-page: #f5f7fb;
    --pr-bg-card: #ffffff;
    --pr-bg-subtle: #f8f9fc;
    --pr-bg-input: #ffffff;

    --pr-border-light: #e4e9f2;
    --pr-border-focus: #6c8ebf;

    --pr-accent: #4a6fa5;
    --pr-accent-soft: #eef2fb;
    --pr-accent-hover: #3a5a90;

    --pr-text-primary: #1e2630;
    --pr-text-secondary: #4a5568;
    --pr-text-muted: #8a96a8;
    --pr-text-on-accent: #ffffff;

    --pr-green: #2f9e62;
    --pr-green-soft: #e8f7ee;

    --pr-purple: #7048cc;
    --pr-purple-soft: #f0eaff;

    --pr-amber: #d97706;
    --pr-amber-soft: #fff4e0;

    --pr-red: #dc2626;
    --pr-red-soft: #fee2e2;

    --pr-radius-sm: 6px;
    --pr-radius-md: 10px;
    --pr-radius-lg: 14px;
    --pr-radius-xl: 20px;

    --pr-shadow-card: 0 1px 4px rgba(30, 38, 55, .06), 0 4px 16px rgba(30, 38, 55, .07);
    --pr-shadow-hover: 0 4px 12px rgba(30, 38, 55, .10), 0 12px 32px rgba(30, 38, 55, .10);

    --pr-transition: 0.18s ease;
}

body {
    background-color: var(--pr-bg-page);
}

/* Container */

.pr-container {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.pr-container-narrow {
    width: min(860px, calc(100% - 2rem));
}

.pr-main {
    padding: 2rem 0 3rem;
}

/* Header */

.pr-header,
.pr-detail-header {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
}

.pr-header::before,
.pr-detail-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.pr-header-content,
.pr-detail-header-content {
    position: relative;
    text-align: center;
}

.pr-header-title,
.pr-detail-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .6rem;
    letter-spacing: -0.02em;
}

.pr-header-subtitle,
.pr-detail-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    line-height: 1.9;
}

.pr-header-actions,
.pr-detail-actions {
    margin-top: 1.3rem;
    display: flex;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
}

/* Buttons */

.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .58rem 1.15rem;
    border-radius: var(--pr-radius-sm);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background var(--pr-transition), box-shadow var(--pr-transition), transform .1s, color var(--pr-transition);
    white-space: nowrap;
    line-height: 1.4;
}

.pr-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.pr-btn-primary {
    background: var(--pr-accent);
    color: var(--pr-text-on-accent);
}

.pr-btn-primary:hover {
    background: var(--pr-accent-hover);
    color: #fff;
    box-shadow: 0 2px 10px rgba(74, 111, 165, .3);
}

.pr-btn-muted {
    background: var(--pr-bg-subtle);
    color: var(--pr-text-secondary);
    border: 1px solid var(--pr-border-light);
}

.pr-btn-muted:hover {
    background: var(--pr-border-light);
    color: var(--pr-text-primary);
}

.pr-btn-danger {
    background: var(--pr-red-soft);
    color: var(--pr-red);
    border: 1px solid #fecaca;
}

.pr-btn-danger:hover {
    background: var(--pr-red);
    color: #fff;
}

.pr-btn-light {
    background: #fff;
    color: var(--pr-accent);
}

.pr-btn-light:hover {
    background: var(--pr-accent-soft);
    color: var(--pr-accent-hover);
}

.pr-btn-outline-light {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.pr-btn-outline-light:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.pr-btn-block {
    width: 100%;
}

/* Filter */

.pr-filter-card {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    padding: 1.5rem 1.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.pr-filter-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--pr-border-light);
}

.pr-filter-title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--pr-text-primary);
    margin: 0;
}

.pr-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: .9rem 1rem;
    align-items: end;
}

.pr-search-group {
    grid-column: span 2;
}

.pr-filter-buttons {
    display: flex;
    gap: .6rem;
    align-items: end;
}

/* Forms */

.pr-form-card,
.pr-delete-card {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    padding: 1.6rem;
}

.pr-form-section {
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--pr-border-light);
}

.pr-form-section:last-of-type {
    border-bottom: none;
}

.pr-form-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pr-text-primary);
    margin: 0 0 1rem;
}

.pr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pr-form-group {
    display: flex;
    flex-direction: column;
    gap: .38rem;
    margin-bottom: 1rem;
}

.pr-form-label {
    font-size: .76rem;
    font-weight: 800;
    color: var(--pr-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pr-form-input,
.pr-form-select,
.pr-form-textarea {
    background: var(--pr-bg-input);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-sm);
    padding: .58rem .75rem;
    font-size: .9rem;
    color: var(--pr-text-primary);
    transition: border-color var(--pr-transition), box-shadow var(--pr-transition);
    width: 100%;
    outline: none;
}

.pr-form-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.9;
}

.pr-form-input:focus,
.pr-form-select:focus,
.pr-form-textarea:focus {
    border-color: var(--pr-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, .12);
}

.pr-help-text {
    color: var(--pr-text-muted);
    font-size: .75rem;
}

.pr-checkbox-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--pr-text-secondary);
    cursor: pointer;
}

.pr-form-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Results */

.pr-results-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.4rem;
    font-size: .88rem;
    color: var(--pr-text-secondary);
}

.pr-results-label {
    font-weight: 700;
}

.pr-results-query {
    background: var(--pr-accent-soft);
    color: var(--pr-accent);
    padding: .18rem .6rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: .8rem;
}

.pr-results-badge {
    background: var(--pr-green-soft);
    color: var(--pr-green);
    padding: .18rem .65rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 800;
}

/* Grid & Card */

.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
    gap: 1.35rem;
}

.pr-card {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--pr-transition), transform var(--pr-transition), border-color var(--pr-transition);
}

.pr-card:hover {
    box-shadow: var(--pr-shadow-hover);
    transform: translateY(-3px);
    border-color: #c5d3e8;
}

.pr-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.15rem 1.25rem .95rem;
    background: linear-gradient(135deg, #f0f4fc 0%, #f8f9fc 100%);
    border-bottom: 1px solid var(--pr-border-light);
    gap: .75rem;
}

.pr-card-title-box {
    min-width: 0;
}

.pr-card-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 .25rem;
    color: var(--pr-text-primary);
    line-height: 1.6;
}

.pr-card-title a {
    color: inherit;
    text-decoration: none;
}

.pr-card-title a:hover {
    color: var(--pr-accent);
}

.pr-card-owner {
    font-size: .78rem;
    color: var(--pr-text-muted);
    margin: 0;
}

.pr-featured-badge,
.pr-status-badge {
    background: var(--pr-amber-soft);
    color: var(--pr-amber);
    border: 1px solid #fde3b5;
    border-radius: 100px;
    padding: .18rem .55rem;
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pr-status-inactive {
    background: var(--pr-red-soft);
    color: var(--pr-red);
    border-color: #fecaca;
}

.pr-card-body {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pr-card-description {
    font-size: .86rem;
    color: var(--pr-text-secondary);
    line-height: 1.9;
    margin: 0;
}

.pr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.pr-tag {
    display: inline-flex;
    align-items: center;
    padding: .22rem .58rem;
    border-radius: 100px;
    font-size: .73rem;
    font-weight: 800;
}

.pr-tag-blue {
    background: var(--pr-accent-soft);
    color: var(--pr-accent);
}

.pr-tag-purple {
    background: var(--pr-purple-soft);
    color: var(--pr-purple);
}

.pr-tag-green {
    background: var(--pr-green-soft);
    color: var(--pr-green);
}

.pr-info-row {
    display: flex;
    gap: .35rem;
    font-size: .82rem;
}

.pr-info-label {
    color: var(--pr-text-muted);
    font-weight: 800;
}

.pr-info-value {
    color: var(--pr-text-secondary);
}

.pr-keywords {
    background: var(--pr-bg-subtle);
    border: 1px solid var(--pr-border-light);
    border-right: 3px solid var(--pr-accent);
    border-radius: var(--pr-radius-sm);
    padding: .5rem .7rem;
    color: var(--pr-text-secondary);
    font-size: .82rem;
    line-height: 1.8;
}

.pr-keywords-block {
    margin: 0;
}

/* file: project/static/project/css/project.css */

.pr-stats-row {
    display: flex;
    justify-content: space-around;
    gap: .5rem;
    margin-top: .2rem;
    padding: .75rem .5rem .6rem;
    background: var(--pr-bg-subtle);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-sm);
}

.pr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    flex: 1;
}

.pr-stat+.pr-stat {
    border-right: 1px solid var(--pr-border-light);
}

.pr-stat-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pr-accent);
    line-height: 1.2;
}

.pr-stat-label {
    font-size: .7rem;
    color: var(--pr-text-muted);
    font-weight: 600;
}

.pr-card-footer {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--pr-border-light);
    background: var(--pr-bg-subtle);
}

.pr-card-footer-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* Empty state */

.pr-empty-state {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    padding: 2.2rem 1.4rem;
    text-align: center;
}

.pr-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}

.pr-empty-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pr-text-primary);
    margin: 0 0 .45rem;
}

.pr-empty-text {
    font-size: .9rem;
    color: var(--pr-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.9;
}

/* Pagination */

.pr-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pr-page-link,
.pr-page-current {
    padding: .5rem .9rem;
    border-radius: var(--pr-radius-sm);
    font-size: .85rem;
}

.pr-page-link {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    color: var(--pr-text-secondary);
    text-decoration: none;
}

.pr-page-link:hover {
    background: var(--pr-accent-soft);
    color: var(--pr-accent);
}

.pr-page-current {
    background: var(--pr-accent);
    color: #fff;
    font-weight: 700;
}

/* Detail page */

.pr-breadcrumb {
    display: flex;
    justify-content: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}

.pr-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.pr-breadcrumb a:hover {
    text-decoration: underline;
}

.pr-detail-meta {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem;
}

.pr-detail-meta span {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.pr-detail-note {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    padding: .55rem .95rem;
    border-radius: var(--pr-radius-sm);
    font-size: .85rem;
    font-weight: 700;
}

.pr-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pr-detail-content,
.pr-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pr-panel,
.pr-side-card {
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-card);
    padding: 1.3rem;
}

.pr-panel-title,
.pr-side-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--pr-text-primary);
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--pr-border-light);
}

.pr-text-content {
    color: var(--pr-text-secondary);
    line-height: 2;
    font-size: .92rem;
}

.pr-side-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--pr-border-light);
    font-size: .84rem;
}

.pr-side-row:last-child {
    border-bottom: none;
}

.pr-side-row span {
    color: var(--pr-text-muted);
    font-weight: 700;
}

.pr-side-row strong {
    color: var(--pr-text-primary);
    text-align: left;
    font-weight: 700;
}

.pr-owner-box {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.pr-owner-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pr-accent-soft);
    color: var(--pr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    border: 1px solid #d0dcee;
    flex-shrink: 0;
}

.pr-owner-box strong {
    display: block;
    color: var(--pr-text-primary);
    font-size: .92rem;
    margin-bottom: .15rem;
}

.pr-owner-box span {
    color: var(--pr-text-muted);
    font-size: .8rem;
}

.pr-member-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pr-member-item {
    background: var(--pr-bg-subtle);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-sm);
    padding: .65rem .8rem;
}

.pr-member-item strong {
    display: block;
    color: var(--pr-text-primary);
    font-size: .85rem;
    margin-bottom: .2rem;
}

.pr-member-item span {
    color: var(--pr-text-muted);
    font-size: .78rem;
}

.pr-timeline {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.pr-timeline-item {
    background: var(--pr-bg-subtle);
    border: 1px solid var(--pr-border-light);
    border-right: 3px solid var(--pr-accent);
    border-radius: var(--pr-radius-sm);
    padding: .85rem .95rem;
}

.pr-timeline-title {
    margin: 0 0 .2rem;
    font-size: .9rem;
    font-weight: 800;
    color: var(--pr-text-primary);
}

.pr-timeline-date {
    display: inline-block;
    margin-bottom: .45rem;
    font-size: .75rem;
    color: var(--pr-text-muted);
    font-weight: 700;
}

.pr-timeline-text {
    margin: 0;
    color: var(--pr-text-secondary);
    line-height: 1.9;
    font-size: .85rem;
}

.pr-file-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pr-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: var(--pr-bg-subtle);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-sm);
    padding: .75rem .9rem;
    text-decoration: none;
    color: var(--pr-text-secondary);
}

.pr-file-item:hover {
    border-color: #c5d3e8;
    background: #f4f7fd;
}

.pr-file-item strong {
    flex: 1;
    color: var(--pr-text-primary);
    font-size: .85rem;
}

.pr-file-item small {
    color: var(--pr-text-muted);
    font-size: .74rem;
}

/* Apply page */

.pr-apply-project-box {
    background: linear-gradient(135deg, #f0f4fc 0%, #f8f9fc 100%);
    border: 1px solid var(--pr-border-light);
    border-radius: var(--pr-radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}

.pr-apply-project-box h2 {
    margin: 0 0 .35rem;
    color: var(--pr-text-primary);
    font-size: 1rem;
    font-weight: 800;
}

.pr-apply-project-box p {
    margin: 0;
    color: var(--pr-text-secondary);
    font-size: .86rem;
    line-height: 1.8;
}

/* Delete page */

.pr-delete-card {
    text-align: center;
}

.pr-delete-title {
    margin: 0 0 .7rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pr-text-primary);
}

.pr-delete-text {
    margin: 0 0 1.2rem;
    color: var(--pr-text-secondary);
    line-height: 1.9;
    font-size: .9rem;
}

/* Alerts */

.pr-alert {
    border-radius: var(--pr-radius-sm);
    padding: .8rem .95rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    line-height: 1.8;
}

.pr-alert-danger {
    background: var(--pr-red-soft);
    color: var(--pr-red);
    border: 1px solid #fecaca;
}

/* Django error list */

.errorlist {
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--pr-red);
    font-size: .78rem;
    font-weight: 700;
}

.errorlist li {
    margin: 0;
}

/* Responsive */

@media (max-width: 992px) {
    .pr-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .pr-header-title,
    .pr-detail-title {
        font-size: 1.7rem;
    }

    .pr-filter-form,
    .pr-form-grid {
        grid-template-columns: 1fr;
    }

    .pr-search-group {
        grid-column: span 1;
    }

    .pr-filter-buttons,
    .pr-form-actions,
    .pr-card-footer-actions {
        flex-direction: column;
    }

    .pr-filter-buttons .pr-btn,
    .pr-form-actions .pr-btn,
    .pr-card-footer-actions .pr-btn {
        width: 100%;
    }

    .pr-stats-row {
        gap: .2rem;
    }
}

@media (max-width: 576px) {
    .pr-container {
        width: min(100% - 1rem, 1180px);
    }

    .pr-header,
    .pr-detail-header {
        padding: 2.2rem 0 2rem;
    }

    .pr-filter-card,
    .pr-form-card,
    .pr-panel,
    .pr-side-card,
    .pr-delete-card {
        padding: 1rem;
    }

    .pr-card-header,
    .pr-card-body,
    .pr-card-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pr-detail-meta {
        gap: .4rem;
    }

    .pr-detail-meta span {
        font-size: .72rem;
    }
}











/* ================================================================
   EVENT_HUB.CSS  –  Light theme · Base: #f5f7fb
   ================================================================ */

:root {
    --bg-page: #f5f7fb;
    --bg-card: #ffffff;
    --bg-subtle: #f8f9fc;
    --bg-input: #ffffff;

    --border-light: #e4e9f2;
    --border-focus: #6c8ebf;

    --accent: #4a6fa5;
    --accent-soft: #eef2fb;
    --accent-hover: #3a5a90;

    --text-primary: #1e2630;
    --text-secondary: #4a5568;
    --text-on-accent: #ffffff;

    --green: #2f9e62;
    --green-soft: #e8f7ee;
    --purple: #7048cc;
    --purple-soft: #f0eaff;
    --amber: #d97706;
    --amber-soft: #fff4e0;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-card: 0 1px 4px rgba(30, 38, 55, .06), 0 4px 16px rgba(30, 38, 55, .07);
    --shadow-hover: 0 4px 12px rgba(30, 38, 55, .10), 0 12px 32px rgba(30, 38, 55, .10);

    --transition: 0.18s ease;
}



.eh-page {
    min-height: 100vh;
}

.eh-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.eh-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.eh-header {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.eh-header-detail {
    padding-bottom: 1.4rem;
}

.eh-title {
    color: #fff;
    margin: 0 0 .4rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
}

.eh-subtitle {
    margin: 0 auto;
    color: rgba(255, 255, 255, .82);
    font-size: .98rem;
    max-width: 60rem;
}

.eh-title-detail {
    color: #000000;
    margin: 0 0 .4rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
}

.eh-subtitle-detail {
    margin: 0;
    color: #707070;
    font-size: .98rem;
    max-width: 60rem;
}

.eh-back {
    display: inline-flex;
    margin-bottom: .9rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    padding: .3rem 0;
}

.eh-content {
    padding: 1.5rem 25px 2.5rem;
}

.eh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.eh-card,
.eh-panel,
.eh-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.eh-card {
    padding: 1rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}

.eh-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: #c5d3e8;
}


.eh-card-inf {
    flex: 1;
}

.eh-card-head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}

.eh-badge,
.eh-meta,
.eh-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .22rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}

.eh-badge {
    background: var(--accent-soft);
    color: var(--accent);
}

.eh-meta {
    background: var(--green-soft);
    color: var(--green);
}

.eh-card-title {
    margin: 0 0 .55rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.eh-card-desc {
    margin: 0 0 .85rem;
    color: var(--text-secondary);
    font-size: .92rem;
}

.eh-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.eh-chip {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.eh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .65rem 1rem;
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 700;
}

.eh-btn:hover {
    background: var(--accent-hover);
}

.eh-empty {
    padding: 1.2rem;
    color: var(--text-secondary);
}

.eh-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.eh-panel {
    padding: 1rem 1.1rem;
}

.eh-panel-full {
    margin-bottom: 1rem;
}

.eh-section-title {
    margin: 0 0 .9rem;
    font-size: 1.05rem;
}

.eh-subsection-title {
    margin: 1rem 0 .45rem;
    font-size: .95rem;
    color: var(--accent);
}

.eh-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: .92rem;
}

.eh-dl {
    display: grid;
    gap: .7rem;
}

.eh-dl div {
    padding: .75rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.eh-dl dt {
    font-size: .75rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.eh-dl dd {
    margin: 0;
    color: var(--text-secondary);
    font-size: .92rem;
}

.eh-steps {
    display: grid;
    gap: .85rem;
}

.eh-step {
    padding: .8rem .85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.eh-step-head {
    font-weight: 800;
    margin-bottom: .35rem;
    color: var(--text-primary);
}

.eh-list {
    margin: .35rem 0 0;
    padding: 0 1.1rem 0 0;
    color: var(--text-secondary);
}

.eh-list li {
    margin-bottom: .35rem;
}

.eh-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {

    .eh-detail-layout,
    .eh-two-col {
        grid-template-columns: 1fr;
    }

    .eh-title {
        font-size: 1.65rem;
    }
}





:root {
    --navy: #0d1b2a;
    --teal: #5b8def;
    --teal-lt: #21a496;
    --teal-bg: #dce4f6;
    --gold: #e8a838;
    --gold-lt: #fdf3de;
    --red: #d94f4f;
    --red-bg: #fdeaea;
    --ink: #1c2b39;
    --muted: #5a6a78;
    --border: #dde4ea;
    --surface: #f7f9fb;
    --white: #ffffff;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(13, 27, 42, .08);
    --shadow-hover: 0 12px 40px rgba(13, 27, 42, .14);
}

/* ── header ───────────────────────────── */
.cs-site-header {
    background: var(--navy);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.cs-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--white);
    letter-spacing: -.5px;
}

.cs-logo-dot {
    width: 10px;
    height: 10px;
    background: var(--teal-lt);
    border-radius: 50%;
    display: inline-block;
}

.cs-nav-links {
    display: flex;
    gap: 1.8rem;
}

.cs-nav-links a {
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
    font-weight: 500;
    transition: color .2s;
}

.cs-nav-links a:hover,
.cs-nav-links a.active {
    color: var(--white);
}

/* ── hero banner ──────────────────────── */
.cs-hero-course {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cs-hero-course::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.cs-hero-content {
    position: relative;
    z-index: 1;
}

.cs-hero-eyebrow {
    display: inline-block;
    background: rgb(105 139 180 / 35%);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50px;
    padding: .3rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 1.2rem;
    color: #ffffff;
}

.cs-hero-course h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #ffffff;
}

.cs-hero-course p {
    font-size: 1.05rem;
    color: #d8d8d8;
    margin-bottom: 2rem;
}

/* ── search bar ───────────────────────── */
.cs-search-wrap {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}

.cs-search-wrap input {
    width: 100%;
    padding: 16px 100px 16px 40px;
    border-radius: 50px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, .95);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.cs-search-wrap input:focus {
    border-color: var(--teal-lt);
    box-shadow: 0 0 0 4px rgba(33, 164, 150, 0.15);
}

.cs-search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.cs-search-wrap button {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--teal);
    color: white;
    border: none;
    border-radius: 50px;
    padding: .5rem 1.4rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    width: fit-content;
}

.cs-search-wrap button:hover {
    background: var(--teal-lt);
}

/* ── stats strip ──────────────────────── */
.cs-stats-strip {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1rem 2rem;
}

.cs-stat {
    text-align: center;
}

.cs-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--teal);
}

.cs-stat-lbl {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
}

/* ── layout ───────────────────────────── */
.cs-page-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 25px 40px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 2rem;
    align-items: start;
}

/* ── sidebar ──────────────────────────── */
.cs-sidebar-course {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.5rem;
    position: sticky;
    top: 84px;
    margin-top: 55px;
}

.cs-sidebar-course-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}

.cs-cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.cs-cat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    transition: background .15s, color .15s;
    text-decoration: none;
}

.cs-cat-list li a:hover {
    background: var(--teal-bg);
    color: var(--teal);
}

.cs-cat-list li a.active {
    background: var(--teal);
    color: var(--white);
    font-weight: 600;
}

.cs-cat-list li a.active .cs-badge {
    background: rgba(255, 255, 255, .25);
    color: var(--white);
}

.cs-badge {
    background: var(--surface);
    color: var(--muted);
    border-radius: 50px;
    padding: .1rem .55rem;
    font-size: .75rem;
    font-weight: 700;
}

.cs-all-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: .5rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--teal);
    border: 1.5px solid var(--teal-bg);
    transition: background .15s;
    text-decoration: none;
}

.cs-all-link:hover {
    background: var(--teal-bg);
}

/* ── main content ─────────────────────── */
.cs-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.cs-content-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
}

.cs-result-count {
    font-size: .85rem;
    color: var(--muted);
}

.cs-query-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gold-lt);
    color: #8a5a00;
    border-radius: 50px;
    padding: .25rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    margin-right: .5rem;
}

.cs-query-tag a {
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

/* ── empty state ──────────────────────── */
.cs-empty {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--muted);
}

.cs-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.cs-empty h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .4rem;
}

/* ── course grid ──────────────────────── */
.cs-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.cs-card-course {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
    display: flex;
    flex-direction: column;
}

.cs-card-course:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.cs-card-course-a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cs-card-body-course {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.cs-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--navy);
}

.cs-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.cs-card-course:hover .cs-card-thumb img {
    transform: scale(1.05);
}

.cs-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
    color: rgba(255, 255, 255, .3);
    font-size: 2.5rem;
}

.cs-discount-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: var(--red);
    color: white;
    border-radius: 6px;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
}

.cs-cat-badge {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    background: rgba(13, 27, 42, .75);
    color: rgba(255, 255, 255, .9);
    border-radius: 6px;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.cs-card-title-course {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
}

.cs-card-desc {
    font-size: .83rem;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
}

.cs-card-meta {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .8rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: .75rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.cs-meta-item {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.cs-stars {
    color: var(--gold);
    letter-spacing: 1px;
    font-size: .85rem;
}

/* ── price block ──────────────────────── */
.cs-card-footer {
    padding: .9rem 1.2rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cs-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.cs-price-main {
    font-size: .75rem;
    color: var(--muted);
    text-decoration: line-through;
}

.cs-price-discount {
    font-size: 1rem;
    font-weight: 700;
    color: #5b8def;
}

.cs-price-free {
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
}

.cs-btn-enroll {
    background: #5b8def;
    color: white;
    border: none;
    border-radius: 8px;
    padding: .55rem 1.2rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .12s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-btn-enroll:hover {
    transform: translateY(-1px);
    background: #4d7ee8;
}

/* ── detail page ──────────────────────── */
.cs-course-detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 48px;
}

.cs-course-detail-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cs-course-detail-media {
    min-height: 100%;
    background: linear-gradient(135deg, #10253d 0%, #173657 100%);
}

.cs-course-detail-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cs-course-detail-info {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.cs-course-category {
    display: inline-flex;
    width: fit-content;
    background: var(--teal-bg);
    color: var(--teal);
    border: 1px solid rgba(26, 122, 110, .12);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 700;
}

.cs-course-detail-info h1 {
    font-size: 1.9rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
}

.cs-course-detail-info p {
    color: var(--muted);
    line-height: 1.9;
    font-size: .98rem;
    margin: 0;
}

.cs-course-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    color: var(--muted);
    font-size: .88rem;
    padding-top: .25rem;
}

.cs-course-detail-meta span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .45rem .7rem;
}

.cs-view-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 14px;
}

.cs-view-count svg {
    stroke: #9ca3af;
}


.cs-course-detail-price {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding-top: .25rem;
}

.cs-course-detail-price .cs-price-main {
    font-size: .9rem;
}

.cs-course-detail-price .cs-price-discount {
    font-size: 1.35rem;
}

.cs-course-detail-price .cs-price-free {
    font-size: 1rem;
}

.cs-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: var(--teal);
    color: var(--white);
    border-radius: 10px;
    padding: .8rem 1.2rem;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(26, 122, 110, .18);
    transition: transform .15s, background .15s;
}

.cs-buy-btn:hover {
    transform: translateY(-1px);
    background: #4d7ee8;
}

.cs-course-detail-body,
.cs-course-related {
    margin-top: 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.cs-course-detail-body h2,
.cs-course-related h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 1rem;
}

.cs-course-detail-body p {
    color: var(--muted);
    line-height: 2;
    font-size: .98rem;
}

.cs-course-related .cs-course-grid {
    margin-top: 1rem;
}

/* ── footer ──────────────────────────── */
footer {
    background: var(--navy);
    color: rgba(255, 255, 255, .55);
    text-align: center;
    padding: 2rem 1rem;
    font-size: .82rem;
    margin-top: 4rem;
}

footer a {
    color: var(--teal-lt);
}

/* ── responsive ──────────────────────── */
@media (max-width: 900px) {
    .cs-page-body {
        grid-template-columns: 1fr;
    }

    .cs-sidebar-course {
        position: static;
        margin-top: 0;
    }

    .cs-cat-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cs-cat-list li a {
        padding: .4rem .8rem;
        font-size: .82rem;
    }

    .cs-course-detail-hero {
        grid-template-columns: 1fr;
    }

    .cs-course-detail-media {
        min-height: 280px;
    }
}

@media (max-width: 600px) {
    .cs-nav-links {
        display: none;
    }

    .cs-stats-strip {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .cs-course-grid {
        grid-template-columns: 1fr;
    }

    .cs-hero-course {
        padding: 3rem 1.2rem 2.5rem;
    }

    .cs-course-detail-page {
        padding: 20px 14px 36px;
    }

    .cs-course-detail-info h1 {
        font-size: 1.5rem;
    }

    .cs-course-detail-info {
        padding: 1.2rem;
    }

    .cs-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-price-block {
        align-items: flex-start;
    }

    .cs-btn-enroll,
    .cs-buy-btn {
        width: 100%;
    }
}



/* ──────────────────────────────────────────────
   ACTIVITY TOKENS
   ────────────────────────────────────────────── */
:root {
    --at-bg-page: #f5f7fb;
    --at-bg-card: #ffffff;
    --at-bg-subtle: #f8f9fc;
    --at-bg-input: #ffffff;

    --at-border-light: #e4e9f2;
    --at-border-focus: #6c8ebf;

    --at-accent: #4a6fa5;
    --at-accent-soft: #eef2fb;
    --at-accent-hover: #3a5a90;

    --at-text-primary: #1e2630;
    --at-text-secondary: #4a5568;
    --at-text-muted: #8a92a3;
    --at-text-on-accent: #ffffff;

    --at-green: #2f9e62;
    --at-green-soft: #e8f7ee;
    --at-amber: #d97706;
    --at-amber-soft: #fff4e0;
    --at-red: #dc2626;
    --at-red-soft: #fee2e2;
    --at-blue: #2563eb;
    --at-blue-soft: #dbeafe;
    --at-purple: #7048cc;
    --at-purple-soft: #f0eaff;

    --at-radius-sm: 6px;
    --at-radius-md: 10px;
    --at-radius-lg: 14px;
    --at-radius-xl: 20px;

    --at-shadow-card: 0 1px 4px rgba(30, 38, 55, .06), 0 4px 16px rgba(30, 38, 55, .07);
    --at-shadow-hover: 0 4px 12px rgba(30, 38, 55, .10), 0 12px 32px rgba(30, 38, 55, .10);
    --at-shadow-modal: 0 20px 60px rgba(30, 38, 55, .15);

    --at-transition: 0.18s ease;
}

body {
    background-color: var(--at-bg-page);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.at-header {
    background: linear-gradient(135deg, #2d4f8a 0%, #4a6fa5 60%, #6d8fc7 100%);
    padding: 3rem 0 2.8rem;
    position: relative;
    overflow: hidden;
}

.at-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.at-header-content {
    position: relative;
    text-align: center;
}

.at-header-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: -0.02em;
}

.at-header-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

/* ══════════════════════════════════════════════
   MAIN CONTAINER
   ══════════════════════════════════════════════ */
.at-main-container {
    padding: 2rem 0;
}

/* ══════════════════════════════════════════════
   STATS GRID
   ══════════════════════════════════════════════ */
.at-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.at-stat-card {
    background: var(--at-bg-card);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--at-shadow-card);
    transition: transform var(--at-transition), box-shadow var(--at-transition);
}

.at-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--at-shadow-hover);
}

.at-stat-icon {
    font-size: 2rem;
    line-height: 1;
}

.at-stat-content {
    flex: 1;
}

.at-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--at-accent);
    line-height: 1.2;
}

.at-stat-label {
    font-size: .8rem;
    color: var(--at-text-muted);
    margin-top: .25rem;
}

.at-stat-card--pending {
    border-left: 4px solid var(--at-amber);
}

.at-stat-card--progress {
    border-left: 4px solid var(--at-blue);
}

.at-stat-card--completed {
    border-left: 4px solid var(--at-green);
}

.at-stat-card--overdue {
    border-left: 4px solid var(--at-red);
}

/* ══════════════════════════════════════════════
   FILTER CARD
   ══════════════════════════════════════════════ */
.at-filter-wrapper {
    margin-bottom: 2rem;
}

.at-filter-card {
    background: var(--at-bg-card);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-card);
    padding: 1.5rem 1.75rem 1.25rem;
}

.at-filter-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--at-border-light);
}

.at-filter-icon {
    font-size: 1.15rem;
}

.at-filter-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--at-text-primary);
    margin: 0;
}

.at-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .85rem 1rem;
    align-items: end;
}

.at-form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.at-search-group {
    grid-column: span 2;
}

.at-form-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--at-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.at-form-input,
.at-form-select {
    background: var(--at-bg-input);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .48rem .75rem;
    font-size: .875rem;
    color: var(--at-text-primary);
    transition: border-color var(--at-transition), box-shadow var(--at-transition);
    width: 100%;
    outline: none;
    font-family: inherit;
}

.at-form-input:focus,
.at-form-select:focus {
    border-color: var(--at-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, .12);
}

.at-filter-buttons {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    padding-top: .1rem;
}

.at-btn-search,
.at-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem 1.1rem;
    border-radius: var(--at-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background var(--at-transition), box-shadow var(--at-transition), transform .1s;
    white-space: nowrap;
}

.at-btn-search {
    background: var(--at-accent);
    color: var(--at-text-on-accent);
}

.at-btn-search:hover {
    background: var(--at-accent-hover);
    box-shadow: 0 2px 8px rgba(74, 111, 165, .3);
    transform: translateY(-1px);
}

.at-btn-reset {
    background: var(--at-bg-subtle);
    color: var(--at-text-secondary);
    border: 1px solid var(--at-border-light);
}

.at-btn-reset:hover {
    background: var(--at-border-light);
    color: var(--at-text-primary);
}

/* ══════════════════════════════════════════════
   RESULTS INFO
   ══════════════════════════════════════════════ */
.at-results-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.4rem;
    font-size: .85rem;
    color: var(--at-text-secondary);
}

.at-results-label {
    font-weight: 600;
}

.at-results-query {
    background: var(--at-accent-soft);
    color: var(--at-accent);
    padding: .18rem .6rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: .8rem;
}

.at-results-badge {
    background: var(--at-green-soft);
    color: var(--at-green);
    padding: .18rem .65rem;
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 700;
}

/* ══════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════ */
.at-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.35rem;
    margin-bottom: 2rem;
}

/* ══════════════════════════════════════════════
   ACTIVITY CARD
   ══════════════════════════════════════════════ */
.at-card {
    background: var(--at-bg-card);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--at-transition), transform var(--at-transition), border-color var(--at-transition);
    cursor: pointer;
}

.at-card:hover {
    box-shadow: var(--at-shadow-hover);
    transform: translateY(-3px);
    border-color: #c5d3e8;
}

/* ── Card Header ── */
.at-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.15rem 1.25rem .9rem;
    background: linear-gradient(135deg, #f0f4fc 0%, #f8f9fc 100%);
    border-bottom: 1px solid var(--at-border-light);
    gap: .75rem;
}

.at-card-header-info {
    flex: 1;
    min-width: 0;
}

.at-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--at-text-primary);
    margin: 0 0 .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.at-card-category {
    margin: 0;
    font-size: .75rem;
}

.at-category-badge {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 600;
}

.at-category-course {
    background: #dbeafe;
    color: #0369a1;
}

.at-category-event {
    background: #fce7f3;
    color: #be185d;
}

.at-category-project {
    background: #dcfce7;
    color: #166534;
}

.at-category-research {
    background: #f3e8ff;
    color: #6b21a8;
}

.at-card-status {
    flex-shrink: 0;
}

.at-status-badge {
    display: inline-block;
    padding: .3rem .65rem;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.at-status-pending {
    background: var(--at-amber-soft);
    color: #92400e;
}

.at-status-in_progress {
    background: var(--at-blue-soft);
    color: #1e40af;
}

.at-status-completed {
    background: var(--at-green-soft);
    color: #166534;
}

.at-status-paused {
    background: #f3f4f6;
    color: #6b7280;
}

.at-status-cancelled {
    background: var(--at-red-soft);
    color: #991b1b;
}

/* ── Card Body ── */
.at-card-body {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.at-info-item {
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.at-info-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--at-text-muted);
}

.at-info-value {
    font-size: .82rem;
    color: var(--at-text-secondary);
    font-weight: 500;
    padding: .3rem .6rem;
    background: var(--at-bg-subtle);
    border-radius: var(--at-radius-sm);
    border: 1px solid var(--at-border-light);
    min-height: 30px;
    display: flex;
    align-items: center;
}

/* Progress Bar */
.at-progress-box {
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .65rem .75rem;
}

.at-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.at-progress-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--at-text-muted);
}

.at-progress-value {
    font-size: .85rem;
    font-weight: 700;
    color: var(--at-accent);
}

.at-progress-bar {
    height: 6px;
    background: #e0e7ff;
    border-radius: 100px;
    overflow: hidden;
}

.at-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--at-accent) 0%, #6d8fc7 100%);
    border-radius: 100px;
    transition: width 0.3s ease;
}

/* Dates Row */
.at-dates-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.at-date-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .4rem .5rem;
    text-align: center;
}

.at-date-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--at-text-muted);
}

.at-date-value {
    font-size: .75rem;
    font-weight: 600;
    color: var(--at-text-secondary);
}

.at-date-overdue {
    color: var(--at-red);
    background: var(--at-red-soft);
    padding: .2rem .4rem;
    border-radius: 4px;
}

/* Meta Row */
.at-meta-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.at-meta-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .4rem .5rem;
    text-align: center;
}

.at-meta-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--at-text-muted);
}

.at-meta-value {
    font-size: .75rem;
    font-weight: 600;
    padding: .1rem .3rem;
    border-radius: 3px;
}

.at-impact-low {
    background: #dbeafe;
    color: #0369a1;
}

.at-impact-medium {
    background: var(--at-amber-soft);
    color: #92400e;
}

.at-impact-high {
    background: var(--at-red-soft);
    color: #991b1b;
}

.at-difficulty-easy {
    background: var(--at-green-soft);
    color: #166534;
}

.at-difficulty-medium {
    background: var(--at-amber-soft);
    color: #92400e;
}

.at-difficulty-hard {
    background: var(--at-red-soft);
    color: #991b1b;
}

/* Checkpoints Summary */
.at-checkpoints-summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--at-green-soft);
    border: 1px solid #86efac;
    border-radius: var(--at-radius-sm);
    padding: .4rem .6rem;
    font-size: .75rem;
    color: var(--at-green);
}

.at-checkpoint-icon {
    font-size: .8rem;
}

.at-checkpoint-text {
    font-weight: 600;
}

/* Notes Box */
.at-notes-box {
    background: var(--at-bg-subtle);
    border-left: 3px solid var(--at-accent);
    border-radius: var(--at-radius-sm);
    padding: .5rem .65rem;
}

.at-notes-text {
    font-size: .75rem;
    color: var(--at-text-secondary);
    margin: 0;
    line-height: 1.4;
    font-style: italic;
}

/* ── Card Footer ── */
.at-card-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--at-border-light);
    background: var(--at-bg-subtle);
}

.at-btn-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .55rem 1rem;
    background: var(--at-accent);
    color: var(--at-text-on-accent);
    border: none;
    border-radius: var(--at-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--at-transition), box-shadow var(--at-transition), transform .1s;
    letter-spacing: .01em;
}

.at-btn-details:hover {
    background: var(--at-accent-hover);
    box-shadow: 0 2px 10px rgba(74, 111, 165, .3);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════ */
.at-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--at-bg-card);
    border: 1px dashed var(--at-border-light);
    border-radius: var(--at-radius-lg);
}

.at-empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .6;
}

.at-empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--at-text-secondary);
    margin: 0 0 .5rem;
}

.at-empty-state-text {
    font-size: .88rem;
    color: var(--at-text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════ */
.at-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.at-pagination {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.at-pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--at-radius-sm);
    font-size: .82rem;
    font-weight: 600;
    color: var(--at-accent);
    background: var(--at-bg-card);
    border: 1px solid var(--at-border-light);
    text-decoration: none;
    transition: background var(--at-transition), border-color var(--at-transition), color var(--at-transition);
    cursor: pointer;
}

.at-pagination-link:hover {
    background: var(--at-accent-soft);
    border-color: var(--at-border-focus);
}

.at-pagination-item.active .at-pagination-link {
    background: var(--at-accent);
    color: #fff;
    border-color: var(--at-accent);
    box-shadow: 0 2px 8px rgba(74, 111, 165, .3);
}

.at-pagination-item.disabled .at-pagination-link {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════ */
.at-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.at-modal.active {
    display: flex;
}

.at-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 38, 55, .6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.at-modal-content {
    position: relative;
    background: var(--at-bg-card);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-modal);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.at-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--at-border-light);
    background: linear-gradient(135deg, #f0f4fc 0%, #f8f9fc 100%);
}

.at-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--at-text-primary);
    margin: 0;
}

.at-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--at-text-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--at-transition);
}

.at-modal-close:hover {
    color: var(--at-text-primary);
}

.at-modal-body {
    padding: 1.75rem;
}

/* ── Detail Content ── */
.at-detail-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.at-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--at-border-light);
}

.at-detail-title-section {
    flex: 1;
}

.at-detail-activity-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--at-text-primary);
    margin: 0 0 .25rem;
}

.at-detail-category {
    font-size: .8rem;
    color: var(--at-accent);
    font-weight: 600;
    margin: 0;
}

.at-detail-status-section {
    flex-shrink: 0;
}

.at-detail-section {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.at-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--at-text-primary);
    margin: 0 0 .5rem;
}

.at-section-content {
    font-size: .85rem;
    color: var(--at-text-secondary);
    line-height: 1.6;
    margin: 0;
    padding: .65rem;
    background: var(--at-bg-subtle);
    border-left: 3px solid var(--at-accent);
    border-radius: var(--at-radius-sm);
}

/* Progress Box Large */
.at-progress-box-large {
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-md);
    padding: 1rem;
}

.at-progress-bar-large {
    height: 12px;
    background: #e0e7ff;
    border-radius: 100px;
    overflow: hidden;
    margin-top: .75rem;
}

/* Timeline Grid */
.at-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.at-timeline-item {
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .65rem;
    text-align: center;
}

.at-timeline-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--at-text-muted);
    margin-bottom: .25rem;
}

.at-timeline-value {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--at-text-secondary);
}

.at-timeline-overdue {
    color: var(--at-red);
    background: var(--at-red-soft);
    padding: .2rem .4rem;
    border-radius: 4px;
}

/* Checkpoints List */
.at-checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.at-checkpoint-item {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    transition: background var(--at-transition), border-color var(--at-transition);
}

.at-checkpoint-item.at-checkpoint-completed {
    background: var(--at-green-soft);
    border-color: #86efac;
}

.at-checkpoint-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.at-checkpoint-info {
    flex: 1;
}

.at-checkpoint-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--at-text-primary);
    margin: 0 0 .15rem;
}

.at-checkpoint-desc {
    font-size: .75rem;
    color: var(--at-text-secondary);
    margin: 0 0 .15rem;
}

.at-checkpoint-date {
    font-size: .7rem;
    color: var(--at-text-muted);
    margin: 0;
}

/* Resources List */
.at-resources-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.at-resource-item {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
}

.at-resource-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.at-resource-info {
    flex: 1;
}

.at-resource-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--at-text-primary);
    margin: 0 0 .1rem;
}

.at-resource-type {
    font-size: .7rem;
    color: var(--at-text-muted);
    margin: 0 0 .15rem;
}

.at-resource-link {
    display: inline-block;
    font-size: .75rem;
    color: var(--at-accent);
    text-decoration: none;
    font-weight: 600;
    margin: .1rem 0;
    transition: color var(--at-transition);
}

.at-resource-link:hover {
    color: var(--at-accent-hover);
    text-decoration: underline;
}

.at-resource-desc {
    font-size: .75rem;
    color: var(--at-text-secondary);
    margin: .1rem 0 0;
    font-style: italic;
}

/* Notes Detail */
.at-notes-detail {
    background: var(--at-bg-subtle);
    border-left: 4px solid var(--at-accent);
    border-radius: var(--at-radius-sm);
    padding: .85rem;
    font-size: .85rem;
    color: var(--at-text-secondary);
    line-height: 1.6;
}

/* Result Detail */
.at-result-detail {
    background: var(--at-green-soft);
    border-left: 4px solid var(--at-green);
    border-radius: var(--at-radius-sm);
    padding: .85rem;
    font-size: .85rem;
    color: var(--at-green);
    line-height: 1.6;
}

/* Meta Grid */
.at-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
}

.at-meta-box {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--at-bg-subtle);
    border: 1px solid var(--at-border-light);
    border-radius: var(--at-radius-sm);
    padding: .65rem;
    text-align: center;
}

.at-meta-box .at-meta-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--at-text-muted);
}

.at-meta-box .at-meta-value {
    font-size: .85rem;
    font-weight: 600;
    color: var(--at-text-secondary);
    padding: 0;
    background: none;
    border: none;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .at-header-title {
        font-size: 1.75rem;
    }

    .at-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .at-filter-form {
        grid-template-columns: 1fr;
    }

    .at-search-group {
        grid-column: span 1;
    }

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

    .at-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .at-dates-row {
        grid-template-columns: 1fr;
    }

    .at-meta-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .at-header {
        padding: 2rem 0 1.8rem;
    }

    .at-header-title {
        font-size: 1.5rem;
    }

    .at-header-subtitle {
        font-size: .95rem;
    }

    .at-stat-card {
        padding: 1rem;
    }

    .at-stat-value {
        font-size: 1.25rem;
    }

    .at-filter-card {
        padding: 1.25rem;
    }

    .at-card-body {
        gap: .5rem;
    }
}








:root {
    --primary: #3b82f6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-700: #374151;
    --gray-900: #111827;
}

* {
    direction: rtl;
    text-align: right;
}

body {
    background-color: var(--gray-50);
    font-family: 'Vazir', sans-serif;
}

.activity-detail-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ════════════════════════════════════════════
       HEADER
       ════════════════════════════════════════════ */

.activity-header {
    background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.activity-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.activity-header-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.activity-header-breadcrumb {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.activity-header-breadcrumb a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.activity-header-status {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.status-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.completed {
    background: var(--success);
}

.status-badge.pending {
    background: var(--warning);
}

/* ════════════════════════════════════════════
       MAIN CONTENT
       ════════════════════════════════════════════ */

.activity-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .activity-content {
        grid-template-columns: 1fr;
    }
}

.activity-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.activity-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ════════════════════════════════════════════
       CARDS
       ════════════════════════════════════════════ */

.card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.card-action-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.3s;
}

.card-action-btn:hover {
    background: #1d4ed8;
}

.card-action-btn.secondary {
    background: var(--gray-300);
    color: var(--gray-900);
}

.card-action-btn.secondary:hover {
    background: var(--gray-400);
}

/* ════════════════════════════════════════════
       DESCRIPTION
       ════════════════════════════════════════════ */

.description-section {
    line-height: 1.8;
    color: var(--gray-700);
}

.description-section p {
    margin: 0 0 1rem;
}

/* ════════════════════════════════════════════
       PROGRESS
       ════════════════════════════════════════════ */

.progress-container {
    margin-bottom: 1.5rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #0ea5e9);
    transition: width 0.3s ease;
}

.progress-input {
    width: 100%;
    margin-top: 1rem;
}

/* ════════════════════════════════════════════
       FORM GROUPS
       ════════════════════════════════════════════ */

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ════════════════════════════════════════════
       STATIC ITEMS SELECTOR
       ════════════════════════════════════════════ */

.static-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.static-item-card {
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.static-item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.static-item-card.selected {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.static-item-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

.static-item-category {
    display: inline-block;
    background: var(--gray-100);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.static-item-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.static-item-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* ════════════════════════════════════════════
       CHECKPOINTS
       ════════════════════════════════════════════ */

.checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkpoint-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 4px solid var(--gray-300);
    transition: all 0.3s;
}

.checkpoint-item.completed {
    background: rgba(16, 185, 129, 0.05);
    border-left-color: var(--success);
}

.checkpoint-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.checkpoint-content {
    flex: 1;
}

.checkpoint-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.checkpoint-item.completed .checkpoint-title {
    text-decoration: line-through;
    color: var(--gray-500);
}

.checkpoint-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.checkpoint-date {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.checkpoint-delete {
    background: var(--danger);
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════
       RESOURCES
       ════════════════════════════════════════════ */

.resources-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.resource-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.resource-content {
    flex: 1;
}

.resource-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.resource-type {
    display: inline-block;
    background: var(--gray-200);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.resource-url {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    word-break: break-all;
}

.resource-url:hover {
    text-decoration: underline;
}

.resource-delete {
    background: var(--danger);
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════
       SIDEBAR INFO
       ════════════════════════════════════════════ */

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--gray-700);
}

.info-value {
    color: var(--gray-900);
    font-weight: 500;
}

/* ════════════════════════════════════════════
       BUTTONS
       ════════════════════════════════════════════ */

.btn-group {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-secondary {
    background: var(--gray-300);
    color: var(--gray-900);
}

.btn-secondary:hover {
    background: var(--gray-400);
}

/* ════════════════════════════════════════════
       TABS
       ════════════════════════════════════════════ */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.tab-btn:hover {
    color: var(--primary);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ════════════════════════════════════════════
       ALERTS
       ════════════════════════════════════════════ */


.rs-toast-container {
    position: fixed !important;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    z-index: 1055;
    pointer-events: none; /* container کلیک نمی‌گیره */
}

.rs-alert {
    pointer-events: all; /* ← alert و دکمه‌هاش کلیک می‌گیرن */
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;

    /* انیمیشن */
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.rs-alert.rs-alert-show {
    transform: translateY(0);
    opacity: 1;
}

.rs-alert.rs-alert-hide {
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--primary);
    color: #1e40af;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);
    color: #065f46;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    color: #92400e;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: #7f1d1d;
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.btn-close-alert {
    background: none;
    border: none;
    font-size: 19px;
    color: #065f46;
    margin-top: -12px;
    margin-left: -2px;
    cursor: pointer;
}

.loading {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-500);
}