:root {
    --bg: #07111f;
    --surface: #0d1929;
    --surface-2: #122238;
    --surface-3: #172b45;
    --border: rgba(148, 163, 184, 0.16);
    --text: #f8fafc;
    --muted: #8fa4bd;
    --primary: #6d5dfc;
    --primary-2: #22d3ee;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #fb7185;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(109, 93, 252, 0.14),
            transparent 30%
        ),
        var(--bg);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
a {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 26px 18px;
    border-right: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            rgba(13, 25, 41, 0.98),
            rgba(7, 17, 31, 0.98)
        );
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 28px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-weight: 900;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );
    box-shadow:
        0 12px 30px rgba(109, 93, 252, 0.28);
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.brand-copy small {
    color: var(--muted);
    font-size: 11px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    color: var(--muted);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.nav-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

.nav-item.active {
    color: white;
    background:
        linear-gradient(
            90deg,
            rgba(109, 93, 252, 0.24),
            rgba(34, 211, 238, 0.08)
        );
    border: 1px solid rgba(109, 93, 252, 0.22);
}

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 17px;
}

.sidebar-footer {
    margin-top: auto;
}

.system-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.03);
}

.system-pill > span:last-child {
    display: grid;
    gap: 2px;
}

.system-pill strong {
    font-size: 12px;
}

.system-pill small {
    color: var(--muted);
    font-size: 11px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow:
        0 0 0 5px rgba(52, 211, 153, 0.1);
}

.main-area {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 78px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 17, 31, 0.82);
    backdrop-filter: blur(18px);
}

.menu-button {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}

.topbar-title {
    display: grid;
    gap: 3px;
}

.topbar-title strong {
    font-size: 16px;
}

.topbar-title span {
    color: var(--muted);
    font-size: 12px;
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: #baf7dc;
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.07);
    font-size: 12px;
    font-weight: 700;
}

.avatar-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--surface-3),
            var(--surface)
        );
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.content {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 30px;
}

.hero-panel {
    padding: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(109, 93, 252, 0.22);
    border-radius: 24px;
    background:
        linear-gradient(
            120deg,
            rgba(109, 93, 252, 0.17),
            rgba(34, 211, 238, 0.05)
        ),
        var(--surface);
    box-shadow: var(--shadow);
}

.eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #8ee9f7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.hero-panel h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hero-panel h1 span {
    color: #9a90ff;
}

.hero-panel p {
    max-width: 720px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button {
    min-height: 44px;
    padding: 0 17px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #8377ff
        );
    box-shadow:
        0 12px 28px rgba(109, 93, 252, 0.24);
}

.button-secondary {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.metric-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card,
.panel {
    border: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            rgba(18, 34, 56, 0.82),
            rgba(13, 25, 41, 0.92)
        );
    box-shadow: var(--shadow);
}

.metric-card {
    min-height: 180px;
    padding: 20px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}

.metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #c8c3ff;
    background: rgba(109, 93, 252, 0.12);
}

.trend {
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 10px;
    font-weight: 800;
}

.trend.positive {
    color: #a7f3d0;
    background: rgba(52, 211, 153, 0.08);
}

.trend.warning {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.08);
}

.metric-value {
    margin-top: 22px;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.metric-label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
}

.metric-card small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.dashboard-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 16px;
}

.panel {
    padding: 24px;
    border-radius: var(--radius);
}

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

.panel-header h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.025em;
}

.status-badge {
    padding: 7px 10px;
    color: #c8c3ff;
    border-radius: 999px;
    background: rgba(109, 93, 252, 0.12);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.project-meta {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.project-meta > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.project-meta small,
.project-meta strong {
    display: block;
}

.project-meta small {
    color: var(--muted);
    font-size: 10px;
}

.project-meta strong {
    margin-top: 5px;
    font-size: 13px;
}

.progress-block {
    margin-top: 22px;
}

.progress-copy {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
}

.progress-copy strong {
    color: var(--text);
}

.progress-track {
    height: 8px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-2)
        );
}

.signal-orb {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );
    font-size: 11px;
    font-weight: 900;
    box-shadow:
        0 0 0 8px rgba(109, 93, 252, 0.07);
}

.insight-copy {
    margin: 22px 0 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 13px;
}

.insight-list {
    margin-top: 18px;
    display: grid;
    gap: 11px;
    font-size: 12px;
}

.insight-list > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #a7f3d0;
    background: rgba(52, 211, 153, 0.09);
    font-size: 10px;
}

.phase-panel {
    margin-top: 16px;
}

.text-button {
    padding: 0;
    border: 0;
    color: #9a90ff;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.phase-strip {
    margin-top: 24px;
    display: grid;
    grid-template-columns:
        10fr
        10fr
        10fr
        40fr
        15fr
        7fr
        3fr
        5fr;
    gap: 5px;
}

.phase {
    min-width: 0;
    min-height: 82px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 11px;
    overflow: hidden;
}

.phase span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    font-weight: 900;
}

.phase small {
    opacity: 0.76;
    font-size: 9px;
}

.phase-discovery {
    background: rgba(56, 189, 248, 0.16);
}

.phase-architecture {
    background: rgba(129, 140, 248, 0.17);
}

.phase-design {
    background: rgba(192, 132, 252, 0.16);
}

.phase-development {
    background: rgba(109, 93, 252, 0.32);
}

.phase-qa {
    background: rgba(45, 212, 191, 0.17);
}

.phase-uat {
    background: rgba(251, 191, 36, 0.16);
}

.phase-deploy {
    background: rgba(251, 113, 133, 0.16);
}

.phase-hypercare {
    background: rgba(52, 211, 153, 0.16);
}

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

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        z-index: 50;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .menu-button {
        display: grid;
        place-items: center;
    }

    .topbar {
        padding: 0 18px;
    }

    .topbar-title span,
    .live-badge {
        display: none;
    }

    .content {
        padding: 18px;
    }

    .hero-panel {
        padding: 24px;
        align-items: flex-start;
        flex-direction: column;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .project-meta {
        grid-template-columns: 1fr 1fr;
    }

    .phase-strip {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .phase {
        flex: 0 0 130px;
    }
}

@media (max-width: 480px) {
    .project-meta {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .button {
        flex: 1;
    }
}

/* =========================================================
   SprintIQ Colorful Light Theme
   STEP 61
   ========================================================= */

:root {
    --bg: #f7f8fc;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #eef2ff;
    --border: #e6e9f2;
    --text: #172033;
    --muted: #69758c;
    --primary: #6c5ce7;
    --primary-2: #22c7f0;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #f43f5e;
    --shadow:
        0 12px 32px rgba(31, 42, 68, 0.08);
}

html {
    background: var(--bg);
}

body {
    color: var(--text);
    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(124, 92, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 30% 15%,
            rgba(34, 199, 240, 0.06),
            transparent 24%
        ),
        var(--bg);
}

/* Sidebar */

.sidebar {
    border-right: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );
    box-shadow:
        8px 0 30px rgba(31, 42, 68, 0.04);
}

.brand-copy strong {
    color: #1d2942;
}

.brand-copy small {
    color: #8290a8;
}

.nav-item {
    color: #66738b;
}

.nav-item:hover {
    color: #4338ca;
    background: #f1f3ff;
}

.nav-item.active {
    color: #4f46e5;
    background:
        linear-gradient(
            90deg,
            #eeeaff,
            #eef9ff
        );
    border-color: #d9d5ff;
}

.system-pill {
    border-color: #e5e8f1;
    background: #f8fafc;
}

.system-pill strong {
    color: #26334d;
}

.system-pill small {
    color: #8490a5;
}

/* Topbar */

.topbar {
    border-bottom: 1px solid var(--border);
    background:
        rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(18px);
    box-shadow:
        0 4px 18px rgba(31, 42, 68, 0.04);
}

.topbar-title strong {
    color: #202b43;
}

.topbar-title span {
    color: #7a879d;
}

.live-badge {
    color: #047857;
    border-color: #b8ecd9;
    background: #ecfdf5;
}

.avatar-button {
    color: #4338ca;
    border-color: #dcdffc;
    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f5f3ff
        );
}

/* Hero */

.hero-panel {
    border-color: transparent;
    background:
        linear-gradient(
            125deg,
            #6557e8 0%,
            #7c5cf4 45%,
            #249bd8 100%
        );
    box-shadow:
        0 22px 50px rgba(99, 82, 225, 0.20);
}

.hero-panel .eyebrow {
    color: #dffbff;
}

.hero-panel h1 {
    color: #ffffff;
}

.hero-panel h1 span {
    color: #d8f7ff;
}

.hero-panel p {
    color: rgba(255, 255, 255, 0.82);
}

.button-primary {
    color: #5b4bd8;
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(35, 35, 80, 0.16);
}

.button-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.13);
}

/* Base cards */

.metric-card,
.panel {
    border-color: var(--border);
    background: #ffffff;
    box-shadow: var(--shadow);
}

/* Metric card 1 - Projects */

.metric-card:nth-child(1) {
    border-color: #cfe0ff;
    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #ffffff
        );
}

.metric-card:nth-child(1) .metric-icon {
    color: #2563eb;
    background: #dbeafe;
}

.metric-card:nth-child(1) .metric-value {
    color: #1d4ed8;
}

/* Metric card 2 - Sprints */

.metric-card:nth-child(2) {
    border-color: #ded5ff;
    background:
        linear-gradient(
            145deg,
            #f3f0ff,
            #ffffff
        );
}

.metric-card:nth-child(2) .metric-icon {
    color: #7c3aed;
    background: #ede9fe;
}

.metric-card:nth-child(2) .metric-value {
    color: #6d28d9;
}

/* Metric card 3 - Capacity */

.metric-card:nth-child(3) {
    border-color: #bcebdc;
    background:
        linear-gradient(
            145deg,
            #eafbf5,
            #ffffff
        );
}

.metric-card:nth-child(3) .metric-icon {
    color: #059669;
    background: #d1fae5;
}

.metric-card:nth-child(3) .metric-value {
    color: #047857;
}

/* Metric card 4 - Risk */

.metric-card:nth-child(4) {
    border-color: #f9ddb0;
    background:
        linear-gradient(
            145deg,
            #fff7e8,
            #ffffff
        );
}

.metric-card:nth-child(4) .metric-icon {
    color: #d97706;
    background: #fef3c7;
}

.metric-card:nth-child(4) .metric-value {
    color: #b45309;
}

.metric-label {
    color: #28344c;
}

.metric-card small {
    color: #758198;
}

.trend {
    color: #637089;
    background: #f1f4f8;
}

.trend.positive {
    color: #047857;
    background: #dff8ed;
}

.trend.warning {
    color: #b45309;
    background: #fff1cf;
}

/* Current project */

.project-panel {
    border-color: #d9d5ff;
    background:
        linear-gradient(
            135deg,
            #faf9ff,
            #ffffff
        );
}

.project-panel .eyebrow {
    color: #6d5dfc;
}

.panel-header h2 {
    color: #202b43;
}

.status-badge {
    color: #5b4bd8;
    background: #ece9ff;
}

.project-meta > div {
    border-color: #e4e1ff;
    background: #ffffff;
}

.project-meta small {
    color: #7b879d;
}

.project-meta strong {
    color: #28344d;
}

.progress-copy {
    color: #78859b;
}

.progress-copy strong {
    color: #4f46e5;
}

.progress-track {
    background: #e9edf5;
}

/* Intelligence card */

.intelligence-panel {
    border-color: #bdeaf5;
    background:
        linear-gradient(
            145deg,
            #effcff,
            #ffffff
        );
}

.intelligence-panel .eyebrow {
    color: #0891b2;
}

.insight-copy {
    color: #64748b;
}

.insight-list {
    color: #334155;
}

.signal-orb {
    box-shadow:
        0 0 0 8px rgba(34, 199, 240, 0.10);
}

/* SDLC panel */

.phase-panel {
    border-color: #e1e5ef;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcff
        );
}

.phase-panel .eyebrow {
    color: #6d5dfc;
}

.text-button {
    color: #5b4bd8;
}

/* More colorful SDLC phases */

.phase-discovery {
    color: #075985;
    background:
        linear-gradient(
            135deg,
            #bae6fd,
            #e0f2fe
        );
}

.phase-architecture {
    color: #3730a3;
    background:
        linear-gradient(
            135deg,
            #c7d2fe,
            #e0e7ff
        );
}

.phase-design {
    color: #6b21a8;
    background:
        linear-gradient(
            135deg,
            #e9d5ff,
            #f3e8ff
        );
}

.phase-development {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #6d5dfc,
            #8b5cf6
        );
}

.phase-qa {
    color: #115e59;
    background:
        linear-gradient(
            135deg,
            #99f6e4,
            #ccfbf1
        );
}

.phase-uat {
    color: #92400e;
    background:
        linear-gradient(
            135deg,
            #fde68a,
            #fef3c7
        );
}

.phase-deploy {
    color: #9f1239;
    background:
        linear-gradient(
            135deg,
            #fecdd3,
            #ffe4e6
        );
}

.phase-hypercare {
    color: #166534;
    background:
        linear-gradient(
            135deg,
            #bbf7d0,
            #dcfce7
        );
}

/* Mobile menu */

.menu-button {
    color: #4338ca;
    border-color: #dfe3ef;
    background: #ffffff;
}

/* Preserve colorful labels */

.eyebrow {
    color: #6d5dfc;
}

@media (max-width: 760px) {
    .sidebar {
        box-shadow:
            18px 0 50px rgba(31, 42, 68, 0.16);
    }
}

/* =========================================================
   SprintIQ Dynamic Sprint Timeline
   STEP 66A
   ========================================================= */

.sprint-timeline-panel {
    overflow: hidden;
    border-color: #dddff7;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 100%
        );
}

.sprint-total-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    color: #5b4bd8;
    background: #f3f0ff;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.sprint-timeline-copy {
    margin:
        -2px 0 20px;
    color: #718096;
    font-size: 0.92rem;
    line-height: 1.6;
}

.sprint-timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns:
        minmax(260px, 300px);
    gap: 16px;
    overflow-x: auto;
    padding:
        4px 2px 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color:
        #c8c5f4
        #eef0f7;
}

.sprint-timeline::-webkit-scrollbar {
    height: 8px;
}

.sprint-timeline::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef0f7;
}

.sprint-timeline::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #7c5cf4,
            #22b8e6
        );
}

.sprint-card {
    position: relative;
    min-height: 260px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 20px;
    scroll-snap-align: start;
    box-shadow:
        0 12px 28px rgba(31, 42, 68, 0.08);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.sprint-card:hover {
    transform:
        translateY(-3px);
    box-shadow:
        0 18px 36px rgba(31, 42, 68, 0.13);
}

.sprint-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 4px;
    border-radius:
        0 0 999px 999px;
    background:
        currentColor;
    opacity: 0.75;
}

.sprint-tone-0 {
    color: #2563eb;
    border-color: #cfe0ff;
    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #ffffff
        );
}

.sprint-tone-1 {
    color: #7c3aed;
    border-color: #ded5ff;
    background:
        linear-gradient(
            145deg,
            #f4f0ff,
            #ffffff
        );
}

.sprint-tone-2 {
    color: #059669;
    border-color: #bcebdc;
    background:
        linear-gradient(
            145deg,
            #eafbf5,
            #ffffff
        );
}

.sprint-tone-3 {
    color: #d97706;
    border-color: #f8ddb0;
    background:
        linear-gradient(
            145deg,
            #fff7e8,
            #ffffff
        );
}

.sprint-tone-4 {
    color: #db2777;
    border-color: #f8cfe3;
    background:
        linear-gradient(
            145deg,
            #fff0f7,
            #ffffff
        );
}

.sprint-tone-5 {
    color: #0891b2;
    border-color: #bdeaf5;
    background:
        linear-gradient(
            145deg,
            #effcff,
            #ffffff
        );
}

.sprint-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sprint-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    padding: 0 10px;
    border-radius: 11px;
    color: currentColor;
    background:
        rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 0 0 1px
        rgba(100, 110, 150, 0.12);
    font-size: 0.82rem;
    font-weight: 900;
}

.sprint-duration {
    color: #77839a;
    font-size: 0.76rem;
    font-weight: 700;
}

.sprint-card h3 {
    margin:
        0 0 10px;
    color: #202b43;
    font-size: 1.08rem;
    line-height: 1.3;
}

.sprint-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
    color: #748198;
    font-size: 0.76rem;
    font-weight: 700;
}

.sprint-date-arrow {
    color: currentColor;
    font-weight: 900;
}

.sprint-goal {
    min-height: 48px;
    margin:
        0 0 16px;
    color: #44516a;
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.5;
}

.sprint-phase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sprint-phase-chip {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid
        rgba(100, 110, 150, 0.12);
    border-radius: 999px;
    color: #536078;
    background:
        rgba(255, 255, 255, 0.82);
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1.25;
}

@media (max-width: 760px) {
    .sprint-timeline {
        grid-auto-columns:
            minmax(245px, 86vw);
    }

    .sprint-card {
        min-height: 250px;
    }

    .sprint-total-badge {
        min-height: 30px;
        padding: 0 11px;
    }
}

/* =========================================================
   SprintIQ Project Management UI
   STEP 67A
   ========================================================= */

.projects-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    margin-bottom: 22px;
    border: 1px solid #e2e5f4;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f1ff 48%,
            #eefaff 100%
        );
    box-shadow:
        0 16px 38px rgba(39, 49, 83, 0.08);
}

.projects-hero h1,
.project-form-intro h1 {
    margin: 8px 0 10px;
    color: #202b43;
    font-size:
        clamp(1.7rem, 3vw, 2.55rem);
    line-height: 1.08;
}

.projects-hero p,
.project-form-intro p {
    max-width: 650px;
    margin: 0;
    color: #6f7b92;
    line-height: 1.65;
}

.project-list-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(290px, 1fr)
        );
    gap: 20px;
}

.project-list-card {
    padding: 22px;
    border: 1px solid #e2e5f4;
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 12px 30px rgba(39, 49, 83, 0.07);
}

.project-list-card:nth-child(6n + 1) {
    border-top: 4px solid #7c5cf4;
}

.project-list-card:nth-child(6n + 2) {
    border-top: 4px solid #22b8e6;
}

.project-list-card:nth-child(6n + 3) {
    border-top: 4px solid #19b982;
}

.project-list-card:nth-child(6n + 4) {
    border-top: 4px solid #f59e0b;
}

.project-list-card:nth-child(6n + 5) {
    border-top: 4px solid #ec4899;
}

.project-list-card:nth-child(6n) {
    border-top: 4px solid #6366f1;
}

.project-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-id-badge,
.project-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.project-id-badge {
    color: #6355d8;
    background: #f0edff;
}

.project-status-pill {
    color: #07815f;
    background: #e9fbf5;
}

.project-list-card h2 {
    margin: 18px 0 8px;
    color: #202b43;
    font-size: 1.25rem;
}

.project-list-card > p {
    min-height: 48px;
    margin: 0 0 18px;
    color: #748198;
    font-size: 0.88rem;
    line-height: 1.55;
}

.project-list-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.project-list-meta > div {
    padding: 11px;
    border-radius: 13px;
    background: #f7f8fc;
}

.project-list-meta small,
.project-list-meta strong {
    display: block;
}

.project-list-meta small {
    margin-bottom: 4px;
    color: #8b95a9;
    font-size: 0.68rem;
}

.project-list-meta strong {
    color: #33405a;
    font-size: 0.82rem;
}

.project-open-link {
    display: inline-flex;
    color: #6655dc;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.project-empty-state {
    padding: 40px;
    border: 1px dashed #cbcfea;
    border-radius: 22px;
    text-align: center;
    background: #ffffff;
}

.project-form-shell {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.72fr)
        minmax(0, 1.55fr);
    gap: 24px;
    align-items: start;
}

.project-form-intro {
    position: sticky;
    top: 24px;
    padding: 28px;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #f1edff,
            #eefaff
        );
    border: 1px solid #dedff4;
}

.form-benefit-list {
    display: grid;
    gap: 11px;
    margin-top: 24px;
}

.form-benefit-list span {
    color: #4e5b73;
    font-size: 0.86rem;
    font-weight: 700;
}

.project-create-form {
    padding: 28px;
    border: 1px solid #e1e4f2;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 16px 38px rgba(39, 49, 83, 0.08);
}

.form-error {
    padding: 13px 15px;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    border-radius: 13px;
    color: #b42318;
    background: #fff1f2;
    font-size: 0.84rem;
    line-height: 1.5;
}

.form-section-heading {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding-top: 8px;
    margin: 0 0 17px;
}

.form-section-heading:not(:first-of-type) {
    margin-top: 26px;
}

.form-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7c5cf4,
            #22b8e6
        );
    font-size: 0.72rem;
    font-weight: 900;
}

.form-section-heading h2 {
    margin: 0 0 3px;
    color: #27324a;
    font-size: 1rem;
}

.form-section-heading p {
    margin: 0;
    color: #8a94a8;
    font-size: 0.78rem;
}

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

.field {
    display: grid;
    gap: 7px;
}

.field-wide {
    grid-column: 1 / -1;
}

.field > span {
    color: #4d5970;
    font-size: 0.78rem;
    font-weight: 800;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #dce1ee;
    border-radius: 12px;
    outline: none;
    color: #2d3952;
    background: #fafbfe;
    font: inherit;
    font-size: 0.86rem;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: #8c79ef;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(124, 92, 244, 0.11);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid #eceef5;
}

@media (max-width: 900px) {
    .project-form-shell {
        grid-template-columns: 1fr;
    }

    .project-form-intro {
        position: static;
    }
}

@media (max-width: 680px) {
    .projects-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-wide {
        grid-column: auto;
    }

    .project-create-form,
    .project-form-intro {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column-reverse;
    }
}

/* =========================================================
   STEP 68A
   Colorful Project Intelligence Switcher
   ========================================================= */

.project-switcher-panel {
    display: grid;
    grid-template-columns:
        minmax(240px, 0.72fr)
        minmax(0, 1.55fr);
    gap: 24px;
    align-items: center;
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #e7eaf2;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(124, 58, 237, 0.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(14, 165, 233, 0.12),
            transparent 36%
        ),
        #ffffff;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.08);
}

.project-switcher-copy {
    display: grid;
    gap: 10px;
}

.project-switcher-copy h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.project-switcher-copy p {
    margin: 8px 0 0;
    max-width: 460px;
    color: #697386;
    font-size: 0.92rem;
    line-height: 1.6;
}

.project-switcher-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.project-switcher-card {
    position: relative;
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e6e9f2;
    border-radius: 18px;
    color: #172033;
    text-decoration: none;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8faff
        );
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.06);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    overflow: hidden;
}

.project-switcher-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            #7c3aed,
            #0ea5e9
        );
    opacity: 0.45;
}

.project-switcher-card:nth-child(2n)::before {
    background:
        linear-gradient(
            180deg,
            #f97316,
            #ec4899
        );
}

.project-switcher-card:nth-child(3n)::before {
    background:
        linear-gradient(
            180deg,
            #10b981,
            #14b8a6
        );
}

.project-switcher-card:hover {
    transform: translateY(-2px);
    border-color: #cfd6e6;
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.10);
}

.project-switcher-card.active {
    border-color: rgba(124, 58, 237, 0.34);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(14, 165, 233, 0.15),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.10),
            rgba(255, 255, 255, 0.98)
        );
    box-shadow:
        0 14px 34px rgba(124, 58, 237, 0.13);
}

.project-switcher-card.active::before {
    width: 6px;
    opacity: 1;
}

.project-switcher-index {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #6d28d9;
    background: #f0e9ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.project-switcher-card:nth-child(2n)
.project-switcher-index {
    color: #c2410c;
    background: #fff0e6;
}

.project-switcher-card:nth-child(3n)
.project-switcher-index {
    color: #047857;
    background: #e7f9f2;
}

.project-switcher-details {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.project-switcher-details strong {
    overflow: hidden;
    color: #172033;
    font-size: 0.92rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-switcher-details small {
    overflow: hidden;
    color: #778195;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-switcher-state {
    padding: 7px 10px;
    border-radius: 999px;
    color: #667085;
    background: #f1f4f9;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.project-switcher-card.active
.project-switcher-state {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #0ea5e9
        );
    box-shadow:
        0 8px 18px rgba(124, 58, 237, 0.22);
}

@media (max-width: 1100px) {
    .project-switcher-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .project-switcher-panel {
        padding: 18px;
        border-radius: 20px;
    }

    .project-switcher-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .project-switcher-card {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .project-switcher-state {
        grid-column: 2;
        justify-self: start;
    }
}

/* Step 69A - Project Edit Lifecycle */

.project-form {
    display: grid;
    gap: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field > span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #f8fafc;
    padding: 14px 16px;
    color: #172033;
    font: inherit;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: #7c3aed;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(124, 58, 237, 0.12);
}

.form-field textarea {
    resize: vertical;
    min-height: 112px;
}

.edit-strategy-header {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #e7edf5;
}

.edit-save-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background:
        linear-gradient(
            135deg,
            #fff7ed 0%,
            #fdf4ff 48%,
            #eff6ff 100%
        );
}

.edit-save-panel p {
    margin: 8px 0 0;
    color: #64748b;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-error {
    border-radius: 16px;
    padding: 16px 18px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    font-weight: 700;
}

@media (max-width: 760px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field-wide {
        grid-column: auto;
    }

    .edit-save-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions {
        width: 100%;
    }
}


/* =========================================================
   SprintIQ Plan History UI
   Step 70B
   ========================================================= */

.history-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 34px;
    border: 1px solid #e6eaf2;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(124, 58, 237, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 90%,
            rgba(14, 165, 233, 0.14),
            transparent 30%
        ),
        #ffffff;
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08);
}

.history-hero h1 {
    max-width: 760px;
    margin: 10px 0 12px;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.history-hero h1 span {
    color: #7c3aed;
}

.history-hero p {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.75;
}

.history-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.history-back-link,
.history-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.history-back-link {
    border: 1px solid #dbe2ea;
    color: #334155;
    background: #ffffff;
}

.history-edit-link {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );
    box-shadow:
        0 12px 24px rgba(124, 58, 237, 0.22);
}

.history-project-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 22px;
    padding: 26px 30px;
    border: 1px solid #dbeafe;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f5f3ff 55%,
            #fff7ed
        );
}

.history-project-kicker {
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.history-project-banner h2 {
    margin: 7px 0 5px;
    color: #172033;
    font-size: 1.5rem;
}

.history-project-banner p {
    margin: 0;
    color: #64748b;
}

.history-version-total {
    min-width: 150px;
    padding: 18px;
    border-radius: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.1);
}

.history-version-total strong {
    display: block;
    color: #7c3aed;
    font-size: 2rem;
}

.history-version-total span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.history-section {
    margin-top: 26px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    background: #ffffff;
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.06);
}

.history-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.history-section-heading h2 {
    margin: 6px 0 0;
    color: #172033;
    font-size: 1.55rem;
}

.history-section-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.86rem;
    font-weight: 700;
}

.history-version-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.history-version-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
}

.history-version-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            #0ea5e9,
            #6366f1
        );
}

.history-version-card.latest {
    border-color: #c4b5fd;
    background:
        linear-gradient(
            145deg,
            #faf5ff,
            #eff6ff
        );
    box-shadow:
        0 16px 34px rgba(124, 58, 237, 0.12);
}

.history-version-card.latest::before {
    background:
        linear-gradient(
            180deg,
            #7c3aed,
            #ec4899
        );
}

.history-version-top,
.history-trigger-row,
.history-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.history-version-number span {
    display: block;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.history-version-number strong {
    display: block;
    margin-top: 3px;
    color: #172033;
    font-size: 1.8rem;
}

.history-latest-badge,
.history-saved-badge,
.history-trigger-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.history-latest-badge {
    color: #6d28d9;
    background: #ede9fe;
}

.history-saved-badge {
    color: #0369a1;
    background: #e0f2fe;
}

.history-trigger-row {
    margin-top: 16px;
}

.history-trigger-badge {
    color: #047857;
    background: #d1fae5;
}

.history-trigger-row time {
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
}

.history-card-metrics {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.history-card-metrics div {
    padding: 13px;
    border: 1px solid #edf0f5;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
}

.history-card-metrics small {
    display: block;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
}

.history-card-metrics strong {
    display: block;
    margin-top: 4px;
    color: #172033;
    font-size: 1rem;
}

.history-card-footer {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid #e8edf3;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.comparison-section {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(236, 72, 153, 0.08),
            transparent 25%
        ),
        #ffffff;
}

.comparison-stack {
    display: grid;
    gap: 18px;
}

.comparison-card {
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background: #fbfdff;
}

.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.comparison-route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7c3aed;
    font-size: 0.82rem;
    font-weight: 900;
}

.comparison-route b {
    color: #ec4899;
}

.comparison-header h3 {
    margin: 7px 0 0;
    color: #172033;
    font-size: 1.2rem;
}

.comparison-state {
    padding: 8px 12px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 0.74rem;
    font-weight: 900;
}

.comparison-state.changed {
    color: #b45309;
    background: #fef3c7;
}

.comparison-metric-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.comparison-metric {
    position: relative;
    padding: 14px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #ffffff;
}

.comparison-metric.changed {
    border-color: #ddd6fe;
    background: #faf5ff;
}

.comparison-metric small {
    display: block;
    min-height: 32px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
}

.comparison-values {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}

.comparison-values span {
    color: #94a3b8;
}

.comparison-values b {
    color: #cbd5e1;
}

.comparison-values strong {
    color: #172033;
}

.comparison-metric em {
    display: inline-block;
    margin-top: 8px;
    color: #7c3aed;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
}

.phase-change-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.phase-change-box {
    padding: 16px;
    border-radius: 17px;
}

.phase-change-box > span {
    display: block;
    margin-bottom: 10px;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.phase-change-box div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.phase-change-box strong {
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 0.74rem;
}

.phase-change-box.added {
    color: #047857;
    background: #ecfdf5;
}

.phase-change-box.added strong {
    background: #d1fae5;
}

.phase-change-box.removed {
    color: #be123c;
    background: #fff1f2;
}

.phase-change-box.removed strong {
    background: #ffe4e6;
}

.history-empty-state {
    margin-top: 24px;
    padding: 56px 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 26px;
    text-align: center;
    background: #ffffff;
}

.history-empty-icon {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    color: #7c3aed;
    background: #ede9fe;
    font-size: 1.6rem;
}

.history-empty-state h2 {
    margin: 16px 0 8px;
    color: #172033;
}

.history-empty-state p {
    max-width: 560px;
    margin: 0 auto;
    color: #64748b;
    line-height: 1.7;
}

.history-empty-state a {
    display: inline-flex;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 13px;
    color: #ffffff;
    background: #7c3aed;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .comparison-metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .history-hero,
    .history-project-banner,
    .history-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .history-version-grid,
    .phase-change-grid {
        grid-template-columns: 1fr;
    }

    .history-version-total {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .history-hero,
    .history-section {
        padding: 20px;
        border-radius: 20px;
    }

    .history-hero-actions {
        flex-direction: column;
    }

    .history-back-link,
    .history-edit-link {
        width: 100%;
    }

    .history-card-metrics,
    .comparison-metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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


/* =========================================================
   SprintIQ Snapshot Restore
   Step 71A
   ========================================================= */

.history-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.history-card-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: #475569;
    background: #f1f5f9;
    font-size: 0.72rem;
    font-weight: 800;
}

.history-restore-form {
    margin: 0;
}

.history-restore-button {
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );
    box-shadow:
        0 9px 18px rgba(124, 58, 237, 0.18);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.history-restore-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(124, 58, 237, 0.24);
}

.history-current-version {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 0.7rem;
    font-weight: 900;
}

@media (max-width: 620px) {
    .history-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .history-restore-button {
        width: 100%;
    }
}

/* Step 72C - Project Archive Lifecycle */

.archive-page-intro {
    margin-bottom: 24px;
}

.archive-summary-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e7eaf3;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(37, 43, 72, 0.08);
}

.archive-summary-panel h2 {
    margin: 6px 0 0;
}

.archived-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.archived-project-card {
    padding: 26px;
    background: linear-gradient(
        145deg,
        #ffffff,
        #f8f7ff
    );
    border: 1px solid #e5e2f6;
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(57, 47, 112, 0.09);
}

.archived-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.archive-icon,
.archive-empty-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #eee9ff;
    color: #6d4aff;
    font-size: 22px;
    font-weight: 800;
}

.archived-project-copy {
    margin-top: 22px;
}

.archived-project-copy h2 {
    margin: 0 0 8px;
}

.archived-project-copy p {
    margin: 0;
    color: #69708a;
    line-height: 1.65;
}

.archived-project-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.archived-project-meta div {
    padding: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #eceaf5;
    border-radius: 16px;
}

.archived-project-meta small {
    display: block;
    margin-bottom: 5px;
    color: #858ba0;
}

.archive-restore-button,
.project-archive-button {
    width: 100%;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.archive-restore-button {
    padding: 14px 18px;
    background: linear-gradient(
        135deg,
        #6d4aff,
        #8f6cff
    );
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(109, 74, 255, 0.22);
}

.project-archive-form {
    margin-top: 16px;
}

.project-archive-button {
    padding: 12px 16px;
    background: #fff2f2;
    color: #c23f55;
    border: 1px solid #ffd7dc;
}

.archive-restore-button:hover,
.project-archive-button:hover {
    transform: translateY(-2px);
}

.archive-empty-state {
    display: grid;
    justify-items: center;
    padding: 56px 28px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #dcd8ed;
    border-radius: 28px;
}

.archive-empty-state h2 {
    margin: 18px 0 8px;
}

.archive-empty-state p {
    max-width: 560px;
    margin: 0 0 24px;
    color: #72788e;
    line-height: 1.65;
}

@media (max-width: 820px) {
    .archived-project-grid {
        grid-template-columns: 1fr;
    }

    .archive-summary-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   STEP 73A — SPRINTIQ GOLDEN YELLOW THEME FOUNDATION
   Premium warm-white + sunshine + amber visual system
   CSS-only override layer
   ========================================================= */

:root {
    --gold-50: #fffdf2;
    --gold-100: #fff8d6;
    --gold-200: #fef0a8;
    --gold-300: #fde36b;
    --gold-400: #facc15;
    --gold-500: #eab308;
    --gold-600: #ca8a04;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --orange-400: #fb923c;
    --coral-400: #fb7185;
    --mint-400: #34d399;
    --violet-soft: #ede9fe;

    --warm-canvas: #fffdf7;
    --warm-surface: #ffffff;
    --warm-surface-2: #fffaf0;
    --warm-border: #f1dfad;

    --ink-950: #18181b;
    --ink-900: #27221a;
    --ink-700: #574f43;
    --ink-500: #7c7163;

    --gold-shadow:
        0 18px 48px rgba(202, 138, 4, 0.12);

    --gold-shadow-strong:
        0 24px 60px rgba(245, 158, 11, 0.20);
}

/* ---------- Application canvas ---------- */

html,
body {
    background:
        radial-gradient(
            circle at 78% 4%,
            rgba(250, 204, 21, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(251, 146, 60, 0.08),
            transparent 30%
        ),
        var(--warm-canvas);
    color: var(--ink-950);
}

.app-shell,
.main-shell,
.main-content,
.content-area,
.page-content {
    background-color: transparent;
}

/* ---------- Sidebar ---------- */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffdf7 58%,
            #fff8df 100%
        );
    border-right-color: #f2e3b6;
}

.brand {
    color: var(--ink-950);
}

.brand-mark {
    background:
        linear-gradient(
            135deg,
            var(--gold-400),
            var(--amber-500)
        );
    color: var(--ink-950);
    box-shadow:
        0 10px 28px rgba(245, 158, 11, 0.28);
}

.nav-item {
    color: var(--ink-700);
}

.nav-item:hover {
    color: var(--ink-950);
    background:
        linear-gradient(
            90deg,
            rgba(250, 204, 21, 0.16),
            rgba(245, 158, 11, 0.07)
        );
    border-color: rgba(234, 179, 8, 0.24);
}

.nav-item.active {
    color: #713f12;
    background:
        linear-gradient(
            90deg,
            #fef3c7,
            #fff8dd
        );
    border-color: #facc15;
    box-shadow:
        0 10px 26px rgba(234, 179, 8, 0.14);
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
    color: #b45309;
}

/* ---------- Top bar ---------- */

.topbar,
.top-bar,
.app-header {
    background:
        rgba(255, 255, 255, 0.92);
    border-bottom-color: #f2e3b6;
    backdrop-filter: blur(18px);
}

/* ---------- Hero ---------- */

.hero-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(255, 255, 255, 0.46),
            transparent 24%
        ),
        linear-gradient(
            118deg,
            #facc15 0%,
            #fbbf24 42%,
            #f59e0b 72%,
            #fb923c 100%
        );
    border-color: rgba(180, 83, 9, 0.16);
    box-shadow: var(--gold-shadow-strong);
}

.hero-panel::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -90px;
    bottom: -190px;
    border-radius: 50%;
    background:
        rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.hero-panel .eyebrow,
.hero-panel h1,
.hero-panel p {
    color: var(--ink-950);
}

.hero-panel h1 span {
    color: #78350f;
}

.hero-panel .button-primary {
    background: var(--ink-950);
    color: #ffffff;
    border-color: var(--ink-950);
    box-shadow:
        0 12px 28px rgba(24, 24, 27, 0.18);
}

.hero-panel .button-primary:hover {
    background: #292524;
    transform: translateY(-2px);
}

.hero-panel .button-secondary {
    background:
        rgba(255, 255, 255, 0.76);
    color: var(--ink-950);
    border-color:
        rgba(120, 53, 15, 0.22);
}

/* ---------- Generic panels ---------- */

.panel {
    background:
        rgba(255, 255, 255, 0.94);
    border-color: var(--warm-border);
    box-shadow: var(--gold-shadow);
}

.panel:hover {
    border-color:
        rgba(234, 179, 8, 0.46);
}

/* ---------- Project switcher ---------- */

.project-switcher-panel {
    background:
        linear-gradient(
            110deg,
            #fffdf4 0%,
            #fff7d6 52%,
            #fffaf0 100%
        );
    border-color: #f4dc92;
    box-shadow: var(--gold-shadow);
}

.project-switcher-card {
    background:
        rgba(255, 255, 255, 0.90);
    border-color: #ead9ad;
}

.project-switcher-card::before {
    background:
        linear-gradient(
            180deg,
            var(--gold-400),
            var(--amber-500)
        );
}

.project-switcher-card:nth-child(2n)::before {
    background:
        linear-gradient(
            180deg,
            var(--orange-400),
            var(--coral-400)
        );
}

.project-switcher-card:nth-child(3n)::before {
    background:
        linear-gradient(
            180deg,
            var(--mint-400),
            var(--gold-400)
        );
}

.project-switcher-card:hover {
    border-color: var(--gold-400);
    box-shadow:
        0 16px 34px rgba(234, 179, 8, 0.15);
}

.project-switcher-card.active {
    background:
        linear-gradient(
            120deg,
            #fff8d6,
            #ffffff
        );
    border-color: var(--gold-400);
    box-shadow:
        0 16px 38px rgba(245, 158, 11, 0.18);
}

.project-switcher-card.active::before {
    background:
        linear-gradient(
            180deg,
            #eab308,
            #f97316
        );
}

.project-switcher-state {
    background: #fef3c7;
    color: #92400e;
}

.project-switcher-card.active
.project-switcher-state {
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    color: var(--ink-950);
}

/* ---------- Metric cards: colorful system ---------- */

.metric-card {
    border-color: transparent;
    box-shadow:
        0 16px 38px rgba(120, 83, 20, 0.09);
}

.metric-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #fff8cc,
            #ffffff
        );
    border-color: #f4d44d;
}

.metric-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #fff0dd,
            #ffffff
        );
    border-color: #fdba74;
}

.metric-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #dcfce7,
            #ffffff
        );
    border-color: #86efac;
}

.metric-card:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            #ffe4e6,
            #fffaf0
        );
    border-color: #fda4af;
}

.metric-card:nth-child(1)
.metric-value {
    color: #a16207;
}

.metric-card:nth-child(2)
.metric-value {
    color: #c2410c;
}

.metric-card:nth-child(3)
.metric-value {
    color: #047857;
}

.metric-card:nth-child(4)
.metric-value {
    color: #be123c;
}

/* ---------- Current project ---------- */

.project-panel {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
    border-color: #f2d889;
}

.project-meta > div {
    background:
        linear-gradient(
            145deg,
            #fffdf4,
            #fff7d6
        );
    border-color: #f2dfaa;
}

.progress-track {
    background: #f3ead3;
}

.progress-track span {
    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b,
            #fb923c
        );
    box-shadow:
        0 0 18px rgba(245, 158, 11, 0.26);
}

/* ---------- AI intelligence ---------- */

.intelligence-panel {
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(250, 204, 21, 0.24),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #fff8d6,
            #ffffff
        );
    border-color: #f4cf52;
}

.signal-orb {
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    color: var(--ink-950);
    box-shadow:
        0 0 0 7px rgba(250, 204, 21, 0.16),
        0 12px 30px rgba(245, 158, 11, 0.22);
}

.check {
    background: #dcfce7;
    color: #047857;
}

/* ---------- SDLC roadmap ---------- */

.phase-panel {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf4
        );
    border-color: #f0d891;
}

.phase-discovery {
    background:
        linear-gradient(
            135deg,
            #facc15,
            #eab308
        );
}

.phase-architecture {
    background:
        linear-gradient(
            135deg,
            #fbbf24,
            #f59e0b
        );
}

.phase-design {
    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f97316
        );
}

.phase-development {
    background:
        linear-gradient(
            135deg,
            #fde047,
            #f59e0b
        );
}

.phase-qa {
    background:
        linear-gradient(
            135deg,
            #34d399,
            #10b981
        );
}

.phase-uat {
    background:
        linear-gradient(
            135deg,
            #fda4af,
            #fb7185
        );
}

.phase-deploy {
    background:
        linear-gradient(
            135deg,
            #c4b5fd,
            #a78bfa
        );
}

.phase-hypercare {
    background:
        linear-gradient(
            135deg,
            #67e8f9,
            #22d3ee
        );
}

/* ---------- Projects portfolio ---------- */

.projects-hero,
.project-form-intro,
.history-hero,
.archived-projects-hero {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(250, 204, 21, 0.20),
            transparent 26%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #fff8d6
        );
    border-color: #f0d16b;
    box-shadow: var(--gold-shadow);
}

.project-list-card {
    background: #ffffff;
    border-color: #ecdba7;
    box-shadow: var(--gold-shadow);
}

.project-list-card:nth-child(4n + 1) {
    border-top-color: #facc15;
}

.project-list-card:nth-child(4n + 2) {
    border-top-color: #fb923c;
}

.project-list-card:nth-child(4n + 3) {
    border-top-color: #34d399;
}

.project-list-card:nth-child(4n + 4) {
    border-top-color: #fb7185;
}

.project-list-meta > div {
    background: #fffaf0;
}

/* ---------- Buttons ---------- */

.button-primary {
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    color: var(--ink-950);
    border-color: #eab308;
    box-shadow:
        0 12px 26px rgba(245, 158, 11, 0.20);
}

.button-primary:hover {
    background:
        linear-gradient(
            135deg,
            #fde047,
            #fb923c
        );
    box-shadow:
        0 16px 34px rgba(245, 158, 11, 0.28);
}

/* ---------- Forms ---------- */

.form-field input,
.form-field textarea,
.form-field select {
    background: #fffef9;
    border-color: #ead9a7;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: #facc15;
    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.16);
}

/* ---------- History ---------- */

.history-version-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
    border-color: #eedb9f;
}

.history-version-card.latest {
    border-color: #facc15;
    box-shadow:
        0 18px 42px rgba(234, 179, 8, 0.14);
}

/* ---------- Status ---------- */

.status-live,
.system-status {
    border-color: #a7f3d0;
}

.project-status-pill {
    background: #dcfce7;
    color: #047857;
}

/* ---------- Selection and scrollbar ---------- */

::selection {
    background: #fde047;
    color: var(--ink-950);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #facc15,
            #f59e0b
        );
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: #fff8e1;
}


/* =========================================================
   STEP 73B — SPRINTIQ PREMIUM YELLOW POLISH
   Remove residual blue/purple accents
   Sharpen contrast and premium golden hierarchy
   CSS-only override layer
   ========================================================= */

/* ---------- Refined premium palette ---------- */

:root {
    --sun-300: #fde68a;
    --sun-400: #facc15;
    --sun-500: #eab308;
    --amber-premium: #f59e0b;
    --amber-deep: #b45309;

    --cream-page: #fffdf8;
    --cream-soft: #fffaf0;
    --cream-warm: #fff7d6;

    --charcoal: #18181b;
    --charcoal-soft: #292524;
    --warm-copy: #62584b;

    --premium-border:
        rgba(217, 164, 6, 0.30);

    --premium-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

/* ---------- Reduce overall yellow wash ---------- */

html,
body {
    background:
        radial-gradient(
            circle at 82% 5%,
            rgba(250, 204, 21, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 92%,
            rgba(245, 158, 11, 0.05),
            transparent 28%
        ),
        #fffdf9;
}

/* ---------- Premium sunshine hero ---------- */

.hero-panel {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 255, 255, 0.34),
            transparent 25%
        ),
        linear-gradient(
            112deg,
            #facc15 0%,
            #fbbf24 48%,
            #f59e0b 100%
        );
    border-color:
        rgba(180, 83, 9, 0.18);
    box-shadow:
        0 24px 58px rgba(202, 138, 4, 0.18);
}

.hero-panel::after {
    background:
        rgba(255, 255, 255, 0.18);
}

.hero-panel h1,
.hero-panel h1 span {
    color: #3f2a0a;
}

.hero-panel p {
    color: #4a3514;
}

.hero-panel .eyebrow {
    color: #3f2a0a;
}

.hero-panel .button-primary {
    background:
        linear-gradient(
            135deg,
            #18181b,
            #292524
        );
    color: #ffffff;
    border-color: #18181b;
}

.hero-panel .button-secondary {
    background:
        rgba(255, 255, 255, 0.82);
    color: #3f2a0a;
    border-color:
        rgba(120, 53, 15, 0.24);
}

/* ---------- Remove residual purple/blue eyebrow accents ---------- */

.eyebrow {
    color: #a16207;
}

.project-switcher-panel .eyebrow,
.project-panel .eyebrow,
.intelligence-panel .eyebrow,
.phase-panel .eyebrow,
.projects-hero .eyebrow,
.project-form-intro .eyebrow,
.history-hero .eyebrow,
.archived-projects-hero .eyebrow {
    color: #a16207;
}

/* ---------- Sidebar final golden identity ---------- */

.brand-mark {
    background:
        linear-gradient(
            145deg,
            #facc15,
            #f59e0b
        );
    color: #18181b;
}

.nav-item.active {
    color: #78350f;
    background:
        linear-gradient(
            90deg,
            #fff3bf,
            #fffaf0
        );
    border-color: #fbbf24;
}

.nav-item.active .nav-icon {
    color: #b45309;
}

/* ---------- Project switcher cleaner white contrast ---------- */

.project-switcher-panel {
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #fffaf0 52%,
            #fff7d6 100%
        );
    border-color:
        rgba(234, 179, 8, 0.34);
}

.project-switcher-card {
    background:
        rgba(255, 255, 255, 0.96);
    border-color:
        rgba(202, 138, 4, 0.22);
}

.project-switcher-card.active {
    background:
        linear-gradient(
            120deg,
            #fffdf4,
            #ffffff
        );
    border-color: #fbbf24;
    box-shadow:
        0 14px 34px rgba(245, 158, 11, 0.15);
}

/* Remove purple project index badge */

.project-switcher-index {
    background: #fff3bf;
    color: #92400e;
}

.project-switcher-card:nth-child(2n)
.project-switcher-index {
    background: #ffedd5;
    color: #c2410c;
}

.project-switcher-card:nth-child(3n)
.project-switcher-index {
    background: #dcfce7;
    color: #047857;
}

/* ---------- Metric card premium contrast ---------- */

.metric-card {
    box-shadow:
        0 16px 36px rgba(87, 63, 24, 0.08);
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 46px rgba(120, 83, 20, 0.13);
}

/* First metric: remove blue */

.metric-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #fff8cc,
            #ffffff
        );
    border-color: #eab308;
}

.metric-card:nth-child(1)
.metric-icon {
    background: #fef3c7;
    color: #a16207;
}

.metric-card:nth-child(1)
.metric-value {
    color: #a16207;
}

/* Second metric: remove purple */

.metric-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #fff0dd,
            #ffffff
        );
    border-color: #fb923c;
}

.metric-card:nth-child(2)
.metric-icon {
    background: #ffedd5;
    color: #c2410c;
}

.metric-card:nth-child(2)
.metric-value {
    color: #c2410c;
}

/* Third metric: mint */

.metric-card:nth-child(3)
.metric-icon {
    background: #d1fae5;
    color: #047857;
}

/* Fourth metric: coral */

.metric-card:nth-child(4)
.metric-icon {
    background: #fff3c4;
    color: #c2410c;
}

/* ---------- Neutralize leftover trend badges ---------- */

.metric-card .trend {
    background: #fff7d6;
    color: #92400e;
}

.metric-card:nth-child(1)
.trend {
    background: #dcfce7;
    color: #047857;
}

.metric-card:nth-child(3)
.trend {
    background: #d1fae5;
    color: #047857;
}

.metric-card:nth-child(4)
.trend {
    background: #fef3c7;
    color: #b45309;
}

/* ---------- Current project: remove purple ---------- */

.project-panel {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );
    border-color:
        rgba(234, 179, 8, 0.34);
}

.project-panel .status-pill,
.project-panel .project-status-pill {
    background: #fef3c7;
    color: #92400e;
}

.project-meta > div {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
    border-color:
        rgba(217, 164, 6, 0.24);
}

/* ---------- Progress bar pure golden ---------- */

.progress-track span {
    background:
        linear-gradient(
            90deg,
            #facc15,
            #fbbf24,
            #f59e0b
        );
}

/* ---------- AI card premium ---------- */

.intelligence-panel {
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(250, 204, 21, 0.20),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #fffdf4,
            #ffffff
        );
    border-color:
        rgba(234, 179, 8, 0.40);
}

.signal-orb {
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    color: #18181b;
}

/* ---------- Generic panel contrast ---------- */

.panel {
    background:
        rgba(255, 255, 255, 0.97);
}

.phase-panel {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );
}

/* ---------- Portfolio hero cleaner ---------- */

.projects-hero,
.project-form-intro,
.history-hero,
.archived-projects-hero {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(250, 204, 21, 0.16),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #fffaf0
        );
    border-color:
        rgba(234, 179, 8, 0.34);
}

/* ---------- Project cards sharper ---------- */

.project-list-card {
    background: #ffffff;
    border-color:
        rgba(202, 138, 4, 0.22);
    box-shadow:
        0 18px 42px rgba(87, 63, 24, 0.09);
}

.project-list-meta > div {
    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fffaf0
        );
}

/* ---------- Remove purple from common action links ---------- */

.text-button,
.project-open-link {
    color: #a16207;
}

.text-button:hover,
.project-open-link:hover {
    color: #b45309;
}

/* ---------- Remove purple draft badges ---------- */

.status-pill,
.project-status-pill,
.history-current-version {
    background: #fef3c7;
    color: #92400e;
}

/* Preserve success semantics */

.status-live,
.system-status {
    color: #047857;
}

/* ---------- Focus states ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid rgba(250, 204, 21, 0.52);
    outline-offset: 3px;
}

/* ---------- Premium heading hierarchy ---------- */

h1,
h2,
h3,
.panel h2,
.metric-card strong {
    color: #201a12;
}

/* ---------- Mobile polish ---------- */

@media (max-width: 900px) {
    .hero-panel {
        background:
            linear-gradient(
                145deg,
                #facc15,
                #f59e0b
            );
    }

    .project-switcher-panel {
        background:
            linear-gradient(
                145deg,
                #ffffff,
                #fff8d6
            );
    }
}


/* =========================================================
   STEP 73C.2 — GOLDEN STATUS + ACTION SYSTEM
   Final controlled override layer
   Removes visible purple residue from shared UI actions
   ========================================================= */

/* ---------- Dashboard Draft / shared status badges ---------- */

.status-badge,
.status-pill,
.project-status-pill,
.history-current-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: #78350f;
    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    border:
        1px solid rgba(217, 119, 6, 0.28);

    box-shadow:
        0 6px 16px rgba(180, 83, 9, 0.10);

    font-weight: 800;
}

/* ---------- Primary actions ---------- */

.button-primary {
    color: #18181b;
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border:
        1px solid rgba(180, 83, 9, 0.24);

    box-shadow:
        0 10px 24px rgba(180, 83, 9, 0.18);
}

.button-primary:hover {
    color: #18181b;
    background:
        linear-gradient(
            135deg,
            #fde047,
            #fbbf24
        );

    border-color:
        rgba(146, 64, 14, 0.34);

    box-shadow:
        0 14px 30px rgba(180, 83, 9, 0.24);

    transform:
        translateY(-2px);
}

/* Keep hero CTA premium charcoal for hierarchy */

.hero-panel .button-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #18181b,
            #292524
        );

    border-color:
        rgba(24, 24, 27, 0.72);

    box-shadow:
        0 12px 26px rgba(24, 24, 27, 0.20);
}

.hero-panel .button-primary:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #292524,
            #44403c
        );

    box-shadow:
        0 16px 34px rgba(24, 24, 27, 0.26);
}

/* ---------- Text actions ---------- */

.text-button,
.project-open-link {
    color: #b45309;
    font-weight: 800;
}

.text-button:hover,
.project-open-link:hover {
    color: #78350f;
}

/* ---------- History restore action ---------- */

.history-restore-button {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #facc15
        );

    border:
        1px solid rgba(217, 119, 6, 0.30);

    box-shadow:
        0 8px 18px rgba(180, 83, 9, 0.12);
}

.history-restore-button:hover {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #fde68a,
            #f59e0b
        );

    border-color:
        rgba(180, 83, 9, 0.40);

    box-shadow:
        0 12px 24px rgba(180, 83, 9, 0.18);

    transform:
        translateY(-1px);
}

/* ---------- Project identity badge ---------- */

.project-id-badge {
    color: #92400e;
    background: #fff7d6;

    border:
        1px solid rgba(217, 119, 6, 0.24);
}

/* ---------- Dashboard sprint total ---------- */

.sprint-total-badge {
    color: #78350f;
    background: #fef3c7;

    border:
        1px solid rgba(217, 119, 6, 0.24);
}

/* ---------- Preserve semantic live health ---------- */

.live-badge,
.system-pill,
.status-live,
.system-status {
    color: #047857;
}

/* ---------- Keyboard focus consistency ---------- */

.button-primary:focus-visible,
.text-button:focus-visible,
.project-open-link:focus-visible,
.history-restore-button:focus-visible {
    outline:
        3px solid rgba(250, 204, 21, 0.46);

    outline-offset:
        3px;
}


/* =========================================================
   STEP 73C.4 — PREMIUM GOLDEN PORTFOLIO + HISTORY CONSISTENCY
   Projects + Archived Vault + Plan History
   Controlled final override layer
   ========================================================= */

/* ---------- Shared page hero surfaces ---------- */

.projects-hero,
.project-form-intro.archive-page-intro,
.history-hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(250, 204, 21, 0.24),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 52%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.22);

    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

.projects-hero::after,
.project-form-intro.archive-page-intro::after,
.history-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -72px;
    top: -82px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(250, 204, 21, 0.30),
            rgba(245, 158, 11, 0.05) 58%,
            transparent 72%
        );

    pointer-events: none;
}

.projects-hero h1,
.project-form-intro.archive-page-intro h1,
.history-hero h1 {
    color: #18181b;
}

.projects-hero p,
.project-form-intro.archive-page-intro p,
.history-hero p {
    color: #62584b;
}

/* ---------- Active project portfolio cards ---------- */

.project-list-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffdf8 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.09);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.project-list-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;

    background:
        linear-gradient(
            180deg,
            #facc15,
            #f59e0b
        );
}

.project-list-card:nth-child(2n)::before {
    background:
        linear-gradient(
            180deg,
            #f59e0b,
            #d97706
        );
}

.project-list-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(217, 119, 6, 0.36);

    box-shadow:
        0 22px 46px rgba(120, 83, 20, 0.14);
}

.project-list-card h2 {
    color: #18181b;
}

.project-list-card > p {
    color: #62584b;
}

.project-list-meta div {
    background: #fffaf0;

    border:
        1px solid rgba(217, 119, 6, 0.14);
}

.project-list-meta small {
    color: #8a7255;
}

.project-list-meta strong {
    color: #292524;
}

/* ---------- Portfolio action hierarchy ---------- */

.project-open-link {
    color: #92400e;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    border:
        1px solid rgba(217, 119, 6, 0.24);

    box-shadow:
        0 7px 16px rgba(180, 83, 9, 0.08);
}

.project-open-link:hover {
    color: #78350f;

    background:
        linear-gradient(
            135deg,
            #fde68a,
            #facc15
        );

    border-color:
        rgba(180, 83, 9, 0.34);
}

.project-archive-button {
    color: #7c2d12;
    background: #fff7ed;

    border:
        1px solid rgba(194, 65, 12, 0.20);

    box-shadow: none;
}

.project-archive-button:hover {
    color: #7c2d12;
    background: #ffedd5;

    border-color:
        rgba(194, 65, 12, 0.34);

    transform:
        translateY(-1px);
}

/* ---------- Archived vault summary ---------- */

.archive-summary-panel {
    background:
        linear-gradient(
            135deg,
            #18181b,
            #292524
        );

    border:
        1px solid rgba(250, 204, 21, 0.24);

    box-shadow:
        0 18px 40px rgba(24, 24, 27, 0.18);
}

.archive-summary-panel h2,
.archive-summary-panel strong {
    color: #fde68a;
}

.archive-summary-panel p,
.archive-summary-panel small {
    color: rgba(255, 255, 255, 0.74);
}

/* ---------- Archived project cards ---------- */

.archived-project-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.09);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.archived-project-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;

    background:
        linear-gradient(
            180deg,
            #facc15,
            #d97706
        );
}

.archived-project-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(217, 119, 6, 0.34);

    box-shadow:
        0 20px 42px rgba(120, 83, 20, 0.13);
}

.archived-project-copy h2 {
    color: #18181b;
}

.archived-project-copy p {
    color: #62584b;
}

.archived-project-meta div {
    background: #fffdf8;

    border:
        1px solid rgba(217, 119, 6, 0.14);
}

.archive-restore-button {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border:
        1px solid rgba(180, 83, 9, 0.24);

    box-shadow:
        0 9px 20px rgba(180, 83, 9, 0.14);
}

.archive-restore-button:hover {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #fde047,
            #fbbf24
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 26px rgba(180, 83, 9, 0.20);
}

/* ---------- Empty archive state ---------- */

.archive-empty-state {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );

    border:
        1px dashed rgba(217, 119, 6, 0.34);

    box-shadow:
        0 14px 32px rgba(120, 83, 20, 0.07);
}

.archive-empty-icon {
    color: #92400e;
    background: #fef3c7;

    border:
        1px solid rgba(217, 119, 6, 0.22);
}

/* ---------- History project banner ---------- */

.history-project-banner {
    background:
        linear-gradient(
            135deg,
            #18181b,
            #292524
        );

    border:
        1px solid rgba(250, 204, 21, 0.22);

    box-shadow:
        0 18px 42px rgba(24, 24, 27, 0.18);
}

.history-project-banner h2 {
    color: #ffffff;
}

.history-project-banner p,
.history-project-kicker {
    color: #fde68a;
}

/* ---------- Version cards ---------- */

.history-version-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.08);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.history-version-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(217, 119, 6, 0.34);

    box-shadow:
        0 20px 42px rgba(120, 83, 20, 0.13);
}

.history-version-card.latest {
    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fef3c7
        );

    border:
        1px solid rgba(217, 119, 6, 0.36);

    box-shadow:
        0 18px 40px rgba(180, 83, 9, 0.13);
}

.history-version-card::before {
    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b
        );
}

.history-version-card.latest::before {
    background:
        linear-gradient(
            90deg,
            #f59e0b,
            #d97706
        );
}

/* ---------- History badges ---------- */

.history-latest-badge {
    color: #78350f;
    background: #fde68a;

    border:
        1px solid rgba(217, 119, 6, 0.28);
}

.history-saved-badge {
    color: #92400e;
    background: #fff7d6;

    border:
        1px solid rgba(217, 119, 6, 0.20);
}

.history-trigger-badge {
    color: #57534e;
    background: #fafaf9;

    border:
        1px solid rgba(120, 113, 108, 0.20);
}

/* ---------- History comparison cards ---------- */

.comparison-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    box-shadow:
        0 14px 32px rgba(120, 83, 20, 0.08);
}

.comparison-metric {
    background: #fffaf0;

    border:
        1px solid rgba(217, 119, 6, 0.14);
}

.comparison-metric.changed {
    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fff7d6
        );

    border-color:
        rgba(217, 119, 6, 0.30);
}

.comparison-state.changed {
    color: #78350f;
    background: #fde68a;

    border:
        1px solid rgba(217, 119, 6, 0.26);
}

/* ---------- History navigation ---------- */

.history-back-link,
.history-edit-link {
    color: #92400e;
}

.history-back-link:hover,
.history-edit-link:hover {
    color: #78350f;
}

/* ---------- Focus consistency ---------- */

.project-archive-button:focus-visible,
.archive-restore-button:focus-visible,
.history-back-link:focus-visible,
.history-edit-link:focus-visible {
    outline:
        3px solid rgba(250, 204, 21, 0.46);

    outline-offset:
        3px;
}


/* =========================================================
   STEP 73C.6 — PREMIUM GOLDEN NEW + EDIT FORM SYSTEM
   New Project + Edit Project
   Controlled final override layer
   ========================================================= */

/* ---------- New project shell ---------- */

.project-form-shell {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffdf8 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

/* ---------- New project intro ---------- */

.project-form-intro:not(.archive-page-intro) {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(250, 204, 21, 0.25),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 52%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.22);

    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

.project-form-intro:not(.archive-page-intro)::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -78px;
    top: -88px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(250, 204, 21, 0.30),
            rgba(245, 158, 11, 0.05) 58%,
            transparent 72%
        );

    pointer-events: none;
}

.project-form-intro h1 {
    color: #18181b;
}

.project-form-intro p {
    color: #62584b;
}

/* ---------- New project section hierarchy ---------- */

.form-section-heading {
    position: relative;

    padding:
        20px 22px;

    margin-top:
        10px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.16);

    border-radius:
        18px;
}

.form-section-heading:not(:first-of-type) {
    margin-top:
        26px;
}

.form-section-heading > span {
    color: #92400e;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    border:
        1px solid rgba(217, 119, 6, 0.24);

    box-shadow:
        0 6px 14px rgba(180, 83, 9, 0.08);
}

.form-section-heading h2 {
    color: #18181b;
}

.form-section-heading p {
    color: #62584b;
}

/* ---------- New project fields ---------- */

.project-create-form .field {
    color: #292524;
}

.project-create-form .field > span {
    color: #57534e;
    font-weight: 800;
}

.project-create-form input,
.project-create-form textarea,
.project-create-form select {
    color: #18181b;
    background: #ffffff;

    border:
        1px solid rgba(168, 142, 96, 0.34);

    box-shadow:
        inset 0 1px 2px rgba(120, 83, 20, 0.03);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.project-create-form input:hover,
.project-create-form textarea:hover,
.project-create-form select:hover {
    border-color:
        rgba(217, 119, 6, 0.38);
}

.project-create-form input:focus,
.project-create-form textarea:focus,
.project-create-form select:focus {
    outline: none;

    background: #fffdf8;

    border-color:
        #f59e0b;

    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.20),
        0 8px 20px rgba(180, 83, 9, 0.07);
}

/* ---------- New project benefits ---------- */

.form-benefit-list {
    background:
        linear-gradient(
            135deg,
            #18181b,
            #292524
        );

    border:
        1px solid rgba(250, 204, 21, 0.22);

    box-shadow:
        0 16px 34px rgba(24, 24, 27, 0.16);
}

.form-benefit-list li,
.form-benefit-list p,
.form-benefit-list span {
    color:
        rgba(255, 255, 255, 0.82);
}

.form-benefit-list strong {
    color: #fde68a;
}

/* ---------- Shared form actions ---------- */

.form-actions {
    padding-top:
        22px;

    border-top:
        1px solid rgba(217, 119, 6, 0.16);
}

.button-secondary,
.secondary-button {
    color: #78350f;
    background: #fffdf8;

    border:
        1px solid rgba(217, 119, 6, 0.28);

    box-shadow:
        0 7px 16px rgba(120, 83, 20, 0.06);
}

.button-secondary:hover,
.secondary-button:hover {
    color: #78350f;
    background: #fef3c7;

    border-color:
        rgba(180, 83, 9, 0.36);

    transform:
        translateY(-1px);
}

/* ---------- Edit project form surface ---------- */

.project-form {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

/* ---------- Edit project fields ---------- */

.form-field > span {
    color: #57534e;
    font-weight: 800;
}

.form-field input,
.form-field textarea,
.form-field select {
    color: #18181b;
    background: #ffffff;

    border:
        1px solid rgba(168, 142, 96, 0.34);

    box-shadow:
        inset 0 1px 2px rgba(120, 83, 20, 0.03);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
    border-color:
        rgba(217, 119, 6, 0.38);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;

    color: #18181b;
    background: #fffdf8;

    border-color:
        #f59e0b;

    box-shadow:
        0 0 0 4px rgba(250, 204, 21, 0.20),
        0 8px 20px rgba(180, 83, 9, 0.07);
}

/* ---------- Edit section panels ---------- */

.project-form .panel {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    box-shadow:
        0 12px 28px rgba(120, 83, 20, 0.07);
}

.project-form .panel-header h2 {
    color: #18181b;
}

.edit-strategy-header {
    padding-bottom:
        14px;

    border-bottom:
        1px solid rgba(217, 119, 6, 0.16);
}

/* ---------- Edit save / regenerate panel ---------- */

.edit-save-panel {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(250, 204, 21, 0.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8,
            #fef3c7
        );

    border:
        1px solid rgba(217, 119, 6, 0.28);

    box-shadow:
        0 18px 42px rgba(120, 83, 20, 0.11);
}

.edit-save-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;

    background:
        linear-gradient(
            180deg,
            #facc15,
            #f59e0b
        );
}

.edit-save-panel h2 {
    color: #18181b;
}

.edit-save-panel p {
    color: #62584b;
}

/* ---------- Edit primary action ---------- */

.edit-save-panel .primary-button,
.project-form .primary-button {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border:
        1px solid rgba(180, 83, 9, 0.24);

    box-shadow:
        0 11px 24px rgba(180, 83, 9, 0.18);
}

.edit-save-panel .primary-button:hover,
.project-form .primary-button:hover {
    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #fde047,
            #fbbf24
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px rgba(180, 83, 9, 0.24);
}

/* ---------- Form validation ---------- */

.form-error {
    color: #9a3412;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #ffedd5
        );

    border:
        1px solid rgba(194, 65, 12, 0.24);

    box-shadow:
        0 8px 18px rgba(154, 52, 18, 0.07);
}

/* ---------- Accessible focus ---------- */

.project-create-form input:focus-visible,
.project-create-form textarea:focus-visible,
.project-create-form select:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible,
.button-secondary:focus-visible,
.secondary-button:focus-visible,
.primary-button:focus-visible {
    outline:
        3px solid rgba(250, 204, 21, 0.46);

    outline-offset:
        3px;
}

/* ---------- Mobile form polish ---------- */

@media (max-width: 760px) {
    .form-section-heading {
        padding:
            18px;
    }

    .project-form-shell,
    .project-form {
        box-shadow:
            0 12px 28px rgba(120, 83, 20, 0.08);
    }

    .edit-save-panel {
        padding:
            20px;
    }
}


/* =========================================================
   STEP 74B.1 — DEDICATED DYNAMIC SDLC PLANNER
   Premium golden lifecycle intelligence UI
   ========================================================= */

.sdlc-planner-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    margin-bottom: 22px;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(250, 204, 21, 0.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 52%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.24);

    border-radius: 26px;

    box-shadow:
        0 20px 48px rgba(120, 83, 20, 0.11);
}

.sdlc-planner-hero::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -82px;
    top: -92px;
    border-radius: 50%;
    border:
        32px solid rgba(245, 158, 11, 0.10);
}

.sdlc-planner-hero > * {
    position: relative;
    z-index: 1;
}

.sdlc-planner-hero h1 {
    margin:
        8px 0 10px;
    color: #18181b;
    font-size:
        clamp(2rem, 4vw, 3.3rem);
    line-height: 1.02;
}

.sdlc-planner-hero p {
    max-width: 720px;
    margin: 0;
    color: #62584b;
    line-height: 1.7;
}

.sdlc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sdlc-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.sdlc-summary-card {
    padding: 20px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );
    border:
        1px solid rgba(217, 119, 6, 0.20);
    border-radius: 20px;
    box-shadow:
        0 12px 30px rgba(120, 83, 20, 0.08);
}

.sdlc-summary-card small,
.sdlc-summary-card span {
    display: block;
    color: #786b5c;
}

.sdlc-summary-card strong {
    display: block;
    margin: 6px 0;
    color: #18181b;
    font-size: 1.8rem;
}

.sdlc-project-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 22px;

    background:
        linear-gradient(
            110deg,
            #18181b,
            #292524
        );

    border-radius: 22px;
    box-shadow:
        0 18px 40px rgba(24, 24, 27, 0.16);
}

.sdlc-project-banner h2 {
    margin: 5px 0 0;
    color: #ffffff;
}

.sdlc-project-banner .eyebrow {
    color: #facc15;
}

.sdlc-project-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sdlc-project-facts span {
    padding: 8px 12px;
    color: #fde68a;
    background:
        rgba(250, 204, 21, 0.10);
    border:
        1px solid rgba(250, 204, 21, 0.20);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.sdlc-roadmap-section,
.sdlc-sprint-section {
    padding: 26px;
    margin-bottom: 22px;
    background: #ffffff;
    border:
        1px solid rgba(217, 119, 6, 0.18);
    border-radius: 24px;
    box-shadow:
        0 16px 38px rgba(120, 83, 20, 0.08);
}

.sdlc-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.sdlc-section-heading h2 {
    margin: 6px 0 0;
    color: #18181b;
}

.sdlc-section-heading p {
    max-width: 430px;
    margin: 0;
    color: #786b5c;
}

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

.sdlc-phase-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffdf8 100%
        );
    border:
        1px solid rgba(217, 119, 6, 0.20);
    border-radius: 22px;
    box-shadow:
        0 12px 28px rgba(120, 83, 20, 0.07);
}

.sdlc-phase-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            #facc15,
            #f59e0b
        );
}

.sdlc-phase-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sdlc-phase-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #18181b;
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    border-radius: 14px;
    font-weight: 900;
}

.sdlc-phase-allocation {
    color: #92400e;
    background: #fef3c7;
    border:
        1px solid rgba(217, 119, 6, 0.20);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 800;
}

.sdlc-phase-card h3 {
    margin: 18px 0 12px;
    color: #18181b;
}

.sdlc-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #786b5c;
    font-size: 0.88rem;
}

.sdlc-date-range strong {
    color: #d97706;
}

.sdlc-phase-metrics {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.sdlc-phase-metrics div {
    padding: 12px;
    background: #fffaf0;
    border:
        1px solid rgba(217, 119, 6, 0.14);
    border-radius: 14px;
}

.sdlc-phase-metrics small,
.sdlc-phase-metrics strong {
    display: block;
}

.sdlc-phase-metrics small {
    color: #8a7b69;
    margin-bottom: 4px;
}

.sdlc-phase-metrics strong {
    color: #292524;
}

.sdlc-rationale {
    margin-top: 14px;
    padding: 12px 14px;
    color: #62584b;
    background:
        linear-gradient(
            90deg,
            #fff7d6,
            #fffdf8
        );
    border-left:
        3px solid #f59e0b;
    border-radius: 10px;
    font-size: 0.88rem;
}

.sdlc-sprint-map {
    margin-top: 16px;
}

.sdlc-sprint-map small {
    display: block;
    margin-bottom: 8px;
    color: #8a7b69;
    font-weight: 700;
}

.sdlc-sprint-map > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sdlc-sprint-map span {
    padding: 6px 9px;
    color: #78350f;
    background: #fde68a;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 900;
}

.sdlc-sprint-stack {
    display: grid;
    gap: 10px;
}

.sdlc-sprint-row {
    display: grid;
    grid-template-columns:
        auto minmax(150px, 0.55fr) 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background:
        linear-gradient(
            100deg,
            #fffdf8,
            #fffaf0
        );
    border:
        1px solid rgba(217, 119, 6, 0.16);
    border-radius: 18px;
}

.sdlc-sprint-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 42px;
    padding: 0 10px;
    color: #18181b;
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );
    border-radius: 13px;
    font-weight: 900;
}

.sdlc-sprint-copy strong,
.sdlc-sprint-copy small {
    display: block;
}

.sdlc-sprint-copy strong {
    color: #292524;
}

.sdlc-sprint-copy small {
    margin-top: 4px;
    color: #8a7b69;
}

.sdlc-sprint-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sdlc-sprint-phases span {
    padding: 7px 10px;
    color: #92400e;
    background: #fef3c7;
    border:
        1px solid rgba(217, 119, 6, 0.16);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .sdlc-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sdlc-phase-grid {
        grid-template-columns: 1fr;
    }

    .sdlc-planner-hero,
    .sdlc-project-banner,
    .sdlc-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .sdlc-summary-grid {
        grid-template-columns: 1fr;
    }

    .sdlc-sprint-row {
        grid-template-columns: 1fr;
    }

    .sdlc-phase-metrics {
        grid-template-columns: 1fr;
    }

    .sdlc-planner-hero,
    .sdlc-roadmap-section,
    .sdlc-sprint-section {
        padding: 20px;
    }
}

/* =========================================================
   STEP 74C.2 — DEDICATED DYNAMIC SPRINT PLANNER
   Premium golden project-aware sprint intelligence
   ========================================================= */

.sprint-planner-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 38px;
    margin-bottom: 24px;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(250, 204, 21, 0.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 52%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.22);

    border-radius: 28px;

    box-shadow:
        0 20px 48px rgba(120, 83, 20, 0.11);
}

.sprint-planner-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background:
        rgba(250, 204, 21, 0.16);
}

.sprint-planner-hero > * {
    position: relative;
    z-index: 1;
}

.sprint-planner-hero h1 {
    max-width: 760px;
    margin:
        10px 0 14px;

    color: #18181b;
    font-size:
        clamp(
            2rem,
            4vw,
            3.6rem
        );

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.sprint-planner-hero h1 span {
    color: #b45309;
}

.sprint-planner-hero p {
    max-width: 720px;
    margin: 0;
    color: #62584b;
    line-height: 1.75;
}

.sprint-planner-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sprint-planner-summary {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 16px;
    margin-bottom: 24px;
}

.sprint-planner-summary article {
    padding: 20px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
    border:
        1px solid rgba(217, 119, 6, 0.18);
    border-radius: 20px;
    box-shadow:
        0 12px 30px rgba(120, 83, 20, 0.08);
}

.sprint-planner-summary small,
.sprint-planner-summary strong {
    display: block;
}

.sprint-planner-summary small {
    margin-bottom: 8px;
    color: #8a7964;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sprint-planner-summary strong {
    color: #292524;
    font-size: 1rem;
    line-height: 1.4;
}

.sprint-planner-section {
    padding: 30px;
    margin-bottom: 24px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );
    border:
        1px solid rgba(217, 119, 6, 0.18);
    border-radius: 26px;
    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.09);
}

.sprint-planner-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sprint-planner-heading h2 {
    margin:
        8px 0 8px;
    color: #18181b;
    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2.2rem
        );
    letter-spacing: -0.03em;
}

.sprint-planner-heading p {
    max-width: 680px;
    margin: 0;
    color: #62584b;
    line-height: 1.7;
}

.sprint-planner-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.sprint-planner-card {
    position: relative;
    overflow: hidden;
    padding: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffdf8 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    border-radius: 22px;

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.08);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.sprint-planner-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;

    background:
        linear-gradient(
            180deg,
            #facc15,
            #f59e0b
        );
}

.sprint-planner-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(217, 119, 6, 0.36);

    box-shadow:
        0 20px 42px rgba(120, 83, 20, 0.13);
}

.sprint-planner-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.sprint-planner-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;

    color: #18181b;
    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border-radius: 15px;
    font-weight: 900;
    box-shadow:
        0 10px 22px rgba(180, 83, 9, 0.16);
}

.sprint-planner-duration {
    padding:
        7px 11px;
    color: #78350f;
    background: #fef3c7;
    border:
        1px solid rgba(217, 119, 6, 0.22);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
}

.sprint-planner-copy small {
    display: block;
    margin-bottom: 7px;
    color: #a16207;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sprint-planner-copy h3 {
    margin: 0;
    color: #292524;
    font-size: 1.12rem;
    line-height: 1.5;
}

.sprint-planner-dates {
    display: grid;
    grid-template-columns:
        1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding:
        16px 0;
    margin:
        20px 0;
    border-top:
        1px solid rgba(217, 119, 6, 0.14);
    border-bottom:
        1px solid rgba(217, 119, 6, 0.14);
}

.sprint-planner-dates div:last-child {
    text-align: right;
}

.sprint-planner-dates small,
.sprint-planner-dates strong {
    display: block;
}

.sprint-planner-dates small {
    margin-bottom: 5px;
    color: #8a7964;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sprint-planner-dates strong {
    color: #292524;
    font-size: 0.88rem;
}

.sprint-planner-dates > span {
    color: #d97706;
    font-weight: 900;
}

.sprint-planner-phase-block > small {
    display: block;
    margin-bottom: 10px;
    color: #8a7964;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sprint-planner-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sprint-planner-phases span {
    padding:
        7px 10px;
    color: #78350f;
    background:
        linear-gradient(
            135deg,
            #fff7d6,
            #fef3c7
        );
    border:
        1px solid rgba(217, 119, 6, 0.18);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.sprint-cadence-strip {
    padding: 30px;
    background:
        linear-gradient(
            135deg,
            #292524,
            #18181b
        );
    border:
        1px solid rgba(250, 204, 21, 0.20);
    border-radius: 26px;
    box-shadow:
        0 20px 46px rgba(41, 37, 36, 0.16);
}

.sprint-cadence-strip h2 {
    margin:
        8px 0 24px;
    color: #fffdf8;
    font-size:
        clamp(
            1.4rem,
            2.4vw,
            2.1rem
        );
    letter-spacing: -0.03em;
}

.sprint-cadence-strip .eyebrow {
    color: #fde68a;
}

.sprint-cadence-track {
    display: grid;
    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );
    gap: 10px;
}

.sprint-cadence-node {
    padding: 14px 10px;
    text-align: center;
    background:
        rgba(255, 255, 255, 0.06);
    border:
        1px solid rgba(250, 204, 21, 0.18);
    border-radius: 16px;
}

.sprint-cadence-node span,
.sprint-cadence-node small {
    display: block;
}

.sprint-cadence-node span {
    margin-bottom: 6px;
    color: #facc15;
    font-weight: 900;
}

.sprint-cadence-node small {
    color: #d6d3d1;
    font-size: 0.7rem;
}

@media (max-width: 980px) {
    .sprint-planner-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .sprint-planner-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .sprint-cadence-track {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 720px) {
    .sprint-planner-hero,
    .sprint-planner-section,
    .sprint-cadence-strip {
        padding: 22px;
        border-radius: 22px;
    }

    .sprint-planner-grid,
    .sprint-planner-summary {
        grid-template-columns: 1fr;
    }

    .sprint-planner-heading {
        flex-direction: column;
    }

    .sprint-cadence-track {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   STEP 74D.2 — DYNAMIC RESOURCE + CAPACITY PLANNER
   Premium golden resource intelligence system
   ========================================================= */

.resource-planner-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 38px;
    margin-bottom: 24px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(250, 204, 21, 0.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 52%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.24);

    border-radius: 28px;

    box-shadow:
        0 20px 48px rgba(120, 83, 20, 0.11);
}

.resource-planner-hero::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -82px;
    top: -92px;
    border-radius: 50%;
    background:
        rgba(250, 204, 21, 0.16);
}

.resource-planner-hero > * {
    position: relative;
    z-index: 1;
}

.resource-planner-hero h1 {
    margin:
        8px 0 12px;
    color: #18181b;
    font-size:
        clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.resource-planner-hero p {
    max-width: 760px;
    margin: 0;
    color: #62584b;
    font-size: 1.02rem;
    line-height: 1.75;
}

.resource-hero-badge {
    min-width: 210px;
    padding: 22px;

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid rgba(217, 119, 6, 0.22);

    border-radius: 22px;

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.10);
}

.resource-hero-badge small,
.resource-hero-badge span {
    display: block;
    color: #786b59;
}

.resource-hero-badge strong {
    display: block;
    margin: 6px 0;
    color: #92400e;
    font-size: 1.35rem;
}

.resource-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.resource-summary-card {
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    border-radius: 20px;

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.08);
}

.resource-summary-card small,
.resource-summary-card span {
    display: block;
    color: #786b59;
}

.resource-summary-card strong {
    display: block;
    margin: 8px 0;
    color: #18181b;
    font-size: 1.8rem;
    letter-spacing: -0.035em;
}

.resource-intelligence-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, 0.75fr);
    gap: 20px;
    margin-bottom: 28px;
}

.resource-capacity-panel,
.resource-risk-panel,
.resource-allocation-section {
    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    border-radius: 24px;

    box-shadow:
        0 18px 42px rgba(120, 83, 20, 0.09);
}

.resource-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.resource-section-heading h2 {
    margin: 7px 0 0;
    color: #18181b;
    letter-spacing: -0.03em;
}

.resource-section-heading p {
    max-width: 700px;
    margin: 8px 0 0;
    color: #786b59;
    line-height: 1.65;
}

.resource-risk-pill,
.resource-total-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;

    color: #78350f;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    border:
        1px solid rgba(217, 119, 6, 0.25);

    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.capacity-meter {
    margin-top: 28px;
}

.capacity-meter-copy {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: #62584b;
}

.capacity-meter-copy strong {
    color: #92400e;
}

.capacity-meter-track,
.resource-allocation-meter {
    overflow: hidden;
    height: 12px;
    background: #f5ead2;
    border-radius: 999px;
}

.capacity-meter-track span,
.resource-allocation-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b
        );

    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.28);
}

.capacity-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.capacity-detail-grid div,
.resource-pressure-list div {
    padding: 16px;
    background: #fffaf0;
    border:
        1px solid rgba(217, 119, 6, 0.16);
    border-radius: 16px;
}

.capacity-detail-grid small,
.resource-pressure-list small {
    display: block;
    color: #786b59;
}

.capacity-detail-grid strong,
.resource-pressure-list strong {
    display: block;
    margin-top: 6px;
    color: #292524;
}

.resource-risk-score {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 26px 0 18px;
}

.resource-risk-score > strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;

    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border-radius: 22px;

    font-size: 1.75rem;

    box-shadow:
        0 14px 28px rgba(245, 158, 11, 0.20);
}

.resource-risk-score span {
    color: #62584b;
    line-height: 1.5;
}

.resource-pressure-list {
    display: grid;
    gap: 10px;
}

.resource-allocation-section {
    margin-bottom: 28px;
}

.resource-allocation-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.resource-allocation-card {
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    border-radius: 20px;

    box-shadow:
        0 12px 30px rgba(120, 83, 20, 0.07);
}

.resource-allocation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.resource-phase-index {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;

    color: #78350f;
    background: #fef3c7;

    border:
        1px solid rgba(217, 119, 6, 0.22);

    border-radius: 12px;

    font-weight: 900;
}

.resource-allocation-percent {
    color: #92400e;
    font-weight: 900;
}

.resource-allocation-card h3 {
    margin: 18px 0 8px;
    color: #18181b;
}

.resource-allocation-card p {
    min-height: 48px;
    margin: 0 0 18px;
    color: #786b59;
    line-height: 1.6;
}

.resource-allocation-meter {
    height: 9px;
}

.resource-allocation-meta {
    display: grid;
    grid-template-columns:
        minmax(100px, 0.45fr)
        minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.resource-allocation-meta div {
    padding: 13px;
    background: rgba(255, 250, 240, 0.9);
    border-radius: 14px;
}

.resource-allocation-meta small {
    display: block;
    color: #786b59;
}

.resource-allocation-meta strong {
    display: block;
    margin-top: 5px;
    color: #292524;
    line-height: 1.35;
}

@media (max-width: 1100px) {
    .resource-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .resource-intelligence-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .resource-planner-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 26px;
    }

    .resource-hero-badge {
        min-width: 0;
    }

    .resource-summary-grid,
    .resource-allocation-grid,
    .capacity-detail-grid {
        grid-template-columns: 1fr;
    }

    .resource-section-heading {
        flex-direction: column;
    }

    .resource-allocation-meta {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   STEP 74E.2 — DYNAMIC RISK INTELLIGENCE
   Premium golden risk control workspace
   ========================================================= */

.risk-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 34px;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(250, 204, 21, 0.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff8dc 54%,
            #fef3c7 100%
        );

    border:
        1px solid rgba(217, 119, 6, 0.22);

    border-radius: 24px;

    box-shadow:
        0 18px 44px rgba(120, 83, 20, 0.10);
}

.risk-hero h1 {
    margin: 10px 0 12px;
    max-width: 720px;

    color: #18181b;

    font-size:
        clamp(32px, 5vw, 58px);

    line-height: 1.02;
    letter-spacing: -0.05em;
}

.risk-hero h1 span {
    color: #b45309;
}

.risk-hero p {
    max-width: 760px;
    margin: 0;

    color: #62584b;
    line-height: 1.7;
}

.risk-hero-score {
    flex: 0 0 180px;
    display: grid;
    place-items: center;
    padding: 24px 18px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #18181b,
            #292524
        );

    border:
        1px solid rgba(250, 204, 21, 0.34);

    border-radius: 22px;

    box-shadow:
        0 18px 36px rgba(41, 37, 36, 0.18);
}

.risk-hero-score span,
.risk-hero-score small {
    color: #fde68a;
}

.risk-hero-score strong {
    margin: 6px 0;

    color: #facc15;

    font-size: 54px;
    line-height: 1;
    letter-spacing: -0.06em;
}

.risk-kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.risk-kpi-card {
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    border-radius: 20px;

    box-shadow:
        0 14px 34px rgba(120, 83, 20, 0.08);
}

.risk-kpi-card span,
.risk-kpi-card small {
    color: #786b5b;
}

.risk-kpi-card strong {
    display: block;
    margin: 8px 0 5px;

    color: #18181b;

    font-size: 27px;
    letter-spacing: -0.04em;
}

.risk-intelligence-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);
    gap: 22px;
    margin-top: 22px;
}

.risk-score-panel,
.risk-warning-panel,
.risk-recommendation-section {
    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    border-radius: 22px;

    box-shadow:
        0 16px 38px rgba(120, 83, 20, 0.09);
}

.risk-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.risk-section-heading h2 {
    margin: 5px 0 0;

    color: #18181b;

    font-size: 24px;
    letter-spacing: -0.035em;
}

.risk-level-pill,
.risk-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 8px 12px;

    color: #78350f;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    border:
        1px solid rgba(217, 119, 6, 0.28);

    border-radius: 999px;

    font-weight: 800;
}

.risk-gauge {
    overflow: hidden;
    height: 16px;
    margin-top: 30px;

    background: #f5efe5;

    border:
        1px solid rgba(217, 119, 6, 0.16);

    border-radius: 999px;
}

.risk-gauge-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #fde68a,
            #facc15,
            #f59e0b,
            #b45309
        );

    border-radius: inherit;

    box-shadow:
        0 0 18px rgba(245, 158, 11, 0.28);
}

.risk-gauge-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;

    color: #8a7d6d;

    font-size: 12px;
    font-weight: 700;
}

.risk-pressure-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.risk-pressure-grid > div {
    padding: 16px;

    background: #fffaf0;

    border:
        1px solid rgba(217, 119, 6, 0.16);

    border-radius: 16px;
}

.risk-pressure-grid small {
    display: block;

    color: #786b5b;
}

.risk-pressure-grid strong {
    display: block;
    margin-top: 6px;

    color: #292524;

    font-size: 18px;
}

.risk-signal-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.risk-signal-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #fffaf0
        );

    border:
        1px solid rgba(217, 119, 6, 0.20);

    border-radius: 17px;
}

.risk-signal-item.stable {
    background:
        linear-gradient(
            135deg,
            #f0fdf4,
            #ffffff
        );
}

.risk-signal-icon {
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;

    color: #18181b;

    background:
        linear-gradient(
            135deg,
            #facc15,
            #f59e0b
        );

    border-radius: 12px;

    font-weight: 900;
}

.risk-signal-item strong {
    color: #292524;
}

.risk-signal-item p {
    margin: 5px 0 0;

    color: #62584b;
    line-height: 1.55;
}

.risk-recommendation-section {
    margin-top: 22px;
}

.risk-recommendation-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.risk-recommendation-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fff8dc
        );

    border:
        1px solid rgba(217, 119, 6, 0.18);

    border-radius: 18px;
}

.risk-recommendation-index {
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;

    color: #78350f;

    background: #fde68a;

    border-radius: 14px;

    font-weight: 900;
}

.risk-recommendation-card strong {
    color: #292524;
}

.risk-recommendation-card p {
    margin: 6px 0 0;

    color: #62584b;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .risk-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .risk-intelligence-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .risk-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 24px;
    }

    .risk-hero-score {
        flex-basis: auto;
    }

    .risk-kpi-grid,
    .risk-pressure-grid,
    .risk-recommendation-grid {
        grid-template-columns: 1fr;
    }

    .risk-score-panel,
    .risk-warning-panel,
    .risk-recommendation-section {
        padding: 22px;
    }
}

/* =========================================================
   STEP 75B.4B — SPRINT EXECUTION STATUS UI
   ========================================================= */

.sprint-execution-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.sprint-execution-summary > div {
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.72);
}

.sprint-execution-summary small {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    opacity: 0.7;
}

.sprint-execution-summary strong {
    display: block;
    font-size: 0.9rem;
}

.sprint-execution-progress {
    width: 100%;
    height: 0.5rem;
    margin-top: 0.8rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
}

.sprint-execution-progress > span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: currentColor;
    transition: width 180ms ease;
}

@media (max-width: 720px) {
    .sprint-execution-summary {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PATCH-013A
   MODAL FRAMEWORK
===================================================== */

.modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(8px);
    z-index:5000;
    opacity:0;
    transition:opacity .25s ease;
}

.modal-visible{
    display:flex;
    opacity:1;
}

.modal-dialog{
    width:min(760px,100%);
    max-height:90vh;
    overflow:auto;
    border-radius:22px;
    background:#ffffff;
    border:1px solid rgba(255,209,59,.35);
    box-shadow:
        0 24px 80px rgba(15,23,42,.25),
        0 0 0 1px rgba(255,255,255,.4) inset;
    animation:modal-pop .28s ease;
}

.modal-small{
    width:min(520px,100%);
}

.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 28px;
    border-bottom:1px solid rgba(226,232,240,.9);
}

.modal-header h2{
    margin:4px 0 0;
    font-size:24px;
    font-weight:700;
    color:#1e293b;
}

.modal-body{
    padding:28px;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    padding:24px 28px;
    border-top:1px solid rgba(226,232,240,.9);
    background:#fafafa;
}

.modal-close{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f1f5f9;
    color:#334155;
    cursor:pointer;
    transition:.2s;
}

.modal-close:hover{
    background:#ffd13b;
    color:#111827;
}

@keyframes modal-pop{

    from{

        opacity:0;
        transform:translateY(18px) scale(.96);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}

/* =====================================================
   FORM LAYOUT
===================================================== */

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

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-size:13px;
    font-weight:700;
    color:#334155;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #cbd5e1;
    background:#fff;
    font-size:14px;
    color:#0f172a;
    transition:.2s;
}

.form-group textarea{
    resize:vertical;
    min-height:120px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:#ffd13b;
    box-shadow:0 0 0 4px rgba(255,209,59,.18);
}

.form-error{
    display:none;
    margin-bottom:18px;
    padding:12px 16px;
    border-radius:12px;
    background:#fee2e2;
    color:#b91c1c;
    font-size:14px;
    font-weight:600;
}

.form-error:not(:empty){
    display:block;
}

/* =====================================================
   PATCH-013B
   BACKLOG TREE
===================================================== */

.backlog-tree{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:42px;
}

.tree-arrow{
    width:18px;
    flex:0 0 18px;
    text-align:center;
    cursor:pointer;
    color:#64748b;
    font-size:12px;
    transition:.2s;
}

.tree-arrow:hover{
    color:#ca8a04;
    transform:scale(1.15);
}

.tree-placeholder{
    width:18px;
    flex:0 0 18px;
}

.backlog-row td{
    vertical-align:middle;
    transition:background .2s;
}

.backlog-row:hover td{
    background:#fffdf3;
}

.level-0 td{
    background:#fffef9;
}

.level-1 td{
    background:#fffdfa;
}

.level-2 td{
    background:#fffdfb;
}

.level-3 td{
    background:#fffdfc;
}

.level-4 td{
    background:#fffefd;
}

/* =====================================================
   ACTION BUTTONS
===================================================== */

.table-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.table-actions .button{
    min-width:74px;
}

.btn-icon{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:.2s;
}

.btn-icon:hover{
    transform:translateY(-1px);
}

.btn-edit{
    background:#dbeafe;
    color:#1d4ed8;
}

.btn-success{
    background:#dcfce7;
    color:#15803d;
}

.btn-warning{
    background:#fef3c7;
    color:#b45309;
}

.btn-danger{
    background:#fee2e2;
    color:#b91c1c;
}

/* =====================================================
   EMPTY STATE
===================================================== */

.backlog-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:90px 32px;
    text-align:center;
}

.backlog-empty-icon{
    width:96px;
    height:96px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background:linear-gradient(
        135deg,
        #ffe58f,
        #ffd13b
    );
    color:#92400e;
    font-size:40px;
    margin-bottom:24px;
}

.backlog-empty h2{
    margin-bottom:12px;
    color:#1e293b;
    font-size:28px;
}

.backlog-empty p{
    max-width:540px;
    color:#64748b;
    line-height:1.7;
}

/* =====================================================
   STATUS BADGES
===================================================== */

.status-planned{
    background:#e0f2fe;
    color:#0369a1;
}

.status-active{
    background:#dcfce7;
    color:#15803d;
}

.status-review{
    background:#fef3c7;
    color:#b45309;
}

.status-blocked{
    background:#fee2e2;
    color:#b91c1c;
}

.status-completed{
    background:#ede9fe;
    color:#6d28d9;
}

.status-archived{
    background:#e5e7eb;
    color:#374151;
}

/* =====================================================
   PRIORITY BADGES
===================================================== */

.priority-critical{
    background:#dc2626;
    color:#fff;
}

.priority-high{
    background:#f97316;
    color:#fff;
}

.priority-medium{
    background:#facc15;
    color:#111827;
}

.priority-low{
    background:#dcfce7;
    color:#166534;
}

/* =====================================================
   TAGS
===================================================== */

.tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    font-size:12px;
    font-weight:600;
    color:#475569;
}

/* =====================================================
   PATCH-013C
   TABLE ENHANCEMENTS
===================================================== */

.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

.table thead th{
    position:sticky;
    top:0;
    z-index:5;
    background:#fffdf4;
    color:#475569;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:16px 18px;
    border-bottom:2px solid #f1f5f9;
}

.table tbody td{
    padding:16px 18px;
    border-bottom:1px solid #edf2f7;
    transition:
        background .2s,
        color .2s;
}

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

.table tbody tr:hover td{
    background:#fffef7;
}

.table td:first-child,
.table th:first-child{
    padding-left:24px;
}

.table td:last-child,
.table th:last-child{
    padding-right:24px;
}

/* =====================================================
   WORK ITEM CARD
===================================================== */

.work-item{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:20px;
    border:1px solid rgba(255,209,59,.25);
    border-radius:18px;
    background:#ffffff;
    transition:.25s;
}

.work-item:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 32px rgba(15,23,42,.08);
}

.work-item-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.work-item-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.work-item-title strong{
    color:#0f172a;
    font-size:16px;
    font-weight:700;
}

.work-item-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.work-item-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

/* =====================================================
   BADGES
===================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.badge-yellow{
    background:#fff7d6;
    color:#a16207;
}

.badge-green{
    background:#dcfce7;
    color:#166534;
}

.badge-blue{
    background:#dbeafe;
    color:#1d4ed8;
}

.badge-red{
    background:#fee2e2;
    color:#b91c1c;
}

.badge-purple{
    background:#ede9fe;
    color:#6d28d9;
}

/* =====================================================
   SEARCH BAR
===================================================== */

.search-toolbar{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.search-input{
    flex:1;
    height:48px;
    padding:0 18px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#ffffff;
    transition:.2s;
}

.search-input:focus{
    outline:none;
    border-color:#ffd13b;
    box-shadow:
        0 0 0 4px rgba(255,209,59,.15);
}

.filter-select{
    min-width:180px;
    height:48px;
    padding:0 14px;
    border:1px solid #cbd5e1;
    border-radius:14px;
    background:#fff;
}

/* =====================================================
   LOADING SKELETON
===================================================== */

.skeleton{
    position:relative;
    overflow:hidden;
    background:#f3f4f6;
}

.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.6),
            transparent
        );
    animation:skeleton-loading 1.4s infinite;
}

@keyframes skeleton-loading{

    100%{
        transform:translateX(100%);
    }

}

.skeleton-line{
    height:14px;
    border-radius:999px;
    margin:8px 0;
}

.skeleton-title{
    height:22px;
    width:50%;
    border-radius:999px;
}

.skeleton-card{
    height:140px;
    border-radius:20px;
}

/* =====================================================
   PATCH-013D
   BUTTON FRAMEWORK
===================================================== */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 18px;
    border:none;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    transition:
        background .2s,
        color .2s,
        transform .2s,
        box-shadow .2s;
}

.button:hover{
    transform:translateY(-1px);
}

.button:active{
    transform:translateY(0);
}

.button-primary{
    color:#1f2937;
    background:linear-gradient(
        135deg,
        #ffe58f,
        #ffd13b
    );
    box-shadow:
        0 10px 22px rgba(255,209,59,.25);
}

.button-primary:hover{
    box-shadow:
        0 14px 28px rgba(255,209,59,.35);
}

.button-secondary{
    background:#ffffff;
    color:#334155;
    border:1px solid #dbe3ee;
}

.button-secondary:hover{
    background:#f8fafc;
}

.button-danger{
    background:#dc2626;
    color:#ffffff;
}

.button-danger:hover{
    background:#b91c1c;
}

.button-success{
    background:#16a34a;
    color:#ffffff;
}

.button-success:hover{
    background:#15803d;
}

.button-warning{
    background:#f59e0b;
    color:#ffffff;
}

.button-warning:hover{
    background:#d97706;
}

/* =====================================================
   AVATARS
===================================================== */

.avatar-group{
    display:flex;
    align-items:center;
}

.avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    color:#ffffff;
    background:#64748b;
    border:2px solid #ffffff;
    margin-left:-10px;
}

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

.avatar-sm{
    width:30px;
    height:30px;
    font-size:11px;
}

.avatar-lg{
    width:48px;
    height:48px;
    font-size:15px;
}

/* =====================================================
   TIMELINE
===================================================== */

.timeline{
    position:relative;
    padding-left:34px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:11px;
    top:0;
    bottom:0;
    width:2px;
    background:#e2e8f0;
}

.timeline-item{
    position:relative;
    margin-bottom:24px;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-dot{
    position:absolute;
    left:-28px;
    top:4px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ffd13b;
    border:3px solid #ffffff;
    box-shadow:0 0 0 2px #ffd13b;
}

.timeline-card{
    padding:18px;
    border-radius:16px;
    background:#ffffff;
    border:1px solid #e2e8f0;
}

/* =====================================================
   TOAST
===================================================== */

.toast-container{
    position:fixed;
    top:28px;
    right:28px;
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:6000;
}

.toast{
    min-width:300px;
    padding:16px 18px;
    border-radius:14px;
    color:#ffffff;
    box-shadow:
        0 14px 34px rgba(15,23,42,.18);
    animation:toast-slide .25s ease;
}

.toast-success{
    background:#16a34a;
}

.toast-error{
    background:#dc2626;
}

.toast-warning{
    background:#f59e0b;
}

.toast-info{
    background:#2563eb;
}

@keyframes toast-slide{

    from{

        opacity:0;
        transform:translateX(24px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/* =====================================================
   CHIP
===================================================== */

.chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    font-size:12px;
    font-weight:600;
    color:#475569;
}

/* =====================================================
   DIVIDERS
===================================================== */

.divider{
    height:1px;
    background:#e2e8f0;
    margin:24px 0;
}

.divider-dashed{
    border-top:1px dashed #cbd5e1;
    margin:24px 0;
}

/* =====================================================
   PATCH-013E
   UTILITIES + RESPONSIVE
===================================================== */

/* ---------- Flex ---------- */

.flex{
    display:flex;
}

.flex-column{
    flex-direction:column;
}

.flex-wrap{
    flex-wrap:wrap;
}

.items-center{
    align-items:center;
}

.items-start{
    align-items:flex-start;
}

.items-end{
    align-items:flex-end;
}

.justify-between{
    justify-content:space-between;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:flex-end;
}

.gap-4{
    gap:4px;
}

.gap-8{
    gap:8px;
}

.gap-12{
    gap:12px;
}

.gap-16{
    gap:16px;
}

.gap-20{
    gap:20px;
}

.gap-24{
    gap:24px;
}

/* ---------- Width ---------- */

.w-100{
    width:100%;
}

.w-auto{
    width:auto;
}

/* ---------- Margin ---------- */

.mt-0{margin-top:0;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.mt-20{margin-top:20px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}

.mb-0{margin-bottom:0;}
.mb-8{margin-bottom:8px;}
.mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;}
.mb-20{margin-bottom:20px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}

/* ---------- Padding ---------- */

.p-8{padding:8px;}
.p-12{padding:12px;}
.p-16{padding:16px;}
.p-20{padding:20px;}
.p-24{padding:24px;}
.p-32{padding:32px;}

/* ---------- Radius ---------- */

.rounded-sm{
    border-radius:8px;
}

.rounded{
    border-radius:12px;
}

.rounded-lg{
    border-radius:18px;
}

.rounded-xl{
    border-radius:24px;
}

/* ---------- Shadows ---------- */

.shadow-sm{
    box-shadow:
        0 2px 8px rgba(15,23,42,.06);
}

.shadow{
    box-shadow:
        0 8px 24px rgba(15,23,42,.08);
}

.shadow-lg{
    box-shadow:
        0 18px 42px rgba(15,23,42,.12);
}

/* ---------- Text ---------- */

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.text-muted{
    color:#64748b;
}

.text-success{
    color:#15803d;
}

.text-warning{
    color:#b45309;
}

.text-danger{
    color:#b91c1c;
}

/* ---------- Glass ---------- */

.glass{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(12px);
}

/* ---------- Scroll ---------- */

.scroll-y{
    overflow-y:auto;
}

.scroll-x{
    overflow-x:auto;
}

/* ---------- Fade ---------- */

.fade-in{
    animation:fade-in .25s ease;
}

@keyframes fade-in{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1200px){

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

}

@media (max-width:992px){

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .table-actions{
        flex-wrap:wrap;
    }

}

@media (max-width:768px){

    .hero-panel{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-actions{
        width:100%;
    }

    .hero-actions .button{
        width:100%;
    }

    .metric-grid{
        grid-template-columns:1fr;
    }

    .panel{
        overflow-x:auto;
    }

    .modal{
        padding:16px;
    }

    .modal-dialog{
        width:100%;
        max-height:95vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer{
        padding:18px;
    }

}

@media (max-width:576px){

    .table{
        min-width:900px;
    }

    .avatar{
        width:34px;
        height:34px;
    }

    .button{
        min-height:40px;
        font-size:13px;
    }

    .backlog-empty{
        padding:48px 20px;
    }

    .backlog-empty h2{
        font-size:24px;
    }

}

/* =====================================================
   END OF PATCH-013
===================================================== */