/**
 * PMBOK 8 Explorer - CSS Styles
 * Styled to match PM Access branding
 */

/* PM Access Brand Colors */
:root {
    --pmbok-primary: #1a5336;        /* PM Access Green */
    --pmbok-primary-light: #2d7a4f;
    --pmbok-primary-dark: #0f3d25;
    --pmbok-secondary: #8b2942;      /* PM Access Burgundy */
    --pmbok-secondary-light: #a83d56;
    --pmbok-accent: #c9a227;         /* Gold accent */
    --pmbok-accent-light: #ddb93a;
    --pmbok-bg-light: #f8f9fa;
    --pmbok-bg-white: #ffffff;
    --pmbok-text-dark: #2c3e50;
    --pmbok-text-medium: #5a6c7d;
    --pmbok-text-light: #8e9eab;
    --pmbok-border: #e1e5ea;
    --pmbok-shadow: rgba(0, 0, 0, 0.1);
    --pmbok-shadow-hover: rgba(0, 0, 0, 0.15);
    --pmbok-radius: 12px;
    --pmbok-radius-sm: 8px;
    --pmbok-transition: all 0.3s ease;
}

/* Reset & Base - FULL WIDTH handled by JavaScript */

.pmbok8-explorer-ro {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--pmbok-text-dark);
    line-height: 1.8;
    padding: 4px 3%;
    font-size: 18px;
    box-sizing: border-box;
    position: relative;
    background: var(--pmbok-bg-white);
}

.pmbok8-explorer-ro * {
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .pmbok8-explorer-ro {
        font-size: 19px;
    }
}

@media (min-width: 1600px) {
    .pmbok8-explorer-ro {
        font-size: 20px;
    }
}

@media (min-width: 2000px) {
    .pmbok8-explorer-ro {
        font-size: 21px;
    }
}

.pmbok8-explorer-ro * {
    box-sizing: border-box;
}

/* Hero Section - LARGER FONTS */
/* Header Bar (simplified) */
.pmbok8-header-bar {
    background: white;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.pmbok8-header-bar h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.pmbok8-header-bar h2 {
    font-size: 1.2rem;
    font-weight: 400;
	padding: 6px 14px;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.pmbok8-header-bar .version-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Search Container (only on Explorează tab) */
.pmbok8-search-container {
    background: #f8fafc;
    padding: 20px 30px;
    border-bottom: 1px solid #e5e7eb;
}

.pmbok8-search-container[data-tab] {
    display: none;
}

.pmbok8-search-container[data-tab].tab-visible {
    display: block;
}

/* Search Box - Clean white/grey style */
.pmbok8-search-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

@media (min-width: 1600px) {
    .pmbok8-search-wrapper {
        max-width: 800px;
    }
}

@media (min-width: 2000px) {
    .pmbok8-search-wrapper {
        max-width: 900px;
    }
}

.pmbok8-search {
    width: 100%;
    padding: 16px 24px 16px 55px;
    font-size: 1.1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    color: var(--pmbok-text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: var(--pmbok-transition);
}

.pmbok8-search:focus {
    outline: none;
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pmbok8-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.3rem;
    z-index: 1;
}

/* Search Results - FIXED to show outside hero */
.pmbok8-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--pmbok-radius-sm);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    margin-top: 15px;
    max-height: 500px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    color: var(--pmbok-text-dark);
}

.pmbok8-search-results.active {
    display: block;
}

.pmbok8-search-results .result-group {
    padding: 18px 22px;
    border-bottom: 1px solid var(--pmbok-border);
}

.pmbok8-search-results .result-group:last-child {
    border-bottom: none;
}

.pmbok8-search-results .result-group-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--pmbok-text-light);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.pmbok8-search-results .result-item {
    padding: 14px 18px;
    cursor: pointer;
    border-radius: var(--pmbok-radius-sm);
    transition: var(--pmbok-transition);
    color: var(--pmbok-text-dark);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pmbok8-search-results .result-item:hover {
    background: var(--pmbok-bg-light);
}

.pmbok8-search-results .result-icon {
    font-size: 1.3rem;
}

/* Red Thread Navigation Bar */
.pmbok8-red-thread {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    background: var(--pmbok-bg-light);
    border-radius: var(--pmbok-radius);
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.pmbok8-red-thread .thread-node {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pmbok8-red-thread .node {
    padding: 14px 28px;
    background: white;
    border: 2px solid var(--pmbok-border);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.15rem;
    cursor: pointer;
    transition: var(--pmbok-transition);
    color: var(--pmbok-text-medium);
}

.pmbok8-red-thread .node:hover {
    border-color: var(--pmbok-primary);
    color: var(--pmbok-primary);
}

.pmbok8-red-thread .node.active {
    background: var(--pmbok-primary);
    border-color: var(--pmbok-primary);
    color: white;
}

.pmbok8-red-thread .arrow {
    color: var(--pmbok-text-light);
    font-size: 1.5rem;
}

/* Section Titles - LARGER */
.pmbok8-section {
    margin-bottom: 70px;
}

/* Collapsible sections need scroll offset to show title */
.pmbok8-section[data-collapsible="true"] {
    scroll-margin-top: 80px;
}

.pmbok8-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--pmbok-border);
}

.pmbok8-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
    display: flex;
    align-items: center;
    gap: 16px;
}

.pmbok8-section-title .count {
    background: var(--pmbok-primary);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Card Grid - FLUID FULL WIDTH */
.pmbok8-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    width: 100%;
}

/* Principles: 3 columns on large screens, fluid on smaller */
.pmbok8-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

@media (min-width: 1400px) {
    .pmbok8-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Performance Domains: Special 3+4 layout - CENTERED */
.pmbok8-grid-domains {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
}

@media (min-width: 1200px) {
    .pmbok8-grid-domains {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
    }
    
    .pmbok8-grid-domains .pmbok8-card {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
    
    .pmbok8-grid-domains .pmbok8-card:nth-child(n+4) {
        flex: 0 0 calc(25% - 20px);
        max-width: calc(25% - 20px);
    }
}

@media (min-width: 1800px) {
    .pmbok8-grid-domains .pmbok8-card {
        flex: 0 0 calc(33.333% - 30px);
        max-width: calc(33.333% - 30px);
    }
    
    .pmbok8-grid-domains .pmbok8-card:nth-child(n+4) {
        flex: 0 0 calc(25% - 30px);
        max-width: calc(25% - 30px);
    }
}

/* Focus Areas: Full width stacked */
.pmbok8-grid-focus {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.pmbok8-grid-focus .pmbok8-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px 40px;
}

.pmbok8-grid-focus .pmbok8-card .pmbok8-card-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.pmbok8-grid-focus .pmbok8-card .pmbok8-card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pmbok8-grid-focus .pmbok8-card .pmbok8-card-text {
    flex: 1;
}

.pmbok8-grid-focus .pmbok8-card .pmbok8-card-title {
    margin-bottom: 8px;
}

.pmbok8-grid-focus .pmbok8-card .pmbok8-card-meta {
    margin-top: 0;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .pmbok8-grid-3, .pmbok8-grid {
        grid-template-columns: 1fr;
    }
    .pmbok8-grid-domains {
        grid-template-columns: 1fr;
    }
    .pmbok8-grid-domains .pmbok8-card,
    .pmbok8-grid-domains .pmbok8-card:nth-child(n+4) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .pmbok8-grid-focus .pmbok8-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    .pmbok8-grid-focus .pmbok8-card .pmbok8-card-content {
        flex-direction: column;
    }
}

/* Cards - LARGER FONTS */
.pmbok8-card {
    background: var(--pmbok-bg-white);
    border-radius: var(--pmbok-radius);
    padding: 32px;
    box-shadow: 0 2px 10px var(--pmbok-shadow);
    border: 1px solid var(--pmbok-border);
    cursor: pointer;
    transition: var(--pmbok-transition);
    position: relative;
    overflow: hidden;
}

.pmbok8-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--pmbok-primary);
    transform: scaleX(0);
    transition: var(--pmbok-transition);
}

.pmbok8-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--pmbok-shadow-hover);
}

.pmbok8-card:hover::before {
    transform: scaleX(1);
}

.pmbok8-card-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--pmbok-primary-light) 0%, var(--pmbok-primary) 100%);
    border-radius: var(--pmbok-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.9rem;
    margin-bottom: 20px;
}

.pmbok8-card.domain .pmbok8-card-icon {
    background: linear-gradient(135deg, var(--pmbok-secondary-light) 0%, var(--pmbok-secondary) 100%);
}

.pmbok8-card.focus-area .pmbok8-card-icon {
    background: linear-gradient(135deg, var(--pmbok-accent-light) 0%, var(--pmbok-accent) 100%);
}

.pmbok8-card-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--pmbok-text-dark);
    margin-bottom: 14px;
}

.pmbok8-card-description {
    font-size: 1.15rem;
    color: var(--pmbok-text-medium);
    line-height: 1.75;
}

.pmbok8-card-meta {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pmbok8-card-badge {
    font-size: 1rem;
    padding: 6px 16px;
    background: var(--pmbok-bg-light);
    border-radius: 50px;
    color: var(--pmbok-text-medium);
    font-weight: 500;
}

/* Panel / Slide-over */
.pmbok8-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: var(--pmbok-transition);
}

.pmbok8-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pmbok8-panel {
    position: fixed;
    top: 0;
    right: -750px;
    width: 750px;
    max-width: 95%;
    height: 100vh;
    background: var(--pmbok-bg-white);
    z-index: 9999;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    transition: var(--pmbok-transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pmbok8-panel.active {
    right: 0;
}

.pmbok8-panel-header {
    padding: 28px;
    background: var(--pmbok-primary);
    color: white;
    flex-shrink: 0;
}

.pmbok8-panel-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--pmbok-transition);
}

.pmbok8-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pmbok8-panel-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding-right: 60px;
}

.pmbok8-panel-type {
    font-size: 1.05rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Panel Breadcrumb */
.pmbok8-breadcrumb {
    padding: 18px 30px;
    background: var(--pmbok-bg-light);
    border-bottom: 1px solid var(--pmbok-border);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.pmbok8-breadcrumb a {
    color: var(--pmbok-primary);
    text-decoration: none;
}

.pmbok8-breadcrumb a:hover {
    text-decoration: underline;
}

.pmbok8-breadcrumb .separator {
    color: var(--pmbok-text-light);
}

.pmbok8-breadcrumb .current {
    color: var(--pmbok-text-medium);
}

/* Panel Mini Red Thread - VISUAL ONLY, NOT CLICKABLE */
.pmbok8-panel-thread {
    padding: 15px 25px;
    background: var(--pmbok-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid var(--pmbok-border);
}

.pmbok8-panel-thread .mini-node {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--pmbok-border);
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--pmbok-text-light);
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.pmbok8-panel-thread .mini-node.active {
    background: var(--pmbok-primary);
    border-color: var(--pmbok-primary);
    color: white;
}

.pmbok8-panel-thread .mini-arrow {
    color: var(--pmbok-text-light);
    font-size: 0.8rem;
    user-select: none;
}

/* Panel Tabs */
.pmbok8-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--pmbok-border);
    padding: 0 30px;
    flex-shrink: 0;
}

.pmbok8-panel-tab {
    padding: 18px 26px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pmbok-text-medium);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: var(--pmbok-transition);
}

.pmbok8-panel-tab:hover {
    color: var(--pmbok-primary);
}

.pmbok8-panel-tab.active {
    color: var(--pmbok-primary);
    border-bottom-color: var(--pmbok-primary);
}

/* Panel Content */
.pmbok8-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.pmbok8-panel-section {
    margin-bottom: 38px;
}

.pmbok8-panel-section:last-child {
    margin-bottom: 0;
}

.pmbok8-panel-section-title {
    font-size: 1.05rem;
    text-transform: uppercase;
    color: var(--pmbok-text-light);
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    font-weight: 700;
}

.pmbok8-panel-definition {
    font-size: 1.25rem;
    line-height: 1.9;
    color: var(--pmbok-text-dark);
}

/* Example Box */
.pmbok8-example {
    background: var(--pmbok-bg-light);
    border-left: 5px solid var(--pmbok-accent);
    padding: 26px;
    border-radius: 0 var(--pmbok-radius-sm) var(--pmbok-radius-sm) 0;
    margin-top: 20px;
}

.pmbok8-example-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pmbok-accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmbok8-example-content {
    font-size: 1.2rem;
    color: var(--pmbok-text-medium);
    line-height: 1.8;
}

/* Related Items List */
.pmbok8-related-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pmbok8-related-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--pmbok-bg-light);
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
    border: 2px solid transparent;
}

.pmbok8-related-item:hover {
    background: white;
    border-color: var(--pmbok-primary);
    transform: translateX(5px);
}

.pmbok8-related-item .item-icon {
    width: 50px;
    height: 50px;
    background: var(--pmbok-primary);
    color: white;
    border-radius: var(--pmbok-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.pmbok8-related-item .item-info {
    flex: 1;
}

.pmbok8-related-item .item-name {
    font-weight: 600;
    color: var(--pmbok-text-dark);
    font-size: 1.2rem;
}

.pmbok8-related-item .item-desc {
    font-size: 1.05rem;
    color: var(--pmbok-text-medium);
    margin-top: 6px;
    line-height: 1.6;
}

/* Process View - ITTO Layout */
.pmbok8-itto-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 25px;
}

@media (max-width: 768px) {
    .pmbok8-itto-container {
        grid-template-columns: 1fr;
    }
}

.pmbok8-itto-column {
    background: var(--pmbok-bg-light);
    border-radius: var(--pmbok-radius);
    padding: 25px;
}

.pmbok8-itto-column-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pmbok-text-medium);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--pmbok-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmbok8-itto-column.inputs .pmbok8-itto-column-title {
    color: var(--pmbok-primary);
    border-bottom-color: var(--pmbok-primary);
}

.pmbok8-itto-column.tools .pmbok8-itto-column-title {
    color: var(--pmbok-secondary);
    border-bottom-color: var(--pmbok-secondary);
}

.pmbok8-itto-column.outputs .pmbok8-itto-column-title {
    color: var(--pmbok-accent);
    border-bottom-color: var(--pmbok-accent);
}

/* ITTO Pills */
.pmbok8-itto-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmbok8-itto-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: var(--pmbok-radius-sm);
    cursor: default;
    transition: var(--pmbok-transition);
    box-shadow: 0 1px 3px var(--pmbok-shadow);
    border: 2px solid transparent;
    line-height: 1.5;
}

.pmbok8-itto-pill:hover {
    transform: translateX(5px);
    box-shadow: 0 3px 10px var(--pmbok-shadow);
}

.pmbok8-itto-column.inputs .pmbok8-itto-pill:hover {
    border-color: var(--pmbok-primary);
}

.pmbok8-itto-column.tools .pmbok8-itto-pill:hover {
    border-color: var(--pmbok-secondary);
}

.pmbok8-itto-column.outputs .pmbok8-itto-pill:hover {
    border-color: var(--pmbok-accent);
}

.pmbok8-itto-pill .pill-name {
    font-size: 1.05rem;
    color: var(--pmbok-text-dark);
    font-weight: 600;
}

.pmbok8-itto-pill .pill-examples {
    font-size: 0.9rem;
    color: var(--pmbok-text-medium);
    font-weight: 400;
    font-style: italic;
    margin-left: 4px;
}

.pmbok8-itto-pill .pill-icon {
    color: var(--pmbok-text-light);
    font-size: 1rem;
}

/* ITTO Detail Drawer */
.pmbok8-itto-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    height: 55vh;
    background: white;
    z-index: 200000;
    border-radius: var(--pmbok-radius) var(--pmbok-radius) 0 0;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    transition: var(--pmbok-transition);
    display: flex;
    flex-direction: column;
}

.pmbok8-itto-drawer.active {
    bottom: 0;
}

.pmbok8-itto-drawer-handle {
    width: 50px;
    height: 6px;
    background: var(--pmbok-border);
    border-radius: 5px;
    margin: 18px auto;
}

.pmbok8-itto-drawer-header {
    padding: 0 35px 25px;
    border-bottom: 2px solid var(--pmbok-border);
}

.pmbok8-itto-drawer-type {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pmbok-primary);
    margin-bottom: 10px;
    font-weight: 600;
}

.pmbok8-itto-drawer-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
}

.pmbok8-itto-drawer-close {
    position: absolute;
    top: 22px;
    right: 25px;
    width: 44px;
    height: 44px;
    background: var(--pmbok-bg-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--pmbok-text-medium);
    transition: var(--pmbok-transition);
}

.pmbok8-itto-drawer-close:hover {
    background: var(--pmbok-border);
}

.pmbok8-itto-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px 35px;
}

/* Back Button */
.pmbok8-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--pmbok-bg-light);
    border: 1px solid var(--pmbok-border);
    border-radius: 50px;
    color: var(--pmbok-text-medium);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--pmbok-transition);
    margin-bottom: 20px;
}

.pmbok8-back-btn:hover {
    background: white;
    border-color: var(--pmbok-primary);
    color: var(--pmbok-primary);
}

/* CTA Buttons */
.pmbok8-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--pmbok-primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-cta:hover {
    background: var(--pmbok-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 83, 54, 0.3);
}

.pmbok8-cta.secondary {
    background: var(--pmbok-secondary);
}

.pmbok8-cta.secondary:hover {
    background: var(--pmbok-secondary-light);
    box-shadow: 0 4px 15px rgba(139, 41, 66, 0.3);
}

/* Watch-outs List */
.pmbok8-watchouts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pmbok8-watchouts li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--pmbok-border);
    font-size: 1.15rem;
    line-height: 1.7;
}

.pmbok8-watchouts li:last-child {
    border-bottom: none;
}

.pmbok8-watchouts li::before {
    content: '⚠️';
    flex-shrink: 0;
    font-size: 1.3rem;
}

/* Focus Area Timeline Style */
.pmbok8-focus-areas-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 30px 20px;
}

.pmbok8-focus-areas-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 5px;
    background: linear-gradient(90deg, var(--pmbok-accent) 0%, var(--pmbok-primary) 100%);
    z-index: 0;
    border-radius: 3px;
}

.pmbok8-focus-area-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    flex: 1;
}

.pmbok8-focus-area-circle {
    width: 80px;
    height: 80px;
    background: white;
    border: 4px solid var(--pmbok-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: var(--pmbok-transition);
    margin-bottom: 15px;
    box-shadow: 0 4px 15px var(--pmbok-shadow);
}

.pmbok8-focus-area-node:hover .pmbok8-focus-area-circle {
    background: var(--pmbok-accent);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}

.pmbok8-focus-area-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pmbok-text-dark);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .pmbok8-hero {
        padding: 40px 20px;
    }
    
    .pmbok8-hero h1 {
        font-size: 1.8rem;
    }
    
    .pmbok8-panel {
        width: 100%;
    }
    
    .pmbok8-red-thread {
        flex-direction: column;
        gap: 10px;
    }
    
    .pmbok8-red-thread .thread-node {
        flex-direction: column;
    }
    
    .pmbok8-red-thread .arrow {
        transform: rotate(90deg);
    }
    
    .pmbok8-grid {
        grid-template-columns: 1fr;
    }
    
    .pmbok8-focus-areas-timeline {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .pmbok8-focus-areas-timeline::before {
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px;
        height: auto;
    }
}

/* Loading State */
.pmbok8-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.pmbok8-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--pmbok-border);
    border-top-color: var(--pmbok-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   RED THREAD VISUAL - Connections Tab
   Beautiful formatted visual flow
   ============================================ */
.pmbok8-red-thread-visual {
    background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%);
    border: 2px solid var(--pmbok-border);
    border-radius: var(--pmbok-radius);
    padding: 30px;
}

.pmbok8-red-thread-visual .thread-step {
    text-align: center;
    margin-bottom: 10px;
}

.pmbok8-red-thread-visual .thread-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pmbok-text-light);
    margin-bottom: 14px;
    font-weight: 600;
}

.pmbok8-red-thread-visual .thread-box {
    display: inline-block;
    padding: 16px 28px;
    background: white;
    border: 2px solid var(--pmbok-border);
    border-radius: var(--pmbok-radius-sm);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pmbok-text-dark);
}

.pmbok8-red-thread-visual .thread-box.active {
    background: linear-gradient(135deg, var(--pmbok-primary) 0%, var(--pmbok-primary-dark) 100%);
    border-color: var(--pmbok-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(26, 83, 54, 0.3);
}

.pmbok8-red-thread-visual .thread-arrow {
    font-size: 2rem;
    color: var(--pmbok-primary);
    margin: 18px 0;
    font-weight: bold;
    text-align: center;
}

.pmbok8-red-thread-visual .thread-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 10px 0;
}

.pmbok8-red-thread-visual .thread-chip {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--pmbok-transition);
}

.pmbok8-red-thread-visual .thread-chip.domain {
    background: linear-gradient(135deg, rgba(139, 41, 66, 0.08) 0%, rgba(139, 41, 66, 0.15) 100%);
    color: var(--pmbok-secondary);
    border: 2px solid rgba(139, 41, 66, 0.25);
}

.pmbok8-red-thread-visual .thread-chip.focus {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, rgba(201, 162, 39, 0.15) 100%);
    color: #8a6d1c;
    border: 2px solid rgba(201, 162, 39, 0.3);
}

/* ============================================
   APPLICABILITY BY APPROACH - Focus Areas
   Beautiful cards for each approach
   ============================================ */
.pmbok8-applicability {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pmbok8-applicability .applicability-item {
    background: white;
    border: 2px solid var(--pmbok-border);
    border-radius: var(--pmbok-radius);
    padding: 22px 25px;
    transition: var(--pmbok-transition);
}

.pmbok8-applicability .applicability-item:nth-child(1) {
    border-left: 5px solid var(--pmbok-primary);
}

.pmbok8-applicability .applicability-item:nth-child(2) {
    border-left: 5px solid var(--pmbok-secondary);
}

.pmbok8-applicability .applicability-item:nth-child(3) {
    border-left: 5px solid var(--pmbok-accent);
}

.pmbok8-applicability .applicability-item:hover {
    box-shadow: 0 4px 15px var(--pmbok-shadow);
    transform: translateX(5px);
}

.pmbok8-applicability .applicability-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmbok8-applicability .applicability-item:nth-child(1) .applicability-label {
    color: var(--pmbok-primary);
}

.pmbok8-applicability .applicability-item:nth-child(2) .applicability-label {
    color: var(--pmbok-secondary);
}

.pmbok8-applicability .applicability-item:nth-child(3) .applicability-label {
    color: #8a6d1c;
}

.pmbok8-applicability .applicability-label::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pmbok8-applicability .applicability-item:nth-child(1) .applicability-label::before {
    background: var(--pmbok-primary);
}

.pmbok8-applicability .applicability-item:nth-child(2) .applicability-label::before {
    background: var(--pmbok-secondary);
}

.pmbok8-applicability .applicability-item:nth-child(3) .applicability-label::before {
    background: var(--pmbok-accent);
}

.pmbok8-applicability .applicability-content {
    font-size: 1.05rem;
    color: var(--pmbok-text-medium);
    line-height: 1.75;
    padding-left: 20px;
}

/* Process View Full */
.pmbok8-process-view {
    background: white;
    border-radius: var(--pmbok-radius);
    padding: 30px;
    margin-top: 20px;
}

.pmbok8-process-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.pmbok8-process-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--pmbok-primary-light), var(--pmbok-primary));
    border-radius: var(--pmbok-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.pmbok8-process-info {
    flex: 1;
}

.pmbok8-process-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
    margin-bottom: 8px;
}

.pmbok8-process-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pmbok8-tag {
    padding: 5px 12px;
    background: var(--pmbok-bg-light);
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--pmbok-text-medium);
}

.pmbok8-tag.domain {
    background: rgba(139, 41, 66, 0.1);
    color: var(--pmbok-secondary);
}

.pmbok8-tag.focus {
    background: rgba(201, 162, 39, 0.1);
    color: var(--pmbok-accent);
}

/* ============================================
   HIGHLIGHTED ITTO - When searching for ITTO
   ============================================ */
.pmbok8-itto-pill.highlighted {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 3px solid var(--pmbok-accent) !important;
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
    transform: scale(1.02);
    animation: pulse-highlight 2s ease-in-out infinite;
}

@keyframes pulse-highlight {
    0%, 100% {
        box-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(201, 162, 39, 0.6);
    }
}

.pmbok8-itto-pill.highlighted .pill-name {
    font-weight: 700;
    color: #8a6d1c;
}

/* ============================================
   SEARCH RESULTS - ITTO with Process Info
   ============================================ */
.pmbok8-search-results .result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pmbok8-search-results .result-item .result-text {
    font-size: 1.05rem;
    color: var(--pmbok-text-dark);
}

.pmbok8-search-results .result-item-itto {
    flex-direction: row;
    align-items: flex-start;
}

.pmbok8-search-results .result-item-itto .result-icon {
    margin-top: 2px;
}

.pmbok8-search-results .result-itto-info {
    flex: 1;
}

.pmbok8-search-results .result-itto-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pmbok-text-dark);
    margin-bottom: 4px;
}

.pmbok8-search-results .result-itto-type {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--pmbok-text-light);
}

.pmbok8-search-results .result-itto-processes {
    font-size: 0.95rem;
    color: var(--pmbok-text-medium);
    line-height: 1.4;
}

/* ============================================
   EXPANDABLE ITTO LIST - Multiple Processes
   ============================================ */
.pmbok8-search-results .result-item-itto-multi {
    border-radius: var(--pmbok-radius-sm);
    overflow: hidden;
    transition: var(--pmbok-transition);
    background: var(--pmbok-bg-light);
    margin-bottom: 8px;
}

.pmbok8-search-results .result-item-itto-multi:hover {
    background: #eef1f4;
}

.pmbok8-search-results .result-itto-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-search-results .result-itto-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

.pmbok8-search-results .result-itto-count {
    font-size: 0.9rem;
    color: var(--pmbok-primary);
    font-weight: 500;
}

.pmbok8-search-results .result-itto-expand {
    color: var(--pmbok-text-light);
    font-size: 0.9rem;
    transition: var(--pmbok-transition);
    margin-left: auto;
    padding-top: 4px;
}

.pmbok8-search-results .result-item-itto-multi.expanded .result-itto-expand {
    transform: rotate(180deg);
}

.pmbok8-search-results .result-itto-processes-list {
    display: none;
    padding: 0 18px 14px 18px;
    margin-left: 38px;
    border-top: 1px solid var(--pmbok-border);
}

.pmbok8-search-results .result-item-itto-multi.expanded .result-itto-processes-list {
    display: block;
}

.pmbok8-search-results .result-itto-process-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    margin-top: 8px;
    background: white;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
    border: 2px solid transparent;
}

.pmbok8-search-results .result-itto-process-link:hover {
    border-color: var(--pmbok-primary);
    background: #f8fffe;
    transform: translateX(5px);
}

.pmbok8-search-results .result-itto-process-link .process-link-icon {
    color: var(--pmbok-primary);
    font-weight: bold;
}

.pmbok8-search-results .result-itto-process-link .process-link-name {
    font-size: 1rem;
    color: var(--pmbok-text-dark);
    font-weight: 500;
}

/* ============================================
   10 IDEI CHEIE DESPRE PMBOK 8
   ============================================ */
.pmbok8-key-ideas {
    margin-bottom: 50px;
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5e9 100%);
    padding: 30px;
    border-radius: var(--pmbok-radius);
    border: 2px solid #c8e6c9;
}

.pmbok8-key-ideas .pmbok8-section-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.pmbok8-ideas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 1200px) {
    .pmbok8-ideas-grid {
        grid-template-columns: 1fr;
    }
}

.pmbok8-idea-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid #dcedc8;
    transition: var(--pmbok-transition);
    position: relative;
    overflow: hidden;
}

.pmbok8-idea-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--pmbok-accent);
}

.pmbok8-idea-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 83, 54, 0.15);
    border-color: var(--pmbok-primary);
}

.pmbok8-idea-card.highlight {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: var(--pmbok-accent);
}

.pmbok8-idea-card.highlight::before {
    background: linear-gradient(180deg, var(--pmbok-accent) 0%, #d4a829 100%);
    width: 5px;
}

.pmbok8-idea-card.highlight .pmbok8-idea-number {
    background: linear-gradient(135deg, var(--pmbok-accent) 0%, #d4a829 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(201, 162, 39, 0.4);
}

.pmbok8-idea-number {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--pmbok-primary) 0%, var(--pmbok-primary-dark) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(26, 83, 54, 0.3);
}

.pmbok8-idea-content {
    flex: 1;
}

.pmbok8-idea-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
    margin: 0;
    line-height: 1.3;
    display: inline;
}

.pmbok8-idea-text {
    font-size: 0.95rem;
    color: var(--pmbok-text-medium);
    line-height: 1.5;
    margin: 0;
    display: inline;
}

/* Animation for cards on scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pmbok8-idea-card {
    animation: fadeInUp 0.5s ease-out forwards;
}

.pmbok8-idea-card:nth-child(1) { animation-delay: 0.05s; }
.pmbok8-idea-card:nth-child(2) { animation-delay: 0.1s; }
.pmbok8-idea-card:nth-child(3) { animation-delay: 0.15s; }
.pmbok8-idea-card:nth-child(4) { animation-delay: 0.2s; }
.pmbok8-idea-card:nth-child(5) { animation-delay: 0.25s; }
.pmbok8-idea-card:nth-child(6) { animation-delay: 0.3s; }
.pmbok8-idea-card:nth-child(7) { animation-delay: 0.35s; }
.pmbok8-idea-card:nth-child(8) { animation-delay: 0.4s; }
.pmbok8-idea-card:nth-child(9) { animation-delay: 0.45s; }
.pmbok8-idea-card:nth-child(10) { animation-delay: 0.5s; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .pmbok8-key-ideas {
        padding: 20px;
    }
    
    .pmbok8-idea-card {
        padding: 14px 16px;
    }
    
    .pmbok8-idea-number {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
    
    .pmbok8-idea-title {
        font-size: 0.95rem;
    }
    
    .pmbok8-idea-text {
        font-size: 0.9rem;
    }
}

/* ============================================
   BOTTOM STATS BAR - PMBOK AT A GLANCE
   ============================================ */
.pmbok8-stats-bar {
    background: linear-gradient(135deg, #1a5336 0%, #0f3d25 100%);
    color: white;
    padding: 20px 30px;
    margin-top: 50px;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px rgba(26, 83, 54, 0.3);
}

.pmbok8-stats-bar-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    opacity: 0.9;
    text-align: center;
}

.pmbok8-stats-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.pmbok8-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmbok8-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #c9a227;
}

.pmbok8-stat-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .pmbok8-stats-bar {
        padding: 20px;
    }
    
    .pmbok8-stats-grid {
        gap: 20px;
    }
    
    .pmbok8-stat-number {
        font-size: 1.5rem;
    }
    
    .pmbok8-stat-label {
        font-size: 0.85rem;
    }
}

/* Custom count colors for Domains and Focus Areas */
#pmbok8-domains .pmbok8-section-title .count {
    background: linear-gradient(135deg, var(--pmbok-secondary-light) 0%, var(--pmbok-secondary) 100%);
}

#pmbok8-focus-areas .pmbok8-section-title .count {
    background: linear-gradient(135deg, var(--pmbok-accent-light) 0%, var(--pmbok-accent) 100%);
}


/* Examples list in ITTO drawer */
.pmbok8-examples-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pmbok8-example-item {
    padding: 10px 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--pmbok-text-dark);
    border-left: 3px solid var(--pmbok-accent);
}


/* ============================================
   TAILORING ASSISTANT SECTION
   ============================================ */
.pmbok8-tailoring-section {
    margin-top: 60px;
    padding: 40px 0;
}

.pmbok8-tailoring-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-tailoring-container {
    max-width: 900px;
    margin: 40px auto 0;
}

.pmbok8-tailoring-form {
    background: white;
    border-radius: var(--pmbok-radius);
    padding: 30px;
    box-shadow: 0 4px 20px var(--pmbok-shadow);
}

.pmbok8-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.pmbok8-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pmbok8-form-group.full-width {
    flex: 1 1 100%;
}

.pmbok8-form-group label {
    font-weight: 600;
    color: var(--pmbok-text-dark);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.pmbok8-select,
.pmbok8-textarea {
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: var(--pmbok-radius-sm);
    font-size: 1rem;
    color: var(--pmbok-text-dark);
    background: white;
    transition: var(--pmbok-transition);
    width: 100%;
    box-sizing: border-box;
}

.pmbok8-select:focus,
.pmbok8-textarea:focus {
    outline: none;
    border-color: var(--pmbok-primary);
    box-shadow: 0 0 0 3px rgba(26, 83, 54, 0.1);
}

.pmbok8-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.pmbok8-form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.pmbok8-btn {
    padding: 14px 28px;
    border-radius: var(--pmbok-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pmbok-transition);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pmbok8-btn-primary {
    background: linear-gradient(135deg, #1a5336 0%, #2d7a4d 100%);
    color: white;
}

.pmbok8-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 83, 54, 0.4);
}

.pmbok8-btn-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pmbok8-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.pmbok8-btn-outline {
    background: transparent;
    color: var(--pmbok-text-medium);
    border: 2px solid #e0e0e0;
}

.pmbok8-btn-outline:hover {
    border-color: var(--pmbok-text-medium);
    background: #f5f5f5;
}

.pmbok8-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Tailoring Results */
.pmbok8-tailoring-results {
    margin-top: 30px;
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pmbok8-results-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pmbok8-results-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.pmbok8-btn-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-btn-close:hover {
    background: rgba(255,255,255,0.3);
}

.pmbok8-results-content {
    padding: 25px;
}

/* Process Categories in Results */
.pmbok8-result-category {
    margin-bottom: 25px;
}

.pmbok8-result-category:last-child {
    margin-bottom: 0;
}

.pmbok8-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.pmbok8-category-icon {
    font-size: 1.5rem;
}

.pmbok8-category-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
}

.pmbok8-category-count {
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--pmbok-text-medium);
    font-weight: 600;
}

.pmbok8-category-recommended .pmbok8-category-header {
    border-color: #1a5336;
}

.pmbok8-category-recommended .pmbok8-category-title {
    color: #1a5336;
}

.pmbok8-category-recommended .pmbok8-category-count {
    background: #e8f5e9;
    color: #1a5336;
}

.pmbok8-category-simplified .pmbok8-category-header {
    border-color: #c9a227;
}

.pmbok8-category-simplified .pmbok8-category-title {
    color: #8a6d1c;
}

.pmbok8-category-simplified .pmbok8-category-count {
    background: #fff8e1;
    color: #8a6d1c;
}

.pmbok8-category-skip .pmbok8-category-header {
    border-color: #d32f2f;
}

.pmbok8-category-skip .pmbok8-category-title {
    color: #d32f2f;
}

.pmbok8-category-skip .pmbok8-category-count {
    background: #ffebee;
    color: #d32f2f;
}

/* Process Items in Results */
.pmbok8-result-processes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmbok8-result-process {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-result-process:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.pmbok8-process-status {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pmbok8-process-info {
    flex: 1;
}

.pmbok8-process-name {
    font-weight: 600;
    color: var(--pmbok-text-dark);
    margin-bottom: 4px;
}

.pmbok8-process-reason {
    font-size: 0.9rem;
    color: var(--pmbok-text-medium);
    font-style: italic;
}

/* AI Suggestions */
.pmbok8-ai-suggestions {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #f3e7ff 0%, #e8f4fd 100%);
    border-radius: var(--pmbok-radius-sm);
    border-left: 4px solid #764ba2;
}

.pmbok8-ai-suggestions-title {
    font-weight: 700;
    color: #764ba2;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pmbok8-ai-suggestions-content {
    color: var(--pmbok-text-dark);
    line-height: 1.7;
}

.pmbok8-ai-suggestions-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.pmbok8-ai-suggestions-content li {
    margin-bottom: 8px;
}

/* Loading State */
.pmbok8-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 15px;
}

.pmbok8-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0f0f0;
    border-top-color: #764ba2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.pmbok8-loading-text {
    color: var(--pmbok-text-medium);
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .pmbok8-form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .pmbok8-form-actions {
        flex-direction: column;
    }
    
    .pmbok8-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Disabled button states for usage limits */
.pmbok8-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.pmbok8-btn-primary:disabled {
    background: linear-gradient(135deg, #6b9e7e 0%, #8ab89a 100%);
}

.pmbok8-btn-secondary:disabled {
    background: linear-gradient(135deg, #9aa5d1 0%, #a89cc4 100%);
}

/* ============================================
   PROJECT SIMULATOR SECTION
   ============================================ */
.pmbok8-simulator-section {
    margin-top: 60px;
    padding: 40px 0;
}

.pmbok8-simulator-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-simulator-container {
    max-width: 800px;
    margin: 40px auto 0;
}

/* Intro Screen */
.pmbok8-sim-scenario-card {
    background: white;
    border-radius: var(--pmbok-radius);
    padding: 40px;
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    text-align: center;
}

.pmbok8-sim-scenario-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.pmbok8-sim-scenario-card h3 {
    font-size: 1.8rem;
    color: var(--pmbok-text-dark);
    margin-bottom: 20px;
}

.pmbok8-sim-scenario-details {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.pmbok8-sim-scenario-details .detail-item {
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--pmbok-text-medium);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmbok8-sim-scenario-desc {
    color: var(--pmbok-text-medium);
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pmbok8-btn-game {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 16px 40px;
    font-size: 1.1rem;
    border: none;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
    font-weight: 600;
}

.pmbok8-btn-game:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* Game Screen */
.pmbok8-sim-game {
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    overflow: hidden;
}

.pmbok8-sim-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pmbok8-sim-progress {
    flex: 1;
    max-width: 300px;
}

.pmbok8-sim-progress .progress-label {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.pmbok8-sim-progress .progress-bar {
    background: rgba(255,255,255,0.2);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.pmbok8-sim-progress .progress-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.pmbok8-sim-progress .progress-text {
    color: white;
    font-size: 0.9rem;
    margin-top: 8px;
    text-align: right;
}

.pmbok8-sim-score {
    background: rgba(255,255,255,0.1);
    padding: 12px 20px;
    border-radius: var(--pmbok-radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pmbok8-sim-score .score-icon {
    font-size: 1.3rem;
}

.pmbok8-sim-score .score-value {
    color: #fbbf24;
    font-size: 1.5rem;
    font-weight: 700;
}

.pmbok8-sim-score .score-label {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}

/* Stage */
.pmbok8-sim-stage {
    padding: 30px;
}

.pmbok8-sim-phase {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.pmbok8-sim-phase.initiating { background: #dbeafe; color: #1e40af; }
.pmbok8-sim-phase.planning { background: #fef3c7; color: #92400e; }
.pmbok8-sim-phase.executing { background: #d1fae5; color: #065f46; }
.pmbok8-sim-phase.monitoring { background: #e0e7ff; color: #3730a3; }
.pmbok8-sim-phase.closing { background: #fce7f3; color: #9d174d; }

.pmbok8-sim-title {
    font-size: 1.5rem;
    color: var(--pmbok-text-dark);
    margin-bottom: 20px;
}

.pmbok8-sim-situation {
    background: #f8fafc;
    padding: 20px;
    border-radius: var(--pmbok-radius-sm);
    border-left: 4px solid #f59e0b;
    color: var(--pmbok-text-dark);
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Options */
.pmbok8-sim-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmbok8-sim-option {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-sim-option:hover {
    border-color: #f59e0b;
    background: #fffbeb;
    transform: translateX(5px);
}

.pmbok8-sim-option.selected {
    border-color: #f59e0b;
    background: #fef3c7;
}

.pmbok8-sim-option.correct {
    border-color: #10b981;
    background: #d1fae5;
}

.pmbok8-sim-option.partial {
    border-color: #f59e0b;
    background: #fef3c7;
}

.pmbok8-sim-option.wrong {
    border-color: #ef4444;
    background: #fee2e2;
}

.pmbok8-sim-option.disabled {
    pointer-events: none;
    opacity: 0.7;
}

.option-letter {
    width: 32px;
    height: 32px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--pmbok-text-medium);
    flex-shrink: 0;
}

.pmbok8-sim-option.correct .option-letter {
    background: #10b981;
    color: white;
}

.pmbok8-sim-option.partial .option-letter {
    background: #f59e0b;
    color: white;
}

.pmbok8-sim-option.wrong .option-letter {
    background: #ef4444;
    color: white;
}

.option-text {
    color: var(--pmbok-text-dark);
    line-height: 1.5;
}

/* Feedback */
.pmbok8-sim-feedback {
    padding: 30px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pmbok8-sim-feedback .feedback-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.pmbok8-sim-feedback .feedback-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.pmbok8-sim-feedback .feedback-title.correct { color: #10b981; }
.pmbok8-sim-feedback .feedback-title.partial { color: #f59e0b; }
.pmbok8-sim-feedback .feedback-title.wrong { color: #ef4444; }

.pmbok8-sim-feedback .feedback-text {
    color: var(--pmbok-text-medium);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 20px;
}

.pmbok8-sim-feedback .feedback-process {
    background: white;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pmbok8-sim-feedback .process-label {
    color: var(--pmbok-text-medium);
    font-size: 0.9rem;
}

.pmbok8-sim-feedback .process-name {
    color: var(--pmbok-primary);
    font-weight: 600;
    cursor: pointer;
}

.pmbok8-sim-feedback .process-name:hover {
    text-decoration: underline;
}

.pmbok8-sim-feedback .feedback-points {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.pmbok8-sim-feedback .feedback-points.positive { color: #10b981; }
.pmbok8-sim-feedback .feedback-points.partial { color: #f59e0b; }
.pmbok8-sim-feedback .feedback-points.zero { color: #ef4444; }

/* Results Screen */
.pmbok8-sim-results {
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    padding: 40px;
    text-align: center;
}

.pmbok8-sim-results-header {
    margin-bottom: 30px;
}

.pmbok8-sim-results-header .results-badge {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.pmbok8-sim-results-header h3 {
    font-size: 2rem;
    color: var(--pmbok-text-dark);
    margin-bottom: 10px;
}

.pmbok8-sim-results-header p {
    color: var(--pmbok-text-medium);
}

.pmbok8-sim-final-score {
    margin-bottom: 30px;
}

.final-score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.final-score-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.final-score-max {
    font-size: 1rem;
    opacity: 0.8;
}

.final-score-label {
    margin-top: 15px;
    color: var(--pmbok-text-medium);
    font-weight: 600;
}

.pmbok8-sim-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.pmbok8-sim-stats .stat-item {
    text-align: center;
}

.pmbok8-sim-stats .stat-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.pmbok8-sim-stats .stat-item.correct .stat-value { color: #10b981; }
.pmbok8-sim-stats .stat-item.partial .stat-value { color: #f59e0b; }
.pmbok8-sim-stats .stat-item.wrong .stat-value { color: #ef4444; }

.pmbok8-sim-stats .stat-label {
    color: var(--pmbok-text-medium);
    font-size: 0.9rem;
}

.pmbok8-sim-review {
    background: #f8fafc;
    padding: 20px;
    border-radius: var(--pmbok-radius-sm);
    text-align: left;
    margin-bottom: 30px;
}

.pmbok8-sim-review h4 {
    margin-bottom: 15px;
    color: var(--pmbok-text-dark);
}

.pmbok8-sim-review .review-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmbok8-sim-review .review-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: white;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-sim-review .review-item:hover {
    background: #e2e8f0;
}

.pmbok8-sim-review .review-icon {
    font-size: 1.2rem;
}

.pmbok8-sim-review .review-text {
    color: var(--pmbok-text-dark);
}

.pmbok8-sim-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .pmbok8-sim-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .pmbok8-sim-progress {
        max-width: 100%;
    }
    
    .pmbok8-sim-stats {
        gap: 15px;
    }
    
    .pmbok8-sim-scenario-details {
        gap: 10px;
    }
}

/* ============================================
   PMBOK 7 VS 8 COMPARISON SECTION
   ============================================ */
.pmbok8-comparison-section {
    margin-top: 60px;
    padding: 40px 0;
}

.pmbok8-comparison-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-comparison-container {
    max-width: 1100px;
    margin: 40px auto 0;
}

/* Filter Tabs */
.pmbok8-comparison-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.pmbok8-comp-tab {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 25px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--pmbok-transition);
    font-weight: 500;
    color: #374151;
}

.pmbok8-comp-tab:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.pmbok8-comp-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-color: transparent;
}

/* Comparison Grid */
.pmbok8-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 25px;
}

/* Comparison Card */
.pmbok8-comp-card {
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 15px var(--pmbok-shadow);
    overflow: hidden;
    transition: var(--pmbok-transition);
}

.pmbok8-comp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.pmbok8-comp-card.hidden {
    display: none;
}

.pmbok8-comp-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.pmbok8-comp-badge.added {
    background: #d1fae5;
    color: #065f46;
}

.pmbok8-comp-badge.removed {
    background: #fee2e2;
    color: #991b1b;
}

.pmbok8-comp-badge.changed {
    background: #dbeafe;
    color: #1e40af;
}

.pmbok8-comp-badge.renamed {
    background: #fef3c7;
    color: #92400e;
}

.pmbok8-comp-card h4 {
    padding: 15px 20px 10px;
    margin: 0;
    font-size: 1.15rem;
    color: var(--pmbok-text-dark);
}

.pmbok8-comp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.pmbok8-comp-col {
    padding: 15px 20px 20px;
}

.pmbok8-comp-col.old {
    background: #fef2f2;
    border-right: 1px solid #fecaca;
}

.pmbok8-comp-col.new {
    background: #f0fdf4;
}

.pmbok8-comp-col .col-header {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 12px;
    color: var(--pmbok-text-medium);
}

.pmbok8-comp-col.old .col-header {
    color: #991b1b;
}

.pmbok8-comp-col.new .col-header {
    color: #065f46;
}

.pmbok8-comp-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pmbok8-comp-col ul li {
    padding: 5px 0;
    font-size: 0.9rem;
    color: var(--pmbok-text-dark);
    position: relative;
    padding-left: 15px;
}

.pmbok8-comp-col ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--pmbok-text-medium);
}

.pmbok8-comp-col .no-content {
    color: var(--pmbok-text-medium);
    font-style: italic;
    font-size: 0.9rem;
}

/* Summary Stats */
.pmbok8-comparison-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    padding: 25px;
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 15px var(--pmbok-shadow);
    flex-wrap: wrap;
}

.pmbok8-comparison-summary .summary-item {
    text-align: center;
    padding: 15px 30px;
    border-radius: var(--pmbok-radius-sm);
}

.pmbok8-comparison-summary .summary-item.added {
    background: #d1fae5;
}

.pmbok8-comparison-summary .summary-item.removed {
    background: #fee2e2;
}

.pmbok8-comparison-summary .summary-item.changed {
    background: #dbeafe;
}

.pmbok8-comparison-summary .summary-item.renamed {
    background: #fef3c7;
}

.pmbok8-comparison-summary .summary-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 5px;
}

.pmbok8-comparison-summary .summary-count {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    color: var(--pmbok-text-dark);
}

.pmbok8-comparison-summary .summary-label {
    font-size: 0.85rem;
    color: var(--pmbok-text-medium);
}

/* ============================================
   FREE VS PRO PRICING SECTION
   ============================================ */
.pmbok8-pricing-section {
    margin-top: 60px;
    padding: 40px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--pmbok-radius);
}

.pmbok8-pricing-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-pricing-container {
    max-width: 1200px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
}

/* Pricing Card */
.pmbok8-pricing-card {
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    padding: 30px 25px;
    position: relative;
    transition: var(--pmbok-transition);
    display: flex;
    flex-direction: column;
}

.pmbok8-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.pmbok8-pricing-card.featured {
    border: 3px solid #10b981;
    transform: scale(1.02);
}

.pmbok8-pricing-card.featured:hover {
    transform: scale(1.02) translateY(-5px);
}

.pricing-ribbon {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 8px 15px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
}

.pricing-badge {
    display: inline-block;
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pmbok-text-medium);
    margin-bottom: 15px;
}

.pmbok8-pricing-card.pro .pricing-badge {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.pmbok8-pricing-card h3 {
    font-size: 1.5rem;
    color: var(--pmbok-text-dark);
    margin: 0 0 15px;
}

.pricing-price {
    margin-bottom: 15px;
}

.pricing-price .price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--pmbok-text-dark);
}

.pmbok8-pricing-card.pro .price-amount {
    color: #10b981;
}

.pricing-price .price-period {
    font-size: 1rem;
    color: var(--pmbok-text-medium);
}

.pricing-price .price-monthly {
    display: block;
    font-size: 0.9rem;
    color: #10b981;
    font-weight: 600;
    margin-top: 5px;
}

.pricing-desc {
    color: var(--pmbok-text-medium);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    flex: 1;
}

.pricing-features li {
    padding: 10px 0;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li .icon {
    flex-shrink: 0;
}

.pricing-features li.included {
    color: var(--pmbok-text-dark);
}

.pricing-features li.limited {
    color: var(--pmbok-text-medium);
}

.pricing-features li.excluded {
    color: #9ca3af;
    text-decoration: line-through;
}

.limit-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.pro-badge {
    background: #d1fae5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

/* CTA */
.pricing-cta {
    text-align: center;
}

.current-plan {
    display: inline-block;
    padding: 12px 25px;
    background: #f1f5f9;
    color: var(--pmbok-text-medium);
    border-radius: var(--pmbok-radius-sm);
    font-weight: 600;
}

.pricing-btn {
    display: block;
    text-align: center;
    padding: 14px 25px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    text-decoration: none;
    border-radius: var(--pmbok-radius-sm);
    font-weight: 600;
    transition: var(--pmbok-transition);
}

.pricing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
    color: white;
}

.pricing-btn.featured {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.pricing-btn.featured:hover {
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
}

.pricing-btn.lifetime {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.pricing-btn.lifetime:hover {
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

/* Guarantee */
.pmbok8-pricing-guarantee {
    max-width: 600px;
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 30px;
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 15px var(--pmbok-shadow);
}

.pmbok8-pricing-guarantee .guarantee-icon {
    font-size: 2rem;
}

.pmbok8-pricing-guarantee .guarantee-text {
    color: var(--pmbok-text-dark);
}

.pmbok8-pricing-note {
    text-align: center;
    margin-top: 25px;
    color: var(--pmbok-text-medium);
}

.pmbok8-pricing-note p {
    display: inline-block;
    padding: 12px 25px;
    background: #d1fae5;
    border-radius: 25px;
    color: #065f46;
}

/* Responsive */
@media (max-width: 1100px) {
    .pmbok8-pricing-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pmbok8-pricing-container {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pmbok8-comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .pmbok8-comp-columns {
        grid-template-columns: 1fr;
    }
    
    .pmbok8-comp-col.old {
        border-right: none;
        border-bottom: 1px solid #fecaca;
    }
    
    .pmbok8-comparison-tabs {
        gap: 8px;
    }
    
    .pmbok8-comp-tab {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

/* ============================================
   PROCESS FLOW VISUALIZER SECTION
   ============================================ */
.pmbok8-flow-section {
    margin-top: 60px;
    padding: 40px 0;
}

.pmbok8-flow-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-flow-container {
    max-width: 1200px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 20px var(--pmbok-shadow);
    overflow: hidden;
}

/* Sidebar */
.pmbok8-flow-sidebar {
    background: #f8fafc;
    padding: 25px;
    border-right: 1px solid #e2e8f0;
}

.pmbok8-flow-sidebar h4 {
    margin: 0 0 20px;
    color: var(--pmbok-text-dark);
    font-size: 1.1rem;
}

.pmbok8-flow-search {
    margin-bottom: 20px;
}

.pmbok8-flow-search input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pmbok-radius-sm);
    font-size: 0.95rem;
    transition: var(--pmbok-transition);
}

.pmbok8-flow-search input:focus {
    outline: none;
    border-color: #8b5cf6;
}

.pmbok8-flow-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.flow-deliverable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: white;
    border: 2px solid transparent;
    border-radius: var(--pmbok-radius-sm);
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.flow-deliverable-item:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.flow-deliverable-item.active {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.flow-deliverable-item.hidden {
    display: none;
}

.flow-deliverable-item .flow-icon {
    font-size: 1.3rem;
}

.flow-deliverable-item .flow-name {
    font-size: 0.9rem;
    color: var(--pmbok-text-dark);
    font-weight: 500;
}

/* Flow Diagram */
.pmbok8-flow-diagram {
    padding: 30px;
    min-height: 500px;
}

.pmbok8-flow-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
    color: var(--pmbok-text-medium);
}

.pmbok8-flow-placeholder .placeholder-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.pmbok8-flow-placeholder .placeholder-text {
    font-size: 1.1rem;
    max-width: 300px;
}

/* Flow Content */
.flow-header {
    text-align: center;
    margin-bottom: 30px;
}

.flow-deliverable-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.flow-deliverable-badge .badge-icon {
    font-size: 1.5rem;
}

/* Flow Visualization */
.flow-visualization {
    display: grid;
    grid-template-columns: 1fr 220px 1.2fr;
    gap: 25px;
    align-items: flex-start;
}

.flow-column {
    display: flex;
    flex-direction: column;
}

.flow-column-header {
    text-align: center;
    font-weight: 600;
    color: var(--pmbok-text-medium);
    font-size: 1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* Source Process */
.flow-process-box {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--pmbok-radius-sm);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.flow-process-box:hover {
    border-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.flow-process-box.source {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.flow-process-box .process-phase {
    font-size: 0.8rem;
    color: var(--pmbok-text-medium);
    margin-bottom: 8px;
}

.flow-process-box .process-name {
    font-weight: 700;
    color: var(--pmbok-text-dark);
    font-size: 1rem;
    margin-bottom: 10px;
}

.flow-process-box .process-click {
    font-size: 0.8rem;
    color: #8b5cf6;
}

/* Center Column - Deliverable */
.flow-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-deliverable-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 3px solid #f59e0b;
    border-radius: var(--pmbok-radius);
    padding: 25px;
    text-align: center;
    min-width: 180px;
}

.flow-deliverable-box .deliverable-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.flow-deliverable-box .deliverable-name {
    font-weight: 700;
    color: var(--pmbok-text-dark);
    font-size: 1rem;
    margin-bottom: 8px;
}

.flow-deliverable-box .deliverable-desc {
    font-size: 0.85rem;
    color: var(--pmbok-text-medium);
}

/* Arrow Container */
.flow-arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.flow-arrow {
    display: flex;
    align-items: center;
    color: #8b5cf6;
}

.flow-arrow .arrow-line {
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    border-radius: 2px;
}

.flow-arrow .arrow-head {
    font-size: 1.5rem;
    margin-left: -5px;
}

.flow-arrow.animated .arrow-line {
    animation: flowPulse 1.5s ease-in-out infinite;
}

@keyframes flowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Destinations */
.flow-destinations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

.flow-destination-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--pmbok-radius-sm);
    padding: 18px 20px;
    cursor: pointer;
    transition: var(--pmbok-transition);
    position: relative;
    min-height: auto;
}

.flow-destination-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #8b5cf6;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 2px 0 0 2px;
}

.flow-destination-item:hover {
    border-color: #8b5cf6;
    transform: translateX(5px);
}

.flow-destination-item:hover::before {
    transform: scaleY(1);
}

.flow-destination-item.animate-in {
    animation: slideInRight 0.5s ease forwards;
    opacity: 0;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.flow-destination-item .dest-phase {
    font-size: 0.85rem;
    color: var(--pmbok-text-medium);
    margin-bottom: 6px;
    display: block;
}

.flow-destination-item .dest-name {
    font-weight: 600;
    color: var(--pmbok-text-dark);
    font-size: 1.05rem;
    line-height: 1.4;
    display: block;
    word-wrap: break-word;
}

.flow-destination-item .dest-usage {
    font-size: 0.9rem;
    color: #8b5cf6;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.4;
    display: block;
    word-wrap: break-word;
}

/* Flow Stats */
.flow-stats {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e2e8f0;
}

.flow-stat {
    text-align: center;
}

.flow-stat .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #8b5cf6;
    display: block;
}

.flow-stat .stat-label {
    font-size: 0.9rem;
    color: var(--pmbok-text-medium);
}

/* Flow Actions */
.flow-actions {
    text-align: center;
    margin-top: 25px;
}

.pmbok8-btn-flow {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: var(--pmbok-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.pmbok8-btn-flow:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

/* Responsive */
@media (max-width: 900px) {
    .pmbok8-flow-container {
        grid-template-columns: 1fr;
    }
    
    .pmbok8-flow-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .pmbok8-flow-list {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }
    
    .flow-deliverable-item {
        flex: 0 0 auto;
    }
    
    .flow-visualization {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .flow-column {
        align-items: center;
    }
    
    .flow-arrow-container {
        transform: rotate(90deg);
    }
}

/* ============================================
   TEMPLATE GENERATOR SECTION
   ============================================ */
.pmbok8-templates-section {
    margin-top: 60px;
    padding: 40px 0;
}

.pmbok8-templates-section .pmbok8-section-subtitle {
    text-align: center;
    color: var(--pmbok-text-medium);
    font-size: 1.1rem;
    margin-top: 10px;
}

.pmbok8-templates-container {
    max-width: 100%;
    width: 100%;
    margin: 40px 0 0 0;
}

/* Filter Buttons */
.pmbok8-templates-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.pmbok8-template-filter {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 25px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--pmbok-transition);
    font-weight: 500;
}

.pmbok8-template-filter:hover {
    border-color: #ec4899;
    color: #ec4899;
}

.pmbok8-template-filter.active {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: white;
    border-color: transparent;
}

/* Templates Grid */
.pmbok8-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Template Card */
.pmbok8-template-card {
    background: white;
    border-radius: var(--pmbok-radius);
    box-shadow: 0 4px 15px var(--pmbok-shadow);
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: var(--pmbok-transition);
    position: relative;
    overflow: hidden;
}

.pmbok8-template-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ec4899, #f472b6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pmbok8-template-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.pmbok8-template-card:hover::before {
    transform: scaleX(1);
}

.pmbok8-template-card.hidden {
    display: none;
}

.pmbok8-template-card .template-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.pmbok8-template-card .template-info {
    flex: 1;
}

.pmbok8-template-card .template-info h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--pmbok-text-dark);
}

.pmbok8-template-card .template-info p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--pmbok-text-medium);
    line-height: 1.5;
}

.pmbok8-template-card .template-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pmbok8-template-card .template-phase {
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--pmbok-text-medium);
}

.pmbok8-template-card .template-format {
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Download Button */
.pmbok8-template-card .template-actions {
    flex-shrink: 0;
    align-self: center;
}

.btn-download-template {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: var(--pmbok-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pmbok-transition);
    white-space: nowrap;
}

.btn-download-template:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.btn-download-template:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bulk Download */
.pmbok8-templates-bulk {
    margin-top: 40px;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border: 2px solid #f9a8d4;
    border-radius: var(--pmbok-radius);
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pmbok8-templates-bulk .bulk-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pmbok8-templates-bulk .bulk-icon {
    font-size: 2.5rem;
}

.pmbok8-templates-bulk .bulk-text strong {
    display: block;
    font-size: 1.2rem;
    color: var(--pmbok-text-dark);
    margin-bottom: 5px;
}

.pmbok8-templates-bulk .bulk-text span {
    color: var(--pmbok-text-medium);
    font-size: 0.95rem;
}

.btn-download-all {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: var(--pmbok-radius-sm);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--pmbok-transition);
}

.btn-download-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(236, 72, 153, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .pmbok8-template-card {
        flex-direction: column;
        text-align: center;
    }
    
    .pmbok8-template-card .template-meta {
        justify-content: center;
    }
    
    .pmbok8-template-card .template-actions {
        width: 100%;
    }
    
    .btn-download-template {
        width: 100%;
    }
    
    .pmbok8-templates-bulk {
        flex-direction: column;
        text-align: center;
    }
    
    .pmbok8-templates-bulk .bulk-info {
        flex-direction: column;
    }
}

/* ============================================
   LARGER FONTS FOR ALL INTERACTIVE FEATURES
   ============================================ */

/* TAILORING ASSISTANT - Larger Fonts */
.pmbok8-tailoring-section .pmbok8-section-subtitle {
    font-size: 1.2rem !important;
}

.pmbok8-tailoring-form label {
    font-size: 1.1rem !important;
    font-weight: 600;
}

.pmbok8-tailoring-form input,
.pmbok8-tailoring-form select,
.pmbok8-tailoring-form textarea {
    font-size: 1.05rem !important;
    padding: 14px 16px !important;
}

.pmbok8-tailoring-form .field-hint {
    font-size: 0.95rem !important;
}

.pmbok8-tailoring-form .checkbox-group label,
.pmbok8-tailoring-form .radio-group label {
    font-size: 1.05rem !important;
    padding: 12px 18px !important;
}

.pmbok8-tailoring-results h4 {
    font-size: 1.3rem !important;
}

.pmbok8-tailoring-results .result-item {
    font-size: 1.05rem !important;
    padding: 15px 18px !important;
}

.pmbok8-tailoring-results .process-name {
    font-size: 1.1rem !important;
}

.pmbok8-tailoring-results .process-reason {
    font-size: 1rem !important;
}

.pmbok8-btn-analyze,
.pmbok8-btn-refine {
    font-size: 1.1rem !important;
    padding: 14px 28px !important;
}

/* PMBOK 7 vs 8 COMPARISON - Larger Fonts */
.pmbok8-comparison-section .pmbok8-section-subtitle {
    font-size: 1.2rem !important;
}

.pmbok8-comp-filters .pmbok8-comp-filter {
    font-size: 1.05rem !important;
    padding: 12px 22px !important;
}

.pmbok8-comp-card h4 {
    font-size: 1.25rem !important;
}

.pmbok8-comp-card .col-header {
    font-size: 1.1rem !important;
    padding: 12px !important;
}

.pmbok8-comp-card ul li,
.pmbok8-comp-card p {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

.pmbok8-comp-card .pmbok8-comp-badge {
    font-size: 0.95rem !important;
    padding: 6px 14px !important;
}

.pmbok8-comp-summary span {
    font-size: 1.05rem !important;
}

/* PROCESS FLOW VISUALIZER - Larger Fonts */
.pmbok8-flow-section .pmbok8-section-subtitle {
    font-size: 1.2rem !important;
}

.pmbok8-flow-sidebar h4 {
    font-size: 1.2rem !important;
}

.pmbok8-flow-search input {
    font-size: 1.05rem !important;
    padding: 12px 16px !important;
}

.flow-deliverable-item .flow-name {
    font-size: 1.05rem !important;
}

.flow-deliverable-item .flow-icon {
    font-size: 1.5rem !important;
}

.flow-deliverable-badge {
    font-size: 1.3rem !important;
    padding: 18px 35px !important;
}

.flow-deliverable-badge .badge-icon {
    font-size: 1.8rem !important;
}

.flow-column-header {
    font-size: 1.1rem !important;
}

.flow-process-box .process-phase {
    font-size: 0.95rem !important;
}

.flow-process-box .process-name {
    font-size: 1.15rem !important;
}

.flow-process-box .process-click {
    font-size: 0.95rem !important;
}

.flow-deliverable-box {
    padding: 30px !important;
}

.flow-deliverable-box .deliverable-icon {
    font-size: 3rem !important;
}

.flow-deliverable-box .deliverable-name {
    font-size: 1.15rem !important;
}

.flow-deliverable-box .deliverable-desc {
    font-size: 1rem !important;
}

.flow-destination-item {
    padding: 20px 22px !important;
}

.flow-destination-item .dest-phase {
    font-size: 0.95rem !important;
}

.flow-destination-item .dest-name {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
}

.flow-destination-item .dest-usage {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.flow-stat .stat-value {
    font-size: 2.5rem !important;
}

.flow-stat .stat-label {
    font-size: 1.05rem !important;
}

.pmbok8-btn-flow {
    font-size: 1.1rem !important;
    padding: 14px 32px !important;
}

/* TEMPLATE GENERATOR - Larger Fonts */
.pmbok8-templates-section .pmbok8-section-subtitle {
    font-size: 1.2rem !important;
}

.pmbok8-template-filter {
    font-size: 1.05rem !important;
    padding: 12px 24px !important;
}

.pmbok8-template-card .template-icon {
    font-size: 3rem !important;
}

.pmbok8-template-card .template-info h4 {
    font-size: 1.2rem !important;
}

.pmbok8-template-card .template-info p {
    font-size: 1.05rem !important;
}

.pmbok8-template-card .template-phase,
.pmbok8-template-card .template-format {
    font-size: 0.95rem !important;
    padding: 6px 14px !important;
}

.btn-download-template {
    font-size: 1.05rem !important;
    padding: 12px 22px !important;
}

.pmbok8-templates-bulk .bulk-icon {
    font-size: 3rem !important;
}

.pmbok8-templates-bulk .bulk-text strong {
    font-size: 1.3rem !important;
}

.pmbok8-templates-bulk .bulk-text span {
    font-size: 1.1rem !important;
}

.btn-download-all {
    font-size: 1.15rem !important;
    padding: 16px 35px !important;
}

/* PROJECT SIMULATOR - Larger Fonts */
.pmbok8-simulator-section .pmbok8-section-subtitle {
    font-size: 1.2rem !important;
}

.simulator-scenario-title {
    font-size: 1.4rem !important;
}

.simulator-scenario-desc {
    font-size: 1.1rem !important;
}

.simulator-question-text {
    font-size: 1.2rem !important;
}

.simulator-option {
    font-size: 1.1rem !important;
    padding: 16px 20px !important;
}

.simulator-feedback {
    font-size: 1.1rem !important;
    padding: 18px !important;
}

.simulator-score {
    font-size: 1.3rem !important;
}

.simulator-btn {
    font-size: 1.1rem !important;
    padding: 14px 28px !important;
}

/* ============================================
   FLASHCARDS & QUIZ SECTION
   ============================================ */

.pmbok8-flashcards-section {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.pmbok8-flashcards-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Mode Tabs */
.flashcards-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.flashcards-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.flashcards-tab:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}

.flashcards-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #f59e0b;
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.flashcards-tab .tab-icon {
    font-size: 1.3rem;
}

/* Flashcards Mode */
.flashcards-mode {
    display: block;
}

.flashcards-mode.hidden {
    display: none;
}

.flashcards-controls-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.fc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fc-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    transform: translateY(-2px);
}

.fc-btn.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
}

.fc-progress-info {
    font-size: 1.2rem;
    font-weight: 700;
    color: #374151;
    background: white;
    padding: 12px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Flashcard Container */
.flashcard-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.fc-nav {
    width: 50px;
    height: 50px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-nav:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
    transform: scale(1.1);
}

/* Flashcard */
.flashcard {
    width: 100%;
    max-width: 550px;
    height: 320px;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    text-align: center;
}

.flashcard-front {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 3px solid #f59e0b;
}

.flashcard-back {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 3px solid #d97706;
    transform: rotateY(180deg);
}

.card-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.flashcard-back .card-label {
    color: #92400e;
}

.card-content {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    flex: 1;
    display: flex;
    align-items: center;
    overflow-y: auto;
    max-height: 180px;
    padding: 10px;
}

.flashcard-back .card-content {
    font-size: 1.15rem;
    font-weight: 500;
}

.card-hint {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-top: 15px;
}

.flashcard-back .card-hint {
    color: #92400e;
}

/* Flashcard Actions */
.flashcards-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.fc-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 35px;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.fc-action-btn .action-icon {
    font-size: 2rem;
}

.fc-action-btn.fc-repeat {
    color: #dc2626;
}

.fc-action-btn.fc-repeat:hover {
    background: #fef2f2;
    border-color: #dc2626;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
}

.fc-action-btn.fc-know {
    color: #16a34a;
}

.fc-action-btn.fc-know:hover {
    background: #f0fdf4;
    border-color: #16a34a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.2);
}

/* Flashcard Stats */
.flashcards-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.fc-stat {
    text-align: center;
}

.fc-stat .stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
}

.fc-stat .stat-label {
    font-size: 0.95rem;
    color: #6b7280;
}

/* Progress Bar */
.fc-progress-bar {
    height: 10px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.fc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #16a34a 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* ============================================
   QUIZ MODE STYLES
   ============================================ */

/* Quiz Setup */
.quiz-setup {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.quiz-setup h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #1f2937;
}

.quiz-option-group {
    margin-bottom: 25px;
}

.quiz-option-group label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.quiz-option-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quiz-opt-btn {
    padding: 12px 22px;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-opt-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}

.quiz-opt-btn.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
    font-weight: 600;
}

.quiz-start-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 35px auto 0;
    padding: 18px 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Quiz Active */
.quiz-active {
    background: white;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

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

.quiz-progress-text {
    font-size: 1.1rem;
    color: #6b7280;
}

.quiz-progress-text span {
    font-weight: 700;
    color: #1f2937;
}

.quiz-timer {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f59e0b;
    min-width: 60px;
    text-align: center;
}

.quiz-timer.warning {
    color: #dc2626;
    animation: pulse-timer 1s infinite;
}

@keyframes pulse-timer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.quiz-score {
    font-size: 1.1rem;
    color: #6b7280;
}

.quiz-score span {
    font-weight: 700;
    color: #16a34a;
}

.quiz-progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    border-radius: 8px;
    transition: width 0.3s ease;
}

.quiz-question-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    min-height: 150px;
}

.quiz-question-label {
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 15px;
}

.quiz-question-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #1f2937;
}

.quiz-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.quiz-answer {
    padding: 18px 22px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.05rem;
    text-align: left;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.quiz-answer:hover:not(.disabled) {
    border-color: #f59e0b;
    background: #fffbeb;
    transform: translateY(-2px);
}

.quiz-answer.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.quiz-answer.correct {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #16a34a;
}

.quiz-answer.incorrect {
    border-color: #dc2626;
    background: #fef2f2;
    color: #dc2626;
}

.quiz-answer.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.quiz-answer.show-correct {
    border-color: #16a34a;
    background: #f0fdf4;
}

/* Quiz Feedback */
.quiz-feedback {
    text-align: center;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.quiz-feedback.correct {
    background: #f0fdf4;
    border: 2px solid #16a34a;
}

.quiz-feedback.incorrect {
    background: #fef2f2;
    border: 2px solid #dc2626;
}

.feedback-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.feedback-text {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.quiz-feedback.correct .feedback-text {
    color: #16a34a;
}

.quiz-feedback.incorrect .feedback-text {
    color: #dc2626;
}

.feedback-correct {
    font-size: 1rem;
    color: #6b7280;
}

.quiz-next-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 16px 35px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

/* Quiz Results */
.quiz-results {
    background: white;
    border-radius: 20px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.results-header {
    margin-bottom: 30px;
}

.results-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.results-header h3 {
    font-size: 1.8rem;
    color: #1f2937;
}

.results-score-circle {
    width: 180px;
    height: 180px;
    margin: 0 auto 35px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid #f59e0b;
}

.score-percentage {
    font-size: 3rem;
    font-weight: 800;
    color: #d97706;
}

.score-fraction {
    font-size: 1.2rem;
    color: #92400e;
}

.results-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.result-stat {
    text-align: center;
}

.result-stat .stat-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 8px;
}

.result-stat .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
}

.result-stat .stat-label {
    font-size: 0.95rem;
    color: #6b7280;
}

.result-stat.correct .stat-value {
    color: #16a34a;
}

.result-stat.incorrect .stat-value {
    color: #dc2626;
}

.result-stat.time .stat-value {
    color: #f59e0b;
}

.results-message {
    font-size: 1.2rem;
    color: #374151;
    margin-bottom: 25px;
    padding: 15px;
    background: #f9fafb;
    border-radius: 10px;
}

.results-wrong-terms {
    text-align: left;
    background: #fef2f2;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.results-wrong-terms h4 {
    color: #dc2626;
    margin-bottom: 12px;
}

.results-wrong-terms ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-wrong-terms li {
    padding: 8px 0;
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
    font-size: 1rem;
}

.results-wrong-terms li:last-child {
    border-bottom: none;
}

.results-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.result-btn {
    padding: 16px 35px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.result-btn.primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.result-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.result-btn.secondary {
    background: white;
    color: #d97706;
    border: 2px solid #f59e0b;
}

.result-btn.secondary:hover {
    background: #fef3c7;
    transform: translateY(-2px);
}

/* ============================================
   LIST MODE STYLES
   ============================================ */

.list-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.list-search {
    flex: 1;
    max-width: 400px;
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.list-search:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.list-count {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
}

.terms-list {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    max-height: 600px;
    overflow-y: auto;
}

.term-item {
    display: flex;
    padding: 18px 22px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.term-item:hover {
    background: #fffbeb;
}

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

.term-number {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-right: 18px;
}

.term-content {
    flex: 1;
}

.term-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}

.term-def {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .flashcards-tabs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .flashcards-tab {
        justify-content: center;
    }
    
    .flashcard {
        height: 280px;
    }
    
    .flashcard-container {
        flex-direction: column;
    }
    
    .fc-nav {
        width: 45px;
        height: 45px;
    }
    
    .flashcards-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fc-action-btn {
        flex-direction: row;
        justify-content: center;
        padding: 15px 25px;
    }
    
    .fc-action-btn .action-icon {
        font-size: 1.5rem;
    }
    
    .quiz-answers {
        grid-template-columns: 1fr;
    }
    
    .flashcards-stats {
        gap: 25px;
    }
    
    .results-stats {
        gap: 30px;
    }
    
    .results-actions {
        flex-direction: column;
    }
    
    .result-btn {
        width: 100%;
    }
}
   AI USE CASES SECTION - REDESIGNED
   ============================================ */

.pmbok8-ai-usecases-section {
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
}

/* Legend */
.ai-usecases-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #4b5563;
}

.legend-item span:first-child {
    font-weight: 600;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.legend-color.augmentation {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.legend-color.assistance {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.legend-color.automation {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Use Cases Grid */
.ai-usecases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Use Case Card - Base */
.ai-usecase-card {
    background: white;
    border-radius: 16px;
    padding: 22px;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Unlocked Card */
.ai-usecase-card.unlocked {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.ai-usecase-card.unlocked:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.25);
}

/* Locked Card */
.ai-usecase-card.locked {
    cursor: pointer;
}

.ai-usecase-card.locked:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

.ai-usecase-card.locked:hover .usecase-lock-overlay {
    background: rgba(99, 102, 241, 0.12);
}

/* Lock Overlay */
.usecase-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 2;
    transition: all 0.3s ease;
    border-radius: 14px;
}

.lock-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.lock-text {
    font-size: 0.85rem;
    font-weight: 800;
    color: #6366f1;
    letter-spacing: 1px;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 20px;
}

/* Card Header */
.usecase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.usecase-domain {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.usecase-strategy {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.usecase-strategy.augmentation {
    background: #dbeafe;
    color: #1d4ed8;
}

.usecase-strategy.assistance {
    background: #fef3c7;
    color: #d97706;
}

.usecase-strategy.automation {
    background: #d1fae5;
    color: #059669;
}

.usecase-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}

.usecase-badge.free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.usecase-badge.pro {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
}

.pro-available-tag {
    display: inline-block;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 10px;
}

/* Card Content */
.usecase-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.usecase-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.3;
}

.usecase-desc {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 15px;
}

.usecase-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.usecase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Upgrade CTA */
.ai-usecases-upgrade {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 20px;
    padding: 30px 40px;
    color: white;
    flex-wrap: wrap;
}

.upgrade-icon {
    font-size: 3rem;
}

.upgrade-content {
    flex: 1;
    min-width: 250px;
}

.upgrade-content h4 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.upgrade-content p {
    font-size: 1rem;
    opacity: 0.9;
}

.upgrade-btn {
    padding: 16px 35px;
    background: white;
    color: #4f46e5 !important;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.upgrade-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    color: #4f46e5 !important;
}

/* ============================================
   RISK IDENTIFIER MODAL
   ============================================ */

.risk-identifier-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.risk-identifier-modal.active {
    opacity: 1;
    visibility: visible;
}

.risk-modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(30px);
    transition: all 0.3s ease;
}

.risk-identifier-modal.active .risk-modal-content {
    transform: scale(1) translateY(0);
}

.risk-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 1.8rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.risk-modal-close:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.risk-modal-header {
    text-align: center;
    padding: 40px 30px 25px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px 20px 0 0;
}

.risk-modal-icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

.risk-modal-header h3 {
    font-size: 1.6rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.risk-modal-header p {
    font-size: 1.05rem;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto;
}

/* Risk Input Section */
.risk-input-section {
    padding: 30px;
}

.risk-input-section label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.risk-input-section textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.05rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.3s ease;
    line-height: 1.6;
}

.risk-input-section textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.risk-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0 25px;
}

.risk-option label {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.risk-option select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.risk-option select:focus {
    outline: none;
    border-color: #10b981;
}

.risk-analyze-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 30px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.risk-analyze-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.risk-analyze-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading */
.risk-loading {
    text-align: center;
    padding: 60px 30px;
}

.risk-loading .loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #e5e7eb;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 25px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.risk-loading p {
    font-size: 1.15rem;
    color: #6b7280;
}

/* Risk Results */
.risk-results {
    padding: 30px;
}

.risk-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.risk-results-header h4 {
    font-size: 1.4rem;
    color: #1f2937;
}

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

.risk-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.risk-action-btn:hover {
    background: #e5e7eb;
}

/* Risk Summary */
.risk-summary {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 25px;
    background: #f9fafb;
    border-radius: 15px;
    margin-bottom: 25px;
}

.risk-stat {
    text-align: center;
}

.risk-stat .stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
}

.risk-stat .stat-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.risk-stat.high .stat-value { color: #dc2626; }
.risk-stat.high .stat-label { color: #dc2626; }
.risk-stat.medium .stat-value { color: #f59e0b; }
.risk-stat.medium .stat-label { color: #f59e0b; }
.risk-stat.low .stat-value { color: #10b981; }
.risk-stat.low .stat-label { color: #10b981; }

/* Risk List */
.risk-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

.risk-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.risk-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.risk-item.high { border-left-color: #dc2626; background: #fef2f2; }
.risk-item.medium { border-left-color: #f59e0b; background: #fffbeb; }
.risk-item.low { border-left-color: #10b981; background: #f0fdf4; }

.risk-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
}

.risk-item-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    flex: 1;
}

.risk-item-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.risk-item.high .risk-item-badge { background: #dc2626; color: white; }
.risk-item.medium .risk-item-badge { background: #f59e0b; color: white; }
.risk-item.low .risk-item-badge { background: #10b981; color: white; }

.risk-item-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #6b7280;
}

.risk-item-desc {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 12px;
}

.risk-item-strategy {
    font-size: 0.95rem;
    padding: 12px 15px;
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
}

.risk-item-strategy strong {
    color: #059669;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-usecases-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-usecases-legend {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .ai-usecases-upgrade {
        flex-direction: column;
        text-align: center;
    }
    
    .upgrade-btn {
        width: 100%;
    }
    
    .risk-options {
        grid-template-columns: 1fr;
    }
    
    .risk-summary {
        flex-direction: column;
        gap: 20px;
    }
    
    .risk-results-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .risk-results-actions {
        flex-direction: column;
    }
    
    .risk-action-btn {
        justify-content: center;
    }
}

/* Pulse highlight animation for upgrade section */
@keyframes pulse-highlight {
    0%, 100% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 8px 40px rgba(99, 102, 241, 0.6); }
}

.hidden {
    display: none !important;
}

/* ============================================
   AI RISK IDENTIFIER - PRO/FREE MODE STYLES
   ============================================ */

/* Mode badges inline */
.pro-badge-inline,
.free-badge-inline {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 8px;
}

.pro-badge-inline {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.free-badge-inline {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Analyze button Pro mode */
.risk-analyze-btn.pro-mode {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.risk-analyze-btn.pro-mode:hover:not(:disabled) {
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Results mode indicator */
.risk-mode-indicator {
    text-align: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.risk-mode-indicator.pro {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 2px solid #f59e0b;
}

.risk-mode-indicator.free {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 2px solid #10b981;
}

.risk-mode-indicator span {
    font-size: 1.3rem;
}

.risk-stats-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* Risk summary updates */
.risk-summary {
    flex-direction: column;
    gap: 15px;
}

/* Card Pro indicator */
.ai-usecase-card.unlocked .usecase-badge.free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Pro mode info in card */
.usecase-pro-info {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.usecase-pro-info.active {
    color: #d97706;
    font-weight: 600;
}

/* ============================================
   MAIN TAB NAVIGATION SYSTEM
   ============================================ */

.pmbok8-main-tabs {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pmbok8-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.pmbok8-tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 28px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.pmbok8-tab-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pmbok8-tab-btn.active {
    background: white;
    border-color: #1e3a5f;
    color: #1e3a5f;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.15);
}

.pmbok8-tab-btn .tab-icon {
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.pmbok8-tab-btn .tab-label {
    font-size: 1.05rem;
    font-weight: 700;
}

.pmbok8-tab-btn .tab-desc {
    font-size: 0.78rem;
    opacity: 0.7;
    margin-top: 2px;
}

.pmbok8-tab-btn.active .tab-desc {
    opacity: 0.8;
}

/* Section visibility based on active tab */
.pmbok8-section[data-tab] {
    display: none;
    animation: fadeInTab 0.4s ease;
}

.pmbok8-feature-container[data-tab] {
    display: none;
    animation: fadeInTab 0.4s ease;
}

.pmbok8-section[data-tab].tab-visible {
    display: block;
}

.pmbok8-feature-container[data-tab].tab-visible {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab content info banner */
.pmbok8-tab-info {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 30px;
    margin: 20px 0 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.pmbok8-tab-info-icon {
    font-size: 2.5rem;
}

.pmbok8-tab-info-content h3 {
    font-size: 1.2rem;
    color: #1e3a5f;
    margin-bottom: 5px;
}

.pmbok8-tab-info-content p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

/* Mobile responsive tabs */
@media (max-width: 768px) {
    .pmbok8-main-tabs {
        padding: 10px 15px;
        margin: 0 -15px;
    }
    
    .pmbok8-tabs-nav {
        gap: 8px;
    }
    
    .pmbok8-tab-btn {
        padding: 12px 15px;
        min-width: auto;
        flex: 1;
    }
    
    .pmbok8-tab-btn .tab-icon {
        font-size: 1.5rem;
        margin-bottom: 4px;
    }
    
    .pmbok8-tab-btn .tab-label {
        font-size: 0.9rem;
    }
    
    .pmbok8-tab-btn .tab-desc {
        display: none;
    }
}

@media (max-width: 480px) {
    .pmbok8-tab-btn .tab-label {
        font-size: 0.8rem;
    }
    
    .pmbok8-tab-btn .tab-icon {
        font-size: 1.3rem;
    }
}

/* ============================================
   PROJECT SIMULATOR SCENARIOS GRID
   ============================================ */

.simulator-scenarios-legend {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 25px;
}

.simulator-scenarios-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #6b7280;
}

.simulator-scenarios-legend .legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.simulator-scenarios-legend .legend-dot.beginner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.simulator-scenarios-legend .legend-dot.intermediate {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.simulator-scenarios-legend .legend-dot.advanced {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.simulator-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.scenario-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    position: relative;
    transition: all 0.3s ease;
    text-align: center;
}

.scenario-card.unlocked {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.scenario-card.unlocked:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
}

.scenario-card.locked {
    opacity: 0.85;
    cursor: pointer;
}

.scenario-card.locked:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
}

.scenario-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

.scenario-badge.free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.scenario-badge.account {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
}

.scenario-badge.pro {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.scenario-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.scenario-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.scenario-difficulty {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.scenario-difficulty.beginner {
    background: #d1fae5;
    color: #059669;
}

.scenario-difficulty.intermediate {
    background: #fef3c7;
    color: #d97706;
}

.scenario-difficulty.advanced {
    background: #fee2e2;
    color: #dc2626;
}

.scenario-card h4 {
    font-size: 1.05rem;
    color: #1f2937;
    margin-bottom: 6px;
}

.scenario-card p {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.4;
}

.scenario-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.scenario-meta span {
    font-size: 0.78rem;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 8px;
}

.scenario-start-btn {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scenario-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Completed scenario card */
.scenario-card.completed {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.scenario-card.completed .scenario-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* View Results button for completed scenarios */
.scenario-view-results-btn {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scenario-view-results-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Completed notice in results screen */
.pmbok8-sim-completed-notice {
    margin-top: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    color: #92400e;
    font-size: 0.95rem;
    text-align: center;
}

.pmbok8-sim-completed-notice p {
    margin: 0;
}

.scenarios-upgrade-cta {
    text-align: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    color: #92400e;
    font-size: 1rem;
}

.scenarios-upgrade-cta strong {
    color: #d97706;
}

/* Back button for simulator */
.pmbok8-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    margin-top: 10px;
}

.pmbok8-btn-secondary:hover {
    background: #e5e7eb;
}

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

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

/* ============================================
   TEMPLATE GENERATOR - LOCKED TEMPLATES
   ============================================ */

.pmbok8-template-card.unlocked {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    position: relative;
}

.pmbok8-template-card.unlocked::before {
    content: "🎁 FREE";
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.pmbok8-template-card.locked {
    opacity: 0.8;
    position: relative;
    cursor: pointer;
}

.pmbok8-template-card.locked::before {
    content: "🔒 PRO";
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
}

.pmbok8-template-card.locked .template-actions {
    pointer-events: none;
    opacity: 0.5;
}

.pmbok8-template-card.locked:hover {
    border-color: #f59e0b;
}

/* Download All Locked */
.pmbok8-templates-bulk.locked {
    position: relative;
    opacity: 0.85;
}

.pmbok8-templates-bulk .bulk-lock-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 700;
}

.pmbok8-templates-bulk.locked .btn-download-all {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Templates Upgrade Notice */
.templates-upgrade-notice {
    text-align: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    color: #92400e;
    font-size: 1rem;
    margin-top: 20px;
}

.templates-upgrade-notice strong {
    color: #d97706;
}

/* ============================================
   PMP TRAINING CTA
   ============================================ */

.pmbok8-training-cta {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.training-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.training-cta-icon {
    font-size: 3.5rem;
}

.training-cta-text h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #1f2937;
}

.training-cta-text p {
    font-size: 1.05rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.training-cta-text .training-cta-highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 12px 20px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 1rem;
    color: #166534;
    border: 1px solid #86efac;
}

.training-cta-text strong {
    color: #059669;
}

.training-cta-btn {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.training-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
    color: white !important;
}

@media (max-width: 768px) {
    .pmbok8-training-cta {
        padding: 30px 20px;
    }
    
    .training-cta-text h3 {
        font-size: 1.3rem;
    }
    
    .training-cta-text p {
        font-size: 1rem;
    }
    
    .training-cta-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   STYLED SUBTITLES
   ============================================ */

.pmbok8-section-subtitle.styled-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px 20px;
    border-radius: 10px;
    border-left: 4px solid #6366f1;
    margin-top: 12px;
    display: inline-block;
}

/* ============================================
   PMP LOCKED FEATURES (Learn Tab)
   ============================================ */

.pmp-locked-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.pmp-locked-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    position: relative;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.pmp-locked-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.pmp-locked-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
}

.pmp-locked-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.pmp-locked-card h4 {
    font-size: 1.15rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.pmp-locked-card p {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 15px;
    line-height: 1.5;
}

.pmp-locked-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pmp-locked-features li {
    font-size: 0.9rem;
    color: #4b5563;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.pmp-locked-features li:last-child {
    border-bottom: none;
}

.pmp-locked-cta {
    text-align: center;
    padding: 18px 25px;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-radius: 12px;
    color: #5b21b6;
    font-size: 1rem;
    margin-top: 25px;
}

.pmp-locked-cta strong {
    color: #7c3aed;
}

/* ============================================
   TAILORING USAGE NOTICE
   ============================================ */

.tailoring-usage-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #f59e0b;
}

.tailoring-usage-notice .notice-icon {
    font-size: 1.3rem;
}

.tailoring-usage-notice .notice-text {
    font-size: 0.95rem;
    color: #92400e;
}

.tailoring-usage-notice strong {
    color: #d97706;
}

/* ============================================
   BOTTOM CTA - CLEAN STYLE
   ============================================ */

.pmbok8-training-cta {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.training-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.training-cta-icon {
    font-size: 3.5rem;
}

.training-cta-text h3 {
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.training-cta-text p {
    font-size: 1.05rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.training-cta-text .training-cta-highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 12px 20px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 1rem;
    color: #166534;
    border: 1px solid #86efac;
}

.training-cta-text strong {
    color: #059669;
}

.training-cta-btn {
    display: inline-block;
    padding: 16px 36px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.training-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.3);
    color: white !important;
}

@media (max-width: 768px) {
    .pmbok8-training-cta {
        padding: 30px 20px;
    }
    
    .training-cta-text h3 {
        font-size: 1.25rem;
    }
    
    .training-cta-text p {
        font-size: 0.95rem;
    }
    
    .training-cta-btn {
        width: 100%;
        text-align: center;
    }
    
    .pmp-locked-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TOOLS TAB - FEATURE CONTAINERS
   ============================================ */

.pmbok8-feature-container {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.pmbok8-feature-container:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.pmbok8-feature-container:last-child {
    margin-bottom: 0;
}

/* Remove section margins when inside container */
.pmbok8-feature-container .pmbok8-section {
    margin: 0;
    padding: 0;
}

.pmbok8-feature-container .pmbok8-section-header {
    margin-bottom: 25px;
}

/* AI Risk Identifier - AI Mode Styles */
.risk-mode-indicator.ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
}

.risk-mode-indicator.basic {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
}

.risk-analyze-btn.ai-mode {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
}

.risk-analyze-btn.ai-mode:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
}

/* Risk Identifier - Disabled/Limit Reached */
.risk-analyze-btn.disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.risk-analyze-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

.risk-analyze-btn.pro-mode {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* ==================== EXPLORE TAB SECTION CONTAINERS ==================== */
.pmbok8-section[data-tab="explore"] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pmbok8-section[data-tab="explore"]:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Section header spacing adjustment */
.pmbok8-section[data-tab="explore"] .pmbok8-section-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

/* Styled subtitle for Process Maps */
.pmbok8-section-subtitle.styled-subtitle {
    font-size: 1.05rem;
    color: var(--pmbok-text-medium);
    margin-top: 8px;
}

/* Different accent colors for each section on hover */
.pmbok8-section.pmbok8-key-ideas-section:hover {
    border-color: #fbbf24;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
}

.pmbok8-section.pmbok8-principles-section:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

.pmbok8-section.pmbok8-domains-section:hover {
    border-color: #10b981;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}

.pmbok8-section.pmbok8-focus-areas-section:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}

.pmbok8-section.pmbok8-comparison-section:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.pmbok8-section.pmbok8-process-maps-section:hover {
    border-color: #059669;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15);
}

.pmbok8-section.pmbok8-flow-section:hover {
    border-color: #7c3aed;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pmbok8-section[data-tab="explore"] {
        padding: 20px 15px;
        border-radius: 15px;
        margin-bottom: 20px;
    }
    
    .pmbok8-section[data-tab="explore"]:hover {
        transform: none;
    }
}
.pmbok8-process-maps-section {
    margin-top: 60px;
}

.pmbok8-process-maps-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Disclaimer */
.process-maps-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 30px;
}

.process-maps-disclaimer .disclaimer-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.process-maps-disclaimer p {
    margin: 0;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Approach Tabs */
.process-maps-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

.process-map-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 35px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
}

.process-map-tab:hover {
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.process-map-tab.active {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}

.process-map-tab .tab-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.process-map-tab .tab-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pmbok-text-dark);
}

.process-map-tab .tab-subtitle {
    font-size: 0.85rem;
    color: var(--pmbok-text-medium);
    margin-top: 4px;
}

/* Map Content */
.process-map-wrapper {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 30px;
}

.process-map-content {
    display: none;
    padding: 30px;
}

.process-map-content.active {
    display: block;
    animation: fadeInMap 0.4s ease;
}

@keyframes fadeInMap {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Map Context */
.map-context {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.context-badge {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.context-badge.predictive {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

.context-badge.hybrid {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}

.context-badge.agile {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.map-context p {
    color: var(--pmbok-text-medium);
    margin: 0;
    font-size: 0.95rem;
}

/* SVG Container */
.process-map-svg-container {
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

.process-map-svg {
    width: 100%;
    min-width: 900px;
    height: auto;
    display: block;
}

/* SVG Text Styles */
.process-map-svg .phase-label {
    font-size: 14px;
    font-weight: 600;
    fill: #1e293b;
}

.process-map-svg .phase-label-hybrid {
    font-size: 13px;
    font-weight: 600;
    fill: #1e293b;
}

.process-map-svg .process-title {
    font-size: 12px;
    font-weight: 600;
    fill: #1e293b;
}

.process-map-svg .process-title-sm {
    font-size: 11px;
    font-weight: 600;
    fill: #1e293b;
}

.process-map-svg .process-subtitle {
    font-size: 10px;
    fill: #64748b;
}

.process-map-svg .process-mini {
    font-size: 10px;
    fill: #475569;
}

.process-map-svg .gate-label {
    font-size: 10px;
    font-weight: 600;
    fill: #1e40af;
}

.process-map-svg .timeline-label {
    font-size: 12px;
    fill: #64748b;
}

.process-map-svg .sprint-title {
    font-size: 14px;
    font-weight: 600;
    fill: #047857;
}

.process-map-svg .continuous-label {
    font-size: 11px;
    fill: #64748b;
}

.process-map-svg .delivery-label {
    font-size: 11px;
    font-weight: 600;
    fill: #047857;
}

.process-map-svg .delivery-text {
    font-size: 10px;
    font-weight: 500;
    fill: #047857;
}

.process-map-svg .legend-text {
    font-size: 11px;
    fill: #475569;
}

.process-map-svg .arrow-label {
    font-size: 10px;
    fill: #64748b;
    font-style: italic;
}

.process-map-svg .feedback-label {
    font-size: 11px;
    fill: #7c3aed;
    font-style: italic;
}

.process-map-svg .agile-subtitle {
    font-size: 11px;
    fill: #64748b;
}

.process-map-svg .increment-label {
    font-size: 11px;
    font-weight: 600;
}

.process-map-svg .continuous-title {
    font-size: 12px;
    font-weight: 600;
    fill: #475569;
}

/* Process nodes hover */
.process-map-svg .process-node,
.process-map-svg .process-node-small {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.process-map-svg .process-node:hover rect,
.process-map-svg .process-node-small:hover rect {
    filter: brightness(0.95);
    stroke-width: 3;
}

.process-map-svg .process-node:hover,
.process-map-svg .process-node-small:hover {
    transform: scale(1.02);
}

/* Key Points */
.map-key-points {
    background: #f8fafc;
    border-radius: 12px;
    padding: 25px;
    margin-top: 25px;
}

.map-key-points h4 {
    margin: 0 0 20px 0;
    color: var(--pmbok-text-dark);
    font-size: 1.1rem;
}

.key-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.key-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.key-point .point-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.key-point .point-text {
    font-size: 0.9rem;
    color: var(--pmbok-text-dark);
    line-height: 1.5;
}

/* Comparison Table */
.process-maps-comparison {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.process-maps-comparison h4 {
    margin: 0 0 20px 0;
    text-align: center;
    color: var(--pmbok-text-dark);
    font-size: 1.2rem;
}

.comparison-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.comp-header,
.comp-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
}

.comp-header {
    background: #f1f5f9;
}

.comp-cell {
    padding: 12px 15px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: var(--pmbok-text-dark);
}

.comp-cell:last-child {
    border-right: none;
}

.comp-row:last-child .comp-cell {
    border-bottom: none;
}

.comp-cell.header {
    font-weight: 600;
    text-align: center;
}

.comp-cell.header.predictive {
    background: #dbeafe;
    color: #1e40af;
}

.comp-cell.header.hybrid {
    background: #d1fae5;
    color: #047857;
}

.comp-cell.header.agile {
    background: #fef3c7;
    color: #92400e;
}

.comp-cell.label {
    font-weight: 600;
    background: #f8fafc;
    color: #475569;
}

/* Responsive */
@media (max-width: 1024px) {
    .process-maps-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .process-map-tab {
        width: 100%;
        max-width: 300px;
    }
    
    .key-points-grid {
        grid-template-columns: 1fr;
    }
    
    .comp-header,
    .comp-row {
        grid-template-columns: 1fr;
    }
    
    .comp-cell {
        border-right: none;
        text-align: center;
    }
    
    .comp-cell.label {
        background: #e2e8f0;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .process-map-content {
        padding: 15px;
    }
    
    .process-maps-disclaimer {
        flex-direction: column;
        text-align: center;
    }
    
    .map-key-points {
        padding: 15px;
    }
    
    .process-maps-comparison {
        padding: 15px;
    }
}

/* ==================== GLOBAL FONT SCALING - EXTRA LARGE ==================== */
/* Significantly increased font sizes for better readability on large screens */

/* Base font size increase - LARGE */
.pmbok8-explorer-wrapper {
    font-size: 22px;
}

/* Main titles and headers */
.pmbok8-section-title {
    font-size: 2.6rem !important;
}

.pmbok8-section-subtitle {
    font-size: 1.45rem !important;
}

.pmbok8-section-subtitle.styled-subtitle {
    font-size: 1.45rem !important;
}

/* Card titles and content */
.pmbok8-card-title {
    font-size: 1.55rem !important;
}

.pmbok8-card-subtitle {
    font-size: 1.25rem !important;
}

.pmbok8-card-desc {
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
}

/* ==================== KEY IDEAS SECTION - LARGE FONTS ==================== */
.pmbok8-idea-card {
    padding: 22px 25px !important;
    min-height: auto !important;
}

.pmbok8-idea-number {
    font-size: 1.8rem !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
}

.pmbok8-idea-content {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.pmbok8-idea-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    display: block !important;
}

.pmbok8-idea-text {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    display: block !important;
    color: #64748b !important;
}

.pmbok8-ideas-grid {
    gap: 18px !important;
}

/* ==================== TAB NAVIGATION - MUCH LARGER ==================== */
.pmbok8-tab-btn {
    font-size: 1.4rem !important;
    padding: 18px 36px !important;
}

.pmbok8-tab-btn .tab-icon {
    font-size: 2rem !important;
}

.pmbok8-tab-btn .tab-label {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.pmbok8-tab-btn .tab-desc {
    font-size: 1.15rem !important;
    margin-top: 4px !important;
}

/* ==================== PRINCIPLES & DOMAINS CARD DESCRIPTIONS ==================== */
.pmbok8-card .pmbok8-card-desc,
.pmbok8-card-desc {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
}

/* ==================== FOCUS AREAS CARD DESCRIPTIONS ==================== */
.pmbok8-focus-area-card .pmbok8-card-desc,
.pmbok8-focus-area-node .node-desc {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
}

/* ==================== PMBOK 7 VS PMBOK 8 COMPARISON - LARGER FONTS ==================== */
.pmbok8-comparison-section .pmbok8-comp-tab {
    font-size: 1.15rem !important;
    padding: 12px 20px !important;
}

.pmbok8-comp-card {
    padding: 25px !important;
}

.pmbok8-comp-card h4 {
    font-size: 1.5rem !important;
    margin-bottom: 18px !important;
}

.pmbok8-comp-badge {
    font-size: 1rem !important;
    padding: 6px 14px !important;
}

.pmbok8-comp-col .col-header {
    font-size: 1.25rem !important;
    padding: 12px 15px !important;
    margin-bottom: 12px !important;
}

.pmbok8-comp-col ul {
    padding-left: 20px !important;
}

.pmbok8-comp-col li {
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    padding: 4px 0 !important;
}

.pmbok8-comp-columns {
    gap: 25px !important;
}

/* Summary bar at bottom of comparison */
.pmbok8-comparison-summary {
    padding: 20px !important;
    margin-top: 25px !important;
}

.pmbok8-comparison-summary .summary-item {
    font-size: 1.1rem !important;
}

.pmbok8-comparison-summary .summary-count {
    font-size: 1.5rem !important;
}

.pmbok8-comparison-summary .summary-label {
    font-size: 1.05rem !important;
}

/* ==================== AI USE CASES CARDS - LARGE FONTS ==================== */
.ai-usecase-card {
    padding: 25px !important;
    min-height: 280px !important;
}

.usecase-header {
    margin-bottom: 15px !important;
}

.usecase-domain {
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
}

.usecase-strategy {
    font-size: 1rem !important;
    padding: 6px 12px !important;
}

.usecase-badge {
    font-size: 1rem !important;
    padding: 6px 12px !important;
}

.usecase-icon {
    font-size: 2.8rem !important;
    margin-bottom: 12px !important;
}

.usecase-title {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.usecase-desc {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

.usecase-btn {
    font-size: 1.15rem !important;
    padding: 12px 24px !important;
}

.usecase-lock-overlay .lock-icon {
    font-size: 2.2rem !important;
}

.usecase-lock-overlay .lock-text {
    font-size: 1.1rem !important;
}

/* AI Use Cases grid */
.ai-usecases-grid {
    gap: 25px !important;
}

/* AI Use Cases legend */
.ai-usecases-legend {
    font-size: 1.1rem !important;
    padding: 18px 25px !important;
    margin-bottom: 25px !important;
}

.ai-usecases-legend span {
    font-size: 1.1rem !important;
}

/* ==================== PROJECT SIMULATOR SCENARIO CARDS - LARGE FONTS ==================== */
.scenario-card {
    padding: 25px !important;
    min-height: 200px !important;
}

.scenario-card .scenario-icon {
    font-size: 3rem !important;
    margin-bottom: 15px !important;
}

.scenario-card h4 {
    font-size: 1.45rem !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.scenario-card p {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

.scenario-card .scenario-meta {
    font-size: 1.05rem !important;
}

.scenario-card .scenario-badge {
    font-size: 1rem !important;
    padding: 6px 14px !important;
}

.scenario-card .scenario-level {
    font-size: 1rem !important;
    padding: 5px 12px !important;
}

/* Scenario grid */
.pmbok8-sim-scenarios .scenarios-grid,
.scenarios-grid {
    gap: 25px !important;
}

/* Scenario lock overlay */
.scenario-card .scenario-lock-overlay {
    font-size: 1.3rem !important;
}

.scenario-card .scenario-lock-overlay .lock-icon {
    font-size: 2rem !important;
}

/* Panel content */
.pmbok8-panel-title {
    font-size: 2.4rem !important;
}

.pmbok8-panel-subtitle {
    font-size: 1.4rem !important;
}

.pmbok8-panel-description {
    font-size: 1.3rem !important;
    line-height: 1.75 !important;
}

.pmbok8-info-label {
    font-size: 1.15rem !important;
}

.pmbok8-info-value {
    font-size: 1.25rem !important;
}

/* List items */
.pmbok8-list-item {
    font-size: 1.25rem !important;
    padding: 14px 18px !important;
}

.pmbok8-related-item {
    font-size: 1.2rem !important;
    padding: 12px 16px !important;
}

/* Tab navigation */
.pmbok8-tab-btn {
    font-size: 1.35rem !important;
    padding: 16px 32px !important;
}

/* Comparison section */
.comparison-header {
    font-size: 1.5rem !important;
}

.comparison-item {
    font-size: 1.2rem !important;
    padding: 16px !important;
}

.comparison-item-title {
    font-size: 1.35rem !important;
}

/* Flow Visualizer */
.pmbok8-flow-sidebar h4 {
    font-size: 1.45rem !important;
}

.pmbok8-flow-search input {
    font-size: 1.2rem !important;
    padding: 14px 16px !important;
}

.pmbok8-deliverable-item {
    font-size: 1.2rem !important;
    padding: 14px 16px !important;
}

.pmbok8-flow-title {
    font-size: 1.55rem !important;
}

.pmbok8-flow-process {
    font-size: 1.25rem !important;
    padding: 16px 20px !important;
}

/* ==================== QUIZ SECTION ==================== */
.pmbok8-quiz-question {
    font-size: 1.45rem !important;
    line-height: 1.7 !important;
}

.pmbok8-quiz-option {
    font-size: 1.25rem !important;
    padding: 18px 24px !important;
}

.pmbok8-quiz-option label {
    font-size: 1.25rem !important;
}

.pmbok8-quiz-btn {
    font-size: 1.3rem !important;
    padding: 16px 32px !important;
}

.pmbok8-feedback-text {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
}

.pmbok8-quiz-progress {
    font-size: 1.2rem !important;
}

.pmbok8-quiz-score {
    font-size: 1.3rem !important;
}

/* ==================== PROJECT SIMULATOR SECTION ==================== */
.pmbok8-scenario-title,
.pmbok8-simulator-title {
    font-size: 2.2rem !important;
}

.pmbok8-scenario-desc,
.pmbok8-simulator-desc {
    font-size: 1.35rem !important;
    line-height: 1.7 !important;
}

.pmbok8-sim-question,
.simulator-question {
    font-size: 1.4rem !important;
    line-height: 1.7 !important;
}

.pmbok8-sim-option,
.simulator-option {
    font-size: 1.25rem !important;
    padding: 18px 24px !important;
}

.pmbok8-sim-option label,
.simulator-option label {
    font-size: 1.25rem !important;
}

.sim-feedback-text,
#sim-feedback-text {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
}

.sim-context-title {
    font-size: 1.5rem !important;
}

.sim-context-text {
    font-size: 1.2rem !important;
}

.sim-progress-text {
    font-size: 1.15rem !important;
}

.sim-score-display {
    font-size: 1.4rem !important;
}

/* Simulator scenario cards */
.scenario-card-title {
    font-size: 1.5rem !important;
}

.scenario-card-desc {
    font-size: 1.15rem !important;
}

.scenario-card-meta {
    font-size: 1.1rem !important;
}

/* ==================== AI USE CASES SECTION ==================== */
.ai-usecase-title,
.pmbok8-ai-usecase-title {
    font-size: 1.55rem !important;
}

.ai-usecase-desc,
.pmbok8-ai-usecase-desc {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
}

.ai-usecase-example,
.pmbok8-ai-usecase-example {
    font-size: 1.2rem !important;
    line-height: 1.65 !important;
}

.ai-usecase-category {
    font-size: 1.1rem !important;
}

.ai-usecase-card {
    padding: 25px !important;
}

.ai-prompt-text {
    font-size: 1.15rem !important;
}

.ai-response-text {
    font-size: 1.15rem !important;
}

/* ==================== FLASHCARDS SECTION ==================== */
.flashcard-question {
    font-size: 1.5rem !important;
    line-height: 1.7 !important;
}

.flashcard-answer {
    font-size: 1.3rem !important;
    line-height: 1.7 !important;
}

.flashcard-category {
    font-size: 1.15rem !important;
}

.flashcard-counter {
    font-size: 1.2rem !important;
}

.flashcard-btn {
    font-size: 1.2rem !important;
    padding: 14px 28px !important;
}

/* ==================== TEMPLATES SECTION ==================== */
.template-card-title {
    font-size: 1.5rem !important;
}

.template-card-desc {
    font-size: 1.2rem !important;
}

.template-btn {
    font-size: 1.2rem !important;
    padding: 12px 24px !important;
}

.template-category {
    font-size: 1.1rem !important;
}

/* ==================== TAILORING SECTION ==================== */
.tailoring-factor-title {
    font-size: 1.45rem !important;
}

.tailoring-factor-desc {
    font-size: 1.2rem !important;
}

.tailoring-option {
    font-size: 1.2rem !important;
    padding: 14px 18px !important;
}

.tailoring-result-title {
    font-size: 1.5rem !important;
}

.tailoring-result-text {
    font-size: 1.2rem !important;
}

/* ==================== PROCESS MAPS SECTION ==================== */
.process-map-tab .tab-label {
    font-size: 1.45rem !important;
}

.process-map-tab .tab-subtitle {
    font-size: 1.15rem !important;
}

.process-maps-disclaimer p {
    font-size: 1.25rem !important;
}

.context-badge {
    font-size: 1.4rem !important;
    padding: 12px 28px !important;
}

.map-context p {
    font-size: 1.2rem !important;
}

.map-key-points h4 {
    font-size: 1.5rem !important;
}

.key-point .point-text {
    font-size: 1.2rem !important;
}

.key-point .point-icon {
    font-size: 1.5rem !important;
}

.process-maps-comparison h4 {
    font-size: 1.55rem !important;
}

.comp-cell {
    font-size: 1.2rem !important;
    padding: 16px 18px !important;
}

.comp-cell.label {
    font-size: 1.15rem !important;
}

/* SVG text scaling for Process Maps - LARGER */
.process-map-svg .phase-label {
    font-size: 18px !important;
}

.process-map-svg .phase-label-hybrid {
    font-size: 17px !important;
}

.process-map-svg .process-title {
    font-size: 15px !important;
}

.process-map-svg .process-title-sm {
    font-size: 14px !important;
}

.process-map-svg .process-subtitle {
    font-size: 13px !important;
}

.process-map-svg .process-mini {
    font-size: 13px !important;
}

.process-map-svg .gate-label {
    font-size: 13px !important;
}

.process-map-svg .timeline-label {
    font-size: 15px !important;
}

.process-map-svg .sprint-title {
    font-size: 18px !important;
}

.process-map-svg .continuous-label {
    font-size: 14px !important;
}

.process-map-svg .continuous-title {
    font-size: 16px !important;
}

.process-map-svg .delivery-label {
    font-size: 14px !important;
}

.process-map-svg .delivery-text {
    font-size: 13px !important;
}

.process-map-svg .legend-text {
    font-size: 14px !important;
}

.process-map-svg .increment-label {
    font-size: 14px !important;
}

.process-map-svg .feedback-label {
    font-size: 14px !important;
}

/* ==================== BUTTONS GENERAL ==================== */
.pmbok8-btn,
button.pmbok8-btn {
    font-size: 1.25rem !important;
    padding: 14px 28px !important;
}

.pmbok8-btn-primary {
    font-size: 1.3rem !important;
    padding: 16px 32px !important;
}

/* ==================== BADGES AND TAGS ==================== */
.pmbok8-badge,
.pmbok8-tag {
    font-size: 1.1rem !important;
    padding: 8px 14px !important;
}

/* ==================== INPUT FIELDS ==================== */
input[type="text"],
input[type="search"],
select,
textarea {
    font-size: 1.25rem !important;
    padding: 14px 16px !important;
}

/* ==================== TOOLTIPS ==================== */
.pmbok8-tooltip {
    font-size: 1.15rem !important;
}

/* ==================== MODAL CONTENT ==================== */
.pmbok8-modal-title {
    font-size: 2.2rem !important;
}

.pmbok8-modal-content {
    font-size: 1.25rem !important;
}

/* ==================== FOCUS AREA NODES ==================== */
.pmbok8-focus-area-node {
    font-size: 1.2rem !important;
    padding: 16px 20px !important;
}

/* ==================== CARDS SIZING ==================== */
.pmbok8-card {
    min-height: 200px;
    padding: 25px !important;
}

.pmbok8-card[data-type="principle"],
.pmbok8-card[data-type="domain"] {
    min-height: 220px;
}

/* ==================== SECTION CONTAINERS ==================== */
.pmbok8-section[data-tab="explore"],
.pmbok8-section[data-tab="tools"] {
    padding: 40px;
}

/* ==================== KEY IDEAS ==================== */
.pmbok8-key-idea {
    padding: 30px !important;
}

/* ==================== LINE HEIGHT GLOBAL ==================== */
.pmbok8-explorer-wrapper p,
.pmbok8-explorer-wrapper li,
.pmbok8-explorer-wrapper span {
    line-height: 1.7;
}

/* ==================== COUNT BADGES ==================== */
.pmbok8-section-title .count {
    font-size: 1.6rem !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
}

/* ==================== RISK ANALYZER ==================== */
.risk-question-text {
    font-size: 1.35rem !important;
}

.risk-option-label {
    font-size: 1.2rem !important;
}

.risk-result-title {
    font-size: 1.6rem !important;
}

.risk-result-text {
    font-size: 1.25rem !important;
}

/* ==================== LOCKED/PRO SECTIONS ==================== */
.pmbok8-locked-title {
    font-size: 1.9rem !important;
}

.pmbok8-locked-desc {
    font-size: 1.35rem !important;
}

.pmbok8-pro-badge {
    font-size: 1.1rem !important;
}

/* ==================== INSTRUMENTE TAB SPECIFIC ==================== */
/* Simulator container */
.pmbok8-simulator-container {
    padding: 30px !important;
}

.pmbok8-simulator-header h3 {
    font-size: 1.8rem !important;
}

.pmbok8-simulator-header p {
    font-size: 1.25rem !important;
}

/* Scenario selection */
.scenario-select-title {
    font-size: 1.5rem !important;
}

.scenario-option {
    font-size: 1.2rem !important;
    padding: 18px 22px !important;
}

.scenario-option-title {
    font-size: 1.35rem !important;
}

.scenario-option-desc {
    font-size: 1.15rem !important;
}

/* Quiz container in Instrumente */
.pmbok8-quiz-container {
    padding: 30px !important;
}

.pmbok8-quiz-header h3 {
    font-size: 1.8rem !important;
}

.pmbok8-quiz-header p {
    font-size: 1.25rem !important;
}

/* Process name in feedback */
.feedback-process-name,
#sim-feedback-process-name {
    font-size: 1.3rem !important;
}

/* Points display */
.feedback-points,
#sim-feedback-points {
    font-size: 1.4rem !important;
}

/* Navigation buttons */
.sim-nav-btn,
.quiz-nav-btn {
    font-size: 1.2rem !important;
    padding: 14px 28px !important;
}

/* Stats display */
.sim-stats,
.quiz-stats {
    font-size: 1.15rem !important;
}

.stat-value {
    font-size: 1.5rem !important;
}

.stat-label {
    font-size: 1.1rem !important;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 1400px) {
    .pmbok8-explorer-wrapper {
        font-size: 20px;
    }
    
    .pmbok8-section-title {
        font-size: 2.3rem !important;
    }
    
    .pmbok8-card {
        min-height: 180px;
    }
}

@media (max-width: 1200px) {
    .pmbok8-explorer-wrapper {
        font-size: 19px;
    }
    
    .pmbok8-section-title {
        font-size: 2.1rem !important;
    }
    
    .pmbok8-card {
        min-height: 170px;
    }
    
    .pmbok8-tab-btn {
        font-size: 1.2rem !important;
        padding: 14px 24px !important;
    }
}

@media (max-width: 992px) {
    .pmbok8-explorer-wrapper {
        font-size: 18px;
    }
    
    .pmbok8-section-title {
        font-size: 1.9rem !important;
    }
    
    .pmbok8-tab-btn {
        font-size: 1.1rem !important;
        padding: 12px 20px !important;
    }
    
    .pmbok8-section[data-tab="explore"],
    .pmbok8-section[data-tab="tools"] {
        padding: 25px;
    }
    
    /* Key Ideas responsive */
    .pmbok8-idea-title {
        font-size: 1.25rem !important;
    }
    
    .pmbok8-idea-text {
        font-size: 1.1rem !important;
    }
    
    /* Tab navigation responsive */
    .pmbok8-tab-btn .tab-label {
        font-size: 1.3rem !important;
    }
    
    .pmbok8-tab-btn .tab-desc {
        font-size: 1rem !important;
    }
    
    /* AI Use Cases responsive */
    .usecase-title {
        font-size: 1.3rem !important;
    }
    
    .usecase-desc {
        font-size: 1.1rem !important;
    }
    
    /* Scenario cards responsive */
    .scenario-card h4 {
        font-size: 1.35rem !important;
    }
    
    .scenario-card p {
        font-size: 1.1rem !important;
    }
    
    /* Comparison section responsive */
    .pmbok8-comp-card h4 {
        font-size: 1.35rem !important;
    }
    
    .pmbok8-comp-col li {
        font-size: 1.05rem !important;
    }
    
    .pmbok8-comp-col .col-header {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 768px) {
    .pmbok8-explorer-wrapper {
        font-size: 17px;
    }
    
    .pmbok8-section-title {
        font-size: 1.7rem !important;
    }
    
    .pmbok8-section[data-tab="explore"],
    .pmbok8-section[data-tab="tools"] {
        padding: 20px 15px;
    }
    
    .pmbok8-quiz-question,
    .pmbok8-sim-question {
        font-size: 1.2rem !important;
    }
    
    .pmbok8-quiz-option,
    .pmbok8-sim-option {
        font-size: 1.1rem !important;
        padding: 14px 18px !important;
    }
    
    .pmbok8-card {
        min-height: 150px;
        padding: 20px !important;
    }
    
    /* Key Ideas responsive mobile */
    .pmbok8-idea-card {
        padding: 18px 20px !important;
    }
    
    .pmbok8-idea-number {
        font-size: 1.5rem !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
    
    .pmbok8-idea-title {
        font-size: 1.15rem !important;
    }
    
    .pmbok8-idea-text {
        font-size: 1.05rem !important;
    }
    
    /* Tab navigation responsive mobile */
    .pmbok8-tab-btn {
        padding: 14px 20px !important;
    }
    
    .pmbok8-tab-btn .tab-icon {
        font-size: 1.6rem !important;
    }
    
    .pmbok8-tab-btn .tab-label {
        font-size: 1.2rem !important;
    }
    
    .pmbok8-tab-btn .tab-desc {
        font-size: 0.95rem !important;
    }
    
    /* AI Use Cases responsive mobile */
    .ai-usecase-card {
        padding: 20px !important;
        min-height: 220px !important;
    }
    
    .usecase-icon {
        font-size: 2.2rem !important;
    }
    
    .usecase-title {
        font-size: 1.2rem !important;
    }
    
    .usecase-desc {
        font-size: 1.05rem !important;
    }
    
    /* Scenario cards responsive mobile */
    .scenario-card {
        padding: 20px !important;
        min-height: 180px !important;
    }
    
    .scenario-card .scenario-icon {
        font-size: 2.5rem !important;
    }
    
    .scenario-card h4 {
        font-size: 1.25rem !important;
    }
    
    .scenario-card p {
        font-size: 1.05rem !important;
    }
    
    /* Comparison section responsive mobile */
    .pmbok8-comp-card {
        padding: 18px !important;
    }
    
    .pmbok8-comp-card h4 {
        font-size: 1.25rem !important;
    }
    
    .pmbok8-comp-col li {
        font-size: 1rem !important;
    }
    
    .pmbok8-comp-col .col-header {
        font-size: 1.1rem !important;
    }
}

/* ==================== AI USE CASES DEMO DISCLAIMER ==================== */
.ai-usecases-disclaimer {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 30px;
}

.ai-usecases-disclaimer .disclaimer-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.ai-usecases-disclaimer .disclaimer-content {
    flex: 1;
}

.ai-usecases-disclaimer .disclaimer-content p {
    color: #78350f;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.ai-usecases-disclaimer .disclaimer-content p:last-child {
    margin-bottom: 0;
}

.ai-usecases-disclaimer .disclaimer-content strong {
    color: #92400e;
}

/* ==================== RISK IDENTIFIER MODAL ENHANCED ==================== */
.risk-modal-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-top: 5px;
}

.risk-demo-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 12px;
}

/* Architecture Section */
.risk-architecture-section {
    margin-bottom: 25px;
}

.architecture-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 14px 20px;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.05rem;
}

.architecture-toggle:hover {
    background: linear-gradient(135deg, #334155, #475569);
    border-color: #6366f1;
}

.architecture-toggle .toggle-icon {
    font-size: 1.3rem;
}

.architecture-toggle .toggle-arrow {
    transition: transform 0.3s ease;
}

.architecture-toggle.expanded .toggle-arrow {
    transform: rotate(180deg);
}

.architecture-content {
    margin-top: 15px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.architecture-diagram {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 25px;
}

.arch-flow {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.arch-column {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.arch-column.arch-input {
    border-color: rgba(14, 165, 233, 0.3);
}

.arch-column.arch-process {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

.arch-column.arch-output {
    border-color: rgba(16, 185, 129, 0.3);
}

.arch-header {
    font-weight: 700;
    font-size: 1rem;
    color: #f1f5f9;
    margin-bottom: 5px;
    text-align: center;
}

.arch-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 15px;
}

.arch-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.arch-item span {
    font-size: 1rem;
}

.arch-integration {
    margin-top: 12px;
    text-align: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.arch-integration small {
    font-size: 0.8rem;
    color: #64748b;
}

.arch-triggers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    justify-content: center;
}

.arch-triggers .trigger {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.arch-triggers .trigger.critical { background: rgba(220, 38, 38, 0.3); color: #fca5a5; }
.arch-triggers .trigger.high { background: rgba(249, 115, 22, 0.3); color: #fdba74; }
.arch-triggers .trigger.medium { background: rgba(234, 179, 8, 0.3); color: #fde047; }
.arch-triggers .trigger.low { background: rgba(34, 197, 94, 0.3); color: #86efac; }

.arch-arrow {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #6366f1;
    padding: 0 5px;
}

.arch-demo-note {
    margin-top: 20px;
    padding: 15px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px dashed #6366f1;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #c7d2fe;
    text-align: center;
}

/* Input Demo Note */
.input-demo-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
    border: 1px solid #3b82f6;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #1e40af;
}

.input-demo-note .demo-icon {
    font-size: 1.3rem;
}

/* Loading Steps */
.loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    text-align: left;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.loading-step {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #64748b;
    transition: all 0.3s ease;
}

.loading-step.active {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.loading-step.complete {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

/* Output Header */
.risk-output-header {
    margin-bottom: 20px;
}

.output-demo-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #10b981;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    color: #065f46;
}

.output-demo-note .demo-icon {
    font-size: 1.3rem;
}

/* Output Tabs */
.risk-output-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.risk-output-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
}

.risk-output-tab:hover {
    background: #e2e8f0;
    color: #475569;
}

.risk-output-tab.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
}

.risk-output-tab span {
    font-size: 1.1rem;
}

/* Output Content */
.risk-output-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.risk-output-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Register Destination */
.register-destination,
.dashboard-destination {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
}

.dest-icon {
    font-size: 1.3rem;
}

.dest-text {
    flex: 1;
    font-size: 0.95rem;
    color: #475569;
}

.dest-status {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Dashboard Preview */
.dashboard-preview h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #1e293b;
}

.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.dash-widget {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

.widget-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-chart {
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 0;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(to top, #6366f1, #a78bfa);
    border-radius: 4px 4px 0 0;
    min-height: 20px;
    position: relative;
}

.chart-bar .bar-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #64748b;
}

.widget-heatmap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 3px;
    height: 120px;
}

.heatmap-cell {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.heatmap-cell.severity-1 { background: #22c55e; }
.heatmap-cell.severity-2 { background: #84cc16; }
.heatmap-cell.severity-3 { background: #eab308; }
.heatmap-cell.severity-4 { background: #f97316; }
.heatmap-cell.severity-5 { background: #ef4444; }

.widget-distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dist-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dist-label {
    width: 80px;
    font-size: 0.85rem;
    color: #475569;
}

.dist-track {
    flex: 1;
    height: 20px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.dist-fill {
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.widget-top-risks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-risk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    border-left: 4px solid;
}

.top-risk-item.critical { border-left-color: #ef4444; }
.top-risk-item.high { border-left-color: #f97316; }
.top-risk-item.medium { border-left-color: #eab308; }

.top-risk-rank {
    width: 24px;
    height: 24px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}

.top-risk-name {
    flex: 1;
    font-size: 0.9rem;
    color: #1e293b;
}

.top-risk-score {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

/* Auto Actions List */
.actions-subtitle,
.notifications-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
}

.auto-actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s ease;
}

.action-item:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.action-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.action-desc {
    font-size: 0.9rem;
    color: #64748b;
}

.action-system {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e2e8f0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #475569;
}

.action-status {
    background: #d1fae5;
    color: #065f46;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Notifications List */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 4px solid;
}

.notification-item.critical {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.notification-item.high {
    border-left-color: #f97316;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}

.notification-item.medium {
    border-left-color: #eab308;
    background: linear-gradient(135deg, #fefce8, #fef9c3);
}

.notification-item.low {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.notification-icon {
    font-size: 1.8rem;
}

.notification-content {
    flex: 1;
}

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

.notification-severity {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}

.notification-item.critical .notification-severity {
    background: #ef4444;
    color: white;
}

.notification-item.high .notification-severity {
    background: #f97316;
    color: white;
}

.notification-item.medium .notification-severity {
    background: #eab308;
    color: #78350f;
}

.notification-item.low .notification-severity {
    background: #22c55e;
    color: white;
}

.notification-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
}

.notification-actions {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

.notification-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.channel-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #475569;
}

/* New Analysis Button */
.risk-new-analysis {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.risk-action-btn.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 14px 28px;
    font-size: 1.1rem;
}

.risk-action-btn.primary:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* Responsive for Architecture */
@media (max-width: 900px) {
    .arch-flow {
        flex-direction: column;
    }
    
    .arch-arrow {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }
    
    .risk-output-tabs {
        justify-content: center;
    }
    
    .risk-output-tab {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .ai-usecases-disclaimer {
        flex-direction: column;
        text-align: center;
    }
    
    .action-item {
        flex-direction: column;
        text-align: center;
    }
    
    .notification-item {
        flex-direction: column;
    }
}

/* Additional Risk Item Styles */
.risk-item-id {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 4px;
}

.risk-item-owner {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.9rem;
    color: #64748b;
}

.risk-item-owner em {
    color: #94a3b8;
    font-style: normal;
}

.risk-timestamp {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #64748b;
}

/* ==================== RISK MODAL - LARGER SIZE & FONTS ==================== */

/* Modal size - much larger */
.risk-modal-content {
    max-width: 1300px !important;
    width: 95% !important;
    max-height: 95vh !important;
    padding: 0 !important;
}

/* Header - larger fonts */
.risk-modal-header {
    padding: 50px 40px 35px !important;
}

.risk-modal-icon {
    font-size: 5rem !important;
    margin-bottom: 20px !important;
}

.risk-modal-header h3 {
    font-size: 2.2rem !important;
    margin-bottom: 15px !important;
}

.risk-modal-header p,
.risk-modal-subtitle {
    font-size: 1.3rem !important;
    max-width: 700px !important;
}

.risk-demo-badge {
    font-size: 1.1rem !important;
    padding: 10px 24px !important;
    margin-top: 18px !important;
}

/* Close button - larger */
.risk-modal-close {
    width: 55px !important;
    height: 55px !important;
    font-size: 2.2rem !important;
    top: 20px !important;
    right: 20px !important;
}

/* Architecture section - much larger fonts */
.architecture-toggle {
    font-size: 1.3rem !important;
    padding: 18px 28px !important;
    margin: 0 40px 30px !important;
}

.architecture-toggle .toggle-icon {
    font-size: 1.6rem !important;
}

.architecture-content {
    margin: 0 40px 30px !important;
}

.architecture-diagram {
    padding: 35px !important;
}

.arch-header {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
}

.arch-subtitle {
    font-size: 1.1rem !important;
    margin-bottom: 20px !important;
}

.arch-item {
    font-size: 1.15rem !important;
    padding: 12px 16px !important;
}

.arch-item span {
    font-size: 1.3rem !important;
}

.arch-integration small {
    font-size: 1rem !important;
}

.arch-triggers .trigger {
    font-size: 0.95rem !important;
    padding: 6px 14px !important;
}

.arch-arrow {
    font-size: 3rem !important;
    padding: 0 15px !important;
}

.arch-demo-note {
    font-size: 1.15rem !important;
    padding: 20px !important;
    margin-top: 25px !important;
}

/* Input section - larger fonts */
.risk-input-section {
    padding: 40px 50px !important;
}

.input-demo-note {
    font-size: 1.2rem !important;
    padding: 16px 24px !important;
    margin-bottom: 25px !important;
}

.input-demo-note .demo-icon {
    font-size: 1.6rem !important;
}

.risk-input-section label {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
}

.risk-input-section textarea {
    font-size: 1.25rem !important;
    padding: 20px !important;
    line-height: 1.7 !important;
    min-height: 180px !important;
}

.risk-options {
    gap: 25px !important;
    margin: 30px 0 35px !important;
}

.risk-option label {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
}

.risk-option select {
    font-size: 1.2rem !important;
    padding: 16px 20px !important;
}

.risk-analyze-btn {
    font-size: 1.5rem !important;
    padding: 22px 40px !important;
    gap: 15px !important;
}

.risk-analyze-btn .btn-icon {
    font-size: 1.8rem !important;
}

/* Loading section - larger */
.risk-loading {
    padding: 80px 50px !important;
}

.risk-loading .loading-spinner {
    width: 80px !important;
    height: 80px !important;
    border-width: 6px !important;
    margin-bottom: 35px !important;
}

.risk-loading p {
    font-size: 1.5rem !important;
}

.loading-steps {
    max-width: 400px !important;
    gap: 12px !important;
    margin-top: 30px !important;
}

.loading-step {
    font-size: 1.15rem !important;
    padding: 12px 20px !important;
}

/* Results section - larger fonts */
.risk-results {
    padding: 40px 50px !important;
}

.risk-output-header {
    margin-bottom: 25px !important;
}

.output-demo-note {
    font-size: 1.2rem !important;
    padding: 16px 24px !important;
}

.output-demo-note .demo-icon {
    font-size: 1.6rem !important;
}

/* Output tabs - larger */
.risk-output-tabs {
    gap: 12px !important;
    margin-bottom: 30px !important;
}

.risk-output-tab {
    font-size: 1.2rem !important;
    padding: 16px 28px !important;
}

.risk-output-tab span {
    font-size: 1.4rem !important;
}

/* Results header - larger */
.risk-results-header h4 {
    font-size: 1.8rem !important;
}

.risk-action-btn {
    font-size: 1.15rem !important;
    padding: 14px 22px !important;
}

/* Destination boxes - larger */
.register-destination,
.dashboard-destination {
    font-size: 1.15rem !important;
    padding: 16px 24px !important;
    margin-bottom: 25px !important;
}

.dest-icon {
    font-size: 1.6rem !important;
}

.dest-text {
    font-size: 1.15rem !important;
}

.dest-status {
    font-size: 1.05rem !important;
    padding: 6px 16px !important;
}

/* Risk summary - larger */
.risk-summary {
    padding: 35px !important;
    gap: 50px !important;
    margin-bottom: 30px !important;
    flex-direction: column !important;
    align-items: center !important;
}

.risk-mode-indicator {
    font-size: 1.2rem !important;
    padding: 12px 24px !important;
    margin-bottom: 20px !important;
}

.risk-stats-row {
    display: flex !important;
    gap: 50px !important;
}

.risk-stat .stat-value {
    font-size: 3.5rem !important;
}

.risk-stat .stat-label {
    font-size: 1.2rem !important;
}

.risk-timestamp {
    font-size: 1.1rem !important;
    gap: 35px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
}

/* Risk items - larger */
.risk-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.risk-item {
    padding: 28px !important;
    border-radius: 16px !important;
}

.risk-item-header {
    margin-bottom: 15px !important;
    gap: 15px !important;
}

.risk-item-id {
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
}

.risk-item-title {
    font-size: 1.4rem !important;
}

.risk-item-badge {
    font-size: 1.05rem !important;
    padding: 6px 16px !important;
}

.risk-item-meta {
    font-size: 1.1rem !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.risk-item-desc {
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

.risk-item-strategy {
    font-size: 1.15rem !important;
    padding: 18px !important;
    line-height: 1.6 !important;
}

.risk-item-owner {
    font-size: 1.1rem !important;
    gap: 25px !important;
    margin-top: 18px !important;
    padding-top: 18px !important;
}

/* Dashboard widgets - larger */
.dashboard-preview h4 {
    font-size: 1.5rem !important;
}

.dash-widget {
    padding: 25px !important;
}

.widget-title {
    font-size: 1.1rem !important;
    margin-bottom: 18px !important;
}

.widget-chart {
    height: 150px !important;
}

.chart-bar .bar-label {
    font-size: 0.9rem !important;
}

.widget-heatmap {
    height: 150px !important;
}

.heatmap-cell {
    font-size: 0.9rem !important;
}

.dist-label {
    font-size: 1.05rem !important;
}

.dist-track {
    height: 28px !important;
}

.dist-fill {
    font-size: 1rem !important;
}

.top-risk-item {
    padding: 12px 16px !important;
}

.top-risk-rank {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
}

.top-risk-name {
    font-size: 1.1rem !important;
}

.top-risk-score {
    font-size: 1.05rem !important;
}

/* Auto actions - larger */
.actions-subtitle,
.notifications-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 25px !important;
}

.action-item {
    padding: 22px 28px !important;
    gap: 20px !important;
}

.action-icon {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.8rem !important;
}

.action-title {
    font-size: 1.3rem !important;
}

.action-desc {
    font-size: 1.1rem !important;
}

.action-system {
    font-size: 1.05rem !important;
    padding: 8px 16px !important;
}

.action-status {
    font-size: 1.05rem !important;
    padding: 8px 18px !important;
}

/* Notifications - larger */
.notification-item {
    padding: 22px 28px !important;
    gap: 20px !important;
}

.notification-icon {
    font-size: 2.5rem !important;
}

.notification-severity {
    font-size: 1.05rem !important;
    padding: 5px 14px !important;
}

.notification-title {
    font-size: 1.3rem !important;
}

.notification-actions {
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
}

.notification-channels {
    gap: 12px !important;
    margin-top: 15px !important;
}

.channel-badge {
    font-size: 1rem !important;
    padding: 6px 14px !important;
}

/* New analysis button - larger */
.risk-new-analysis {
    margin-top: 35px !important;
    padding-top: 30px !important;
}

.risk-action-btn.primary {
    font-size: 1.4rem !important;
    padding: 18px 36px !important;
}

/* Responsive for large modal */
@media (max-width: 1400px) {
    .risk-modal-content {
        max-width: 95% !important;
    }
}

@media (max-width: 1000px) {
    .risk-input-section,
    .risk-results {
        padding: 30px 25px !important;
    }
    
    .architecture-toggle,
    .architecture-content {
        margin-left: 25px !important;
        margin-right: 25px !important;
    }
    
    .arch-flow {
        flex-direction: column !important;
    }
    
    .arch-arrow {
        transform: rotate(90deg) !important;
        padding: 15px 0 !important;
    }
}

@media (max-width: 768px) {
    .risk-modal-header h3 {
        font-size: 1.8rem !important;
    }
    
    .risk-options {
        grid-template-columns: 1fr !important;
    }
    
    .risk-stats-row {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .dashboard-widgets {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== DEMO VS ENTERPRISE COMPARISON ==================== */
.demo-vs-enterprise {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 35px;
    padding: 0 10px;
}

.comparison-box {
    flex: 1;
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
}

.comparison-box:hover {
    transform: translateY(-3px);
}

.demo-box {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 2px solid #cbd5e1;
}

.enterprise-box {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
}

.box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.box-icon {
    font-size: 2rem;
}

.box-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

.enterprise-box .box-title {
    color: #065f46;
}

.box-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.box-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.5;
}

.enterprise-box .box-features li {
    color: #047857;
}

.feature-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.comparison-arrow {
    display: flex;
    align-items: center;
    font-size: 3rem;
    color: #10b981;
    font-weight: 700;
    padding: 0 10px;
}

/* ==================== ARCHITECTURE ENTERPRISE NOTE ==================== */
.arch-enterprise-note {
    margin-top: 20px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    border: 2px solid #10b981;
    border-radius: 14px;
}

.enterprise-note-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    color: #065f46;
    margin-bottom: 20px;
}

.enterprise-note-header .note-icon {
    font-size: 1.5rem;
}

.enterprise-triggers {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trigger-option {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255, 255, 255, 0.6);
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid #10b981;
}

.trigger-option .trigger-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.trigger-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trigger-content strong {
    font-size: 1.15rem;
    color: #065f46;
}

.trigger-content span {
    font-size: 1.05rem;
    color: #047857;
}

/* Responsive */
@media (max-width: 900px) {
    .demo-vs-enterprise {
        flex-direction: column;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
        justify-content: center;
        padding: 10px 0;
    }
    
    .enterprise-triggers {
        gap: 12px;
    }
    
    .trigger-option {
        padding: 14px 16px;
    }
}

/* ==================== INTERACTIVE MAP SECTION ==================== */

.pmbok8-interactive-map-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 25px 20px;
    border-radius: 24px;
    margin-bottom: 30px;
}

/* Toggle Controls */
.map-toggle-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding: 12px 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-group.influences {
    padding-left: 20px;
    border-left: 2px solid #e2e8f0;
}

.group-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    margin-right: 5px;
}

.map-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-toggle:hover {
    background: #e2e8f0;
}

.map-toggle.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
}

.map-toggle.influence.active[data-layer="pmo"] {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.map-toggle.influence.active[data-layer="ai"] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.map-toggle.influence.active[data-layer="procurement"] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.toggle-icon {
    font-size: 1.1rem;
}

/* Map Container */
.pmbok8-map-container {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Principles Arc */
.map-principles-arc {
    text-align: center;
    padding: 10px 15px 6px 15px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-radius: 12px;
    margin-bottom: 10px;
    border: 2px solid #c7d2fe;
}

.principles-label {
    font-size: 1rem;
    font-weight: 700;
    color: #4f46e5;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.principles-nodes {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.principle-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: white;
    border-radius: 10px;
    border: 2px solid #a5b4fc;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 85px;
}

.principle-node:hover,
.principle-node.active {
    transform: translateY(-4px);
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.principle-node .node-icon {
    font-size: 1.5rem;
}

.principle-node .node-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4f46e5;
}

.principles-connection-label {
    font-size: 0.85rem;
    color: #6366f1;
    font-weight: 500;
    margin-top: 4px;
    margin-bottom: 0;
}

.principles-connections {
    margin-top: 0;
    display: block;
}

/* Process Grid */
.map-process-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.grid-header,
.grid-row {
    display: grid;
    grid-template-columns: 140px repeat(5, 1fr);
    gap: 2px;
}

.grid-cell {
    background: white;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    transition: all 0.3s ease;
}

/* Corner Cell */
.grid-cell.corner {
    background: #f8fafc;
    position: relative;
}

.corner-pd {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.corner-separator {
    position: absolute;
    width: 140%;
    height: 1px;
    background: linear-gradient(135deg, transparent 0%, #cbd5e1 50%, transparent 100%);
    transform: rotate(-25deg);
    left: -20%;
}

.corner-focus {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

/* Focus Headers */
.grid-cell.focus-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    flex-direction: column;
    gap: 2px;
}

.grid-cell.focus-header.highlighted {
    background: linear-gradient(135deg, #fde047 0%, #facc15 100%) !important;
    box-shadow: inset 0 0 0 3px #eab308;
}

.focus-icon {
    font-size: 1.2rem;
}

.focus-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
}

/* Domain Headers */
.grid-cell.domain-header {
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    padding-left: 10px;
}

.grid-cell.domain-header.highlighted {
    box-shadow: inset 0 0 0 3px #6366f1;
}

.domain-icon {
    font-size: 1.3rem;
}

.domain-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.domain-count {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* Domain-specific colors */
.grid-row[data-domain="governance"] .domain-header { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.grid-row[data-domain="scope"] .domain-header { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); }
.grid-row[data-domain="schedule"] .domain-header { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); }
.grid-row[data-domain="finance"] .domain-header { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.grid-row[data-domain="stakeholders"] .domain-header { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); }
.grid-row[data-domain="resources"] .domain-header { background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); }
.grid-row[data-domain="risk"] .domain-header { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); }

.grid-row.highlighted {
    background: rgba(99, 102, 241, 0.15);
}

/* Process Cells */
.grid-cell.process-cell {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    justify-content: center;
    align-content: center;
}

.grid-cell.process-cell.empty {
    background: #f8fafc;
}

.grid-cell.process-cell.highlighted {
    background: rgba(99, 102, 241, 0.1);
}

/* Process Nodes */
.process-node {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.process-node:hover {
    transform: scale(1.25);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
    z-index: 10;
}

.process-node.highlighted {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
}

/* Locked process nodes (requires account for practice view) */
.process-node.practice-locked {
    position: relative;
    opacity: 0.85;
}

.process-node.practice-locked::after {
    content: '🔒';
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 0.7rem;
    background: #3b82f6;
    padding: 2px 5px;
    border-radius: 6px;
    border: 2px solid white;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.process-node.practice-locked:hover::after {
    content: '🔐';
}

/* Tooltip for locked nodes */
.process-node.practice-locked[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Process node colors by domain */
.grid-row[data-domain="governance"] .process-node { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.grid-row[data-domain="scope"] .process-node { background: linear-gradient(135deg, #ec4899, #db2777); }
.grid-row[data-domain="schedule"] .process-node { background: linear-gradient(135deg, #10b981, #059669); }
.grid-row[data-domain="finance"] .process-node { background: linear-gradient(135deg, #f59e0b, #d97706); }
.grid-row[data-domain="stakeholders"] .process-node { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.grid-row[data-domain="resources"] .process-node { background: linear-gradient(135deg, #ef4444, #dc2626); }
.grid-row[data-domain="risk"] .process-node { background: linear-gradient(135deg, #f97316, #ea580c); }

/* Influence badges on process nodes */
.process-node.has-pmo::after,
.process-node.has-ai::after,
.process-node.has-procurement::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: -4px;
    right: -4px;
    border: 2px solid white;
}

.process-node.has-pmo::after { background: #0ea5e9; }
.process-node.has-ai::after { background: #8b5cf6; }
.process-node.has-procurement::after { background: #10b981; }

/* Tailoring badge on nodes */
.process-node .tailoring-indicator {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #f59e0b;
    border-radius: 50%;
    border: 2px solid white;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.map-container.show-tailoring .process-node .tailoring-indicator {
    opacity: 1;
}

/* Tailoring Layer - Border effect only (no text badge) */
.map-tailoring-layer {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: transparent;
    border: 6px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: 28px;
    z-index: 100;
}

.map-tailoring-layer.active {
    opacity: 1;
    border-color: #6366f1;
    box-shadow: 0 0 60px rgba(99, 102, 241, 0.7), 0 0 100px rgba(99, 102, 241, 0.4), inset 0 0 60px rgba(99, 102, 241, 0.15);
}

/* Tailoring badge - hidden since we only use border effect */
.tailoring-badge {
    display: none;
}

.tailoring-message {
    display: none;
}

/* Annexes Footer */
.map-annexes {
    margin-top: 25px;
    padding: 25px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 16px;
    border: 2px dashed #94a3b8;
}

.annexes-label {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 20px;
}

.annexes-items {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.annex-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 30px;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    cursor: default;
    min-width: 180px;
}

/* Informative cards - no hover effects */
.annex-item[data-annex="pmo"] { border-color: #0ea5e9; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.annex-item[data-annex="ai"] { border-color: #8b5cf6; background: linear-gradient(135deg, #faf5ff, #f3e8ff); }
.annex-item[data-annex="procurement"] { border-color: #10b981; background: linear-gradient(135deg, #f0fdf4, #dcfce7); }

.annex-icon {
    font-size: 2.5rem;
}

.annex-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
}

.annex-desc {
    font-size: 0.9rem;
    color: #64748b;
    text-align: center;
}

/* Process Tooltip */
.process-tooltip {
    position: fixed;
    z-index: 100000;
    background: white;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    border: 2px solid #6366f1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
    min-width: 280px;
    max-width: 350px;
}

.process-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

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

.tooltip-id {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
}

.tooltip-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.tooltip-meta {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 12px;
}

.tooltip-separator {
    margin: 0 10px;
}

.tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tooltip-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

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

.tooltip-badge.pmo {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
}

.tooltip-badge.ai {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #7c3aed;
}

.tooltip-badge.procurement {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
}

.tooltip-badge.hidden {
    display: none;
}

.tooltip-cta {
    font-size: 0.9rem;
    color: #6366f1;
    font-weight: 600;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

/* ==================== HOW TO READ THE MAP CARDS ==================== */

.pmbok8-map-guide-section {
    margin-bottom: 40px;
}

.map-guide-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.guide-card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.guide-card:hover {
    border-color: #6366f1;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
}

.guide-card.wide {
    grid-column: span 3;
}

.guide-card-icon {
    font-size: 2.8rem;
    margin-bottom: 18px;
}

.guide-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.guide-card-text {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

.guide-card-visual {
    padding: 22px;
    background: #f8fafc;
    border-radius: 12px;
}

/* Mini Diagrams */
.mini-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mini-diagram.principles-diagram .mini-principle {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.mini-diagram.principles-diagram .mini-arrows {
    display: flex;
    gap: 8px;
    font-size: 1.3rem;
    color: #6366f1;
}

.mini-diagram.principles-diagram .mini-domains {
    display: flex;
    gap: 10px;
}

.mini-diagram.principles-diagram .mini-domains span {
    width: 35px;
    height: 35px;
    background: #e0e7ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4f46e5;
}

/* Grid diagram */
.mini-diagram.grid-diagram .mini-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mini-diagram.grid-diagram .mini-row {
    display: flex;
    gap: 5px;
}

.mini-diagram.grid-diagram .mini-row span {
    width: 35px;
    height: 35px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.mini-diagram.grid-diagram .mini-row span.header {
    background: #dbeafe;
    color: #1d4ed8;
}

.mini-diagram.grid-diagram .mini-row span.highlight {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 1rem;
}

.mini-diagram.grid-diagram .mini-col-labels {
    display: flex;
    gap: 5px;
}

.mini-diagram.grid-diagram .mini-col-labels span {
    width: 35px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #64748b;
}

.mini-diagram.grid-diagram .mini-label {
    font-size: 1rem;
    color: #6366f1;
    font-weight: 600;
    margin-top: 8px;
}

/* Tailoring diagram */
.mini-diagram.tailoring-diagram .mini-itto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mini-diagram.tailoring-diagram .mini-itto span {
    padding: 10px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
}

.mini-diagram.tailoring-diagram .mini-itto em {
    color: #6366f1;
    font-weight: 700;
    font-style: normal;
}

.mini-diagram.tailoring-diagram .mini-badge {
    background: #d1fae5;
    color: #065f46;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 5px;
}

/* Influences diagram */
.mini-diagram.influences-diagram {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}

.influence-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.influence-item .inf-icon {
    font-size: 2.2rem;
}

.influence-item .inf-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.influence-item .inf-desc {
    font-size: 0.95rem;
    color: #64748b;
    text-align: center;
}

/* ==================== EXPLORE SHORTCUTS ==================== */

.pmbok8-explore-shortcuts-section {
    margin-bottom: 40px;
}

.explore-shortcuts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.explore-shortcut {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 30px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.3s ease;
}

.explore-shortcut:hover {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
}

.shortcut-icon {
    font-size: 1.7rem;
}

.shortcut-count {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1rem;
}

.explore-shortcut.influences-shortcut {
    flex-direction: column;
    padding: 22px 35px;
}

.shortcut-badges {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.inf-badge {
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #475569;
}

/* ==================== REFERENCE HEADER ==================== */

.pmbok8-reference-header-section {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* ==================== RESPONSIVE FOR MAP ==================== */

@media (max-width: 1200px) {
    .map-guide-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .guide-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 1000px) {
    .grid-header,
    .grid-row {
        grid-template-columns: 140px repeat(5, 1fr);
    }
    
    .process-node {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .map-guide-cards {
        grid-template-columns: 1fr;
    }
    
    .guide-card.wide {
        grid-column: span 1;
    }
    
    .mini-diagram.influences-diagram {
        flex-direction: column;
        gap: 20px;
    }
    
    .principles-nodes {
        gap: 10px;
    }
    
    .principle-node {
        padding: 12px 16px;
        min-width: 85px;
    }
    
    .principle-node .node-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .map-toggle-controls {
        flex-direction: column;
        gap: 15px;
    }
    
    .toggle-group.influences {
        padding-left: 0;
        border-left: none;
        padding-top: 15px;
        border-top: 2px solid #e2e8f0;
        width: 100%;
        justify-content: center;
    }
    
    .grid-header,
    .grid-row {
        grid-template-columns: 100px repeat(5, 1fr);
    }
    
    .domain-name,
    .focus-name {
        font-size: 0.8rem;
    }
    
    .domain-icon,
    .focus-icon {
        font-size: 1.2rem;
    }
    
    .process-node {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .grid-cell.process-cell {
        gap: 5px;
        padding: 6px;
    }
    
    .explore-shortcuts-grid {
        flex-direction: column;
    }
    
    .explore-shortcut {
        width: 100%;
        justify-content: center;
    }
    
    .annexes-items {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .annex-item {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 600px) {
    .pmbok8-interactive-map-section {
        padding: 25px 15px;
    }
    
    .pmbok8-map-container {
        padding: 15px;
    }
    
    .map-principles-arc {
        padding: 15px;
    }
    
    .principles-nodes {
        gap: 8px;
    }
    
    .principle-node {
        padding: 10px 12px;
        min-width: 70px;
    }
    
    .principle-node .node-icon {
        font-size: 1.4rem;
    }
    
    .principle-node .node-label {
        font-size: 0.7rem;
    }
    
    .grid-header,
    .grid-row {
        grid-template-columns: 80px repeat(5, 1fr);
    }
    
    .domain-name {
        display: none;
    }
    
    .domain-count {
        display: none;
    }
    
    .focus-name {
        font-size: 0.65rem;
    }
    
    .process-node {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* ==================== PROCESS DETAIL MODAL ==================== */

.process-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200000;
    display: none;
    align-items: center;
    justify-content: center;
}

.process-detail-modal.active {
    display: flex;
}

.process-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.process-modal-content {
    position: relative;
    background: white;
    border-radius: 24px;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.process-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 2rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-modal-close:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg);
}

/* Modal Header */
.process-modal-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
}

.process-modal-id {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.process-modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.3;
}

.process-modal-meta {
    font-size: 1.15rem;
    color: #64748b;
    margin-bottom: 18px;
}

.process-modal-meta .meta-icon {
    margin-right: 5px;
}

.meta-separator {
    margin: 0 15px;
    color: #cbd5e1;
}

.process-modal-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.modal-badge {
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
}

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

.modal-badge.pmo {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
}

.modal-badge.ai {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #7c3aed;
}

.modal-badge.procurement {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
}

.modal-badge.hidden {
    display: none;
}

/* Mini Map */
.process-modal-minimap {
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
}

.minimap-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 18px;
}

.minimap-grid {
    display: grid;
    grid-template-columns: 100px repeat(5, 1fr);
    gap: 3px;
    font-size: 0.8rem;
}

.minimap-cell {
    padding: 8px 5px;
    text-align: center;
    border-radius: 6px;
    background: white;
    color: #64748b;
}

.minimap-cell.header {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

.minimap-cell.domain-header {
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
}

.minimap-cell.current-domain {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
}

.minimap-cell.current-focus {
    background: linear-gradient(135deg, #fde047, #facc15) !important;
}

.minimap-cell.current-process {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
    font-weight: 700;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* ITTO Sections */
.process-modal-itto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.itto-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 22px;
}

.itto-section.inputs {
    border-top: 4px solid #10b981;
}

.itto-section.tools {
    border-top: 4px solid #f59e0b;
}

.itto-section.outputs {
    border-top: 4px solid #6366f1;
}

.itto-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

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

.itto-list li {
    padding: 8px 0;
    font-size: 1rem;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.itto-list li:last-child {
    border-bottom: none;
}

.itto-list li::before {
    content: '•';
    color: #6366f1;
    font-weight: bold;
    flex-shrink: 0;
}

.itto-etc {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 2px dashed #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.etc-badge {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 700;
}

.etc-note {
    font-size: 0.9rem;
    color: #64748b;
    font-style: italic;
}

/* Tailoring Section */
.process-modal-tailoring {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #facc15;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
}

.tailoring-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #854d0e;
    margin-bottom: 18px;
}

.tailoring-content p {
    font-size: 1.05rem;
    color: #713f12;
    margin-bottom: 15px;
}

.tailoring-factors {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.tailoring-factors li {
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 1.05rem;
    color: #713f12;
}

.tailoring-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: white;
    padding: 15px 20px;
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
}

.tailoring-note .note-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tailoring-note .note-text {
    font-size: 1.05rem;
    color: #713f12;
    line-height: 1.5;
}

/* Influences Section */
.process-modal-influences {
    margin-bottom: 30px;
}

.influences-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.influences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.influence-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 25px;
    border-radius: 16px;
    text-align: center;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.influence-card.pmo {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-color: #7dd3fc;
}

.influence-card.ai {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border-color: #c4b5fd;
}

.influence-card.procurement {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #86efac;
}

.influence-icon {
    font-size: 2.5rem;
}

.influence-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

.influence-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.4;
}

/* Related Processes */
.process-modal-related {
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px;
}

.related-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.related-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.related-label {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    display: block;
}

.related-processes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.related-process-tag {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.95rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}

.related-process-tag:hover {
    border-color: #6366f1;
    background: #eef2ff;
    color: #4f46e5;
}

/* Process in Practice CTA */
.process-modal-practice {
    margin-top: 25px;
}

.process-modal-practice.hidden {
    display: none;
}

.practice-cta {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 16px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.practice-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.practice-cta-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    background: rgba(255,255,255,0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.practice-cta-content {
    flex: 1;
}

.practice-cta-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
}

.practice-cta-content p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}

.practice-cta-btn {
    background: white;
    color: #6366f1;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.practice-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.practice-cta-btn .btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.practice-cta-btn:hover .btn-arrow {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .practice-cta {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
    
    .practice-cta-content h4 {
        font-size: 1.1rem;
    }
    
    .practice-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Locked Practice CTA (requires account) */
.practice-cta.requires-account {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.practice-cta.requires-account .practice-cta-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.practice-cta.requires-account .practice-cta-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.practice-cta-lock-badge {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: white;
    font-weight: 600;
}

/* Modal Responsive */
@media (max-width: 900px) {
    .process-modal-content {
        padding: 30px 20px;
        max-height: 95vh;
    }
    
    .process-modal-itto {
        grid-template-columns: 1fr;
    }
    
    .influences-grid {
        grid-template-columns: 1fr;
    }
    
    .related-content {
        grid-template-columns: 1fr;
    }
    
    .minimap-grid {
        display: none;
    }
}

@media (max-width: 600px) {
    .process-modal-content {
        padding: 25px 15px;
        border-radius: 16px;
    }
    
    .process-modal-title {
        font-size: 1.5rem;
    }
    
    .process-modal-close {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        top: 15px;
        right: 15px;
    }
}

/* ==================== COMPACT KEY IDEAS ==================== */
.pmbok8-key-ideas-section.compact {
    padding: 30px 20px;
    margin-bottom: 30px;
}

.pmbok8-key-ideas-section.compact .pmbok8-section-header {
    margin-bottom: 20px;
}

.pmbok8-ideas-grid.compact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.pmbok8-ideas-grid.compact .pmbok8-idea-card {
    padding: 12px 15px;
    min-height: auto;
}

.pmbok8-ideas-grid.compact .pmbok8-idea-number {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
}

.pmbok8-ideas-grid.compact .pmbok8-idea-title {
    font-size: 0.95rem;
}

.pmbok8-ideas-grid.compact .pmbok8-idea-text {
    font-size: 0.8rem;
}

@media (max-width: 1200px) {
    .pmbok8-ideas-grid.compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 500px) {
    .pmbok8-ideas-grid.compact {
        grid-template-columns: 1fr;
    }
}

/* ==================== PROCESS NODES WITH NAMES ==================== */
.process-node.with-name {
    width: auto;
    height: auto;
    min-width: 100px;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.2;
}

.process-node.with-name .process-name {
    display: block;
    white-space: normal;
    word-wrap: break-word;
}

.grid-cell.process-cell {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
}

/* Larger corner labels */
.corner-pd,
.corner-focus {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.grid-cell.corner {
    min-height: 90px;
}

/* ==================== TOOLTIP POSITIONING FIX ==================== */
.process-tooltip {
    max-width: 320px;
}

.process-tooltip.visible {
    position: fixed;
}

/* ==================== COMPARISON SECTION COMPACT ==================== */
.pmbok8-comparison-section .pmbok8-comp-col ul {
    margin: 0;
    padding-left: 20px;
}

.pmbok8-comparison-section .pmbok8-comp-col li {
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.3;
}

.pmbok8-comparison-section .pmbok8-comp-card {
    padding: 18px;
}

/* ==================== MAP GUIDE TWO CARDS ==================== */
.map-guide-cards.two-cards {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .map-guide-cards.two-cards {
        grid-template-columns: 1fr;
    }
}

/* ==================== MINI-MAP IN MODAL IMPROVEMENTS ==================== */
.process-modal-minimap {
    overflow-x: auto;
}

.minimap-grid {
    font-size: 0.7rem;
    min-width: 700px;
}

.minimap-grid.with-names {
    grid-template-columns: 120px repeat(5, 1fr);
    gap: 2px;
}

.minimap-grid.with-names .minimap-cell {
    padding: 6px 4px;
    font-size: 0.65rem;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.minimap-grid.with-names .minimap-cell.header {
    font-size: 0.7rem;
    font-weight: 700;
}

.minimap-grid.with-names .minimap-cell.domain-header {
    font-size: 0.7rem;
    font-weight: 700;
    justify-content: flex-start;
    padding-left: 8px;
}

.minimap-grid.with-names .minimap-cell.current-process {
    font-size: 0.7rem;
    font-weight: 700;
}

/* ==================== PANEL AS LARGE MODAL - COMPLETE FIX ==================== */
/* Override original side-panel to be centered modal */
.pmbok8-panel-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pmbok8-panel-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.pmbok8-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    width: 95% !important;
    max-width: 1000px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pmbok8-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.pmbok8-panel-content {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    padding: 30px;
}

.pmbok8-panel-header {
    padding: 30px 40px !important;
}

.pmbok8-panel-title {
    font-size: 1.8rem !important;
}

.pmbok8-panel-close {
    width: 50px !important;
    height: 50px !important;
    font-size: 28px !important;
    top: 25px !important;
    right: 25px !important;
}

/* ==================== LARGER PROCESS NODE FONTS ==================== */
.process-node.with-name {
    width: auto;
    height: auto;
    min-width: 130px;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 1.05rem !important;
    text-align: center;
    line-height: 1.35;
    font-weight: 600;
}

.process-node.with-name .process-name {
    display: block;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.05rem !important;
}

.grid-cell.process-cell {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
}

/* ==================== LARGER CORNER LABELS ==================== */
.grid-cell.corner {
    min-height: 100px;
    position: relative;
}

.corner-pd {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 1.3;
}

.corner-focus {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

.corner-separator {
    position: absolute;
    width: 150%;
    height: 2px;
    background: linear-gradient(135deg, transparent 0%, #9ca3af 50%, transparent 100%);
    transform: rotate(-30deg);
    left: -25%;
    top: 50%;
}

/* ==================== PROCESS MODAL - LARGER MINIMAP ==================== */
.process-detail-modal .process-modal-content {
    max-width: 1200px !important;
    padding: 50px !important;
}

.process-modal-minimap {
    margin: 30px 0;
    padding: 25px;
    background: #f8fafc;
    border-radius: 16px;
    overflow-x: auto;
}

.minimap-title {
    font-size: 1.3rem !important;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e293b;
}

.minimap-grid {
    display: grid;
    grid-template-columns: 140px repeat(5, 1fr);
    gap: 4px;
    font-size: 0.9rem !important;
    min-width: 900px;
}

.minimap-grid.with-names {
    grid-template-columns: 140px repeat(5, 1fr);
}

.minimap-cell {
    padding: 12px 10px !important;
    font-size: 0.85rem !important;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #e2e8f0;
    border-radius: 6px;
    line-height: 1.35;
    gap: 6px;
}

.minimap-cell.has-processes {
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px !important;
}

.minimap-cell.header {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.minimap-cell.domain-header {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    justify-content: center;
    padding-left: 12px !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

.minimap-cell.empty {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Individual process items in minimap */
.minimap-process {
    padding: 6px 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    background: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 4px;
    color: #475569;
}

.minimap-process:last-child {
    margin-bottom: 0;
}

/* Highlight ONLY the current process, not the cell */
.minimap-process.current {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.4);
    transform: scale(1.02);
}

/* Remove old cell-level highlighting */
.minimap-cell.current-process {
    background: #e2e8f0;
}

/* ==================== COMPACT COMPARISON SECTION - LARGER FONTS ==================== */
.pmbok8-comparison-section .pmbok8-comp-card {
    padding: 24px !important;
}

.pmbok8-comparison-section .pmbok8-comp-card h4 {
    margin-bottom: 16px !important;
    font-size: 1.4rem !important;
    font-weight: 700;
}

.pmbok8-comparison-section .pmbok8-comp-col ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.pmbok8-comparison-section .pmbok8-comp-col li {
    padding: 6px 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.pmbok8-comparison-section .col-header {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
    font-weight: 700;
}

.pmbok8-comparison-section .pmbok8-comp-columns {
    gap: 20px !important;
}

.pmbok8-comparison-section .pmbok8-comp-badge {
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
}

.pmbok8-comparison-section .no-content {
    font-size: 1.05rem !important;
    padding: 15px !important;
    line-height: 1.5;
}

.pmbok8-comparison-section .principles-list {
    font-size: 1.05rem !important;
    line-height: 1.6;
    padding: 10px 0;
    color: #475569;
}

/* ==================== CLICKABLE HEADERS IN MAP ==================== */
.grid-cell.domain-header,
.grid-cell.focus-header,
.principle-node {
    cursor: pointer;
    transition: all 0.2s ease;
}

.grid-cell.domain-header:hover,
.grid-cell.focus-header:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    z-index: 10;
}

.principle-node:hover {
    transform: translateY(-4px) scale(1.05);
}

/* ==================== KEY TAKEAWAYS - SHOW FULL TEXT WITH LARGER FONTS ==================== */
.pmbok8-key-ideas-section.compact {
    padding: 40px 20px;
}

.pmbok8-key-ideas-section.compact .pmbok8-ideas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.pmbok8-key-ideas-section.compact .pmbok8-idea-card {
    padding: 20px 22px;
    min-height: 120px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.pmbok8-key-ideas-section.compact .pmbok8-idea-number {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a227 0%, #b8922a 100%);
    color: white;
    font-weight: 700;
}

.pmbok8-key-ideas-section.compact .pmbok8-idea-title {
    font-size: 1.1rem !important;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
    color: #1e293b;
    line-height: 1.3;
}

.pmbok8-key-ideas-section.compact .pmbok8-idea-text {
    font-size: 0.95rem !important;
    line-height: 1.5;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    color: #64748b;
}

.pmbok8-key-ideas-section.compact .pmbok8-idea-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

@media (max-width: 1400px) {
    .pmbok8-key-ideas-section.compact .pmbok8-ideas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .pmbok8-key-ideas-section.compact .pmbok8-ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-node.with-name {
        font-size: 0.9rem !important;
        padding: 10px 12px;
        min-width: 100px;
    }
    
    .process-node.with-name .process-name {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 600px) {
    .pmbok8-key-ideas-section.compact .pmbok8-ideas-grid {
        grid-template-columns: 1fr;
    }
    
    .pmbok8-panel {
        max-width: 98% !important;
        max-height: 95vh !important;
    }
}

/* ==================== MOBILE RESPONSIVE MAP ==================== */
@media (max-width: 1024px) {
    .pmbok8-map-container {
        position: relative;
    }
    
    .pmbok8-map-container::before {
        content: "👆 Glisează orizontal pentru a vedea întreaga hartă";
        display: block;
        text-align: center;
        padding: 12px 20px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 12px;
        margin-bottom: 15px;
    }
    
    .map-process-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
    }
    
    .map-process-grid .grid-header,
    .map-process-grid .grid-row {
        min-width: 1000px;
    }
    
    .map-principles-arc {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .map-principles-arc .principles-nodes {
        min-width: 700px;
        justify-content: space-between;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .pmbok8-map-container::before {
        font-size: 0.85rem;
        padding: 10px 15px;
    }
    
    .map-process-grid .grid-header,
    .map-process-grid .grid-row {
        min-width: 900px;
    }
    
    .process-node.with-name {
        font-size: 0.85rem !important;
        padding: 10px 12px;
        min-width: 100px;
    }
    
    .process-node.with-name .process-name {
        font-size: 0.85rem !important;
    }
    
    .grid-cell.domain-header .domain-name {
        font-size: 0.9rem;
    }
    
    .grid-cell.focus-header .focus-name {
        font-size: 0.85rem;
    }
    
    /* Principles arc on mobile */
    .principle-node {
        padding: 10px 12px;
        min-width: 90px;
    }
    
    .principle-node .node-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 500px) {
    .pmbok8-map-container::before {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    
    .map-annexes {
        flex-direction: column;
        gap: 15px;
    }
    
    .annexes-items {
        flex-direction: column;
        gap: 12px;
    }
    
    .annex-item {
        min-width: auto;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
        padding: 15px 20px;
    }
    
    .annex-icon {
        font-size: 2rem;
    }
}

/* ==================== COMPARISON CARDS - NO BULLETS ==================== */
.principles-vertical,
.comp-items-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px 0;
}

.principles-vertical span,
.comp-items-vertical span {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #475569;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
}

.principles-vertical span:last-child,
.comp-items-vertical span:last-child {
    border-bottom: none;
}

/* ==================== SECTION DISCLAIMER ==================== */
.pmbok8-section-disclaimer {
    font-size: 1.1rem;
    color: #64748b;
    background: #f8fafc;
    padding: 10px 18px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 10px;
    border-left: 3px solid #f59e0b;
}

/* ==================== AGNOSTIC BADGE ==================== */
/* Match Tailorable badge style but with light green color */
.modal-badge.agnostic {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================== v5.9 UPDATES ==================== */

/* Fix Tailoring Layer - Strong purple glow effect */
.map-tailoring-layer.active {
    opacity: 1;
    border: 6px solid #6366f1 !important;
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.8), 0 0 120px rgba(99, 102, 241, 0.5), inset 0 0 80px rgba(99, 102, 241, 0.2) !important;
}

/* Fix ALL sections to be full width */
.pmbok8-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Fix PMP Locked Section Width */
.pmbok8-pmp-locked-section {
    max-width: 100% !important;
    width: 100% !important;
}

.pmbok8-pmp-locked-section .pmp-unlock-content {
    max-width: 100%;
    width: 100%;
}

/* Fix Template Generator Section Width - FULL WIDTH, no card style */
.pmbok8-templates-section {
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pmbok8-templates-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Templates Grid - 2 cards per row */
.pmbok8-templates-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .pmbok8-templates-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Fix Feature Container Width - FULL WIDTH */
.pmbok8-feature-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

.pmbok8-feature-container[data-tab="tools"],
.pmbok8-feature-container[data-tab="learn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Ensure sections inside feature containers are full width */
.pmbok8-feature-container .pmbok8-section {
    width: 100% !important;
    max-width: 100% !important;
}

/* Fix Training CTA Width - FULL WIDTH, clean white style */
.pmbok8-training-cta {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 40px 0 !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* Training CTA text styling - dark text on white background */
.pmbok8-training-cta .training-cta-text h3 {
    color: #1f2937 !important;
    font-size: 1.5rem !important;
}

.pmbok8-training-cta .training-cta-text p {
    color: #6b7280 !important;
    font-size: 1.05rem !important;
}

.pmbok8-training-cta .training-cta-text strong {
    color: #059669 !important;
}

.pmbok8-training-cta .training-cta-highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
}

.pmbok8-training-cta .training-cta-btn {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
    color: white !important;
}

/* Fix all bottom sections to be full width */
.pmbok8-stats-bar {
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================
   ITTO EXPLORER SECTION
   ============================================ */

.pmbok8-itto-explorer-section {
    margin-top: 60px;
    padding: 40px 0;
}

/* ITTO Explorer Tabs */
.itto-explorer-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

.itto-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
}

.itto-tab-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.itto-tab-btn.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: transparent;
    color: white;
}

.itto-tab-btn .tab-icon {
    font-size: 1.2rem;
}

.itto-tab-btn .tab-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.itto-tab-btn.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Tab Content */
.itto-tab-content {
    display: none;
}

.itto-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ITTO Explorer Container */
.itto-explorer-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    min-height: 500px;
}

/* ITTO Sidebar */
.itto-sidebar {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.itto-sidebar h4 {
    font-size: 1.25rem;
    color: #1f2937;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.itto-search {
    margin-bottom: 15px;
}

.itto-search input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.itto-search input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Filter Row */
.itto-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.itto-filter-btn {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: white;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.itto-filter-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.itto-filter-btn.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
}

/* ITTO List */
.itto-list {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.itto-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 5px;
    border: 1px solid transparent;
}

.itto-list-item:hover {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.itto-list-item.selected {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
}

.itto-list-item .item-name {
    font-size: 1.1rem;
    font-weight: 500;
    flex: 1;
}

.itto-list-item .item-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.95rem;
    font-weight: 600;
}

.itto-list-item.selected .item-count {
    background: rgba(255, 255, 255, 0.2);
}

.itto-list-item .item-type {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-left: 8px;
}

/* Main Panel */
.itto-main-panel {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 25px;
    min-height: 450px;
}

/* Placeholder */
.itto-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: #94a3b8;
}

.itto-placeholder .placeholder-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.itto-placeholder .placeholder-text {
    font-size: 1.1rem;
    text-align: center;
}

/* Selected Header */
.itto-selected-header {
    margin-bottom: 20px;
    text-align: center;
}

.itto-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-radius: 30px;
    font-size: 1.4rem;
    font-weight: 600;
}

.itto-selected-badge.tool-badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.itto-selected-badge .badge-icon {
    font-size: 1.4rem;
}

.itto-selected-badge .badge-type {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 1rem;
}

/* Description */
.itto-description {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
}

.itto-description:empty {
    display: none;
}

/* Flow Visualization */
.itto-flow-visualization {
    display: flex;
    align-items: stretch;
    gap: 20px;
    justify-content: center;
}

.itto-flow-column {
    flex: 1;
    max-width: 250px;
}

.itto-column-header {
    font-size: 1.15rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 15px;
    text-align: center;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 8px;
}

.itto-flow-source .itto-column-header {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
}

.itto-flow-dest .itto-column-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

/* Process List in Flow */
.itto-process-list {
    max-height: 280px;
    overflow-y: auto;
}

.itto-process-item {
    padding: 10px 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.itto-process-item:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    transform: translateX(5px);
}

.itto-flow-source .itto-process-item:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.itto-flow-dest .itto-process-item:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

/* Flow Arrow */
.itto-flow-arrow {
    display: flex;
    align-items: center;
    color: #0ea5e9;
    font-size: 1.5rem;
}

.itto-flow-arrow .arrow-line {
    width: 30px;
    height: 3px;
    background: #0ea5e9;
}

/* Artefact Box (center) */
.itto-flow-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.itto-artefact-box {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    padding: 25px 35px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);
}

.itto-artefact-box .artefact-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.itto-artefact-box .artefact-name {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Tools Process Grid */
.itto-tool-processes {
    margin-top: 20px;
}

.itto-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
    padding: 5px;
}

.itto-process-grid .itto-process-item {
    margin-bottom: 0;
}

/* No results message */
.itto-no-results {
    text-align: center;
    padding: 30px;
    color: #94a3b8;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 900px) {
    .itto-explorer-container {
        grid-template-columns: 1fr;
    }
    
    .itto-sidebar {
        max-height: 300px;
    }
    
    .itto-flow-visualization {
        flex-direction: column;
        align-items: center;
    }
    
    .itto-flow-column {
        max-width: 100%;
        width: 100%;
    }
    
    .itto-flow-arrow {
        transform: rotate(90deg);
        margin: 15px 0;
    }
}

@media (max-width: 600px) {
    .itto-explorer-tabs {
        flex-direction: column;
    }
    
    .itto-tab-btn {
        justify-content: center;
    }
}

/* ITTO Flow Notes */
.itto-flow-note {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 12px 15px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 1rem;
    font-style: italic;
    border-left: 3px solid #f59e0b;
}

.itto-process-note {
    background: #f1f5f9;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-style: italic;
    border-left: 3px solid #94a3b8;
}

/* ITTO Flow Notes */
.itto-flow-note {
    padding: 12px 15px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px dashed #d97706;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 1rem;
    color: #92400e;
    font-style: italic;
    line-height: 1.5;
}

.itto-flow-source .itto-flow-note {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #059669;
    color: #065f46;
}

.itto-flow-dest .itto-flow-note {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
    color: #1e40af;
}

/* ==================== ITTO ENHANCED SECTIONS ==================== */

/* Definition Section */
.itto-definition-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 16px;
    padding: 20px 24px;
    border-left: 4px solid #0ea5e9;
}

.itto-tool-definition {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-left-color: #a855f7;
}

.itto-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.itto-section-header .section-icon {
    font-size: 18px;
}

.itto-section-header .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.itto-tool-definition .section-title {
    color: #7c3aed;
}

.itto-definition-content {
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
}

.itto-tool-definition .itto-definition-content {
    color: #4c1d95;
}

/* Animation Section */
.itto-animation-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    border-radius: 16px;
    padding: 20px 24px;
    border-left: 4px solid #22c55e;
}

.itto-tool-animation {
    background: linear-gradient(135deg, #581c87 0%, #6b21a8 100%);
    border-left-color: #a855f7;
}

.itto-animation-section .section-title {
    color: #86efac;
}

.itto-tool-animation .section-title {
    color: #d8b4fe;
}

.itto-animation-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.itto-animation-svg {
    width: 100%;
    height: auto;
    max-height: 180px;
}

.itto-animation-caption {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    font-size: 13px;
    color: #bbf7d0;
}

.itto-tool-animation .itto-animation-caption {
    color: #e9d5ff;
}

.itto-animation-caption strong {
    color: #4ade80;
}

.itto-tool-animation .itto-animation-caption strong {
    color: #c084fc;
}

/* Template Section (Collapsible) */
.itto-template-section {
    margin-top: 24px;
    background: #334155;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #475569;
    transition: all 0.3s ease;
}

.itto-template-section.expanded {
    background: linear-gradient(135deg, #581c87 0%, #7c3aed 100%);
    border-color: #a855f7;
}

.itto-template-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.itto-template-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.template-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-header-left .section-title {
    font-weight: 600;
    color: #e2e8f0;
}

.template-hint {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: #94a3b8;
}

.itto-template-section.expanded .template-hint {
    display: none;
}

.template-chevron {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.itto-template-section.expanded .template-chevron {
    transform: rotate(180deg);
    color: #c084fc;
}

.itto-template-content {
    padding: 0 20px 20px 20px;
}

/* Document Template Styles */
.itto-document-template {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-family: 'Times New Roman', Georgia, serif;
}

.itto-doc-header {
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.itto-doc-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e40af;
    margin: 0 0 4px 0;
}

.itto-doc-id {
    font-size: 11px;
    color: #64748b;
}

.itto-doc-status {
    background: #dbeafe;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    color: #1e40af;
    font-weight: 600;
}

.itto-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 13px;
}

.itto-doc-field {
    margin-bottom: 14px;
}

.itto-doc-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.itto-doc-value {
    color: #0f172a;
}

.itto-doc-list {
    margin: 4px 0;
    padding-left: 18px;
    color: #334155;
    line-height: 1.6;
}

.itto-doc-signatures {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.itto-doc-signature {
    font-size: 12px;
}

.itto-doc-signature-label {
    color: #64748b;
    margin-bottom: 8px;
}

.itto-doc-signature-name {
    font-family: 'Brush Script MT', cursive;
    font-size: 20px;
    color: #1e40af;
    border-bottom: 1px solid #94a3b8;
    padding-bottom: 4px;
    display: inline-block;
}

.itto-doc-signature-date {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Table template for registers */
.itto-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 16px;
}

.itto-doc-table th {
    background: #334155;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}

.itto-doc-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.itto-doc-table tr:nth-child(even) {
    background: #f8fafc;
}

.itto-doc-table .risk-high {
    color: #dc2626;
    font-weight: 600;
}

.itto-doc-table .risk-medium {
    color: #f59e0b;
    font-weight: 600;
}

.itto-doc-table .risk-low {
    color: #22c55e;
    font-weight: 600;
}

.itto-template-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-size: 13px;
    color: #e9d5ff;
    font-family: system-ui, sans-serif;
}

/* Tool Example Box */
.itto-example-box {
    background: rgba(139, 92, 246, 0.15);
    border-left: 4px solid #8b5cf6;
    padding: 15px 18px;
    margin-top: 15px;
    border-radius: 0 8px 8px 0;
    color: #5b21b6;
    font-size: 14px;
    line-height: 1.6;
}

.itto-example-box .example-label {
    font-weight: 600;
    margin-right: 8px;
    color: #7c3aed;
}

.itto-definition-example {
    margin-top: 5px;
}

/* Enhanced Document Template */
.itto-doc-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

.itto-doc-section {
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}

.itto-doc-section:last-of-type {
    border-bottom: none;
}

.itto-doc-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e40af;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #dbeafe;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.itto-doc-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.itto-doc-fields-grid .itto-doc-field {
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

.itto-doc-paragraph {
    color: #475569;
    line-height: 1.7;
    margin: 0;
    font-size: 13px;
}

.itto-doc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.itto-doc-col h5 {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.itto-doc-table-embedded {
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
}

.itto-doc-table thead {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.itto-doc-table tbody tr:hover {
    background: #e0f2fe !important;
}

.itto-doc-table .status-done {
    color: #16a34a;
}

.itto-doc-table .status-active {
    color: #2563eb;
}

.itto-doc-table .status-warning {
    color: #d97706;
}

.itto-doc-legend {
    padding: 12px 0;
    font-size: 11px;
    color: #64748b;
    border-top: 1px dashed #e2e8f0;
    margin-top: 12px;
}

.itto-doc-legend .legend-item {
    display: inline-block;
    margin-right: 12px;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.itto-doc-summary {
    padding: 12px 16px;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    font-weight: 600;
    color: #1e40af;
    font-size: 12px;
    border-radius: 6px;
    margin-top: 12px;
}

.itto-doc-note {
    padding: 10px 14px;
    background: #f8fafc;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
    margin-top: 12px;
    border-radius: 6px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .itto-definition-section,
    .itto-animation-section,
    .itto-template-section {
        margin-top: 16px;
        padding: 16px;
    }
    
    .itto-doc-grid {
        grid-template-columns: 1fr;
    }
    
    .itto-doc-fields-grid {
        grid-template-columns: 1fr;
    }
    
    .itto-doc-two-col {
        grid-template-columns: 1fr;
    }
    
    .itto-doc-signatures {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .itto-animation-svg {
        max-height: 140px;
    }
    
    .itto-doc-table {
        font-size: 10px;
    }
    
    .itto-doc-table th,
    .itto-doc-table td {
        padding: 6px 5px;
    }
}

/* ==================== PRO LOCKED SECTION ==================== */
.pro-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 15px;
}

.pro-locked-section {
    position: relative;
}

.pro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 16px;
}

.pro-overlay-content {
    text-align: center;
    padding: 40px;
}

.pro-lock-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    display: block;
}

.pro-overlay-content h3 {
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 10px;
}

.pro-overlay-content p {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 400px;
}

/* ==================== TRAINING CTA SECTION ==================== */
.pmbok8-training-cta-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
    border: 2px solid #f59e0b;
}

.training-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 20px 0;
}

.training-highlight-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 700px;
}

.training-highlight-box .highlight-icon {
    font-size: 2.5rem;
}

.training-highlight-box p {
    font-size: 1.15rem;
    color: #1f2937;
    margin: 0;
    line-height: 1.6;
}

.training-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 15px 35px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.training-section-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
    color: white;
}

@media (max-width: 768px) {
    .training-highlight-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .training-section-btn {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

/* ==================== POC BANNER ==================== */
.poc-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 12px 25px;
    margin-bottom: 25px;
}

.poc-icon {
    font-size: 1.5rem;
}

.poc-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #92400e;
}

/* ==================== ENTERPRISE ARCHITECTURE DIAGRAM ==================== */
.enterprise-architecture {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    margin: 30px 0;
}

.architecture-title {
    text-align: center;
    font-size: 1.3rem;
    color: #1e293b;
    margin-bottom: 25px;
}

.architecture-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.arch-layer {
    width: 100%;
    max-width: 900px;
    padding: 20px;
    border-radius: 12px;
}

.arch-layer.data-sources {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #3b82f6;
}

.arch-layer.integration {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.arch-layer.ai-engine {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
}

.arch-layer.outputs {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #8b5cf6;
}

.layer-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #1e293b;
}

.layer-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.layer-items.horizontal {
    flex-wrap: nowrap;
}

.arch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 0.95rem;
}

.arch-item.highlight {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    color: white;
    font-weight: 600;
}

.arch-item .item-icon {
    font-size: 1.2rem;
}

.arch-arrow {
    font-size: 1.8rem;
    color: #64748b;
}

/* ==================== DEMO SECTION HEADER ==================== */
.demo-section-header {
    text-align: center;
    margin: 30px 0 20px;
    padding: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    border: 2px solid #3b82f6;
}

.demo-section-header h4 {
    font-size: 1.3rem;
    color: #1e40af;
    margin-bottom: 8px;
}

.demo-section-header p {
    color: #3b82f6;
    font-size: 1rem;
    margin: 0;
}

/* ==================== RESPONSIVE FOR ARCHITECTURE ==================== */
@media (max-width: 768px) {
    .architecture-diagram {
        gap: 10px;
    }
    
    .arch-layer {
        padding: 15px;
    }
    
    .layer-items {
        gap: 8px;
    }
    
    .layer-items.horizontal {
        flex-wrap: wrap;
    }
    
    .arch-item {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
    
    .poc-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==================== TAILORING OUTPUT - ELABORATE STYLES ==================== */

/* Executive Summary */
.tailoring-executive-summary {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

.tailoring-executive-summary .summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.tailoring-executive-summary .summary-icon {
    font-size: 1.8rem;
}

.tailoring-executive-summary h4 {
    font-size: 1.25rem;
    color: #1e293b;
    margin: 0;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.summary-item {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.summary-item.highlight {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
}

.summary-item .item-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 5px;
}

.summary-item.highlight .item-label {
    color: rgba(255,255,255,0.8);
}

.summary-item .item-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.summary-item.highlight .item-value {
    color: white;
    font-size: 1.3rem;
}

.summary-item .item-value.methodology-predictive { color: #3b82f6; }
.summary-item .item-value.methodology-agile { color: #10b981; }
.summary-item .item-value.methodology-hybrid { color: #8b5cf6; }
.summary-item .item-value.complexity-high { color: #ef4444; }
.summary-item .item-value.complexity-medium { color: #f59e0b; }
.summary-item .item-value.complexity-low { color: #10b981; }

.summary-conclusion {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #3b82f6;
    border-radius: 10px;
    padding: 15px;
}

.summary-conclusion p {
    margin: 0;
    color: #1e40af;
    font-size: 1rem;
}

/* Profile Metrics */
.tailoring-profile-metrics {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

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

.metrics-header h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 0;
}

.metrics-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.metric-bar {
    display: flex;
    align-items: center;
    gap: 15px;
}

.metric-bar .bar-label {
    width: 120px;
    font-size: 0.95rem;
    color: #475569;
}

.metric-bar .bar-track {
    flex: 1;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.metric-bar .bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.governance-level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border: 2px dashed;
    border-radius: 10px;
}

.governance-label {
    font-size: 1rem;
    color: #475569;
}

.governance-value {
    font-size: 1.3rem;
    font-weight: 700;
}

/* Domains Grid */
.tailoring-domains {
    margin-bottom: 25px;
}

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

.domains-header h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 0;
}

.domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.domain-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-top: 4px solid;
    border-radius: 12px;
    padding: 15px;
}

.domain-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.domain-icon {
    font-size: 1.3rem;
}

.domain-name {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
}

.domain-count {
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.domain-processes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.domain-process {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.domain-process:hover {
    background: #e0f2fe;
    transform: translateX(5px);
}

.domain-process.recommended {
    border-left: 3px solid #10b981;
}

.domain-process.simplified {
    border-left: 3px solid #f59e0b;
}

.domain-process .process-status {
    font-size: 0.9rem;
}

.domain-process .process-name {
    font-size: 0.9rem;
    color: #334155;
}

.no-processes {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    padding: 10px;
}

/* Artifacts */
.tailoring-artifacts {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #eab308;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

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

.artifacts-header h4 {
    font-size: 1.2rem;
    color: #854d0e;
    margin: 0;
}

.artifacts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.artifact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.artifact-item.core {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
}

.artifact-icon {
    font-size: 1.2rem;
}

.artifact-name {
    font-size: 0.95rem;
    color: #1e293b;
}

.artifact-badge {
    background: #f59e0b;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Warnings */
.tailoring-warnings {
    margin-bottom: 25px;
}

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

.warnings-header h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 0;
}

.warnings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
}

.warning-item.danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
}

.warning-item.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
}

.warning-item.info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #3b82f6;
}

.warning-item.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
}

.warning-icon {
    font-size: 1.5rem;
}

.warning-content strong {
    display: block;
    margin-bottom: 5px;
    color: #1e293b;
}

.warning-content p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
}

/* Tips */
.tailoring-tips {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

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

.tips-header h4 {
    font-size: 1.2rem;
    color: #065f46;
    margin: 0;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tip-item {
    background: white;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1e293b;
    border-left: 3px solid #10b981;
}

/* Effort Indicators */
.tailoring-effort {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
}

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

.effort-header h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 0;
}

.effort-note {
    color: #64748b;
    margin-bottom: 20px;
}

.effort-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.effort-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.effort-domain {
    width: 100px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}

.effort-bar {
    flex: 1;
    height: 16px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.effort-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.effort-fill.low { background: linear-gradient(90deg, #a7f3d0 0%, #10b981 100%); }
.effort-fill.medium { background: linear-gradient(90deg, #fde68a 0%, #f59e0b 100%); }
.effort-fill.high { background: linear-gradient(90deg, #fecaca 0%, #ef4444 100%); }

.effort-count {
    width: 30px;
    text-align: center;
    font-weight: 600;
    color: #1e293b;
}

/* Responsive */
@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .domains-grid {
        grid-template-columns: 1fr;
    }
    
    .metric-bar .bar-label {
        width: 80px;
        font-size: 0.85rem;
    }
    
    .effort-domain {
        width: 70px;
        font-size: 0.8rem;
    }
}

/* ==================== AI INSIGHTS SECTION ==================== */
.ai-insights-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    border: 2px solid #0ea5e9;
    border-radius: 20px;
    padding: 30px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
}

.ai-insights-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ai-insights-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px dashed rgba(14, 165, 233, 0.3);
}

.ai-header-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
}

.ai-header-content h3 {
    font-size: 1.5rem;
    color: #0c4a6e;
    margin: 0 0 5px 0;
}

.ai-header-content p {
    color: #0369a1;
    margin: 0;
    font-size: 1rem;
}

.ai-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.ai-badge-icon {
    font-size: 1rem;
}

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ai-insight-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.ai-insight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.ai-insight-card.full-width {
    grid-column: 1 / -1;
}

.ai-insight-card.strategic {
    border-left: 4px solid #3b82f6;
}

.ai-insight-card.risks {
    border-left: 4px solid #ef4444;
}

.ai-insight-card.recommendations {
    border-left: 4px solid #10b981;
}

.ai-insight-card.success-factors {
    border-left: 4px solid #f59e0b;
}

.ai-insight-card.next-steps {
    border-left: 4px solid #8b5cf6;
    grid-column: 1 / -1;
}

.insight-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.insight-icon {
    font-size: 1.5rem;
}

.insight-card-header h4 {
    font-size: 1.15rem;
    color: #1e293b;
    margin: 0;
}

.insight-card-content p {
    color: #475569;
    line-height: 1.7;
    margin: 0;
    font-size: 1rem;
}

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

.insight-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.insight-list li:last-child {
    border-bottom: none;
}

/* Risks list */
.risks-list .risk-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.risk-indicator.high { background: #ef4444; }
.risk-indicator.medium { background: #f59e0b; }
.risk-indicator.low { background: #10b981; }

.risk-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Recommendations list */
.recommendations-list {
    counter-reset: rec-counter;
}

.recommendations-list li {
    padding-left: 0;
}

.rec-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rec-text {
    flex: 1;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rec-priority {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.rec-priority.high { background: #fee2e2; color: #dc2626; }
.rec-priority.medium { background: #fef3c7; color: #d97706; }
.rec-priority.low { background: #dcfce7; color: #16a34a; }

/* Success factors list */
.success-list .success-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.success-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Next steps timeline */
.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.step-item {
    display: flex;
    gap: 15px;
    position: relative;
    padding-bottom: 20px;
}

.step-item:last-child {
    padding-bottom: 0;
}

.step-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 35px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #8b5cf6 0%, #c4b5fd 100%);
}

.step-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    z-index: 1;
}

.step-content {
    flex: 1;
    padding-top: 6px;
}

.step-text {
    display: block;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.step-timing {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 10px;
    background: #ede9fe;
    color: #7c3aed;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Raw AI content */
.ai-raw-content {
    color: #475569;
    line-height: 1.8;
    font-size: 1rem;
    white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-insights-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-insight-card.next-steps {
        grid-column: 1;
    }
    
    .ai-insights-header {
        flex-direction: column;
        text-align: center;
    }
    
    .ai-badge {
        margin-left: 0;
    }
    
    .ai-header-icon {
        width: 60px;
        height: 60px;
        font-size: 2.5rem;
    }
}


/* ==================== TAILORING ASSISTANT - INTRO CARD ==================== */
.tailoring-intro-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.tailoring-intro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4);
}

.intro-card-content {
    display: flex;
    align-items: center;
    gap: 25px;
}

.intro-card-icon {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intro-card-text {
    flex: 1;
}

.intro-card-text h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 8px 0;
}

.intro-card-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0 0 12px 0;
}

.intro-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.intro-card-action {
    flex-shrink: 0;
}

.btn-learn-more {
    background: white;
    color: #667eea;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-learn-more:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.btn-learn-more .arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-learn-more:hover .arrow {
    transform: translateX(5px);
}

/* ==================== TAILORING FULL MODAL ==================== */
.tailoring-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(5px);
}

.tailoring-modal-overlay.active {
    display: flex;
}

.tailoring-modal.tailoring-modal-full {
    background: white;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.tailoring-modal-full .modal-header {
    text-align: center;
    padding: 25px 30px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.tailoring-modal-full .modal-header h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0 0 5px 0;
}

.modal-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.tailoring-modal-full .modal-content {
    padding: 20px 30px 30px;
}

/* Collapsible Info Section */
.info-collapsible {
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.info-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
}

.info-toggle:hover {
    background: #f1f5f9;
}

.toggle-icon {
    font-size: 1rem;
}

.toggle-text {
    flex: 1;
    font-weight: 500;
    color: #475569;
}

.toggle-arrow {
    color: #94a3b8;
    transition: transform 0.2s;
}

.info-collapsible[open] .toggle-arrow {
    transform: rotate(180deg);
}

.info-content {
    padding: 15px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

/* Compact Disclaimer */
.ai-usecases-disclaimer.compact {
    padding: 12px;
    margin-bottom: 15px;
}

.ai-usecases-disclaimer.compact .disclaimer-content p {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
}

.ai-usecases-disclaimer.compact .disclaimer-content p:last-child {
    margin-bottom: 0;
}

/* Compact Demo vs Enterprise */
.demo-vs-enterprise.compact {
    margin-bottom: 15px;
}

.demo-vs-enterprise.compact .comparison-box {
    padding: 12px;
}

.demo-vs-enterprise.compact .box-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.demo-vs-enterprise.compact .box-features {
    font-size: 0.85rem;
}

.demo-vs-enterprise.compact .box-features li {
    padding: 4px 0;
}

/* ==================== CLEAN ARCHITECTURE DESIGN ==================== */
.enterprise-architecture.clean {
    background: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
}

.enterprise-architecture.clean .architecture-title {
    text-align: center;
    font-size: 1rem;
    color: #1e293b;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.enterprise-architecture.clean .architecture-diagram {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enterprise-architecture.clean .arch-layer {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.enterprise-architecture.clean .arch-layer:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.enterprise-architecture.clean .arch-layer.engine-layer {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #667eea;
}

.enterprise-architecture.clean .layer-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
    text-align: center;
}

.enterprise-architecture.clean .engine-layer .layer-title {
    color: #667eea;
}

.enterprise-architecture.clean .layer-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.enterprise-architecture.clean .arch-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #475569;
    transition: all 0.2s ease;
}

.enterprise-architecture.clean .arch-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.enterprise-architecture.clean .arch-item.highlight {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

.enterprise-architecture.clean .arch-item.highlight:hover {
    background: #5a67d8;
}

.enterprise-architecture.clean .arch-connector {
    text-align: center;
    color: #94a3b8;
    font-size: 1rem;
    padding: 2px 0;
}

/* Compact CTA */
.pmaccess-enterprise-cta.compact {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.pmaccess-enterprise-cta.compact .cta-text {
    font-size: 0.9rem;
    color: #166534;
}

.pmaccess-enterprise-cta.compact .cta-button {
    background: #166534;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.pmaccess-enterprise-cta.compact .cta-button:hover {
    background: #14532d;
}

/* Demo Section in Modal */
.tailoring-modal-full .demo-section-header {
    margin-bottom: 15px;
}

.tailoring-modal-full .demo-section-header h4 {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0;
}

.tailoring-modal-full .tailoring-usage-notice {
    margin-bottom: 15px;
    padding: 10px 15px;
}

.tailoring-modal-full .pmbok8-tailoring-form {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
}

.tailoring-modal-full .pmbok8-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 12px;
}

.tailoring-modal-full .pmbok8-form-group.full-width {
    grid-column: 1 / -1;
}

.tailoring-modal-full .pmbok8-form-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* Results in Modal */
.tailoring-modal-full .pmbok8-tailoring-results {
    margin-top: 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-height: 500px;
    overflow-y: auto;
}

.tailoring-modal-full .pmbok8-results-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

.tailoring-modal-full .pmbok8-results-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.results-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pmbok8-btn-export {
    background: #166534;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pmbok8-btn-export:hover {
    background: #14532d;
}

.tailoring-modal-full .pmbok8-results-content {
    padding: 20px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .intro-card-content {
        flex-direction: column;
        text-align: center;
    }
    
    .intro-card-features {
        justify-content: center;
    }
    
    .tailoring-modal.tailoring-modal-full {
        margin: 10px;
        border-radius: 16px;
    }
    
    .tailoring-modal-full .modal-header,
    .tailoring-modal-full .modal-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .tailoring-modal-full .pmbok8-form-row {
        grid-template-columns: 1fr;
    }
    
    .pmaccess-enterprise-cta.compact {
        flex-direction: column;
        text-align: center;
    }
    
    .enterprise-architecture.clean .layer-items {
        flex-direction: column;
    }
    
    .enterprise-architecture.clean .arch-item {
        width: 100%;
        text-align: center;
    }
}

/* ==================== ONGOING USAGE NOTE ==================== */
.ongoing-usage-note {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border: 1px solid #0284c7;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ongoing-usage-note .note-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ongoing-usage-note .note-text {
    font-size: 0.9rem;
    color: #0369a1;
    line-height: 1.5;
}

.ongoing-usage-note .note-text strong {
    color: #075985;
}

/* Full width AI insight card */
.ai-insight-card.full-width {
    grid-column: 1 / -1;
}

/* ==================== ITA WIZARD v2.1 ==================== */

/* Wizard Modal */
.tailoring-modal-wizard {
    max-width: 1200px;
    width: 96%;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

/* Wizard Header */
.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: white;
}

.wizard-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wizard-header-left h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.wizard-project-name-input {
    background: rgba(255,255,255,0.25) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    border-radius: 8px;
    padding: 10px 16px;
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    width: 280px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    -webkit-text-fill-color: #ffffff !important;
}

.wizard-project-name-input::placeholder {
    color: rgba(255,255,255,0.9) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
    opacity: 1;
}

.wizard-project-name-input:focus {
    outline: none;
    background: rgba(255,255,255,0.35) !important;
    border-color: white !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force white text on autofill */
.wizard-project-name-input:-webkit-autofill,
.wizard-project-name-input:-webkit-autofill:hover,
.wizard-project-name-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(99, 102, 241, 0.5) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.wizard-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-help-btn, .wizard-save-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.wizard-help-btn:hover, .wizard-save-btn:hover {
    background: rgba(255,255,255,0.3);
}

.wizard-header .modal-close-btn {
    position: static;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

/* Progress Indicator */
.wizard-progress {
    background: #f8fafc;
    padding: 20px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.wizard-step.active, .wizard-step.completed {
    opacity: 1;
}

.wizard-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #cbd5e1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.2s;
}

.wizard-step.active .step-number {
    background: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.wizard-step.completed .step-number {
    background: #10b981;
}

.wizard-step.completed .step-number::after {
    content: '✓';
}

.wizard-step .step-label {
    font-size: 0.9rem;
    color: #64748b;
    text-align: center;
    font-weight: 500;
}

.wizard-step.active .step-label {
    color: #4338ca;
    font-weight: 700;
}

.wizard-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width 0.3s ease;
}

/* Wizard Content */
.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    background: white;
}

.wizard-step-content {
    display: none;
}

.wizard-step-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.step-header h3 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    color: #1e293b;
    font-weight: 700;
}

.step-description {
    margin: 0;
    color: #64748b;
    font-size: 1.15rem;
}

/* My Space Load Section in Wizard */
.myspace-load-section {
    margin-bottom: 20px;
}

.myspace-load-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    flex-wrap: wrap;
}

.myspace-load-banner .load-icon {
    font-size: 1.5rem;
}

.myspace-load-banner .load-info {
    flex: 1;
    min-width: 200px;
}

.myspace-load-banner .load-info strong {
    display: block;
    color: #1e40af;
    font-size: 0.95rem;
}

.myspace-load-banner .load-info span {
    color: #64748b;
    font-size: 0.85rem;
}

.myspace-load-banner select {
    padding: 8px 12px;
    font-size: 0.95rem;
}

/* Wizard Form */
.wizard-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

.form-group label .required {
    color: #ef4444;
}

.wizard-input, .wizard-select, .wizard-textarea {
    padding: 14px 18px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    font-size: 1.1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wizard-input:focus, .wizard-select:focus, .wizard-textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.wizard-textarea {
    resize: vertical;
    min-height: 100px;
}

.field-hint {
    font-size: 0.95rem;
    color: #6b7280;
    font-style: italic;
}

/* Slider Buttons (Mobile-friendly alternative to sliders) */
.slider-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slider-buttons {
    display: flex;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
}

.slider-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    background: white;
    color: #4b5563;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 2px solid #d1d5db;
}

.slider-btn:last-child {
    border-right: none;
}

.slider-btn:hover {
    background: #f3f4f6;
}

.slider-btn.active {
    background: #6366f1;
    color: white;
}

.slider-btn.active[data-value="low"] {
    background: #10b981;
}

.slider-btn.active[data-value="high"] {
    background: #ef4444;
}

/* Radio Groups */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.radio-option, .checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.radio-option input, .checkbox-option input {
    width: 22px;
    height: 22px;
    accent-color: #6366f1;
}

.radio-label {
    font-size: 1.1rem;
    color: #374151;
}

/* Checkbox Groups */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-group.compact {
    gap: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 1.1rem;
}

.checkbox-label.big {
    font-size: 1.25rem;
    font-weight: 600;
}

.checkbox-label input {
    width: 24px;
    height: 24px;
    accent-color: #6366f1;
}

/* Conditional Sections */
.conditional-note {
    background: #f0f9ff;
    border: 2px solid #0284c7;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0369a1;
    font-size: 1.05rem;
}

.procurement-details, .ai-details {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn 0.3s ease;
}

/* Help Modal */
.wizard-help-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 100001;
    padding: 32px;
}

.wizard-help-modal h3 {
    font-size: 1.5rem;
    margin: 0 0 20px 0;
    color: #1e293b;
}

.wizard-help-modal p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 16px;
}

.wizard-help-modal ul {
    font-size: 1rem;
    color: #475569;
    padding-left: 24px;
    margin-bottom: 16px;
}

.wizard-help-modal ul li {
    margin-bottom: 8px;
}

.wizard-help-modal .close-help {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
}

.wizard-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
}

/* Review Summary */
.review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.review-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}

.review-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #374151;
}

.review-card-content {
    font-size: 0.9rem;
    color: #64748b;
}

.review-card-content .value {
    font-weight: 600;
    color: #1e293b;
}

.review-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* Wizard Footer */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.wizard-footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wizard-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

#wizard-step-info {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

#wizard-time-estimate {
    font-size: 0.9rem;
    color: #9ca3af;
}

.wizard-btn {
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.wizard-btn.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.wizard-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.wizard-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.wizard-btn.secondary:hover {
    background: #e2e8f0;
}

.wizard-btn.tertiary {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #047857;
    border: 2px solid #a7f3d0;
    padding: 12px 20px;
    font-size: 0.95rem;
}

.wizard-btn.tertiary:hover {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #6ee7b7;
}

.wizard-btn.tertiary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wizard-btn.tertiary.saved {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-color: #16a34a;
}

.wizard-btn.outline {
    background: transparent;
    color: #6366f1;
    border: 2px solid #6366f1;
}

.wizard-btn.outline:hover {
    background: #eef2ff;
}

.wizard-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Results Tabs */
.results-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.results-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: #64748b;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.results-tab:hover {
    color: #6366f1;
}

.results-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

.results-content {
    min-height: 300px;
}

.results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* Posture Badge */
.posture-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
}

.posture-badge.light {
    background: #dcfce7;
    color: #166534;
}

.posture-badge.standard {
    background: #fef3c7;
    color: #92400e;
}

.posture-badge.rigorous {
    background: #fee2e2;
    color: #991b1b;
}

/* Focus Map Grid */
.focus-map-grid {
    display: grid;
    grid-template-columns: 150px repeat(5, 1fr);
    gap: 2px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.8rem;
}

.focus-map-cell {
    background: white;
    padding: 10px 8px;
    text-align: center;
}

.focus-map-cell.header {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
}

.focus-map-cell.domain-header {
    background: #f1f5f9;
    font-weight: 500;
    text-align: left;
    padding-left: 12px;
}

.focus-map-cell.has-processes {
    cursor: pointer;
    transition: background 0.2s;
}

.focus-map-cell.has-processes:hover {
    background: #eef2ff;
}

.focus-map-count {
    font-weight: 600;
    color: #6366f1;
}

.focus-map-rigor {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Process Cards in Results */
.process-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
}

.process-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.process-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.process-card-title {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.process-card-badges {
    display: flex;
    gap: 6px;
}

.process-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.process-badge.include {
    background: #dcfce7;
    color: #166534;
}

.process-badge.optional {
    background: #fef3c7;
    color: #92400e;
}

.process-badge.exclude {
    background: #fee2e2;
    color: #991b1b;
}

.process-badge.rigor-light {
    background: #e0f2fe;
    color: #0369a1;
}

.process-badge.rigor-standard {
    background: #f3e8ff;
    color: #7c3aed;
}

.process-badge.rigor-rigorous {
    background: #fce7f3;
    color: #be185d;
}

.process-card-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 8px;
}

.process-card-outputs {
    font-size: 0.85rem;
    color: #475569;
}

.process-card-outputs strong {
    color: #374151;
}

/* Scores Display */
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.score-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.score-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 4px;
}

.score-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
}

.score-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.score-bar-fill.low { background: #10b981; }
.score-bar-fill.medium { background: #f59e0b; }
.score-bar-fill.high { background: #ef4444; }

/* Hard Rules Warning */
.hard-rules-notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hard-rules-notice .notice-icon {
    font-size: 1.2rem;
}

.hard-rules-notice .notice-content {
    flex: 1;
}

.hard-rules-notice .notice-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.hard-rules-notice .notice-text {
    font-size: 0.85rem;
    color: #b45309;
}

/* Version Info */
.version-info {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 16px;
}

.version-info strong {
    color: #475569;
}

/* Responsive */
@media (max-width: 768px) {
    .tailoring-modal-wizard {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .wizard-header {
        padding: 12px 16px;
    }
    
    .wizard-header-left h2 {
        font-size: 1.1rem;
    }
    
    .wizard-project-name-input {
        display: none;
    }
    
    .wizard-steps {
        gap: 4px;
    }
    
    .wizard-step .step-label {
        display: none;
    }
    
    .wizard-step .step-number {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .wizard-content {
        padding: 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .radio-group.horizontal {
        flex-direction: column;
    }
    
    .focus-map-grid {
        font-size: 0.7rem;
    }
    
    .focus-map-cell {
        padding: 6px 4px;
    }
    
    .results-tabs {
        flex-wrap: wrap;
    }
    
    .results-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* Quick Actions Bar */
.review-quick-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0284c7;
    border-radius: 12px;
    margin-bottom: 24px;
}

.quick-action-hint {
    color: #0369a1;
    font-size: 1rem;
}

/* Session Version Info */
.session-version-info {
    margin-top: 20px;
    padding: 12px 16px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 1rem;
    color: #64748b;
}

/* Results Header Bar */
.results-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.results-header-bar h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #1e293b;
}

.results-version {
    background: #6366f1;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Results Tabs - larger */
.results-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
}

.results-tab {
    padding: 14px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.results-tab:hover {
    color: #6366f1;
}

.results-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 700;
}

.results-content {
    min-height: 350px;
    font-size: 1.05rem;
}

.results-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px solid #e2e8f0;
}

/* Usage Notice - larger */
.tailoring-usage-notice {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
}

.tailoring-usage-notice .notice-icon {
    font-size: 1.3rem;
}

/* Review Cards - larger */
.review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.review-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.review-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #374151;
}

.review-card-content {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
}

.review-card-content .value {
    font-weight: 700;
    color: #1e293b;
}

/* Scores Grid - larger */
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.score-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.score-label {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 6px;
}

.score-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
}

/* Posture Badge - larger */
.posture-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Process Cards - larger text */
.process-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: box-shadow 0.2s;
}

.process-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
}

.process-card-meta {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 8px;
}

.process-badge {
    font-size: 0.85rem;
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 600;
}

/* Domain section headers */
.domain-section h4 {
    font-size: 1.25rem;
    margin: 24px 0 16px 0;
    color: #1e293b;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

/* Summary section headers */
.summary-section h4 {
    font-size: 1.2rem;
    margin: 0 0 16px 0;
    color: #1e293b;
}

.summary-section {
    margin-bottom: 28px;
}

/* Hard Rules Notice - larger */
.hard-rules-notice {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hard-rules-notice .notice-icon {
    font-size: 1.4rem;
}

.hard-rules-notice .notice-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #92400e;
    margin-bottom: 6px;
}

.hard-rules-notice .notice-text {
    font-size: 1rem;
    color: #b45309;
}

.hard-rules-notice ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.hard-rules-notice ul li {
    margin-bottom: 4px;
}

/* Version Info - larger */
.version-info {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: #64748b;
    margin-top: 20px;
}

/* Focus Map - larger and clearer */
.focus-map-container {
    margin-top: 20px;
}

.focus-map-legend {
    background: #f0f9ff;
    border: 2px solid #0284c7;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #0369a1;
}

.focus-map-legend h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #0369a1;
}

.focus-map-legend p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.focus-map-legend ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.focus-map-legend li {
    margin-bottom: 4px;
}

.focus-map-grid {
    display: grid;
    grid-template-columns: 160px repeat(5, 1fr);
    gap: 3px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    font-size: 1rem;
}

.focus-map-cell {
    background: white;
    padding: 16px 12px;
    text-align: center;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.focus-map-cell.header {
    background: #4338ca;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    min-height: 50px;
}

.focus-map-cell.domain-header {
    background: #6366f1;
    color: white;
    font-weight: 600;
    text-align: left;
    padding-left: 16px;
    justify-content: center;
    align-items: flex-start;
}

.focus-map-count {
    font-weight: 700;
    font-size: 1.5rem;
    color: #1e293b;
    line-height: 1;
}

.focus-map-count.zero {
    color: #cbd5e1;
    font-size: 1.2rem;
}

.focus-map-rigor {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 6px;
}

.focus-map-rigor.light {
    color: #10b981;
}

.focus-map-rigor.standard {
    color: #f59e0b;
}

.focus-map-rigor.rigorous {
    color: #ef4444;
}

.focus-map-empty {
    color: #cbd5e1;
    font-size: 1.2rem;
}

.focus-map-processes {
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 4px;
    font-style: italic;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Analysis Progress Styles */
.analysis-progress-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
}

.analysis-progress-header {
    text-align: center;
    margin-bottom: 30px;
}

.analysis-progress-header h2 {
    color: #4338ca;
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.analysis-progress-header p {
    color: #64748b;
    margin: 0;
}

.analysis-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analysis-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.analysis-step.active {
    opacity: 1;
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.analysis-step.completed {
    opacity: 1;
    border-color: #10b981;
    background: #f0fdf4;
}

.step-indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.analysis-step.active .step-indicator {
    background: #6366f1;
    animation: pulse 1.5s infinite;
}

.analysis-step.completed .step-indicator {
    background: #10b981;
}

.step-number {
    color: #64748b;
    font-weight: 700;
    font-size: 1.1rem;
}

.analysis-step.active .step-number,
.analysis-step.completed .step-number {
    color: white;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.step-status {
    font-size: 0.9rem;
    color: #64748b;
}

.analysis-step.active .step-status {
    color: #6366f1;
}

.analysis-step.completed .step-status {
    color: #10b981;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Spinner for AI analysis */
.step-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.analysis-step .step-indicator {
    position: relative;
}

.analysis-step.active.loading .step-number {
    opacity: 0;
}

.analysis-step.active.loading .step-spinner {
    display: block;
}

.analysis-step.active.loading .step-indicator {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.4); }
}

/* ============================================ */
/* FEATURE CARDS DASHBOARD SYSTEM              */
/* ============================================ */

.pmbok8-cards-dashboard {
    padding: 30px 0;
    margin-bottom: 20px;
}

.pmbok8-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.pmbok8-feature-card {
    background: #EBF1FF;
    border-radius: 16px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #d4e0fc;
    position: relative;
    overflow: hidden;
}

.pmbok8-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-color, #6366f1), var(--card-color-end, #8b5cf6));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pmbok8-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
    border-color: var(--card-color, #6366f1);
    background: #DCE6FF;
}

.pmbok8-feature-card:hover::before {
    opacity: 1;
}

.pmbok8-feature-card.active {
    border-color: var(--card-color, #6366f1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.pmbok8-feature-card.active::before {
    opacity: 1;
}

/* Card Colors */
.pmbok8-feature-card[data-card="interactive-map"] { --card-color: #6366f1; --card-color-end: #8b5cf6; }
.pmbok8-feature-card[data-card="itto-explorer"] { --card-color: #10b981; --card-color-end: #14b8a6; }
.pmbok8-feature-card[data-card="comparison"] { --card-color: #f59e0b; --card-color-end: #f97316; }
.pmbok8-feature-card[data-card="key-ideas"] { --card-color: #ec4899; --card-color-end: #f43f5e; }
.pmbok8-feature-card[data-card="tailoring"] { --card-color: #8b5cf6; --card-color-end: #a855f7; }
.pmbok8-feature-card[data-card="ai-usecases"] { --card-color: #3b82f6; --card-color-end: #0ea5e9; }
.pmbok8-feature-card[data-card="templates"] { --card-color: #22c55e; --card-color-end: #10b981; }
.pmbok8-feature-card[data-card="simulator"] { --card-color: #ef4444; --card-color-end: #f97316; }
.pmbok8-feature-card[data-card="flashcards"] { --card-color: #06b6d4; --card-color-end: #0ea5e9; }
.pmbok8-feature-card[data-card="pmp-exam"] { --card-color: #8b5cf6; --card-color-end: #6366f1; }

/* Card Icon */
.pmbok8-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--card-color, #6366f1) 0%, var(--card-color-end, #8b5cf6) 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Card Badge */
.pmbok8-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pmbok8-card-badge.popular {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

.pmbok8-card-badge.new {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: white;
}

.pmbok8-card-badge.beta {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: white;
}

.pmbok8-card-badge.pro {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
}

/* Card Title */
.pmbok8-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Card Description */
.pmbok8-card-description {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Card Action */
.pmbok8-card-action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--card-color, #6366f1);
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.pmbok8-card-action .action-icon {
    transition: transform 0.3s ease;
}

.pmbok8-feature-card:hover .pmbok8-card-action .action-icon {
    transform: translateX(5px);
}

.pmbok8-feature-card.active .pmbok8-card-action .action-icon {
    transform: rotate(90deg);
}

/* Section Expandable Content */
.pmbok8-section[data-collapsible="true"] {
    display: none;
    animation: slideDown 0.4s ease;
}

.pmbok8-section[data-collapsible="true"].expanded {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close Button for Expanded Section */
.pmbok8-section-close {
    position: sticky;
    top: 80px;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.pmbok8-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmbok8-close-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Back to Cards Link */
.pmbok8-back-to-cards {
    text-align: center;
    padding: 30px;
    margin-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.pmbok8-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pmbok8-back-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .pmbok8-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .pmbok8-feature-card {
        padding: 20px;
    }
    
    .pmbok8-card-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .pmbok8-card-title {
        font-size: 1.15rem;
    }
    
    .pmbok8-card-description {
        font-size: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .pmbok8-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tab Cards Dashboard visibility */
.pmbok8-cards-dashboard[data-tab="explore"],
.pmbok8-cards-dashboard[data-tab="tools"],
.pmbok8-cards-dashboard[data-tab="learn"],
.pmbok8-cards-dashboard[data-tab="projects"],
.pmbok8-cards-dashboard[data-tab="account"] {
    display: none;
}

.pmbok8-cards-dashboard[data-tab="explore"].active,
.pmbok8-cards-dashboard[data-tab="tools"].active,
.pmbok8-cards-dashboard[data-tab="learn"].active,
.pmbok8-cards-dashboard[data-tab="projects"].active,
.pmbok8-cards-dashboard[data-tab="account"].active {
    display: block;
}

/* ============================================ */
/* FEEDBACK WIDGET SYSTEM                       */
/* ============================================ */

/* Floating Action Button */
.pmbok8-feedback-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
    z-index: 9998;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 15px;
}

.pmbok8-feedback-fab:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.6);
}

.pmbok8-feedback-fab .fab-icon {
    font-size: 20px;
}

.pmbok8-feedback-fab-locked {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4);
}

.pmbok8-feedback-fab-locked:hover::after {
    content: 'Autentifică-te pentru a contribui';
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    padding: 8px 14px;
    background: #1e293b;
    color: white;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
}

/* Modal Overlay */
.pmbok8-feedback-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.pmbok8-feedback-overlay.active {
    display: flex;
}

/* Modal */
.pmbok8-feedback-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: feedbackModalIn 0.3s ease;
}

@keyframes feedbackModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.feedback-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    z-index: 10;
}

.feedback-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Modal Header */
.feedback-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 20px 20px 0 0;
}

.feedback-modal-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.feedback-modal-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
}

.feedback-modal-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 15px;
}

/* Form */
.feedback-form {
    padding: 25px 30px 30px;
}

.feedback-field {
    margin-bottom: 22px;
}

.feedback-label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    font-size: 14px;
}

.feedback-label .required {
    color: #ef4444;
}

/* Type Selection */
.feedback-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.feedback-type-option input {
    display: none;
}

.feedback-type-option .type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.feedback-type-option .type-card:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.feedback-type-option input:checked + .type-card {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.type-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.type-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}

.type-desc {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* Input Fields */
.feedback-form input[type="text"],
.feedback-form textarea,
.feedback-form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    background: #f8fafc;
}

.feedback-form input[type="text"]:focus,
.feedback-form textarea:focus,
.feedback-form select:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.feedback-form textarea {
    resize: vertical;
    min-height: 100px;
}

.field-hint {
    text-align: right;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 5px;
}

/* Screenshot Upload */
.screenshot-upload {
    display: flex;
    align-items: center;
    gap: 15px;
}

.screenshot-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
    transition: all 0.2s;
}

.screenshot-btn:hover {
    border-color: #667eea;
    background: #f0f4ff;
    color: #667eea;
}

.screenshot-preview {
    position: relative;
    display: inline-block;
}

.screenshot-preview img {
    max-width: 120px;
    max-height: 80px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.remove-screenshot {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* User Info */
.feedback-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.feedback-user-info .user-avatar img {
    border-radius: 50%;
}

.feedback-user-info .user-details {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.feedback-user-info .user-details small {
    color: #64748b;
    font-size: 12px;
}

.feedback-user-info .email-notice {
    margin-left: auto;
    font-size: 12px;
    color: #10b981;
    font-weight: 500;
}

/* Actions */
.feedback-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.feedback-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.feedback-btn.secondary {
    background: #f1f5f9;
    color: #475569;
}

.feedback-btn.secondary:hover {
    background: #e2e8f0;
}

.feedback-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.feedback-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.feedback-btn.primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Success State */
.feedback-success {
    padding: 50px 30px;
    text-align: center;
}

.feedback-success .success-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.feedback-success h3 {
    font-size: 22px;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.feedback-success p {
    color: #64748b;
    margin: 0 0 10px 0;
}

.feedback-success .success-note {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 25px;
}

/* Responsive */
@media (max-width: 600px) {
    .pmbok8-feedback-fab {
        bottom: 20px;
        right: 20px;
        padding: 12px 18px;
        font-size: 14px;
    }
    
    .pmbok8-feedback-fab .fab-label {
        display: none;
    }
    
    .pmbok8-feedback-modal {
        max-height: 95vh;
        border-radius: 16px;
    }
    
    .feedback-modal-header {
        padding: 25px 20px;
    }
    
    .feedback-form {
        padding: 20px;
    }
    
    .feedback-type-options {
        grid-template-columns: 1fr;
    }
    
    .feedback-type-option .type-card {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .type-icon {
        font-size: 24px;
        margin-bottom: 0;
    }
    
    .feedback-user-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .feedback-user-info .email-notice {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .feedback-actions {
        flex-direction: column;
    }
    
    .feedback-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================ */
/* PROCESE ÎN PRACTICĂ - STYLES                */
/* ============================================ */

.pmbok8-processes-practice-section {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.processes-practice-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* View Toggle */
.pp-view-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    justify-content: center;
}

.pp-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #374151;
}

.pp-toggle-btn:hover {
    border-color: #10b981;
    background: #f0fdf4;
    color: #059669;
}

.pp-toggle-btn.active {
    border-color: #10b981;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Views */
.pp-view {
    display: none;
}

.pp-view.active {
    display: block;
}

/* Domain Groups */
.pp-domain-group,
.pp-focus-group {
    background: white;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.pp-domain-header,
.pp-focus-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pp-domain-header:hover,
.pp-focus-header:hover {
    filter: brightness(1.05);
}

.pp-domain-icon,
.pp-focus-icon {
    font-size: 28px;
}

.pp-domain-header h3,
.pp-focus-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pp-domain-count,
.pp-focus-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Focus Header Colors */
.pp-focus-header.initiating { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.pp-focus-header.planning { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.pp-focus-header.executing { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.pp-focus-header.monitoring { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.pp-focus-header.closing { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* Process List */
.pp-process-list {
    padding: 15px;
}

.pp-process-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pp-process-item:hover {
    background: #f0fdf4;
    border-color: #10b981;
    transform: translateX(5px);
}

/* Locked process items (requires account) */
.pp-process-item.practice-locked {
    position: relative;
    opacity: 0.75;
}

.pp-process-item.practice-locked .pp-num {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.pp-process-item.practice-locked .pp-focus-tag,
.pp-process-item.practice-locked .pp-domain-tag {
    display: none;
}

.pp-process-item.practice-locked::after {
    content: '🔒 Cont gratuit';
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.pp-process-item.practice-locked:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

.pp-process-item.practice-locked:hover::after {
    content: '🔐 Creează cont';
}

.pp-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.pp-name {
    flex: 1;
    font-weight: 500;
    color: #1e293b;
}

.pp-focus-tag,
.pp-domain-tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Focus Tags */
.pp-focus-tag.initiating { background: #dbeafe; color: #1d4ed8; }
.pp-focus-tag.planning { background: #ede9fe; color: #6d28d9; }
.pp-focus-tag.executing { background: #fef3c7; color: #b45309; }
.pp-focus-tag.monitoring { background: #d1fae5; color: #047857; }
.pp-focus-tag.closing { background: #fee2e2; color: #b91c1c; }

/* Domain Tags */
.pp-domain-tag.governance { background: #e0e7ff; color: #4338ca; }
.pp-domain-tag.scope { background: #fce7f3; color: #be185d; }
.pp-domain-tag.schedule { background: #cffafe; color: #0e7490; }
.pp-domain-tag.finance { background: #fef9c3; color: #a16207; }
.pp-domain-tag.stakeholders { background: #f3e8ff; color: #7e22ce; }
.pp-domain-tag.resources { background: #fed7aa; color: #c2410c; }
.pp-domain-tag.risk { background: #fecaca; color: #b91c1c; }

/* Modal Overlay */
.pp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pp-modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.pp-modal {
    background: white;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s ease;
}

.pp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    border-radius: 20px 20px 0 0;
}

.pp-modal-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pp-modal-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
}

.pp-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.pp-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pp-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.pp-modal-meta {
    display: flex;
    gap: 8px;
    /* Inside header — no separate background or padding needed */
    padding: 0;
    background: none;
    border: none;
    flex-shrink: 0;
}

.pp-meta-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    /* On green header — white/translucent pills */
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

.pp-meta-tag.domain {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}

.pp-meta-tag.focus.initiating {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

.pp-meta-tag.focus.planning {
    background: #ede9fe;
    color: #6d28d9;
}

.pp-meta-tag.focus.executing {
    background: #fef3c7;
    color: #b45309;
}

.pp-meta-tag.focus.monitoring {
    background: #d1fae5;
    color: #047857;
}

.pp-meta-tag.focus.closing {
    background: #fee2e2;
    color: #b91c1c;
}

.pp-modal-description {
    padding: 20px 30px;
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

/* Approach Tabs */
.pp-approach-tabs {
    display: flex;
    gap: 0;
    padding: 0 30px;
    background: #f1f5f9;
}

.pp-approach-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 25px;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.pp-approach-tab:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
}

.pp-approach-tab.active {
    color: #059669;
    background: white;
    border-bottom-color: #10b981;
}

.pp-approach-tab .approach-icon {
    font-size: 20px;
}

/* Approach Content */
.pp-approach-content {
    display: none;
    padding: 25px 30px;
}

.pp-approach-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

/* Example Scenario */
.pp-example-scenario {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #a7f3d0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
}

.pp-example-scenario.adaptive {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #d8b4fe;
}

.pp-example-scenario.adaptive .pp-scenario-header h4 {
    color: #7c3aed;
}

.pp-example-scenario.adaptive .scenario-context {
    color: #6b21a8;
}

.pp-scenario-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.scenario-icon {
    font-size: 28px;
}

.pp-scenario-header h4 {
    margin: 0;
    color: #047857;
    font-size: 17px;
}

.scenario-context {
    margin: 0;
    color: #065f46;
    line-height: 1.6;
}

/* Storyboard */
.pp-storyboard {
    background: #fafafa;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    position: relative;
}

.pp-storyboard.adaptive {
    background: #faf5ff;
}

.storyboard-timeline {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-bottom: 30px;
    position: relative;
}

.storyboard-timeline.adaptive .timeline-progress {
    background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%);
}

.timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 2px;
    width: 20%;
    transition: width 0.5s ease;
}

.storyboard-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.storyboard-step {
    display: flex;
    gap: 20px;
    opacity: 0.4;
    transition: all 0.4s ease;
}

.storyboard-step.active {
    opacity: 1;
}

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

.step-indicator.adaptive .step-number {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.step-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.step-line {
    width: 2px;
    flex: 1;
    background: #e5e7eb;
    margin-top: 8px;
}

.step-content {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.storyboard-step.active .step-content {
    border-color: #10b981;
}

.pp-storyboard.adaptive .storyboard-step.active .step-content {
    border-color: #8b5cf6;
}

.step-content h5 {
    margin: 0 0 10px 0;
    color: #1e293b;
    font-size: 16px;
}

.step-content p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
}

/* Step Animation Container */
.step-animation {
    width: 100%;
    height: 120px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-svg {
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* SVG Text Styles */
.svg-label { font-size: 11px; fill: #475569; font-weight: 600; }
.svg-small-label { font-size: 10px; fill: #64748b; }
.svg-title { font-size: 12px; fill: #1e293b; font-weight: 700; }
.svg-title-small { font-size: 10px; fill: #1e293b; font-weight: 700; }
.svg-tiny-text { font-size: 8px; fill: #64748b; }
.svg-icon { font-size: 24px; }
.svg-icon-small { font-size: 16px; }
.svg-icon-white { font-size: 18px; fill: white; }
.svg-question { font-size: 18px; fill: #f59e0b; font-weight: 700; }
.svg-stamp-text { font-size: 8px; fill: #22c55e; font-weight: 700; }
.svg-date { font-size: 7px; fill: #22c55e; }
.svg-time { font-size: 11px; fill: #059669; font-weight: 600; }
.svg-big-icon { font-size: 30px; }
.svg-resource { font-size: 20px; }
.svg-col-header { font-size: 8px; fill: #475569; font-weight: 600; }
.svg-idea-icon { font-size: 35px; }

/* SVG Animations */
@keyframes svgFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes svgPop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes svgDraw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes svgSlideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes svgSignature {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes svgStamp {
    0% { transform: scale(2); opacity: 0; }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes svgRay {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes svgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes svgFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes svgSticky {
    from { transform: scale(0) rotate(-10deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes svgBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes svgSlideRight {
    from { transform: translateX(-10px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes svgCardMove {
    0% { transform: translateX(-55px); }
    100% { transform: translateX(0); }
}

.anim-fade-in { animation: svgFadeIn 0.5s ease forwards; }
.anim-fade-in-delay { animation: svgFadeIn 0.5s ease 0.3s forwards; opacity: 0; }
.anim-pop { animation: svgPop 0.5s ease forwards; }
.anim-pop-delay { animation: svgPop 0.5s ease 0.3s forwards; opacity: 0; }
.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: svgDraw 0.8s ease forwards; }
.anim-slide-in { animation: svgSlideIn 0.4s ease forwards; opacity: 0; }
.anim-signature { stroke-dasharray: 100; stroke-dashoffset: 100; animation: svgSignature 1s ease forwards; }
.anim-stamp { animation: svgStamp 0.6s ease forwards; }
.anim-ray { transform-origin: left center; animation: svgRay 0.4s ease forwards; }
.anim-pulse { animation: svgPulse 2s ease infinite; }
.anim-float { animation: svgFloat 2s ease infinite; }
.anim-sticky { animation: svgSticky 0.4s ease forwards; transform-origin: center; }
.anim-bounce { animation: svgBounce 1s ease infinite; }
.anim-slide-right { animation: svgSlideRight 0.5s ease forwards; }
.anim-card { animation: svgFadeIn 0.4s ease forwards; }
.anim-card-move { animation: svgCardMove 0.8s ease 0.5s forwards; }

/* Storyboard Controls - Discrete Sticky */
.storyboard-controls {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 10px 14px;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

.pp-storyboard.adaptive .storyboard-controls {
    background: rgba(250, 245, 255, 0.84);
    border-color: rgba(221, 214, 254, 0.9);
}

.storyboard-btn {
    padding: 10px 18px;
    min-height: 42px;
    border: 2px solid #cbd5e1;
    background: #f1f5f9;
    color: #475569;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.storyboard-btn:hover:not(:disabled) {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.storyboard-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #94a3b8;
}

.storyboard-btn.primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    color: white;
}

.storyboard-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.storyboard-btn.primary.adaptive {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.storyboard-btn.primary.adaptive:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

@media (max-width: 768px) {
    .storyboard-controls {
        bottom: 10px;
        width: calc(100% - 16px);
        padding: 8px 10px;
        gap: 8px;
    }

    .storyboard-btn {
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Key Outputs */
.pp-key-outputs {
    background: #f0fdf4;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.pp-key-outputs.adaptive {
    background: #faf5ff;
}

.pp-key-outputs h5 {
    margin: 0 0 15px 0;
    color: #047857;
    font-size: 15px;
}

.pp-key-outputs.adaptive h5 {
    color: #6d28d9;
}

.outputs-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.output-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.output-icon {
    font-size: 18px;
}

/* Comparison Box */
.pp-comparison-box {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-top: 25px;
}

.pp-comparison-box h5 {
    margin: 0 0 15px 0;
    color: #1e293b;
}

.comparison-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 8px;
    background: white;
}

.comparison-row.header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-weight: 700;
}

.comp-aspect {
    font-weight: 600;
    color: #64748b;
}

.comparison-row.header .comp-aspect,
.comparison-row.header .comp-predictive,
.comparison-row.header .comp-adaptive {
    color: white;
}

.comp-predictive {
    color: #4338ca;
}

.comp-adaptive {
    color: #7c3aed;
}

/* Modal Footer */
.pp-modal-footer {
    padding: 20px 30px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 20px 20px;
    text-align: center;
}

.pp-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pp-coming-soon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .pp-view-toggle {
        flex-direction: column;
    }
    
    .pp-process-item {
        flex-wrap: wrap;
    }
    
    .pp-focus-tag,
    .pp-domain-tag {
        margin-left: auto;
    }
    
    .pp-modal {
        margin: 10px;
        max-height: 95vh;
    }
    
    .pp-approach-tabs {
        flex-direction: column;
        padding: 10px;
    }
    
    .pp-approach-tab {
        justify-content: center;
    }
    
    .comparison-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .comparison-row.header {
        display: none;
    }
    
    .comp-predictive::before {
        content: '📋 Predictiv: ';
        font-weight: 600;
    }
    
    .comp-adaptive::before {
        content: '🔄 Adaptiv: ';
        font-weight: 600;
    }
}

/* ============================================ */
/* MY SPACE STYLES                              */
/* ============================================ */

.myspace-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

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

.myspace-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.myspace-subtitle {
    color: #64748b;
    margin: 5px 0 0 0;
    font-size: 14px;
}

.myspace-info-note {
    color: #1e40af;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    margin: 12px 0 0 0;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.myspace-info-note strong {
    color: #1e3a8a;
}

.myspace-info-note em {
    font-style: normal;
    background: rgba(59, 130, 246, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

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

.myspace-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.myspace-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.myspace-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.myspace-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.myspace-btn.secondary:hover {
    background: #e2e8f0;
}

.myspace-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.myspace-btn.danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.myspace-btn.icon {
    padding: 8px 14px;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.myspace-btn.icon:hover {
    background: #f1f5f9;
    color: #475569;
}

.myspace-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Login Required */
.myspace-login-required {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.login-message-card {
    text-align: center;
    padding: 50px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    border: 2px dashed #cbd5e1;
    max-width: 400px;
}

.login-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.login-message-card h3 {
    color: #1e293b;
    margin: 0 0 10px 0;
}

.login-message-card p {
    color: #64748b;
    margin: 0 0 25px 0;
}

/* Pro Required (for My Space access) */
.myspace-pro-required {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
    padding: 20px;
}

.pro-required-card {
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 20px;
    border: 2px solid #fcd34d;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
}

.pro-required-icon {
    font-size: 70px;
    margin-bottom: 20px;
}

.pro-required-card h3 {
    color: #92400e;
    margin: 0 0 15px 0;
    font-size: 1.4rem;
}

.pro-required-card > p {
    color: #78350f;
    margin: 0 0 25px 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.pro-required-features {
    text-align: left;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.pro-required-features .feature-item {
    padding: 8px 0;
    color: #374151;
    font-size: 0.95rem;
}

.pro-required-features .feature-item strong {
    color: #1e293b;
}

.pro-required-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pro-required-actions .myspace-btn {
    min-width: 160px;
}

/* Toolbar */
.myspace-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.projects-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #64748b;
}

.counter-bar {
    width: 80px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.counter-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.projects-search-input {
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    width: 250px;
    transition: border-color 0.2s ease;
}

.projects-search-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.projects-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    margin: 0 auto 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.projects-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    border: 2px dashed #cbd5e1;
}

.empty-icon {
    font-size: 70px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.projects-empty h3 {
    color: #1e293b;
    margin: 0 0 10px 0;
}

.projects-empty p {
    color: #64748b;
    margin: 0 0 25px 0;
}

/* Project Card */
.project-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: #6366f1;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.project-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    padding-right: 10px;
}

.project-card-menu {
    position: relative;
}

.project-menu-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.project-menu-btn:hover {
    background: #e2e8f0;
}

.project-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 100;
    display: none;
    overflow: hidden;
}

.project-menu-dropdown.active {
    display: block;
}

.project-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.project-menu-item:hover {
    background: #f1f5f9;
}

.project-menu-item.danger {
    color: #ef4444;
}

.project-menu-item.danger:hover {
    background: #fef2f2;
}

.project-card-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.project-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.project-tag.industry {
    background: #dbeafe;
    color: #1d4ed8;
}

.project-tag.type {
    background: #f3e8ff;
    color: #7c3aed;
}

.project-card-description {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 15px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card-analyses {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.analysis-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.analysis-badge.tailoring {
    background: #dcfce7;
    color: #166534;
}

.analysis-badge.risk {
    background: #fef3c7;
    color: #92400e;
}

.analysis-badge.empty {
    background: #f1f5f9;
    color: #94a3b8;
}

.project-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #94a3b8;
}

/* Modal Styles */
.myspace-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.myspace-modal-overlay.active {
    display: flex;
}

.myspace-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

.myspace-modal.myspace-modal-small {
    max-width: 420px;
}

.myspace-modal.myspace-modal-large {
    max-width: 700px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.myspace-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.myspace-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.myspace-modal-header.danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.myspace-modal-header.danger h3 {
    color: #dc2626;
}

.myspace-modal-header.warning {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}

.myspace-modal-header.warning h3 {
    color: #ca8a04;
}

.myspace-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    color: #64748b;
    transition: all 0.2s ease;
}

.myspace-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

.myspace-modal-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.myspace-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 25px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.myspace-modal-footer .footer-left {
    display: flex;
    gap: 10px;
    margin-right: auto;
}

.myspace-modal-footer .footer-right {
    display: flex;
    gap: 10px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-group label .required {
    color: #ef4444;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group.half {
    flex: 1;
}

.myspace-input,
.myspace-select,
.myspace-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.myspace-input:focus,
.myspace-select:focus,
.myspace-textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.myspace-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background: #eff6ff;
    border-radius: 10px;
    margin-top: 10px;
}

.form-info .info-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.form-info p {
    margin: 0;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

/* Delete Warning */
.delete-warning,
.limit-warning {
    text-align: center;
    padding: 20px;
}

.warning-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.warning-text {
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
}

/* Project View Modal */
.project-view-section {
    margin-bottom: 25px;
}

.project-view-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.project-view-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.project-view-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 12px;
    color: #475569;
}

.project-view-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0 0 0;
}

.project-analyses-section h4 {
    font-size: 16px;
    color: #1e293b;
    margin: 0 0 15px 0;
}

.analyses-grid {
    display: grid;
    gap: 15px;
}

.analysis-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.analysis-icon {
    font-size: 30px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.analysis-info {
    flex: 1;
}

.analysis-info h5 {
    font-size: 15px;
    color: #1e293b;
    margin: 0 0 5px 0;
}

.analysis-status {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.analysis-status.has-data {
    color: #059669;
}

.analysis-actions {
    display: flex;
    gap: 8px;
}

.analysis-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.analysis-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.analysis-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.analysis-btn.secondary {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.analysis-btn.secondary:hover {
    background: #f1f5f9;
}

/* Section Toggle */
.section-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: #f1f5f9;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    transition: background 0.2s ease;
}

.section-toggle:hover {
    background: #e2e8f0;
}

.toggle-icon {
    transition: transform 0.2s ease;
}

.section-toggle.active .toggle-icon {
    transform: rotate(90deg);
}

.section-content {
    padding: 20px;
    background: #f8fafc;
    border-radius: 0 0 10px 10px;
    margin-top: -5px;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.data-item {
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.data-item label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-item span {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

/* Import Modal */
.import-dropzone {
    text-align: center;
    padding: 50px 30px;
    border: 2px dashed #cbd5e1;
    border-radius: 15px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.import-dropzone.dragover {
    border-color: #6366f1;
    background: #eff6ff;
}

.dropzone-icon {
    font-size: 50px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.import-dropzone p {
    margin: 0 0 15px 0;
    color: #64748b;
}

.dropzone-hint {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 15px !important;
}

.import-preview {
    padding: 20px;
    background: #ecfdf5;
    border-radius: 12px;
    border: 1px solid #a7f3d0;
}

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

.preview-icon {
    font-size: 24px;
}

.preview-filename {
    font-weight: 600;
    color: #065f46;
}

.preview-info p {
    margin: 8px 0;
    font-size: 14px;
    color: #047857;
}

/* Export Options */
.export-options {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.export-option:hover {
    border-color: #6366f1;
    background: #eff6ff;
}

.option-icon {
    font-size: 30px;
}

.option-label {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.option-desc {
    font-size: 13px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .myspace-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .myspace-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .myspace-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .projects-search-input {
        width: 100%;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .myspace-modal-footer {
        flex-direction: column;
    }
    
    .myspace-modal-footer .footer-left,
    .myspace-modal-footer .footer-right {
        width: 100%;
        justify-content: center;
    }
    
    .analysis-card {
        flex-direction: column;
        text-align: center;
    }
    
    .analysis-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================ */
/* DECISION REPLAY™ Styles                      */
/* ============================================ */

.pmbok8-decision-replay-section {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 50%, #fefce8 100%);
}

.decision-replay-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Loading State */
.dr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
}

.dr-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: dr-spin 1s linear infinite;
}

@keyframes dr-spin {
    to { transform: rotate(360deg); }
}

/* Login Required */
.dr-login-required {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.dr-login-card {
    text-align: center;
    padding: 50px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 400px;
}

.dr-login-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.dr-login-card h3 {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 10px;
}

.dr-login-card p {
    color: #64748b;
    margin-bottom: 25px;
}

/* Buttons */
.dr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dr-btn.primary {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    color: white;
}

.dr-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
}

.dr-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dr-btn.secondary {
    background: white;
    color: #475569;
    border: 2px solid #e2e8f0;
}

.dr-btn.secondary:hover {
    border-color: #f97316;
    color: #f97316;
}

.dr-btn.large {
    padding: 16px 40px;
    font-size: 18px;
}

.dr-btn.small {
    padding: 8px 16px;
    font-size: 13px;
}

/* Screen Container */
.dr-screen {
    animation: dr-fadeIn 0.3s ease;
}

@keyframes dr-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* SCREEN 0: Overview */
.dr-overview {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.dr-scenario-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.dr-scenario-title {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.2;
}

.dr-scenario-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 25px;
}

.dr-project-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.dr-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dr-fact .fact-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.dr-fact .fact-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dr-fact .fact-value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.dr-decision-points-preview h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.dr-dp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dr-dp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.dr-dp-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.dr-dp-item:hover {
    border-left-color: #f97316;
    background: #fff7ed;
}

/* Baseline Card */
.dr-baseline-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.dr-baseline-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.dr-baseline-note {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
}

.dr-domains-baseline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dr-domain-bar {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 12px;
}

.dr-domain-bar .domain-name {
    font-size: 13px;
    color: #475569;
}

.dr-domain-bar .domain-level {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.dr-domain-bar .level-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316 0%, #dc2626 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.dr-domain-bar .level-label {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
}

/* History Preview */
.dr-history-preview {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #e2e8f0;
}

.dr-history-preview h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.dr-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dr-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
}

.dr-history-item .history-style {
    font-weight: 600;
    color: #f97316;
}

.dr-history-item .history-date {
    color: #94a3b8;
}

/* Overview Actions */
.dr-overview-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #fcd34d33;
}

/* SCREEN 1: Decision Point */
.dr-decision-header {
    margin-bottom: 30px;
}

.dr-progress {
    margin-bottom: 20px;
}

.dr-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 15px;
}

.dr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316 0%, #dc2626 100%);
    transition: width 0.5s ease;
}

.dr-progress-steps {
    display: flex;
    justify-content: space-between;
}

.dr-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #e2e8f0;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.dr-step.active {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    color: white;
    transform: scale(1.1);
}

.dr-step.completed {
    background: #22c55e;
    color: white;
}

.dr-dp-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dr-dp-badge {
    padding: 6px 14px;
    background: #1e293b;
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.dr-dp-month {
    color: #64748b;
    font-size: 14px;
}

.dr-decision-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    margin-bottom: 30px;
}

.dr-context-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.dr-warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 15px;
}

.dr-warning-badge.risk { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.dr-warning-badge.stakeholder { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.dr-warning-badge.budget { background: #d1fae5; border-color: #10b981; color: #065f46; }

.dr-context-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.dr-context-text {
    font-size: 15px;
    color: #475569;
    line-height: 1.7;
}

.dr-baseline-summary {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-top: 20px;
}

.dr-baseline-summary h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
}

.dr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dr-kpi {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.dr-kpi .kpi-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.dr-kpi .kpi-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.dr-kpi .kpi-value.positive { color: #22c55e; }
.dr-kpi .kpi-value.negative { color: #ef4444; }
.dr-kpi .kpi-value.warning { color: #f59e0b; }

/* Options */
.dr-options-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
}

.dr-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dr-option {
    padding: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dr-option:hover {
    border-color: #f97316;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15);
}

.dr-option.selected {
    border-color: #f97316;
    background: #fff7ed;
}

.dr-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.dr-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
}

.dr-option.selected .dr-option-letter {
    background: #f97316;
    color: white;
}

.dr-option-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.dr-option-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.dr-option-preview {
    display: flex;
    gap: 15px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.dr-preview-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.dr-preview-item .preview-icon {
    font-size: 14px;
}

.dr-preview-item .preview-value {
    font-weight: 600;
}

.dr-preview-item .preview-value.up { color: #ef4444; }
.dr-preview-item .preview-value.down { color: #22c55e; }

.dr-compare-toggle {
    margin-top: 15px;
    text-align: center;
}

.dr-decision-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* SCREEN 2: Impact View */
.dr-impact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.dr-impact-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.dr-view-toggle {
    display: flex;
    gap: 5px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
}

.dr-toggle-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dr-toggle-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dr-impact-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.dr-tab-btn {
    padding: 10px 20px;
    background: #f1f5f9;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dr-tab-btn.active {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    color: white;
}

.dr-tab-content {
    display: none;
    animation: dr-fadeIn 0.3s ease;
}

.dr-tab-content.active {
    display: block;
}

/* Tailoring Changes */
.dr-tailoring-changes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.dr-process-change {
    padding: 15px;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #e2e8f0;
}

.dr-process-change.activate { border-left-color: #22c55e; background: #f0fdf4; }
.dr-process-change.intensify { border-left-color: #f59e0b; background: #fffbeb; }
.dr-process-change.relax { border-left-color: #3b82f6; background: #eff6ff; }

.dr-process-change .change-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.dr-process-change.activate .change-type { color: #16a34a; }
.dr-process-change.intensify .change-type { color: #d97706; }
.dr-process-change.relax .change-type { color: #2563eb; }

.dr-process-change .process-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* Risks Grid */
.dr-risks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dr-risk-section {
    padding: 20px;
    border-radius: 12px;
}

.dr-risk-section.mitigated {
    background: #f0fdf4;
    border: 1px solid #22c55e;
}

.dr-risk-section.introduced {
    background: #fef2f2;
    border: 1px solid #ef4444;
}

.dr-risk-section h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.dr-risk-section.mitigated h5 { color: #16a34a; }
.dr-risk-section.introduced h5 { color: #dc2626; }

.dr-risk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dr-risk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

/* Stakeholders Chart */
.dr-stakeholders-chart {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: white;
    padding: 25px;
    border-radius: 16px;
}

.dr-stakeholder-bar {
    display: grid;
    grid-template-columns: 130px 1fr 50px 110px;
    align-items: center;
    gap: 12px;
}

.dr-stakeholder-bar .sh-name {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.dr-stakeholder-bar .sh-bar {
    height: 24px;
    background: #f1f5f9;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.dr-stakeholder-bar .sh-fill {
    position: absolute;
    left: 50%;
    height: 100%;
    background: #22c55e;
    transition: all 0.5s ease;
}

.dr-stakeholder-bar .sh-fill.negative {
    background: #ef4444;
    transform: translateX(-100%);
}

.dr-stakeholder-bar .sh-value {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.dr-stakeholder-bar .sh-value.positive { color: #22c55e; }
.dr-stakeholder-bar .sh-value.negative { color: #ef4444; }

.dr-stakeholder-bar .sh-desc {
    font-size: 11px;
    color: #64748b;
}

/* Metrics Grid */
.dr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dr-metric-card {
    padding: 25px;
    background: white;
    border-radius: 16px;
    text-align: center;
}

.dr-metric-card .metric-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.dr-metric-card .metric-label {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 5px;
}

.dr-metric-card .metric-value {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
}

.dr-metric-card .metric-value.positive { color: #22c55e; }
.dr-metric-card .metric-value.negative { color: #ef4444; }
.dr-metric-card .metric-value.warning { color: #f59e0b; }

.dr-metric-card .metric-change {
    font-size: 13px;
    margin-top: 5px;
}

/* AI Panel */
.dr-ai-panel {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    margin-top: 25px;
    overflow: hidden;
}

.dr-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    cursor: pointer;
}

.dr-ai-header .ai-icon {
    font-size: 24px;
}

.dr-ai-header .ai-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.dr-ai-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.dr-ai-panel.collapsed .dr-ai-toggle {
    transform: rotate(-90deg);
}

.dr-ai-content {
    padding: 0 20px 20px;
    color: #cbd5e1;
}

.dr-ai-panel.collapsed .dr-ai-content {
    display: none;
}

#dr-ai-explanation {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.dr-ai-mapping {
    padding-top: 15px;
    border-top: 1px solid #475569;
}

.dr-ai-mapping .mapping-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 10px;
    display: block;
}

.dr-ai-mapping .mapping-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dr-ai-mapping .domain-chip {
    padding: 5px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 12px;
    color: #f8fafc;
}

.dr-impact-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* SCREEN 3: Compare */
.dr-compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.dr-compare-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.dr-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dr-compare-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

.dr-compare-card:hover {
    border-color: #f97316;
}

.dr-compare-card .card-header {
    padding: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.dr-compare-card .card-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #e2e8f0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 10px;
}

.dr-compare-card .card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
}

.dr-compare-card .card-subtitle {
    font-size: 13px;
    color: #64748b;
}

.dr-compare-card .card-body {
    padding: 20px;
}

.dr-compare-card .compare-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dr-compare-card .compare-metric:last-child {
    border-bottom: none;
}

.dr-compare-card .metric-name {
    font-size: 13px;
    color: #64748b;
}

.dr-compare-card .metric-val {
    font-size: 14px;
    font-weight: 600;
}

.dr-compare-card .metric-val.positive { color: #22c55e; }
.dr-compare-card .metric-val.negative { color: #ef4444; }
.dr-compare-card .metric-val.neutral { color: #64748b; }

.dr-compare-card .card-footer {
    padding: 15px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.dr-compare-card .style-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* SCREEN 4: Summary */
.dr-summary-header {
    text-align: center;
    padding: 40px 0;
}

.dr-summary-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.dr-summary-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
}

.dr-summary-header p {
    font-size: 18px;
    color: #64748b;
}

.dr-summary-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.dr-pm-style-card {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    border-radius: 16px;
    padding: 25px;
    color: white;
    margin-bottom: 25px;
}

.dr-pm-style-card h4 {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.pm-style-badge {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
}

.pm-style-desc {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
}

.dr-decisions-timeline h4,
.dr-final-outcome h4,
.dr-learnings h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.dr-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dr-timeline-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.dr-timeline-item .timeline-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.dr-timeline-item .timeline-decision {
    flex: 1;
    font-size: 13px;
    color: #1e293b;
}

.dr-timeline-item .timeline-style {
    font-size: 11px;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 20px;
    color: #64748b;
}

.dr-final-outcome {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.dr-outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.outcome-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    text-align: center;
}

.outcome-item .outcome-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.outcome-item .outcome-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 5px;
}

.outcome-item .outcome-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.dr-learnings {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.dr-learnings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dr-learning-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.dr-learning-item .learning-icon {
    font-size: 20px;
}

.dr-learning-item .learning-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

.dr-summary-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 1024px) {
    .dr-overview {
        grid-template-columns: 1fr;
    }
    
    .dr-decision-content {
        grid-template-columns: 1fr;
    }
    
    .dr-summary-content {
        grid-template-columns: 1fr;
    }
    
    .dr-compare-grid {
        grid-template-columns: 1fr;
    }
    
    .dr-tailoring-changes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dr-project-facts {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dr-tailoring-changes {
        grid-template-columns: 1fr;
    }
    
    .dr-risks-grid {
        grid-template-columns: 1fr;
    }
    
    .dr-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .dr-overview-actions {
        flex-direction: column;
    }
    
    .dr-btn.large {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================ */
/* FREE VERSION INFO BANNERS                    */
/* ============================================ */

/* My Space Free Banner */
.myspace-free-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 16px;
    padding: 20px 25px;
    margin-bottom: 20px;
}

.free-banner-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.free-banner-icon {
    font-size: 2.5rem;
}

.free-banner-text {
    font-size: 1.25rem;
    color: #1e40af;
    line-height: 1.6;
}

.free-banner-text strong {
    color: #1e3a8a;
    font-size: 1.3rem;
}

.pro-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
}

.pro-available,
.pro-available-small {
    color: #6b7280;
    font-size: 1.1rem;
    font-style: italic;
}

.pro-available-small {
    font-size: 1rem;
}

/* Wizard Free Banner */
.wizard-free-banner {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 14px;
    padding: 18px 25px;
    margin: 0 20px 20px 20px;
}

.free-usage-info {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.25rem;
    color: #166534;
}

.usage-icon {
    font-size: 1.8rem;
}

.usage-text {
    font-size: 1.25rem;
}

.usage-text strong {
    color: #15803d;
    font-size: 1.35rem;
}

.usage-separator {
    color: #86efac;
    font-size: 1.5rem;
}

.pro-upgrade-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 1.15rem;
}

/* Zero analyses left - warning state */
.wizard-free-banner.warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fbbf24;
}

.wizard-free-banner.warning .free-usage-info {
    color: #92400e;
}

.wizard-free-banner.warning .usage-text strong {
    color: #b45309;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .free-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .free-usage-info {
        flex-direction: column;
        gap: 5px;
    }
    
    .usage-separator {
        display: none;
    }
}

/* ============================================ */
/* TIER SYSTEM STYLES                          */
/* ============================================ */

/* Card Access Badges */
.pmbok8-card-badge.account {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.pmbok8-card-badge.pro {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.pmbok8-card-badge.enterprise {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

/* Feature cards with access restrictions */
.pmbok8-feature-card[data-access="free"]:not(.unlocked) .pmbok8-card-action,
.pmbok8-feature-card[data-access="pro"]:not(.unlocked) .pmbok8-card-action {
    opacity: 0.9;
}

/* ============================================ */
/* AUTH MODAL STYLES                           */
/* ============================================ */
.pmbok8-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pmbok8-auth-modal {
    background: white;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}

.auth-modal-close:hover {
    color: #374151;
}

.auth-form-container {
    padding: 40px;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.auth-header h2 {
    font-size: 1.5rem;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.auth-header p {
    color: #6b7280;
    margin: 0;
    font-size: 0.95rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.auth-field label .optional {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.85rem;
}

.auth-field input {
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-field input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.auth-field .field-hint {
    font-size: 0.8rem;
    color: #9ca3af;
}

.auth-field-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4b5563;
}

.auth-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.auth-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-submit-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-message {
    text-align: center;
    font-size: 0.9rem;
    min-height: 24px;
}

.auth-message .success {
    color: #16a34a;
}

.auth-message .error {
    color: #dc2626;
}

.auth-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    margin-top: 20px;
    color: #6b7280;
    font-size: 0.95rem;
}

.auth-footer a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* ============================================ */
/* PRICING MODAL STYLES                        */
/* ============================================ */
.pmbok8-pricing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.pmbok8-pricing-modal {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    max-width: 1100px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
    color: white;
    padding: 40px;
}

.pricing-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
}

.pricing-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pricing-header {
    text-align: center;
    margin-bottom: 40px;
}

.pricing-header h2 {
    font-size: 2rem;
    margin: 0 0 10px 0;
    color: white;
}

.pricing-header p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0;
}

.pricing-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.pricing-plan {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    transition: transform 0.3s, border-color 0.3s;
}

.pricing-plan:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.pricing-plan.featured {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.4);
    transform: scale(1.02);
}

.pricing-plan.featured:hover {
    transform: scale(1.02) translateY(-5px);
}

.plan-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.plan-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.plan-badge.free {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.plan-badge.pro {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.plan-badge.enterprise {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.plan-name {
    font-size: 1.5rem;
    color: white;
    margin: 10px 0;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.plan-price .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}

.plan-price .currency {
    font-size: 1.2rem;
    color: #94a3b8;
}

.plan-price .period {
    font-size: 0.9rem;
    color: #64748b;
}

.plan-price-alt {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 5px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.plan-features li {
    padding: 10px 0;
    font-size: 0.95rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li.included {
    color: #e2e8f0;
}

.plan-features li.included.highlight {
    color: #fbbf24;
    font-weight: 500;
}

.plan-features li.excluded {
    color: #64748b;
    text-decoration: line-through;
    opacity: 0.7;
}

.plan-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}

.plan-btn.primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.plan-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.plan-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.plan-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.plan-note {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.plan-note strong {
    color: #fbbf24;
}

.pricing-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 0.95rem;
}

.pricing-footer strong {
    color: #a78bfa;
}

/* ============================================ */
/* UPGRADE MODAL STYLES                        */
/* ============================================ */
.pmbok8-upgrade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pmbok8-upgrade-modal {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 16px;
    max-width: 450px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.3s ease;
}

.upgrade-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.upgrade-modal-close:hover {
    color: white;
}

.upgrade-content {
    padding: 40px;
    text-align: center;
}

.upgrade-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.upgrade-content h2 {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 10px 0;
}

.upgrade-content p {
    color: #cbd5e1;
    font-size: 1rem;
    margin: 0 0 25px 0;
}

.upgrade-feature-info {
    margin-bottom: 25px;
}

.upgrade-tier-required {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 12px 20px;
    border-radius: 10px;
    color: #fbbf24;
    font-size: 1rem;
}

.upgrade-tier-required .tier-badge {
    background: rgba(251, 191, 36, 0.3);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.upgrade-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.upgrade-btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}

.upgrade-btn.primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.upgrade-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.upgrade-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.upgrade-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================ */
/* RESPONSIVE ADJUSTMENTS                      */
/* ============================================ */
@media (max-width: 900px) {
    .pricing-plans {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .pricing-plan.featured {
        transform: none;
        order: -1;
    }
    
    .pricing-plan.featured:hover {
        transform: translateY(-5px);
    }
    
    .pmbok8-pricing-modal {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .auth-form-container {
        padding: 25px;
    }
    
    .upgrade-actions {
        flex-direction: column;
    }
    
    .upgrade-btn {
        width: 100%;
    }
}

/* ============================================ */
/* CONTUL MEU (MY ACCOUNT) STYLES              */
/* ============================================ */

.pmbok8-account-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* Account Header */
.account-header {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 25px;
    color: white;
}

.account-avatar {
    flex-shrink: 0;
}

.account-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
}

.account-info {
    flex: 1;
}

.account-name {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.account-email {
    margin: 0 0 12px 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}

.account-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.account-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
}

.account-meta .meta-item {
    display: flex;
    flex-direction: column;
}

.account-meta .meta-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}

.account-meta .meta-value {
    font-size: 0.95rem;
    font-weight: 600;
}

.account-meta .code-value {
    font-family: monospace;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Account Cards */
.account-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    overflow: hidden;
}

.account-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.account-card .card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Plan Status Card Styles */
.plan-status-card {
    border: 2px solid #fcd34d;
}

.plan-status-content {
    padding: 25px;
}

.plan-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.plan-type-display {
    display: flex;
    align-items: center;
    gap: 15px;
}

.plan-icon {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 15px;
    border-radius: 16px;
}

.plan-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

.plan-duration {
    font-size: 0.9rem;
    color: #64748b;
}

.days-remaining-display {
    text-align: center;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    padding: 20px 30px;
    border-radius: 16px;
    border: 2px solid #10b981;
}

.days-remaining-display.warning {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #f59e0b;
}

.days-remaining-display.urgent {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    border-color: #ef4444;
    animation: pulse-urgent 2s infinite;
}

@keyframes pulse-urgent {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.days-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
}

.days-remaining-display.warning .days-number {
    color: #f59e0b;
}

.days-remaining-display.urgent .days-number {
    color: #ef4444;
}

.days-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 5px;
}

.plan-progress-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.plan-progress-bar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.plan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.plan-progress-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.plan-progress-fill.urgent {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.plan-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
}

.plan-renewal-cta {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 12px;
    border: 1px solid #fcd34d;
    text-align: center;
}

.renewal-warning {
    color: #92400e;
    font-size: 0.95rem;
    margin: 0 0 15px 0;
}

.renewal-info {
    color: #78350f;
    font-size: 0.95rem;
    margin: 0 0 15px 0;
}

.renewal-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.renewal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* Responsive for Plan Status Card */
@media (max-width: 600px) {
    .plan-main-info {
        flex-direction: column;
        text-align: center;
    }
    
    .plan-type-display {
        flex-direction: column;
    }
    
    .days-remaining-display {
        width: 100%;
        padding: 15px;
    }
    
    .days-number {
        font-size: 2rem;
    }
}

/* PDU Tracker Styles */
.pdu-tracker-content {
    padding: 25px;
}

.pdu-main-display {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 25px;
}

.pdu-circle {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.pdu-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pdu-circle .pdu-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}

.pdu-circle .pdu-progress {
    fill: none;
    stroke: url(#pdu-gradient);
    stroke: #10b981;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.pdu-circle .pdu-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pdu-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
}

.pdu-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.pdu-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pdu-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.pdu-stat .stat-icon {
    font-size: 1.5rem;
}

.pdu-stat .stat-content {
    display: flex;
    flex-direction: column;
}

.pdu-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.pdu-stat .stat-label {
    font-size: 0.8rem;
    color: #64748b;
}

.pdu-explanation {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.pdu-explanation .explanation-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pdu-explanation .explanation-text {
    font-size: 0.9rem;
    color: #1e40af;
    line-height: 1.5;
}

.pdu-claim-section {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.pdu-claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdu-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.claim-hint {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #64748b;
}

.pdu-complete-message {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #166534;
}

/* PDU Certification Info Section */
.pdu-certification-info {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.certification-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #3b82f6;
}

.certification-header .cert-icon {
    font-size: 1.5rem;
}

.certification-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e40af;
}

.certification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

.cert-group {
    padding: 18px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.cert-group.main-cert {
    border-left: 4px solid #3b82f6;
}

.cert-group.other-certs {
    border-left: 4px solid #8b5cf6;
}

.cert-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.cert-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdu-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 6px;
}

.pdu-category .category-name {
    font-size: 1rem;
    color: #334155;
    font-weight: 500;
}

.pdu-category .category-value {
    font-weight: 600;
    font-size: 1rem;
    color: #3b82f6;
    background: #eff6ff;
    padding: 4px 12px;
    border-radius: 20px;
}

.cert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 1rem;
}

.cert-item span:first-child {
    font-weight: 500;
    color: #1e293b;
}

.cert-item span:last-child {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
}

/* PDU Recommendation */
.pdu-recommendation {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border: 1px solid #f59e0b;
}

.pdu-recommendation .recommendation-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.pdu-recommendation .recommendation-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #78350f;
}

.pdu-recommendation .recommendation-text strong {
    color: #92400e;
}

/* Code Redemption Styles */
.code-redemption-content {
    padding: 25px;
}

.redemption-description {
    margin: 0 0 20px 0;
    color: #475569;
    line-height: 1.6;
}

.redemption-form {
    margin-bottom: 25px;
}

.redemption-form .form-group {
    margin-bottom: 15px;
}

.redemption-form label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.input-with-button {
    display: flex;
    gap: 10px;
}

.input-with-button input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-with-button input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-with-button input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.redemption-submit-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.redemption-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.redemption-submit-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.code-already-used {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 15px;
    background: #f0fdf4;
    border-radius: 8px;
    color: #166534;
    font-size: 0.9rem;
}

.redemption-result {
    margin-top: 15px;
}

.redemption-result.success {
    padding: 15px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    color: #166534;
}

.redemption-result.error {
    padding: 15px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c;
}

.code-types-info {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.code-type {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
}

.code-type .code-icon {
    font-size: 2rem;
}

.code-type .code-details {
    display: flex;
    flex-direction: column;
}

.code-type .code-details strong {
    font-size: 0.95rem;
    color: #1e293b;
}

.code-type .code-details span {
    font-size: 0.8rem;
    color: #64748b;
}

/* Quick Stats Styles */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 25px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    text-align: center;
}

.stat-box .stat-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.stat-box .stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.stat-box .stat-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 5px;
}

/* Login Required State */
.account-login-required {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 40px 20px;
}

.login-prompt-card {
    background: white;
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.login-prompt-card .prompt-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.login-prompt-card h2 {
    margin: 0 0 15px 0;
    font-size: 1.8rem;
    color: #1e293b;
}

.login-prompt-card > p {
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.6;
}

.prompt-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.prompt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prompt-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.prompt-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.prompt-btn.secondary {
    background: #f1f5f9;
    color: #1e293b;
}

.prompt-btn.secondary:hover {
    background: #e2e8f0;
}

.prompt-benefits {
    text-align: left;
    background: #f8fafc;
    padding: 20px 25px;
    border-radius: 12px;
}

.prompt-benefits h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: #64748b;
}

.prompt-benefits ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prompt-benefits li {
    padding: 8px 0;
    color: #1e293b;
    font-size: 0.95rem;
}

/* Responsive Account Styles */
@media (max-width: 768px) {
    .account-header {
        flex-direction: column;
        text-align: center;
    }
    
    .account-meta {
        text-align: center;
        flex-direction: row;
        gap: 20px;
    }
    
    .pdu-main-display {
        flex-direction: column;
        gap: 25px;
    }
    
    .code-types-info {
        flex-direction: column;
    }
    
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prompt-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .pmbok8-account-container {
        padding: 20px 15px;
    }
    
    .account-header {
        padding: 25px 20px;
    }
    
    .input-with-button {
        flex-direction: column;
    }
    
    .quick-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}


/* ============================================ */
/* PM DECISION PROFILE™ - Assessment System    */
/* ============================================ */

.pmbok8-decision-profile-section {
    background: var(--bg-primary);
}

.decision-profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Loading State */
.dp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 20px;
}

.dp-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: dp-spin 1s linear infinite;
}

@keyframes dp-spin {
    to { transform: rotate(360deg); }
}

/* ============================================ */
/* WELCOME SCREEN                              */
/* ============================================ */

.dp-welcome-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding: 20px 0;
}

.dp-welcome-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dp-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    padding: 8px 16px;
    border-radius: 20px;
    width: fit-content;
}

.dp-welcome-badge .badge-icon {
    font-size: 16px;
}

.dp-welcome-badge .badge-text {
    font-size: 13px;
    font-weight: 600;
    color: #6d28d9;
}

.dp-welcome-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.dp-welcome-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.dp-welcome-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.dp-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.dp-feature .feature-icon {
    font-size: 18px;
}

/* Profile Types */
.dp-profile-types h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.dp-types-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-type {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

.dp-type.conservative {
    border-left: 4px solid #3b82f6;
}

.dp-type.balanced {
    border-left: 4px solid #f59e0b;
}

.dp-type.aggressive {
    border-left: 4px solid #ef4444;
}

.dp-type .type-badge {
    font-size: 20px;
}

.dp-type .type-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 100px;
}

.dp-type .type-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Buttons */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.dp-btn.primary {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.dp-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.dp-btn.primary:disabled {
    background: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.dp-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.dp-btn.secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

.dp-btn.tertiary {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 20px;
}

.dp-btn.tertiary:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.dp-start-btn {
    margin-top: 10px;
    font-size: 16px;
    padding: 16px 32px;
}

/* Right Column - Preview Card */
.dp-welcome-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dp-preview-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
}

.dp-preview-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

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

.dp-preview-list li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.dp-preview-list .li-icon {
    color: #10b981;
    font-weight: bold;
    flex-shrink: 0;
}

.dp-preview-list li strong {
    color: var(--text-primary);
}

/* Pro Features */
.dp-pro-features {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-light);
}

.dp-pro-features .pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.dp-pro-features .pro-list .li-icon {
    color: #f59e0b;
}

/* Existing Profile */
.dp-existing-profile {
    background: linear-gradient(135deg, #ede9fe 0%, #fdf4ff 100%);
    border: 1px solid #c4b5fd;
    border-radius: 16px;
    padding: 24px;
}

.dp-existing-profile h4 {
    font-size: 16px;
    font-weight: 600;
    color: #5b21b6;
    margin: 0 0 16px 0;
}

.dp-existing-summary {
    margin-bottom: 16px;
}

.dp-existing-summary .existing-badge {
    font-size: 24px;
    font-weight: 700;
    color: #5b21b6;
}

.dp-existing-summary .existing-date {
    font-size: 13px;
    color: #7c3aed;
    margin-top: 4px;
}

.dp-existing-profile .dp-btn {
    width: 100%;
    margin-top: 8px;
}

/* ============================================ */
/* ASSESSMENT SCREEN                           */
/* ============================================ */

.dp-assessment-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Progress */
.dp-progress {
    margin-bottom: 24px;
}

.dp-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dp-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dp-progress-time {
    font-size: 13px;
    color: var(--text-secondary);
}

.dp-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.dp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Context Badge */
.dp-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1e40af;
}

.dp-context-badge .context-separator {
    color: #93c5fd;
}

/* Scenario Card */
.dp-scenario-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.dp-scenario-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.dp-scenario-text p {
    margin: 0 0 12px 0;
}

.dp-scenario-text p:last-child {
    margin-bottom: 0;
}

.dp-scenario-text strong {
    color: var(--text-primary);
}

.dp-scenario-text .scenario-context {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-light);
    font-size: 14px;
    color: var(--text-secondary);
}

/* Question Prompt */
.dp-question-prompt {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

/* Options */
.dp-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.dp-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.dp-option:hover {
    border-color: #c4b5fd;
    background: #faf5ff;
}

.dp-option.selected {
    border-color: #7c3aed;
    background: #ede9fe;
}

.dp-option .option-letter {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dp-option.selected .option-letter {
    background: #7c3aed;
    color: white;
}

.dp-option .option-content {
    flex: 1;
}

.dp-option .option-label {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.dp-option .option-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* Navigation */
.dp-nav {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* ============================================ */
/* PROCESSING SCREEN                           */
/* ============================================ */

.dp-processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.dp-processing-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}

.dp-brain-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    z-index: 2;
}

.dp-processing-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dp-processing-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid transparent;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: dp-ring-spin 1.5s linear infinite;
}

.ring.ring-1 {
    width: 80px;
    height: 80px;
    animation-duration: 1.5s;
}

.ring.ring-2 {
    width: 100px;
    height: 100px;
    animation-duration: 2s;
    animation-direction: reverse;
    border-top-color: #a855f7;
}

.ring.ring-3 {
    width: 120px;
    height: 120px;
    animation-duration: 2.5s;
    border-top-color: #c084fc;
}

@keyframes dp-ring-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.dp-processing-container h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dp-processing-status {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 30px 0;
}

.dp-processing-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.processing-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.processing-step.active {
    opacity: 1;
    color: var(--text-primary);
}

.processing-step.active .step-icon {
    color: #10b981;
}

.processing-step.completed .step-icon {
    color: #10b981;
}

/* ============================================ */
/* RESULTS SCREEN                              */
/* ============================================ */

.dp-results-container {
    padding: 20px 0;
}

/* Header */
.dp-results-header {
    text-align: center;
    margin-bottom: 40px;
}

.dp-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    padding: 20px 32px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.dp-profile-badge.conservative {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

.dp-profile-badge.aggressive {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
}

.dp-profile-badge .profile-emoji {
    font-size: 40px;
}

.dp-profile-badge .profile-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.dp-profile-badge .profile-type {
    font-size: 28px;
    font-weight: 800;
    color: #92400e;
}

.dp-profile-badge.conservative .profile-type {
    color: #1e40af;
}

.dp-profile-badge.aggressive .profile-type {
    color: #991b1b;
}

.dp-profile-badge .profile-nuance {
    font-size: 14px;
    color: #b45309;
}

.dp-profile-badge.conservative .profile-nuance {
    color: #1d4ed8;
}

.dp-profile-badge.aggressive .profile-nuance {
    color: #b91c1c;
}

.dp-profile-tagline {
    font-size: 16px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* Results Grid */
.dp-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.dp-results-left,
.dp-results-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Radar Card */
.dp-radar-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
}

.dp-radar-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.dp-radar-chart {
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

.dp-scores-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dp-score-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dp-score-item .score-label {
    font-size: 13px;
    color: var(--text-secondary);
    width: 140px;
    flex-shrink: 0;
}

.dp-score-item .score-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.dp-score-item .score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.dp-score-item .score-fill.high {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.dp-score-item .score-fill.medium {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.dp-score-item .score-fill.low {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.dp-score-item .score-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    width: 45px;
    text-align: right;
}

/* Strengths & Blind Spots */
.dp-strengths-card,
.dp-blindspots-card,
.dp-pmi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
}

.dp-strengths-card h4,
.dp-blindspots-card h4,
.dp-pmi-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.dp-strengths-list,
.dp-blindspots-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-strength-item,
.dp-blindspot-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
}

.dp-strength-item {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.dp-blindspot-item {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.dp-strength-item .item-icon,
.dp-blindspot-item .item-icon {
    flex-shrink: 0;
    font-size: 16px;
}

.dp-strength-item .item-text,
.dp-blindspot-item .item-text {
    line-height: 1.4;
}

.dp-blindspot-item .item-score {
    margin-left: auto;
    font-weight: 600;
    font-size: 13px;
}

/* PMI Card */
.dp-pmi-score {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dp-pmi-score .pmi-bar {
    flex: 1;
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.dp-pmi-score .pmi-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.dp-pmi-score .pmi-value {
    font-size: 18px;
    font-weight: 700;
    color: #7c3aed;
}

.dp-pmi-insight {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Learning Path */
.dp-learning-path {
    background: linear-gradient(135deg, #ede9fe 0%, #fdf4ff 100%);
    border: 1px solid #c4b5fd;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
}

.dp-learning-path h4 {
    font-size: 18px;
    font-weight: 600;
    color: #5b21b6;
    margin: 0 0 8px 0;
}

.dp-learning-intro {
    font-size: 14px;
    color: #7c3aed;
    margin: 0 0 20px 0;
}

.dp-learning-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dp-learning-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 16px;
}

.dp-learning-item .item-priority {
    background: #7c3aed;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.dp-learning-item .item-priority.high {
    background: #dc2626;
}

.dp-learning-item .item-priority.medium {
    background: #f59e0b;
}

.dp-learning-item .item-content {
    flex: 1;
}

.dp-learning-item .item-topic {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dp-learning-item .item-reason {
    font-size: 13px;
    color: var(--text-secondary);
}

.dp-learning-item .item-time {
    font-size: 13px;
    color: #7c3aed;
    font-weight: 500;
    flex-shrink: 0;
}

/* Results Actions */
.dp-results-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ============================================ */
/* RESPONSIVE STYLES                           */
/* ============================================ */

@media (max-width: 900px) {
    .dp-welcome-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .dp-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dp-welcome-features {
        flex-direction: column;
        gap: 12px;
    }
    
    .dp-type {
        flex-wrap: wrap;
    }
    
    .dp-type .type-desc {
        flex-basis: 100%;
        margin-left: 32px;
        margin-top: 4px;
    }
    
    .dp-profile-badge {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .dp-profile-badge .profile-info {
        text-align: center;
    }
    
    .dp-results-actions {
        flex-direction: column;
    }
    
    .dp-results-actions .dp-btn {
        width: 100%;
    }
    
    .dp-nav {
        flex-direction: column-reverse;
        gap: 12px;
    }
    
    .dp-nav .dp-btn {
        width: 100%;
    }
    
    #dp-btn-back {
        visibility: visible !important;
    }
}

/* Legend Card for Decision Profile */
.dp-legend-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.dp-legend-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 16px 0;
}

.dp-legend-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dp-legend-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.dp-legend-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dp-legend-item .legend-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.dp-legend-item .legend-scale {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* ============================================ */
/* DR Profile Feedback Panel                   */
/* ============================================ */

.dr-profile-feedback {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.dr-profile-feedback.stretch {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-color: #fcd34d;
}

.dr-profile-feedback.warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.dr-pf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dr-pf-header .pf-icon {
    font-size: 20px;
}

.dr-pf-header .pf-title {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

.dr-profile-feedback.stretch .pf-title {
    color: #92400e;
}

.dr-profile-feedback.warning .pf-title {
    color: #991b1b;
}

.dr-pf-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dr-pf-consistency {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dr-pf-consistency .consistency-badge {
    width: 32px;
    height: 32px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.dr-profile-feedback.stretch .consistency-badge {
    background: #f59e0b;
}

.dr-pf-consistency .consistency-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dr-pf-consistency .consistency-label {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

.dr-profile-feedback.stretch .consistency-label {
    color: #92400e;
}

.dr-pf-consistency .consistency-desc {
    font-size: 13px;
    color: #15803d;
    line-height: 1.4;
}

.dr-profile-feedback.stretch .consistency-desc {
    color: #b45309;
}

/* Blind Spot Alert */
.dr-pf-blindspot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px;
}

.dr-pf-blindspot .blindspot-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.dr-pf-blindspot .blindspot-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dr-pf-blindspot .blindspot-label {
    font-size: 13px;
    font-weight: 600;
    color: #991b1b;
}

.dr-pf-blindspot .blindspot-desc {
    font-size: 12px;
    color: #b91c1c;
    line-height: 1.4;
}

/* ============================================ */
/* PM Decision Profile™ v2 - Professional      */
/* ============================================ */

.pmbok8-decision-profile-section {
    padding: 0;
}

.decision-profile-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.dp-screen {
    display: none;
}

.dp-screen.active {
    display: block;
}

/* ============================================ */
/* WELCOME SCREEN v2                           */
/* ============================================ */

.dp-welcome-container {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

.dp-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.dp-welcome-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.dp-welcome-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.dp-dimensions-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.dp-dim-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid var(--dim-color);
}

.dp-dim-preview .dim-code {
    width: 28px;
    height: 28px;
    background: var(--dim-color);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.dp-dim-preview .dim-label {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.dp-structure-info {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    padding: 16px;
    background: #faf5ff;
    border-radius: 12px;
}

.structure-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.structure-item .structure-icon {
    font-size: 18px;
}

.structure-item .structure-text {
    font-size: 13px;
    font-weight: 500;
    color: #6b21a8;
}

/* Buttons v2 */
.dp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.dp-btn.primary {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: white;
}

.dp-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.dp-btn.primary:disabled {
    background: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.dp-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.dp-btn.secondary:hover {
    background: #e2e8f0;
}

.dp-btn.small {
    padding: 8px 16px;
    font-size: 13px;
}

/* Preview Card v2 */
.dp-preview-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

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

.preview-header .preview-icon {
    font-size: 20px;
}

.preview-header .preview-title {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.sample-score {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}

.sample-score .score-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.sample-score .score-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #166534;
}

.sample-score .score-band {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
    background: #dcfce7;
    padding: 4px 12px;
    border-radius: 12px;
    margin-top: 8px;
}

.sample-dims {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.sample-dim {
    text-align: center;
    padding: 8px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* Existing Profile v2 */
.dp-existing-profile {
    margin-top: 20px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
}

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

.existing-header .existing-icon {
    font-size: 18px;
}

.existing-header .existing-title {
    font-size: 14px;
    font-weight: 600;
    color: #0369a1;
}

.existing-details {
    margin-bottom: 12px;
}

.existing-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.existing-row .existing-label {
    color: #64748b;
}

.existing-row .existing-value {
    font-weight: 600;
    color: #334155;
}

/* ============================================ */
/* ASSESSMENT SCREEN v2                        */
/* ============================================ */

.dp-assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.dp-progress-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    max-width: 400px;
}

.dp-progress-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.dp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dp-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    min-width: 60px;
}

.dp-section-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.dp-section-badge.blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.dp-section-badge.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.dp-section-badge.teal {
    background: #ccfbf1;
    color: #0d9488;
}

/* Question Container v2 */
.dp-question-container {
    min-height: 300px;
    margin-bottom: 24px;
}

.dp-question-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
}

/* Forced Choice v2 */
.fc-instruction {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #92400e;
}

.fc-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.fc-option {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.fc-option:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
}

.fc-option.selected {
    border-color: #3b82f6;
    background: #dbeafe;
}

.fc-option .fc-letter {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
    flex-shrink: 0;
}

.fc-option.selected .fc-letter {
    background: #3b82f6;
    color: white;
}

.fc-option .fc-text {
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
}

.fc-vs {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
    padding: 8px 0;
}

/* Scenario v2 */
.sc-header {
    margin-bottom: 16px;
}

.sc-header .sc-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.sc-context {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #475569;
    line-height: 1.5;
}

.sc-instruction {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #7c3aed;
    font-weight: 500;
}

.sc-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.sc-option:hover {
    border-color: #c4b5fd;
    background: #faf5ff;
}

.sc-option.selected {
    border-color: #7c3aed;
    background: #ede9fe;
}

.sc-option .sc-letter {
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
}

.sc-option.selected .sc-letter {
    background: #7c3aed;
    color: white;
}

.sc-option .sc-text {
    font-size: 15px;
    color: #1e293b;
}

/* Likert v2 */
.lk-statement {
    font-size: 20px;
    font-weight: 500;
    color: #1e293b;
    text-align: center;
    padding: 24px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 32px;
    line-height: 1.4;
}

.lk-scale-container {
    max-width: 500px;
    margin: 0 auto;
}

.lk-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: #64748b;
}

.lk-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.lk-scale-btn {
    flex: 1;
    height: 60px;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lk-scale-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0284c7;
}

.lk-scale-btn.selected {
    background: #0ea5e9;
    border-color: #0284c7;
    color: white;
}

/* Navigation v2 */
.dp-nav {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* ============================================ */
/* PROCESSING SCREEN v2                        */
/* ============================================ */

.dp-processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.dp-processing-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 32px;
}

.dp-brain-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    z-index: 2;
}

.dp-processing-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dp-processing-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spin 2s linear infinite;
}

.ring.ring-1 {
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-top-color: #7c3aed;
    border-right-color: #7c3aed;
}

.ring.ring-2 {
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-top-color: #a855f7;
    animation-delay: 0.2s;
    animation-direction: reverse;
}

.ring.ring-3 {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-top-color: #c084fc;
    border-left-color: #c084fc;
    animation-delay: 0.4s;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dp-processing-title {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 24px 0;
}

.dp-processing-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dp-processing-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.dp-processing-step.active {
    background: #ede9fe;
    color: #7c3aed;
}

.dp-processing-step.active .step-icon {
    color: #7c3aed;
}

.dp-processing-step.active .step-icon::before {
    content: '●';
}

/* ============================================ */
/* RESULTS SCREEN v2                           */
/* ============================================ */

.dp-results-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 16px;
    margin-bottom: 24px;
}

.dp-profile-badge-large {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

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

.dp-profile-info .profile-type {
    font-size: 26px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.dp-profile-info .profile-tagline {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

.dp-overall-score-badge {
    text-align: center;
    padding: 16px 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dp-overall-score-badge .overall-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.dp-overall-score-badge .overall-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
}

.dp-overall-score-badge .overall-band {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: white;
    padding: 4px 12px;
    border-radius: 10px;
    margin-top: 6px;
}

/* Results Grid v2 */
.dp-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.dp-results-left,
.dp-results-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cards in results v2 */
.dp-scores-card,
.dp-radar-card,
.dp-legend-card,
.dp-strengths-card,
.dp-development-card,
.dp-redflags-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.dp-scores-card h4,
.dp-radar-card h4,
.dp-legend-card h4,
.dp-strengths-card h4,
.dp-development-card h4,
.dp-redflags-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 16px 0;
}

/* Dimension Scores v2 */
.dp-dim-score {
    margin-bottom: 16px;
}

.dp-dim-score:last-child {
    margin-bottom: 0;
}

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

.dim-header .dim-code {
    width: 24px;
    height: 24px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.dim-header .dim-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.dim-header .dim-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.dim-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.dim-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.dim-band {
    font-size: 12px;
    font-weight: 500;
}

/* Radar Chart v2 */
.dp-radar-chart {
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Legend v2 */
.dp-legend-bands {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid var(--band-color);
}

.legend-band .band-range {
    font-size: 13px;
    font-weight: 600;
    color: var(--band-color);
    min-width: 80px;
}

.legend-band .band-label {
    font-size: 13px;
    color: #64748b;
}

/* Strengths & Development v2 */
.dp-strength-item,
.dp-dev-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f0fdf4;
    border-radius: 10px;
    margin-bottom: 10px;
}

.dp-strength-item:last-child,
.dp-dev-item:last-child {
    margin-bottom: 0;
}

.dp-dev-item {
    background: #fef3c7;
}

.strength-icon,
.dev-icon {
    width: 28px;
    height: 28px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dev-icon {
    background: #f59e0b;
}

.strength-content,
.dev-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strength-name,
.dev-name {
    font-size: 14px;
    font-weight: 500;
    color: #166534;
}

.dev-name {
    color: #92400e;
}

.strength-score,
.dev-score {
    font-size: 15px;
    font-weight: 700;
    color: #22c55e;
}

.dp-no-items {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    background: #f8fafc;
    border-radius: 8px;
}

/* Red Flags v2 */
.dp-redflags-card {
    background: #fef2f2;
    border-color: #fecaca;
}

.dp-redflags-card h4 {
    color: #991b1b;
}

.dp-redflag-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 10px;
    margin-bottom: 10px;
}

.dp-redflag-item:last-child {
    margin-bottom: 0;
}

.redflag-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.redflag-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.redflag-label {
    font-size: 14px;
    font-weight: 600;
    color: #991b1b;
}

.redflag-insight {
    font-size: 13px;
    color: #7f1d1d;
    line-height: 1.4;
}

/* Results Actions v2 */
.dp-results-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

/* ============================================ */
/* RESPONSIVE v2                               */
/* ============================================ */

@media (max-width: 900px) {
    .dp-welcome-container {
        grid-template-columns: 1fr;
    }
    
    .dp-results-grid {
        grid-template-columns: 1fr;
    }
    
    .dp-results-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dp-dimensions-preview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dp-structure-info {
        flex-direction: column;
    }
    
    .dp-assessment-header {
        flex-direction: column;
        gap: 16px;
    }
    
    .dp-progress-container {
        max-width: 100%;
    }
    
    .lk-scale {
        gap: 6px;
    }
    
    .lk-scale-btn {
        height: 50px;
        font-size: 16px;
    }
    
    .dp-nav {
        flex-direction: column;
        gap: 12px;
    }
    
    .dp-nav .dp-btn {
        width: 100%;
        justify-content: center;
    }
    
    .dp-results-actions {
        flex-direction: column;
    }
    
    .dp-results-actions .dp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Preview Benefits Card */
.preview-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #7c3aed;
}

.benefit-item .benefit-icon {
    font-size: 16px;
}

.benefit-item .benefit-text {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.preview-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #faf5ff;
    border-radius: 8px;
    font-size: 13px;
    color: #7c3aed;
    font-weight: 500;
}

.preview-time .time-icon {
    font-size: 16px;
}

/* PDU Claim Code styling */
.pdu-claim-code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 14px !important;
    letter-spacing: 1px;
    background: #f0fdf4;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed #22c55e;
    color: #166534 !important;
    cursor: pointer;
    user-select: all;
}

.pdu-claim-code:hover {
    background: #dcfce7;
}

/* ============================================ */
/* PM Decision Profile - Mini Profile in Card  */
/* ============================================ */

.pmbok8-feature-card.has-profile {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c4b5fd;
}

.pmbok8-card-profile-mini {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e9d5ff;
}

.profile-mini-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-mini-emoji {
    font-size: 32px;
    line-height: 1;
}

.profile-mini-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-mini-name {
    font-size: 14px;
    font-weight: 600;
    color: #6b21a8;
    line-height: 1.2;
}

.profile-mini-overall {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.profile-mini-dims {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.profile-mini-dims .mini-dim {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    color: #475569;
}

.profile-mini-dims .mini-dim:nth-child(1) { border-left: 3px solid #3B8BD4; }
.profile-mini-dims .mini-dim:nth-child(2) { border-left: 3px solid #1D9E75; }
.profile-mini-dims .mini-dim:nth-child(3) { border-left: 3px solid #7F77DD; }
.profile-mini-dims .mini-dim:nth-child(4) { border-left: 3px solid #D85A30; }

.pmbok8-feature-card.has-profile .pmbok8-card-action {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    color: white;
}

.pmbok8-feature-card.has-profile .pmbok8-card-action:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
}

/* ============================================ */
/* Decision Profile Notifications              */
/* ============================================ */

.dp-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease;
}

.dp-notification.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.dp-notification.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================ */
/* Risk Intelligence Center Integration        */
/* ============================================ */

.risk-intelligence-center-wrapper {
    margin-top: 20px;
}

.risk-intelligence-center-wrapper .ric-back-nav {
    margin-bottom: 16px;
}

.risk-intelligence-center-wrapper .pmbok8-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.risk-intelligence-center-wrapper .pmbok8-back-link:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

.ai-usecase-card[data-usecase="risk-identification"]:not(.locked) {
    border: 2px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.ai-usecase-card[data-usecase="risk-identification"]:not(.locked):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

.ai-usecase-card[data-usecase="risk-identification"]:not(.locked) .usecase-icon {
    animation: pulse 2s infinite;
}

.pro-active-tag {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* ============================================ */
/* AI TAILORING ENGINE (Process Modal V3)      */
/* ============================================ */

/* Layer Separator */
.process-modal-layer-separator {
    padding: 14px 24px;
    background: linear-gradient(180deg, #FAFAFA 0%, #FEF9E7 100%);
    border-top: 1px solid #F0F0F0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.process-modal-layer-separator:hover {
    background: linear-gradient(180deg, #f0f0f0 0%, #fef3c7 100%);
}

.process-modal-layer-separator span {
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* AI Engine Preview (Collapsed) */
.ai-engine-preview {
    background: linear-gradient(135deg, #FAEEDA 0%, #FAC775 100%);
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-engine-preview:hover {
    filter: brightness(0.98);
}

.ai-preview-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ai-preview-left {
    flex: 1;
}

.ai-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ai-preview-header .ai-icon {
    font-size: 18px;
}

.ai-preview-header .ai-title {
    font-size: 15px;
    font-weight: 600;
    color: #633806;
}

.ai-badge-pro {
    background: #633806;
    color: #FEF9E7;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
}

.ai-preview-desc {
    font-size: 13px;
    color: #92400e;
    margin: 0;
    line-height: 1.5;
}

.ai-configure-btn {
    background: #633806;
    color: #FEF9E7;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ai-configure-btn:hover {
    background: #451a03;
    transform: translateY(-1px);
}

.ai-preview-chips {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ai-chip {
    background: rgba(99, 56, 6, 0.12);
    color: #633806;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 20px;
}

/* AI Engine Expanded */
.ai-engine-expanded {
    background: #FFFCF5;
    padding: 24px;
    border-top: 2px solid #EF9F27;
    animation: fadeIn 0.3s ease-out;
}

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

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-header-left .ai-icon {
    font-size: 20px;
}

.ai-header-left .ai-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.ai-usage-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #EAF3DE;
    color: #27500A;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.ai-usage-counter.limit-reached {
    background: #FCEBEB;
    color: #791F1F;
}

.ai-engine-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ai-engine-close:hover {
    background: #f0f0f0;
    color: #666;
}

.ai-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-engine-minimize {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    line-height: 1;
}

.ai-engine-minimize:hover {
    background: #f0f0f0;
    color: #666;
}

/* Narrative Input */
.ai-narrative-section {
    margin-bottom: 20px;
}

.ai-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

.ai-narrative-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    font-size: 13px;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.ai-narrative-input:focus {
    outline: none;
    border-color: #378ADD;
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.1);
}

.ai-narrative-detected {
    margin-top: 8px;
    font-size: 11px;
    color: #1D9E75;
    animation: fadeIn 0.3s ease-out;
}

.ai-narrative-detected .detected-icon {
    margin-right: 4px;
}

/* Configuration Grid */
.ai-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

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

.ai-config-card {
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 16px;
    background: #FFFFFF;
}

.config-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.config-chips {
    display: flex;
    gap: 8px;
}

.config-chip {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: #FFFFFF;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-chip:hover {
    border-color: #85B7EB;
    background: #F0F7FD;
}

.config-chip.active {
    border: 2px solid #378ADD;
    background: #E6F1FB;
    color: #0C447C;
}

/* Risk level specific colors */
.config-chip.risk-low.active {
    border-color: #1D9E75;
    background: #E1F5EE;
    color: #085041;
}

.config-chip.risk-medium.active {
    border-color: #EF9F27;
    background: #FAEEDA;
    color: #633806;
}

.config-chip.risk-high.active {
    border-color: #E24B4A;
    background: #FCEBEB;
    color: #791F1F;
}

/* Industry Select */
.ai-industry-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ai-industry-select:focus {
    outline: none;
    border-color: #378ADD;
}

/* Generate Button */
.ai-generate-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ai-generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(55, 138, 221, 0.3);
}

.ai-generate-btn:disabled {
    background: #E0E0E0;
    color: #999;
    cursor: not-allowed;
}

/* Loading State */
.ai-loading {
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #EEEDFE 0%, #E6F1FB 100%);
    border-radius: 12px;
    animation: fadeIn 0.3s ease-out;
}

.ai-loading-icon {
    font-size: 24px;
    margin-bottom: 12px;
    animation: pulse 1.5s infinite;
}

.ai-loading-text {
    font-size: 14px;
    font-weight: 500;
    color: #3C3489;
}

.ai-loading-subtext {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
}

/* AI Insight Card */
.ai-insight-card {
    background: linear-gradient(135deg, #E6F1FB 0%, #EEEDFE 100%);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid rgba(127, 119, 221, 0.2);
    animation: fadeIn 0.3s ease-out;
}

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

.insight-icon {
    font-size: 16px;
}

.insight-title {
    font-size: 13px;
    font-weight: 600;
    color: #3C3489;
}

.insight-text {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.insight-today {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(127, 119, 221, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
}

.today-icon {
    font-size: 14px;
}

.today-label {
    font-weight: 600;
    color: #3C3489;
}

.today-text {
    color: #444;
}

/* Time Saved */
.ai-time-saved {
    background: #EAF3DE;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-icon {
    font-size: 18px;
}

.time-value {
    font-size: 13px;
    font-weight: 600;
    color: #27500A;
}

.time-note {
    font-size: 11px;
    color: #639922;
}

/* Recommendations Container */
.ai-recs-container {
    background: linear-gradient(135deg, #EEEDFE 0%, #E6F1FB 100%);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(127, 119, 221, 0.2);
    margin-bottom: 16px;
}

.ai-recs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.recs-icon {
    font-size: 16px;
}

.recs-title {
    font-size: 14px;
    font-weight: 600;
    color: #3C3489;
}

.recs-count {
    margin-left: auto;
    background: #7F77DD;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Recommendation Items */
.ai-recs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-rec-item {
    background: #FFFFFF;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-rec-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ai-rec-item.selected {
    border-color: #378ADD;
    background: #F0F7FD;
}

.ai-rec-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ai-rec-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #DDD;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-rec-item.selected .ai-rec-checkbox {
    border-color: #378ADD;
    background: #378ADD;
}

.ai-rec-item.selected .ai-rec-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.ai-rec-content {
    flex: 1;
}

.ai-rec-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ai-rec-icon {
    font-size: 16px;
}

.ai-rec-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.ai-rec-impact {
    font-size: 12px;
    color: #1D9E75;
    font-weight: 500;
    margin-bottom: 6px;
}

.ai-rec-detail {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.ai-rec-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ai-rec-action-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    background: #F0F7FD;
    color: #0C447C;
}

.ai-rec-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-rec-action-btn.pro-locked {
    background: #F1EFE8;
    color: #5F5E5A;
}

/* Action Buttons */
.ai-action-buttons {
    display: flex;
    gap: 12px;
}

.ai-action-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ai-action-btn.secondary {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    color: #666;
}

.ai-action-btn.secondary:hover {
    border-color: #BBB;
    background: #FAFAFA;
}

.ai-action-btn.tertiary {
    background: #F0F7FF;
    border: 1px solid #378ADD;
    color: #378ADD;
    font-size: 12px;
    padding: 8px 12px;
}

.ai-action-btn.tertiary:hover {
    background: #E0EFFF;
}

.ai-action-btn.primary {
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    border: none;
    color: #FFFFFF;
}

.ai-action-btn.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(55, 138, 221, 0.3);
}

.ai-action-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATES SECTION (Replaces AI Engine)
═══════════════════════════════════════════════════════════════ */

.pm-v2-templates-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    padding: 24px;
    border-top: 1px solid #E2E8F0;
}

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

.templates-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.templates-icon {
    font-size: 28px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.templates-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.templates-title {
    font-size: 18px;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.templates-subtitle {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

.templates-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual Template Card */
.template-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.template-card:hover {
    border-color: #94A3B8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.template-card-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
    background: #F1F5F9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.template-card-info {
    flex: 1;
    min-width: 0;
}

.template-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 4px;
}

.template-card-desc {
    font-size: 12px;
    color: #64748B;
    margin: 0 0 8px;
    line-height: 1.4;
}

.template-card-meta {
    display: flex;
    gap: 10px;
}

.template-meta-tag {
    font-size: 10px;
    color: #94A3B8;
    background: #F1F5F9;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.template-download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.template-download-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.template-download-btn .download-icon {
    font-size: 18px;
}

.template-download-btn .download-text {
    font-size: 11px;
}

/* Templates Note */
.templates-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #FEF9C3;
    border-radius: 10px;
}

.templates-note .note-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.templates-note .note-text {
    font-size: 12px;
    color: #854D0E;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .template-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .template-card-meta {
        justify-content: center;
    }
    
    .template-download-btn {
        width: 100%;
        flex-direction: row;
        padding: 14px 20px;
    }
}

/* Coming soon / disabled templates */
.template-card.coming-soon {
    opacity: 0.7;
}

.template-card.coming-soon .template-card-icon {
    filter: grayscale(50%);
}

.template-meta-tag.coming {
    background: #FEF3C7;
    color: #92400E;
}

.template-download-btn.disabled {
    background: #94A3B8;
    cursor: not-allowed;
}

.template-download-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Download button as link */
a.template-download-btn {
    text-decoration: none;
    color: #FFFFFF;
}

/* Practice Upgrade Prompt (for guests) */
#practice-upgrade-prompt {
    position: fixed;
    inset: 0;
    z-index: 300001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.practice-upgrade-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.practice-upgrade-content {
    position: relative;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.practice-upgrade-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.practice-upgrade-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1a1a1a;
}

.practice-upgrade-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.6;
}

.practice-upgrade-free-list {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.practice-upgrade-free-list .free-list-title {
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    margin-bottom: 10px;
}

.practice-upgrade-free-list ul {
    margin: 0;
    padding-left: 20px;
}

.practice-upgrade-free-list li {
    font-size: 12px;
    color: #15803D;
    margin-bottom: 6px;
}

.practice-upgrade-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.practice-upgrade-btn {
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.practice-upgrade-btn.primary {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: white;
}

.practice-upgrade-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.practice-upgrade-btn.secondary {
    background: #F1F5F9;
    color: #64748B;
}

.practice-upgrade-btn.secondary:hover {
    background: #E2E8F0;
}

/* Paywall Modal */
.process-paywall-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paywall-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.paywall-content {
    position: relative;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}

.paywall-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.paywall-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #1a1a1a;
}

.paywall-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 24px;
    line-height: 1.6;
}

.paywall-value {
    background: #EAF3DE;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.value-number {
    font-size: 24px;
    font-weight: 700;
    color: #27500A;
}

.value-note {
    font-size: 13px;
    color: #639922;
    margin-top: 4px;
}

.paywall-features {
    text-align: left;
    margin-bottom: 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
}

.feature-item span:first-child {
    color: #1D9E75;
    font-weight: bold;
}

.paywall-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paywall-btn {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.paywall-btn.primary {
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 600;
}

.paywall-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(55, 138, 221, 0.3);
}

.paywall-btn.secondary {
    background: transparent;
    color: #888;
    border: none;
    font-weight: 400;
}

.paywall-btn.secondary:hover {
    color: #666;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-preview-content {
        flex-direction: column;
    }
    
    .ai-configure-btn {
        width: 100%;
        justify-content: center;
    }
    
    .ai-action-buttons {
        flex-direction: column;
    }
}

/* ============================================ */
/* PROCESS MODAL V2 - Complete Redesign        */
/* ============================================ */

.process-modal-v2 {
    max-width: 860px !important;
}

/* V2 Header */
.pm-v2-header {
    padding: 20px 24px;
    border-bottom: 1px solid #F0F0F0;
}

.pm-v2-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pm-v2-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pm-v2-process-badge {
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.pm-v2-category-phase {
    font-size: 12px;
    color: #888;
}

.pm-v2-maturity-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #EAF3DE;
    color: #27500A;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.pm-v2-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.pm-v2-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.pm-v2-tags-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.pm-v2-tags {
    display: flex;
    gap: 8px;
}

.pm-v2-tag {
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pm-v2-tag.tailoring {
    background: #FAEEDA;
    color: #633806;
}

.pm-v2-tag.agnostic {
    background: #E1F5EE;
    color: #085041;
}

.pm-v2-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-v2-progress .progress-label {
    font-size: 11px;
    color: #888;
}

.pm-v2-progress .progress-bar {
    width: 60px;
    height: 4px;
    background: #E8E8E8;
    border-radius: 2px;
    overflow: hidden;
}

.pm-v2-progress .progress-fill {
    height: 100%;
    background: #1D9E75;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.pm-v2-progress .progress-percent {
    font-size: 11px;
    font-weight: 600;
    color: #085041;
}

/* V2 ITTO Section */
.pm-v2-itto-section {
    padding: 20px 24px;
    background: #FAFAFA;
}

.pm-v2-itto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .pm-v2-itto-grid {
        grid-template-columns: 1fr;
    }
}

.pm-v2-itto-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.pm-v2-itto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.pm-v2-itto-card.inputs {
    border-left-color: #378ADD;
}

.pm-v2-itto-card.tools {
    border-left-color: #1D9E75;
}

.pm-v2-itto-card.outputs {
    border-left-color: #D4537E;
}

.pm-v2-itto-card.expanded {
    background: #F8F8F8;
}

.itto-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.itto-card-icon {
    font-size: 14px;
}

.itto-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.itto-card-count {
    font-size: 11px;
    color: #888;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
}

.pm-v2-itto-card.inputs .itto-card-count {
    background: #E6F1FB;
}

.pm-v2-itto-card.tools .itto-card-count {
    background: #E1F5EE;
}

.pm-v2-itto-card.outputs .itto-card-count {
    background: #FBEAF0;
}

.itto-card-preview {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.itto-card-expand {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 500;
}

.pm-v2-itto-card.inputs .itto-card-expand {
    color: #378ADD;
}

.pm-v2-itto-card.tools .itto-card-expand {
    color: #1D9E75;
}

.pm-v2-itto-card.outputs .itto-card-expand {
    color: #D4537E;
}

/* Expanded ITTO Content */
.pm-v2-itto-expanded {
    margin-top: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #E8E8E8;
    animation: fadeIn 0.3s ease-out;
}

.itto-expanded-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.itto-expanded-inputs .itto-expanded-title {
    color: #378ADD;
}

.itto-expanded-tools .itto-expanded-title {
    color: #1D9E75;
}

.itto-expanded-outputs .itto-expanded-title {
    color: #D4537E;
}

.itto-expanded-list {
    display: grid;
    gap: 8px;
}

.itto-expanded-tools .itto-expanded-list {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
    .itto-expanded-tools .itto-expanded-list {
        grid-template-columns: 1fr;
    }
}

.itto-expanded-item {
    padding: 12px;
    border-radius: 8px;
    position: relative;
}

.itto-expanded-inputs .itto-expanded-item {
    background: #F0F7FD;
}

.itto-expanded-tools .itto-expanded-item {
    background: #F0FAF6;
}

.itto-expanded-outputs .itto-expanded-item {
    background: #FDF2F6;
}

.itto-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.itto-item-name {
    font-weight: 500;
    font-size: 13px;
}

.itto-expanded-inputs .itto-item-name {
    color: #0C447C;
}

.itto-expanded-tools .itto-item-name {
    color: #085041;
}

.itto-expanded-outputs .itto-item-name {
    color: #72243E;
}

.itto-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.itto-item-badge.critical {
    background: #FCEBEB;
    color: #791F1F;
}

.itto-item-badge.high {
    background: #FAEEDA;
    color: #633806;
}

.itto-item-badge.medium {
    background: #F1EFE8;
    color: #444441;
}

.itto-item-badge.popular {
    background: #FAEEDA;
    color: #633806;
}

.itto-item-details {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.itto-item-tip {
    font-size: 11px;
    font-style: italic;
    margin-top: 6px;
}

.itto-expanded-inputs .itto-item-tip {
    color: #378ADD;
}

.itto-expanded-tools .itto-item-tip {
    color: #1D9E75;
}

.itto-expanded-outputs .itto-item-tip {
    color: #D4537E;
}

/* Action Insight Box */
.pm-v2-action-insight {
    margin-top: 16px;
    background: linear-gradient(135deg, #E6F1FB 0%, #EEEDFE 100%);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(127, 119, 221, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-v2-action-insight:hover {
    transform: scale(1.01);
}

.action-insight-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7F77DD 0%, #378ADD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.action-insight-content {
    flex: 1;
}

.action-insight-title {
    font-size: 14px;
    font-weight: 600;
    color: #3C3489;
    margin-bottom: 4px;
}

.action-insight-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.action-insight-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.action-insight-cta .cta-text {
    font-size: 12px;
    color: #7F77DD;
    font-weight: 500;
}

.action-insight-cta .cta-saved {
    font-size: 10px;
    background: #E1F5EE;
    color: #085041;
    padding: 3px 8px;
    border-radius: 8px;
}

/* Practice CTA Box (replaces action insight) */
.pm-v2-practice-cta {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid #86efac;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-v2-practice-cta:hover {
    border-color: #22c55e;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25);
    transform: translateY(-2px);
}

.practice-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.practice-cta-content {
    flex: 1;
}

.practice-cta-title {
    font-size: 16px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 4px;
}

.practice-cta-desc {
    font-size: 13px;
    color: #15803d;
    line-height: 1.4;
}

.practice-cta-arrow {
    font-size: 22px;
    color: #22c55e;
    font-weight: 600;
}

/* Steps Modal */
.pm-v2-steps-modal {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-v2-steps-modal .steps-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.pm-v2-steps-modal .steps-modal-content {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    animation: fadeIn 0.3s ease-out;
}

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

.steps-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.steps-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 4px 8px;
}

.steps-modal-progress {
    margin-bottom: 20px;
}

.steps-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
}

.steps-progress-count {
    font-weight: 600;
    color: #1D9E75;
}

.steps-progress-bar {
    height: 6px;
    background: #E8E8E8;
    border-radius: 3px;
    overflow: hidden;
}

.steps-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1D9E75 0%, #639922 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.steps-time-estimate {
    font-size: 11px;
    color: #888;
    margin-top: 8px;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step-item {
    padding: 14px 16px;
    background: #F8F8F8;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.step-item:hover {
    background: #F0F0F0;
}

.step-item.completed {
    background: #F0FAF6;
    border-color: #5DCAA5;
}

.step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E0E0E0;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.step-item.completed .step-number {
    background: #1D9E75;
    color: #FFFFFF;
}

.step-text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.step-item.completed .step-text {
    color: #085041;
    text-decoration: line-through;
    opacity: 0.8;
}

.step-time {
    font-size: 11px;
    color: #999;
}

.steps-save-btn {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.steps-save-btn .btn-default {
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
}

.steps-save-btn:not(.saved) {
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
}

.steps-save-btn.saved {
    background: #E1F5EE;
    color: #085041;
}

/* V2 Layer Separator */
.pm-v2-layer-separator {
    padding: 12px 24px;
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.pm-v2-layer-separator:hover {
    background: linear-gradient(180deg, #f0f0f0 0%, #f8f8f8 100%);
}

.pm-v2-layer-separator span {
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* V2 Tabs */
.pm-v2-tabs {
    border-bottom: 1px solid #F0F0F0;
}

.pm-v2-tabs-nav {
    display: flex;
    padding: 0 24px;
}

.pm-v2-tab {
    background: none;
    border: none;
    padding: 14px 16px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.pm-v2-tab:hover {
    color: #333;
}

.pm-v2-tab.active {
    color: #3C3489;
    border-bottom-color: #7F77DD;
}

.pm-v2-tab .tab-icon {
    font-size: 14px;
}

.pm-v2-tab .tab-count {
    font-size: 10px;
    background: #EEEDFE;
    color: #3C3489;
    padding: 2px 6px;
    border-radius: 8px;
}

/* V2 Tabs Content */
.pm-v2-tabs-content {
    padding: 20px 24px;
    max-height: 220px;
    overflow-y: auto;
}

.pm-v2-tab-panel {
    display: none;
}

.pm-v2-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

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

.detail-card {
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.detail-card-badge {
    font-size: 10px;
    background: #FAEEDA;
    color: #633806;
    padding: 2px 6px;
    border-radius: 6px;
}

.detail-card-details {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
}

/* Examples */
.examples-list {
    display: grid;
    gap: 12px;
}

.example-card {
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.example-card.pro-locked .example-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lock-badge {
    background: #FAEEDA;
    color: #633806;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.example-type {
    display: inline-block;
    padding: 8px 12px;
    background: #EEEDFE;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #3C3489;
    margin-bottom: 12px;
}

.example-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
}

.example-desc {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.example-charter {
    font-size: 12px;
    color: #085041;
    margin-top: 8px;
    background: #F0FAF6;
    padding: 8px 12px;
    border-radius: 6px;
}

.examples-practice-cta {
    margin-top: 16px;
}

.practice-examples-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.practice-examples-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(55, 138, 221, 0.3);
}

/* Relationships */
.relationships-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rel-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.rel-processes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rel-process-chip {
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rel-process-chip:hover {
    transform: translateY(-1px);
}

.rel-process-chip.high {
    background: #E6F1FB;
    color: #0C447C;
}

.rel-process-chip.medium {
    background: #E1F5EE;
    color: #085041;
}

.rel-process-chip.low {
    background: #F1EFE8;
    color: #444441;
}

.rel-empty {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

/* Influences V2 */
.influences-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

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

.influence-card-v2 {
    background: #F8F8F8;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.influence-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.influence-card-v2 .influence-icon {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.influence-card-v2 .influence-name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    display: block;
}

.influence-card-v2 .influence-desc {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
    line-height: 1.4;
    display: block;
}

.influence-card-v2 .influence-impact {
    margin-top: 12px;
    padding: 10px 12px;
    background: #EEEDFE;
    border-radius: 8px;
    font-size: 12px;
    color: #3C3489;
    animation: fadeIn 0.3s ease-out;
}

/* Slide In Right Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================ */
/* PROCESS MODAL V2 - Additional Fixes         */
/* ============================================ */

/* Fix Tab Contrast - ensure readable text */
.pm-v2-tab:hover {
    color: #1a1a1a !important;
    background: rgba(127, 119, 221, 0.1);
}

.pm-v2-tab.active {
    color: #3C3489 !important;
    background: rgba(127, 119, 221, 0.08);
}

.pm-v2-tab:hover .tab-label,
.pm-v2-tab.active .tab-label {
    color: inherit;
}

/* New Step Structure with Expandable Content */
.step-item {
    padding: 0;
    background: #F8F8F8;
    border-radius: 10px;
    cursor: default;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    overflow: hidden;
}

.step-item:hover {
    background: #F0F0F0;
}

.step-item.completed {
    background: #F0FAF6;
    border-color: #5DCAA5;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E0E0E0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.step-number:hover {
    background: #D0D0D0;
}

.step-item.completed .step-number {
    background: #1D9E75;
    color: #FFFFFF;
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.step-item.completed .step-title {
    color: #085041;
}

.step-responsible {
    font-size: 12px;
    color: #666;
}

.step-expand-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.step-expand-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.step-activities {
    display: none;
    padding: 0 16px 14px 56px;
    animation: fadeIn 0.2s ease-out;
}

.step-activities.expanded {
    display: block;
}

.step-activities ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-activities li {
    font-size: 13px;
    color: #555;
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
}

.step-activities li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #1D9E75;
}

/* Steps Summary */
.steps-summary {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FAEEDA 0%, #FEF9E7 100%);
    border-radius: 10px;
    border: 1px solid #EF9F27;
}

.steps-summary .summary-title {
    font-size: 14px;
    font-weight: 600;
    color: #633806;
    margin-bottom: 8px;
}

.steps-summary .summary-content {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #633806;
}

/* Examples Tab - intro text */
.examples-intro {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    text-align: center;
}

/* ITTO Card Etc. badge */
.itto-card-etc {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.itto-etc-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #F1EFE8;
    color: #5F5E5A;
}

.itto-etc-note {
    font-size: 10px;
    color: #888;
    font-style: italic;
}

/* Details Tab - hide for now since unclear purpose */
.pm-v2-tab-panel[data-panel="details"] .details-grid {
    display: none;
}

.pm-v2-tab-panel[data-panel="details"]::before {
    content: "Explorează cardurile ITTO de mai sus pentru detalii complete.";
    display: block;
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Relationship chips - ensure readable */
.rel-process-chip {
    color: #1a1a1a !important;
}

.rel-process-chip.high {
    background: #E6F1FB !important;
    color: #0C447C !important;
}

.rel-process-chip.medium {
    background: #E1F5EE !important;
    color: #085041 !important;
}

.rel-process-chip.low {
    background: #F1EFE8 !important;
    color: #444441 !important;
}

/* Steps Modal scrollable */
.steps-modal-content {
    max-height: 85vh;
}

.steps-list {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* Responsive - steps */
@media (max-width: 600px) {
    .steps-summary .summary-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .step-activities {
        padding-left: 40px;
    }
}

/* ============================================ */
/* PROCESS MODAL V2 - Bug Fixes v2.7.3         */
/* ============================================ */

/* Remove the pseudo-content from Details tab */
.pm-v2-tab-panel[data-panel="details"]::before {
    display: none !important;
}

/* Show the details grid properly */
.pm-v2-tab-panel[data-panel="details"] .details-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Details intro message */
.details-intro {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #F8F8F8;
    border-radius: 8px;
    text-align: center;
}

/* Detail items in Details tab */
.details-item {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.details-item:hover {
    background: #F8F8F8;
    border-color: #D0D0D0;
}

.details-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-item-icon {
    font-size: 16px;
}

.details-item-name {
    font-weight: 500;
    font-size: 14px;
    color: #1a1a1a;
}

.details-item-desc {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    line-height: 1.5;
}

/* Steps Modal - ensure visible */
.pm-v2-steps-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10010 !important;
    display: none;
}

.pm-v2-steps-modal.active,
.pm-v2-steps-modal[style*="block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.pm-v2-steps-modal .steps-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.pm-v2-steps-modal .steps-modal-content {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Steps List - scrollable container */
.steps-list {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 16px;
}

/* Individual Step Item */
.step-item {
    margin-bottom: 8px;
    background: #F8F8F8;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E8E8E8;
}

.step-item:last-child:not(.steps-summary) {
    margin-bottom: 0;
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.step-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.step-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.step-item.completed .step-number {
    background: linear-gradient(135deg, #1D9E75 0%, #639922 100%);
}

.step-content {
    flex: 1;
    min-width: 0;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1.4;
}

.step-responsible {
    font-size: 12px;
    color: #666;
}

.step-expand-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
}

.step-expand-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

/* Step Activities (expandable) */
.step-activities {
    display: none;
    padding: 0 16px 14px 60px;
    background: rgba(0, 0, 0, 0.02);
}

.step-activities.expanded,
.step-item.expanded .step-activities {
    display: block;
}

.step-activities ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-activities li {
    font-size: 13px;
    color: #555;
    padding: 6px 0 6px 20px;
    position: relative;
    line-height: 1.4;
}

.step-activities li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #7F77DD;
    font-weight: bold;
}

/* Steps Summary */
.steps-summary {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #FAEEDA 0%, #FEF9E7 100%);
    border-radius: 10px;
    border: 1px solid #EF9F27;
}

.steps-summary .summary-title {
    font-size: 14px;
    font-weight: 600;
    color: #633806;
    margin-bottom: 10px;
}

.steps-summary .summary-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #633806;
}

/* Steps Save Button */
.steps-save-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%);
    color: #FFFFFF;
}

.steps-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(55, 138, 221, 0.3);
}

.steps-save-btn.saved {
    background: #E1F5EE;
    color: #085041;
}

/* Hide time estimate */
.steps-time-estimate {
    display: none !important;
}

/* ============================================ */
/* STEPS MODAL V2 - Override conflicting CSS   */
/* ============================================ */

/* Override earlier step-item styles for the V2 modal */
.pm-v2-steps-modal .steps-list .step-item {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #F8F8F8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #E8E8E8 !important;
    margin-bottom: 10px !important;
}

.pm-v2-steps-modal .steps-list .step-item.completed {
    background: #F0FAF6 !important;
    border-color: #5DCAA5 !important;
}

.pm-v2-steps-modal .step-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    background: transparent !important;
}

.pm-v2-steps-modal .step-header:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

.pm-v2-steps-modal .step-number {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.pm-v2-steps-modal .step-item.completed .step-number {
    background: linear-gradient(135deg, #1D9E75 0%, #639922 100%) !important;
}

.pm-v2-steps-modal .step-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
}

.pm-v2-steps-modal .step-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
    display: block !important;
}

.pm-v2-steps-modal .step-responsible {
    font-size: 12px !important;
    color: #666 !important;
    display: block !important;
}

.pm-v2-steps-modal .step-expand-toggle {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

.pm-v2-steps-modal .step-expand-toggle:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #666 !important;
}

.pm-v2-steps-modal .step-activities {
    display: none !important;
    padding: 0 16px 14px 60px !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

.pm-v2-steps-modal .step-activities.expanded,
.pm-v2-steps-modal .step-item.expanded .step-activities {
    display: block !important;
}

.pm-v2-steps-modal .step-activities ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pm-v2-steps-modal .step-activities li {
    font-size: 13px !important;
    color: #555 !important;
    padding: 6px 0 6px 20px !important;
    position: relative !important;
    line-height: 1.4 !important;
}

.pm-v2-steps-modal .step-activities li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    color: #7F77DD !important;
    font-weight: bold !important;
}

.pm-v2-steps-modal .steps-summary {
    margin-top: 16px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #FAEEDA 0%, #FEF9E7 100%) !important;
    border-radius: 10px !important;
    border: 1px solid #EF9F27 !important;
}

.pm-v2-steps-modal .steps-summary .summary-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #633806 !important;
    margin-bottom: 10px !important;
}

.pm-v2-steps-modal .steps-summary .summary-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #633806 !important;
}

/* ============================================ */
/* PMV2 STEPS MODAL - Clean Unique Classes     */
/* ============================================ */

/* Step Row Container */
.pmv2-step-row {
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.pmv2-step-row:hover {
    border-color: #D0D0D0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.pmv2-step-row.is-done {
    background: #F0FAF6 !important;
    border-color: #5DCAA5 !important;
}

/* Step Main Row */
.pmv2-step-main {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
    cursor: pointer !important;
}

/* Step Number Circle */
.pmv2-step-num {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease !important;
}

.pmv2-step-num:hover {
    transform: scale(1.08) !important;
}

.pmv2-step-row.is-done .pmv2-step-num {
    background: linear-gradient(135deg, #1D9E75 0%, #639922 100%) !important;
}

/* Step Info */
.pmv2-step-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.pmv2-step-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

.pmv2-step-owner {
    font-size: 13px !important;
    color: #666 !important;
}

/* Step Toggle Arrow */
.pmv2-step-toggle {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.pmv2-step-toggle:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #666 !important;
}

/* Step Activities */
.pmv2-step-activities {
    display: none !important;
    padding: 0 16px 16px 66px !important;
    background: rgba(127, 119, 221, 0.04) !important;
}

.pmv2-step-activities.is-open {
    display: block !important;
}

.pmv2-activity-item {
    font-size: 14px !important;
    color: #444 !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.pmv2-activity-item:last-child {
    border-bottom: none !important;
}

/* Step Summary */
.pmv2-step-summary {
    margin-top: 20px !important;
    padding: 18px !important;
    background: linear-gradient(135deg, #FAEEDA 0%, #FEF9E7 100%) !important;
    border-radius: 12px !important;
    border: 1px solid #EF9F27 !important;
}

.pmv2-summary-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #633806 !important;
    margin-bottom: 12px !important;
}

.pmv2-summary-body {
    font-size: 14px !important;
    color: #633806 !important;
    line-height: 1.6 !important;
}

.pmv2-summary-body div {
    margin-bottom: 4px !important;
}

.pmv2-summary-body div:last-child {
    margin-bottom: 0 !important;
}

/* Steps Modal Container - ensure proper display */
#pm-v2-steps-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10020 !important;
    /* Note: display is controlled by JS fadeIn/fadeOut - don't use !important here */
}

#pm-v2-steps-modal .steps-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

#pm-v2-steps-modal .steps-modal-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    max-width: 560px !important;
    width: 92% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

#pm-v2-steps-modal .steps-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

#pm-v2-steps-modal .steps-modal-header h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}

#pm-v2-steps-modal .steps-modal-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: #F5F5F5 !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pm-v2-steps-modal .steps-modal-progress {
    margin-bottom: 20px !important;
}

#pm-v2-steps-modal .steps-progress-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
}

#pm-v2-steps-modal .steps-progress-count {
    font-weight: 600 !important;
    color: #1D9E75 !important;
}

#pm-v2-steps-modal .steps-progress-bar {
    height: 6px !important;
    background: #E8E8E8 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

#pm-v2-steps-modal .steps-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #1D9E75 0%, #639922 100%) !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

#pm-v2-steps-modal .steps-list {
    max-height: 50vh !important;
    overflow-y: auto !important;
    margin-bottom: 20px !important;
}

#pm-v2-steps-modal #steps-save-btn {
    width: 100% !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: linear-gradient(135deg, #378ADD 0%, #7F77DD 100%) !important;
    color: #FFFFFF !important;
}

#pm-v2-steps-modal #steps-save-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(55, 138, 221, 0.35) !important;
}

#pm-v2-steps-modal #steps-save-btn.saved {
    background: #E1F5EE !important;
    color: #085041 !important;
}

/* Hide time estimate */
#pm-v2-steps-modal .steps-time-estimate {
    display: none !important;
}

/* ============================================ */
/* FORCE STEPS VISIBILITY - Ultimate Override  */
/* ============================================ */

#pm-v2-steps-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#pm-v2-steps-list > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#pm-v2-steps-list .pmv2-step-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
}

#pm-v2-steps-list .pmv2-step-main {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
    background: transparent !important;
    visibility: visible !important;
}

#pm-v2-steps-list .pmv2-step-num {
    display: flex !important;
    visibility: visible !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #378ADD, #7F77DD) !important;
    color: #FFFFFF !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

#pm-v2-steps-list .pmv2-step-row.is-done .pmv2-step-num {
    background: linear-gradient(135deg, #1D9E75, #639922) !important;
}

#pm-v2-steps-list .pmv2-step-info {
    display: block !important;
    visibility: visible !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#pm-v2-steps-list .pmv2-step-name {
    display: block !important;
    visibility: visible !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

#pm-v2-steps-list .pmv2-step-owner {
    display: block !important;
    visibility: visible !important;
    font-size: 13px !important;
    color: #555555 !important;
    background: transparent !important;
}

#pm-v2-steps-list .pmv2-step-toggle {
    display: flex !important;
    visibility: visible !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666666 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

#pm-v2-steps-list .pmv2-step-activities {
    display: none !important;
    padding: 0 16px 16px 66px !important;
    background: #F8F8FF !important;
}

#pm-v2-steps-list .pmv2-step-activities.is-open {
    display: block !important;
}

#pm-v2-steps-list .pmv2-activity-item {
    display: block !important;
    visibility: visible !important;
    font-size: 14px !important;
    color: #333333 !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
    background: transparent !important;
}

#pm-v2-steps-list .pmv2-step-summary {
    display: block !important;
    visibility: visible !important;
    margin-top: 20px !important;
    padding: 18px !important;
    background: linear-gradient(135deg, #FAEEDA, #FEF9E7) !important;
    border-radius: 12px !important;
    border: 1px solid #EF9F27 !important;
}

#pm-v2-steps-list .pmv2-summary-title {
    display: block !important;
    visibility: visible !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #633806 !important;
    margin-bottom: 12px !important;
}

#pm-v2-steps-list .pmv2-summary-body {
    display: block !important;
    visibility: visible !important;
    font-size: 14px !important;
    color: #633806 !important;
    line-height: 1.6 !important;
}

#pm-v2-steps-list .pmv2-summary-body div {
    display: block !important;
    margin-bottom: 4px !important;
}

/* ============================================================
   "VEZI PAȘI PROCES" — Blue CTA card & Generic Steps Modal
   ============================================================ */

/* ── Blue CTA card (before the green "practică" card) ─────── */
.pm-v2-cta-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.pm-v2-cta-row .pm-v2-steps-generic-cta,
.pm-v2-cta-row .pm-v2-practice-cta {
    flex: 1;
    margin-top: 0;
}

.pm-v2-steps-generic-cta {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid #93c5fd;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Stack vertically on very narrow screens */
@media (max-width: 520px) {
    .pm-v2-cta-row { flex-direction: column; }
}

.pm-v2-steps-generic-cta:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.22);
    transform: translateY(-2px);
}

.steps-generic-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.steps-generic-cta-content { flex: 1; }

.steps-generic-cta-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 4px;
}

.steps-generic-cta-desc {
    font-size: 13px;
    color: #1d4ed8;
}

.steps-generic-cta-arrow {
    font-size: 22px;
    color: #3b82f6;
    font-weight: 600;
}

/* ── Overlay ───────────────────────────────────────────────── */
.ps-generic-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 200001;
    display: none;          /* hidden — JS adds .active to show */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ps-generic-overlay.active {
    display: flex;
    animation: pmFadeIn 0.22s ease;
}

@keyframes pmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal box ─────────────────────────────────────────────── */
.ps-generic-modal {
    background: #ffffff;
    border-radius: 20px;
    max-width: 900px;   /* same as pp-modal */
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: pmModalIn 0.25s ease;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

/* ── Header ────────────────────────────────────────────────── */
.ps-generic-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 14px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.ps-generic-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.ps-generic-title-text {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.ps-generic-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #ffffff;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.ps-generic-close:hover { background: rgba(255,255,255,0.28); }

/* ── Meta tags ─────────────────────────────────────────────── */
.ps-generic-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 24px 0;
}

.ps-generic-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.ps-generic-tag.initiating {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.ps-generic-tag.generic {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

/* ── Description ───────────────────────────────────────────── */
.ps-generic-description {
    padding: 10px 24px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* ── Progress timeline ─────────────────────────────────────── */
.ps-generic-timeline {
    margin: 14px 24px 4px;
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.ps-generic-timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 999px;
    transition: width 0.35s ease;
    width: 7.14%; /* 1/14 */
}

.ps-generic-step-counter {
    text-align: right;
    padding: 0 24px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Steps wrapper ─────────────────────────────────────────── */
.ps-generic-steps-wrap {
    padding: 8px 24px 0;
    flex: 1;
}

/* ── Individual step — all visible, active highlighted ──────── */
.ps-generic-step {
    display: flex;          /* always rendered */
    gap: 16px;
    padding: 16px 0 8px;
    opacity: 0.38;
    transition: opacity 0.35s ease;
}

.ps-generic-step.active {
    opacity: 1;
}

/* ── Step indicator (number + line) ───────────────────────── */
.ps-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.ps-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ps-step-num--summary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    font-size: 16px;
}

.ps-step-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: linear-gradient(to bottom, #bfdbfe, transparent);
    margin-top: 6px;
}

/* ── Step body ─────────────────────────────────────────────── */
.ps-step-body {
    flex: 1;
    min-width: 0;
    background: white;
    border-radius: 12px;
    padding: 16px 18px;
    border: 2px solid transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: border-color 0.3s ease;
}

.ps-generic-step.active .ps-step-body {
    border-color: #3b82f6;
}

.ps-step-body h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 6px;
    line-height: 1.35;
}

.ps-step-resp {
    font-size: 13px;
    color: #1d4ed8;
    margin: 0 0 8px;
}

.ps-step-resp strong { font-weight: 700; }

.ps-step-actions {
    margin: 0 0 8px;
    padding-left: 18px;
    list-style: none;
}

.ps-step-actions li {
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
    line-height: 1.45;
    position: relative;
}

.ps-step-actions li::before {
    content: '→';
    position: absolute;
    left: -16px;
    color: #3b82f6;
    font-weight: 600;
}

.ps-step-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 3px 10px;
    margin-top: 4px;
}

/* ── Step SVG animation ────────────────────────────────────── */
.ps-step-anim {
    margin-bottom: 12px;
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
}

.ps-step-svg {
    width: 100%;
    height: 110px;
    display: block;
}

/* ── Summary step special styles ───────────────────────────── */
.ps-step-summary .ps-step-body h5.ps-summary-title {
    font-size: 16px;
    color: #92400e;
    margin-bottom: 12px;
}

.ps-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.ps-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 12px;
}

.ps-summary-sponsor { background: #eff6ff; border: 1.5px solid #93c5fd; }
.ps-summary-pm      { background: #dbeafe; border: 1.5px solid #60a5fa; }

.ps-summary-role {
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
}

.ps-summary-desc {
    font-size: 13px;
    color: #1e40af;
}

/* ── Controls bar ──────────────────────────────────────────── */
.ps-generic-controls {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    padding: 12px 24px 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
}

/* Play button blue override (reuses storyboard-btn.primary styles,
   but we add a blue variant) */
.ps-generic-controls .storyboard-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.ps-generic-controls .storyboard-btn.primary:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ps-generic-modal { border-radius: 16px; }
    .ps-generic-header { padding: 16px 18px 12px; border-radius: 16px 16px 0 0; }
    .ps-generic-steps-wrap { padding: 8px 16px 0; }
    .ps-generic-meta { padding: 8px 16px 0; }
    .ps-generic-description { padding: 8px 16px 0; }
    .ps-generic-timeline { margin: 10px 16px 4px; }
    .ps-generic-step-counter { padding: 0 16px; }
    .ps-generic-controls { padding: 10px 16px 12px; border-radius: 0 0 16px 16px; }
    .ps-summary-grid { grid-template-columns: 1fr; }
    .ps-step-body h5 { font-size: 14px; }
}

/* ============================================================
   QUIZ CTA CARDS  (amber = Standard, purple = Scenario)
   ============================================================ */

#pm-v2-quiz-row { margin-top: 10px; }

.pq-cta {
    flex: 1;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Amber — Standard Quiz */
.pq-cta--amber {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}
.pq-cta--amber:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245,158,11,0.22);
    transform: translateY(-2px);
}
.pq-cta--amber .pq-cta-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.pq-cta--amber .pq-cta-title { color: #92400e; }
.pq-cta--amber .pq-cta-desc  { color: #b45309; }
.pq-cta--amber .pq-cta-arrow { color: #f59e0b; }

/* Purple — Scenario Quiz */
.pq-cta--purple {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border-color: #c4b5fd;
}
.pq-cta--purple:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 16px rgba(139,92,246,0.22);
    transform: translateY(-2px);
}
.pq-cta--purple .pq-cta-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}
.pq-cta--purple .pq-cta-title { color: #4c1d95; }
.pq-cta--purple .pq-cta-desc  { color: #6d28d9; }
.pq-cta--purple .pq-cta-arrow { color: #8b5cf6; }

/* Shared icon + text */
.pq-cta-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0; color: #fff;
}
.pq-cta-content { flex: 1; }
.pq-cta-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.pq-cta-desc  { font-size: 12px; line-height: 1.4; }
.pq-cta-arrow { font-size: 20px; font-weight: 600; }

/* ============================================================
   QUIZ MODAL — shared base
   ============================================================ */

.pq-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.65);
    z-index: 200002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pq-overlay.active { display: flex; animation: pmFadeIn 0.22s ease; }

.pq-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 900px; width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex; flex-direction: column;
    animation: pmModalIn 0.25s ease;
    box-shadow: 0 25px 80px rgba(0,0,0,0.28);
}
@keyframes pmModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.pq-header {
    display: flex; align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}
.pq-header--amber  { background: linear-gradient(135deg, #92400e 0%, #b45309 100%); }
.pq-header--purple { background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%); }

.pq-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85);
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 6px;
}
.pq-modal-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }

.pq-close {
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    font-size: 18px; width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
}
.pq-close:hover { background: rgba(255,255,255,0.28); }

/* Progress bar */
.pq-progress {
    height: 5px; background: #e2e8f0; flex-shrink: 0;
}
.pq-progress-fill {
    height: 100%; width: 0%; border-radius: 0 999px 999px 0;
    transition: width 0.35s ease;
}
.pq-fill--amber  { background: linear-gradient(90deg, #f59e0b, #d97706); }
.pq-fill--purple { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }

.pq-meta {
    text-align: right; padding: 6px 24px 2px;
    font-size: 12px; color: #94a3b8; font-weight: 500;
    flex-shrink: 0;
}

/* Scenario details */
.pq-scenario-details {
    margin: 8px 24px 0;
    border: 1px solid #e2e8f0; border-radius: 10px;
    overflow: hidden; flex-shrink: 0;
}
.pq-scenario-summary {
    padding: 10px 16px;
    font-size: 13px; font-weight: 600; color: #4c1d95;
    cursor: pointer; background: #faf5ff;
    list-style: none;
}
.pq-scenario-summary::-webkit-details-marker { display: none; }
.pq-scenario-summary::before { content: '▶ '; font-size: 10px; }
details[open] .pq-scenario-summary::before { content: '▼ '; }

.pq-scenario-body {
    padding: 10px 16px;
    font-size: 12px; color: #475569; line-height: 1.5;
    background: #fff;
    max-height: 130px;
    overflow-y: auto;
}
.pq-scenario-body ul { margin: 4px 0; padding-left: 18px; }
.pq-scenario-body li { margin-bottom: 3px; }
.pq-scenario-body strong { color: #1e293b; }

/* Body */
.pq-body { flex: 1; padding: 16px 24px 0; overflow-y: auto; }

/* Question text */
.pq-qtext {
    font-size: 16px; font-weight: 600; color: #1e293b;
    line-height: 1.55; margin-bottom: 20px;
}

/* Answer options */
.pq-options { display: flex; flex-direction: column; gap: 10px; }

.pq-option {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0; border-radius: 12px;
    background: #f8fafc; cursor: pointer;
    text-align: left; transition: all 0.18s ease;
    font-size: 14px; color: #334155; line-height: 1.45;
}
.pq-option:hover { border-color: #94a3b8; background: #f1f5f9; color: #1e293b; }
.pq-opt-text { color: inherit; }

.pq-opt-label {
    width: 26px; height: 26px; border-radius: 50%;
    background: #e2e8f0; color: #64748b;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}

/* Selected — amber */
.pq-modal--amber .pq-option.selected {
    border-color: #f59e0b; background: #fffbeb; color: #1e293b;
}
.pq-modal--amber .pq-option.selected .pq-opt-label {
    background: #f59e0b; color: #fff;
}

/* Selected — purple */
.pq-modal--purple .pq-option.selected {
    border-color: #8b5cf6; background: #faf5ff; color: #1e293b;
}
.pq-modal--purple .pq-option.selected .pq-opt-label {
    background: #8b5cf6; color: #fff;
}

/* Results screen */
.pq-score-section {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 0 16px; gap: 6px;
}
.pq-score-circle {
    width: 90px; height: 90px; border-radius: 50%;
    border: 5px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
}
.pq-score-pct  { font-size: 28px; font-weight: 800; }
.pq-score-label { font-size: 14px; color: #64748b; font-weight: 500; }

.pq-review-item {
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px;
}
.pq-review-num {
    font-size: 13px; font-weight: 700; color: #64748b;
    margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.pq-review-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 999px;
}
.pq-review-badge.correct { background: #dcfce7; color: #166534; }
.pq-review-badge.wrong   { background: #fee2e2; color: #991b1b; }

.pq-review-q {
    font-size: 14px; font-weight: 600; color: #1e293b;
    margin-bottom: 8px; line-height: 1.45;
}
.pq-review-answers { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.pq-review-ans {
    font-size: 13px; padding: 7px 12px; border-radius: 8px; line-height: 1.4;
}
.pq-ans-correct { background: #f0fdf4; color: #166534; border-left: 3px solid #22c55e; }
.pq-ans-wrong   { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }

.pq-review-just {
    font-size: 13px; color: #475569; line-height: 1.55;
    background: #f8fafc; border-radius: 8px; padding: 8px 12px;
}
.pq-review-just strong { color: #1e293b; }

/* Controls */
.pq-controls {
    position: sticky; bottom: 0;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    padding: 12px 24px 14px;
    display: flex; gap: 10px; justify-content: center;
    border-radius: 0 0 20px 20px; flex-shrink: 0;
}
.pq-modal--amber .pq-next--amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.pq-modal--amber .pq-next--amber:hover {
    box-shadow: 0 6px 20px rgba(245,158,11,0.35);
}
.pq-modal--purple .pq-next--purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}
.pq-modal--purple .pq-next--purple:hover {
    box-shadow: 0 6px 20px rgba(139,92,246,0.35);
}

/* Responsive */
@media (max-width: 600px) {
    .pq-modal { border-radius: 16px; }
    .pq-header { padding: 16px 18px 12px; border-radius: 16px 16px 0 0; }
    .pq-body   { padding: 12px 16px 0; }
    .pq-controls { padding: 10px 16px 12px; border-radius: 0 0 16px 16px; }
    .pq-qtext  { font-size: 15px; }
}

/* ============================================================
   MAP TAB — panel CTA button + modal
   ============================================================ */

/* Map tab accent */
.pm-v2-tab--map { position: relative; }
.pm-v2-tab--map .tab-icon { animation: pmapTabPulse 2.5s ease-in-out infinite; }
@keyframes pmapTabPulse {
    0%,100% { opacity:1; } 50% { opacity:.6; }
}

/* Map panel CTA */
.pm-v2-map-panel { padding: 12px 0; }
.pmap-panel-cta {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px; border-radius: 14px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    border: 2px solid #a5b4fc; cursor: pointer;
    transition: all 0.2s ease;
}
.pmap-panel-cta:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99,102,241,0.22);
    transform: translateY(-2px);
}
.pmap-panel-icon { font-size: 28px; flex-shrink: 0; }
.pmap-panel-text { flex:1; display:flex; flex-direction:column; gap:3px; }
.pmap-panel-text strong { font-size:15px; color:#3730a3; font-weight:700; }
.pmap-panel-text span   { font-size:13px; color:#4338ca; }
.pmap-panel-arrow { font-size:22px; color:#6366f1; font-weight:700; }

/* ── Map modal overlay ────────────────────────────────────── */
.pmap-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,14,40,0.82);
    z-index: 200003;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pmap-overlay.active { display: flex; animation: pmFadeIn 0.25s ease; }

.pmap-modal {
    background: #0f172a;
    border-radius: 20px;
    width: min(1000px, 98vw);
    max-height: 94vh;
    display: flex; flex-direction: column;
    animation: pmModalIn 0.3s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    overflow: hidden;
}

.pmap-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 24px 14px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    flex-shrink: 0;
}
.pmap-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15); color: #c7d2fe;
    font-size:11px; font-weight:600; padding:3px 10px;
    border-radius:999px; margin-bottom:6px;
}
.pmap-title { font-size:17px; font-weight:700; color:#fff; margin:0; }
.pmap-close-btn {
    background: rgba(255,255,255,0.12); border:none; color:#fff;
    font-size:18px; width:34px; height:34px; border-radius:50%;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background 0.15s;
}
.pmap-close-btn:hover { background:rgba(255,255,255,0.25); }

.pmap-body {
    flex:1; overflow:hidden;
    background: #0f172a;
    min-height: 520px;
}

/* ── SVG styles ──────────────────────────────────────────── */
.pmap-svg { width:100%; height:100%; display:block; }

/* Nodes: start invisible, animate in */
.pmap-node {
    opacity: 0;
    transform-origin: center;
}
.pmap-animated .pmap-node {
    animation: pmapNodeIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes pmapNodeIn {
    from { opacity:0; transform:scale(0.7); }
    to   { opacity:1; transform:scale(1); }
}

/* Hexagons: staggered pop */
.pmap-hex {
    opacity: 0;
    transform-origin: center;
}
.pmap-animated .pmap-hex {
    animation: pmapHexPop 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes pmapHexPop {
    from { opacity:0; transform:scale(0); }
    to   { opacity:1; transform:scale(1); }
}

/* Input lines */
.pmap-iline {
    stroke-dashoffset: 600;
}
.pmap-animated .pmap-iline {
    animation: pmapDraw 0.9s ease forwards;
}

/* Charter line */
.pmap-cline {
    stroke-dashoffset: 200;
}
.pmap-animated .pmap-cline {
    animation: pmapDraw 0.5s ease forwards;
}

/* Output fan lines */
.pmap-oline {
    stroke-dashoffset: 450;
}
.pmap-animated .pmap-oline {
    animation: pmapDraw 0.5s ease forwards;
}

@keyframes pmapDraw {
    to { stroke-dashoffset: 0; }
}

/* Labels fade in */
.pmap-lbl { opacity:0; }
.pmap-animated .pmap-lbl {
    animation: pmapFade 0.4s ease forwards;
}
@keyframes pmapFade {
    to { opacity:1; }
}

/* Flowing dots */
.pmap-dot { opacity: 0; }
.pmap-animated .pmap-dot {
    animation: pmapFade 0.3s ease forwards;
}

/* ============================================================
   MOBILE RESPONSIVE — all process modals & sub-modals
   Breakpoint: ≤ 640px (phone portrait)
   ============================================================ */

/* ── Desktop tip banner (hidden by default, shown on mobile) ── */
.mobile-desktop-tip {
    display: none;
}
@media (max-width: 768px) {
    .mobile-desktop-tip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #1e3a8a;
        color: #bfdbfe;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.4;
        padding: 8px 16px;
        text-align: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .mobile-desktop-tip span { font-size: 14px; }
}

/* ── Process detail modal — bottom-sheet on mobile ──────────── */
@media (max-width: 640px) {
    /* Slide up from bottom */
    .process-detail-modal {
        align-items: flex-end !important;
    }
    .process-modal-content,
    .process-modal-content.process-modal-v2 {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 0 !important;
        overflow-y: auto;
    }

    /* Header */
    .pm-v2-header { padding: 14px 14px 10px !important; }
    .pm-v2-title  { font-size: 15px !important; }
    .pm-v2-subtitle { font-size: 12px !important; }
    .pm-v2-header-meta { flex-wrap: wrap; gap: 6px; }
    .pm-v2-process-badge { font-size: 10px; }

    /* ITTO + CTA inner padding */
    .pm-v2-itto-section { padding: 12px 14px; }
    .pm-v2-itto-grid    { grid-template-columns: 1fr; gap: 8px; }
    .pm-v2-cta-row      { flex-direction: column !important; gap: 8px; }
    .pm-v2-cta-row .pm-v2-steps-generic-cta,
    .pm-v2-cta-row .pm-v2-practice-cta { flex: none; }
    #pm-v2-quiz-row     { flex-direction: column !important; gap: 8px; }

    /* ITTO card compact */
    .pm-v2-itto-card { padding: 10px 12px; }

    /* Separators */
    .pm-v2-layer-separator,
    .process-modal-layer-separator { padding: 10px 14px; }

    /* Tabs nav — wrap & smaller */
    .pm-v2-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 14px;
    }
    .pm-v2-tabs-nav::-webkit-scrollbar { display: none; }
    .pm-v2-tab {
        flex-shrink: 0;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        min-height: 40px;
    }
    .pm-v2-tab .tab-icon { font-size: 14px !important; }
    .pm-v2-tab .tab-label { font-size: 11px !important; }

    /* Tab panels inner padding */
    .pm-v2-tab-panel { padding: 10px 14px; }
    .details-grid    { grid-template-columns: 1fr !important; gap: 10px; }
    .influences-grid-v2 { grid-template-columns: 1fr !important; }

    /* Relationships tab */
    .relationships-content { flex-direction: column; gap: 12px; }

    /* Templates grid */
    .templates-grid { grid-template-columns: 1fr !important; }
    .pm-v2-templates-section { padding: 10px 14px; }
    .templates-header { flex-direction: column; gap: 8px; }

    /* Close button */
    .process-modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
}

/* ── Process Steps modal ────────────────────────────────────── */
@media (max-width: 640px) {
    .ps-generic-overlay { padding: 0; align-items: flex-end; }
    .ps-generic-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
    .ps-generic-header { border-radius: 20px 20px 0 0; padding: 14px 16px 10px; }
    .ps-generic-title-text { font-size: 15px; }
    .ps-generic-steps-wrap { padding: 6px 12px 0; }
    .ps-step-body h5 { font-size: 14px; }
    .ps-step-anim { display: none; } /* hide SVG on very small screens */
    .ps-summary-grid { grid-template-columns: 1fr; }
    .ps-generic-controls { padding: 10px 12px 14px; border-radius: 0; }
}

/* ── See in Practice modal ──────────────────────────────────── */
@media (max-width: 640px) {
    .pp-modal-overlay { padding: 0; align-items: flex-end; }
    .pp-modal {
        margin: 0 !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
    }
    .pp-modal-header { border-radius: 20px 20px 0 0 !important; padding: 16px !important; }
    .pp-modal-title h3 { font-size: 15px !important; }
    .pp-approach-tabs { flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; padding: 8px 12px !important; }
    .pp-approach-tab  { flex: 1; min-width: 120px; font-size: 12px !important; padding: 8px !important; }
    .pp-example-scenario { padding: 10px 12px !important; }
    .storyboard-controls { padding: 8px !important; }
    .storyboard-btn { padding: 8px 12px !important; font-size: 12px !important; }
    .pp-key-outputs { padding: 12px !important; }
    .outputs-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .comparison-table { font-size: 12px; }
    .pp-modal .pp-modal-description { padding: 8px 12px !important; }
}

/* ── Quiz modals (Standard + Scenario) ─────────────────────── */
@media (max-width: 640px) {
    .pq-overlay { padding: 0; align-items: flex-end; }
    .pq-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
    .pq-header { border-radius: 20px 20px 0 0; padding: 14px 16px 10px; }
    .pq-modal-title { font-size: 15px; }
    .pq-body { padding: 10px 14px 0; }
    .pq-qtext { font-size: 14px; }
    .pq-option { padding: 11px 12px; font-size: 13px; gap: 10px; }
    .pq-opt-label { width: 24px; height: 24px; font-size: 11px; }
    .pq-controls { padding: 10px 14px 14px; border-radius: 0; }
    .pq-score-circle { width: 76px; height: 76px; font-size: 20px; }
    .pq-score-pct { font-size: 22px; }
    .pq-review-just { font-size: 12px; }
    .pq-scenario-details { margin: 6px 14px 0; }
}

/* ── Map modal ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pmap-overlay { padding: 0; align-items: flex-end; }
    .pmap-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
    }
    .pmap-header { border-radius: 20px 20px 0 0; padding: 14px 16px 10px; }
    .pmap-title  { font-size: 14px; }
    .pmap-body   {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 340px;
    }
    /* SVG: fixed size so it's scrollable rather than squashed */
    .pmap-svg {
        width: 900px !important;
        height: 580px !important;
        min-width: 900px;
    }
    /* Mobile hint below map */
    .pmap-body::after {
        content: '← Scroll to explore the full map →';
        display: block;
        text-align: center;
        font-size: 11px;
        color: #475569;
        padding: 6px;
        background: #0f172a;
    }
}

/* ── Explore deeper / Where do I start — inside process modal ─ */
@media (max-width: 640px) {
    .pm-v2-tabs-content { padding: 0; }
    .pm-v2-tab-panel { padding: 10px 12px; }

    /* Map panel CTA */
    .pmap-panel-cta { padding: 14px; gap: 12px; }
    .pmap-panel-icon { font-size: 22px; }
    .pmap-panel-text strong { font-size: 14px; }
    .pmap-panel-text span   { font-size: 12px; }
}

/* ============================================================
   MOBILE — ONE DEFINITIVE BLOCK (replaces all previous attempts)
   All rules use !important to win over earlier stylesheet rules.
   ============================================================ */

/* <a> CTA card reset */
a.pm-v2-steps-generic-cta,
a.pm-v2-practice-cta,
a.pq-cta,
a.pmap-panel-cta {
    display: flex !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

/* role=button tappability */
[role="button"], a.pm-v2-steps-generic-cta, a.pq-cta {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}

@media (max-width: 640px) {

  /* ── Process detail modal ─────────────────────────────────── */
  .process-detail-modal { align-items: flex-end !important; }
  .process-modal-content,
  .process-modal-v2 {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 0 0 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  /* Prevent any inner element from overflowing */
  .process-modal-content * { max-width: 100% !important; box-sizing: border-box !important; }
  .pm-v2-header { padding: 12px 14px 10px !important; }
  .pm-v2-title  { font-size: 16px !important; }
  .pm-v2-itto-grid  { grid-template-columns: 1fr !important; }
  .pm-v2-cta-row    { flex-direction: column !important; gap: 8px !important; }
  #pm-v2-quiz-row   { flex-direction: column !important; gap: 8px !important; }
  .pm-v2-tabs-nav   { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .pm-v2-tabs-nav::-webkit-scrollbar { display: none !important; }
  .pm-v2-tab        { flex-shrink: 0 !important; font-size: 11px !important; padding: 7px 9px !important; }
  .pm-v2-tab-panel  { padding: 10px 12px !important; }
  .details-grid, .influences-grid-v2, .templates-grid { grid-template-columns: 1fr !important; }

  /* ── Process Steps overlay ────────────────────────────────── */
  .ps-generic-overlay { padding: 0 !important; align-items: flex-end !important; }
  .ps-generic-overlay.active { padding: 0 !important; align-items: flex-end !important; }
  .ps-generic-modal {
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
    max-height: 92vh !important; border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important;
  }

  /* ── See in Practice overlay ──────────────────────────────── */
  .pp-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .pp-modal-overlay.active { padding: 0 !important; align-items: flex-end !important; }
  .pp-modal {
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
    max-height: 92vh !important; border-radius: 20px 20px 0 0 !important;
    margin: 0 !important; overflow-x: hidden !important;
  }
  .pp-modal * { max-width: 100% !important; box-sizing: border-box !important; }
  .pp-approach-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .pp-approach-tabs::-webkit-scrollbar { display: none !important; }
  .pp-approach-tab  { flex-shrink: 0 !important; }
  .step-animation   { display: none !important; }
  .outputs-grid     { grid-template-columns: 1fr !important; }

  /* ── Quiz overlays ────────────────────────────────────────── */
  .pq-overlay { padding: 0 !important; align-items: flex-end !important; }
  .pq-overlay.active { padding: 0 !important; align-items: flex-end !important; }
  .pq-modal {
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
    max-height: 92vh !important; border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important;
  }

  /* ── Map overlay ──────────────────────────────────────────── */
  .pmap-overlay { padding: 0 !important; align-items: flex-end !important; }
  .pmap-overlay.active { padding: 0 !important; align-items: flex-end !important; }
  .pmap-modal {
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
    max-height: 88vh !important; border-radius: 20px 20px 0 0 !important;
  }
  .pmap-body { overflow: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* ── BUG 6 FIX: Modal sizing — X button always visible ────────
   Uses higher specificity selectors to win over all earlier rules */
@media (max-width: 768px) {
    div.process-detail-modal { align-items: flex-end !important; }
    div.process-modal-content,
    div.process-modal-v2 {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 82vh !important;   /* leave room so X is visible */
        border-radius: 20px 20px 0 0 !important;
        padding: 0 0 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    div#pp-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    div#pp-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 82vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    /* Close buttons — always accessible */
    .process-modal-close,
    #pp-modal-close {
        position: sticky !important;
        top: 8px !important;
        float: right !important;
        margin: 8px 8px 0 0 !important;
        z-index: 99 !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   MOBILE FIXES — Sticky controls + correct modal sizing
   ============================================================ */

/* ── Sticky controls: always visible without scrolling ───────── */
.ps-generic-controls,
.storyboard-controls,
.pq-controls {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.ps-generic-controls { background: #f8fafc; }
.pq-controls { background: #fff; }

/* ── Mobile: Process Steps + See in Practice sizing ──────────── */
@media (max-width: 768px) {

  /* Process Steps overlay */
  .ps-generic-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .ps-generic-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
  }
  .ps-generic-header { padding: 12px 14px 10px !important; }
  .ps-generic-header h3 { font-size: 15px !important; }
  .ps-step-title { font-size: 13px !important; }
  .ps-step-body h5 { font-size: 13px !important; }
  .ps-step-body p, .ps-step-actions li, .ps-step-resp { font-size: 12px !important; }
  .ps-step-anim { display: none !important; }
  .ps-generic-controls {
    padding: 8px 12px !important;
    gap: 8px !important;
    border-radius: 0 !important;
  }
  .storyboard-btn { padding: 8px 12px !important; font-size: 12px !important; }

  /* See in Practice overlay */
  .pp-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .pp-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  .pp-modal * { max-width: 100% !important; box-sizing: border-box !important; }
  .pp-modal-header { padding: 10px 14px !important; border-radius: 20px 20px 0 0 !important; }
  .pp-modal-header h2, .pp-modal-title { font-size: 14px !important; }
  .pp-approach-tabs {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    scrollbar-width: none !important; padding: 6px 12px !important;
  }
  .pp-approach-tabs::-webkit-scrollbar { display: none !important; }
  .pp-approach-tab { flex-shrink: 0 !important; font-size: 12px !important; padding: 6px 10px !important; }
  .step-content { padding: 10px 12px !important; }
  .step-content h5 { font-size: 13px !important; margin-bottom: 4px !important; }
  .step-content p { font-size: 12px !important; line-height: 1.4 !important; }
  .step-animation { display: none !important; }
  .storyboard-controls { padding: 8px 12px !important; gap: 6px !important; border-radius: 0 !important; }
  .outputs-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .output-item { font-size: 12px !important; }
  .pp-example-scenario { margin: 0 10px 8px !important; padding: 10px 12px !important; }
  .pp-scenario-header h4 { font-size: 13px !important; }
  .scenario-context { font-size: 12px !important; }

  /* Process modal (Initiate Project or Phase) */
  .process-detail-modal { align-items: flex-end !important; }
  .process-modal-content,
  .process-modal-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 0 0 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .process-modal-content * { max-width: 100% !important; box-sizing: border-box !important; }
  .pm-v2-header { padding: 10px 14px !important; }
  .pm-v2-title { font-size: 15px !important; }
  .pm-v2-subtitle { font-size: 12px !important; }
  .pm-v2-itto-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .pm-v2-cta-row { flex-direction: column !important; gap: 8px !important; }
  #pm-v2-quiz-row { flex-direction: column !important; gap: 8px !important; }
  .pm-v2-tabs-nav {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .pm-v2-tabs-nav::-webkit-scrollbar { display: none !important; }
  .pm-v2-tab { flex-shrink: 0 !important; font-size: 11px !important; padding: 7px 8px !important; }
  .pm-v2-tab-panel { padding: 8px 12px !important; }
  .details-grid, .influences-grid-v2, .templates-grid { grid-template-columns: 1fr !important; }

  /* Quiz modals */
  .pq-overlay { padding: 0 !important; align-items: flex-end !important; }
  .pq-modal {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    max-height: 88vh !important; border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important; margin: 0 !important;
  }
  .pq-header { padding: 10px 14px !important; border-radius: 20px 20px 0 0 !important; }
  .pq-body { padding: 10px 12px 0 !important; }
  .pq-qtext { font-size: 14px !important; }
  .pq-option { padding: 10px 12px !important; font-size: 13px !important; }
  .pq-controls { padding: 8px 12px 12px !important; border-radius: 0 !important; }

  /* Map modal */
  .pmap-overlay { padding: 0 !important; align-items: flex-end !important; }
  .pmap-modal {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    max-height: 85vh !important; border-radius: 20px 20px 0 0 !important;
  }
  .pmap-header { padding: 10px 14px !important; border-radius: 20px 20px 0 0 !important; }

  /* Close buttons — always visible */
  .process-modal-close,
  .pp-modal-close,
  #pp-modal-close {
    position: sticky !important;
    top: 8px !important;
    float: right !important;
    z-index: 20 !important;
  }
}

/* ============================================================
   COMPACT BREAKPOINT — 1280×720 small laptop screens
   Keeps 900px width. Reduces: padding, fonts (16px titles),
   tab fonts/padding. SVG map scales with viewBox → full map visible.
   ============================================================ */
@media (max-width: 1280px) and (min-width: 769px),
       (max-height: 720px)  and (min-width: 769px) {

  /* ── Max-height: use more screen ────────────────────────── */
  .process-modal-content,
  .process-modal-content.process-modal-v2 { max-height: 96vh !important; padding: 16px 20px !important; }
  .pp-modal          { max-height: 96vh !important; }
  .ps-generic-modal  { max-height: 96vh !important; }
  .pq-modal          { max-height: 96vh !important; }
  .pmap-modal        { max-height: 96vh !important; }

  /* ── Title fonts → 16px ─────────────────────────────────── */
  .pm-v2-title         { font-size: 16px !important; }
  .pp-modal-header h3  { font-size: 16px !important; }
  .ps-generic-header h3 { font-size: 16px !important; }
  .pmap-title          { font-size: 16px !important; }
  .pm-v2-subtitle      { font-size: 12px !important; }

  /* ── Header padding ──────────────────────────────────────── */
  .pm-v2-header        { padding: 10px 16px !important; }
  .pp-modal-header     { padding: 12px 18px !important; }
  .ps-generic-header   { padding: 10px 16px !important; }
  .pmap-header         { padding: 10px 16px 8px !important; }
  .pq-header           { padding: 10px 16px !important; }

  /* ── Body / content padding ──────────────────────────────── */
  .pm-v2-itto-section  { padding: 10px 16px !important; }
  .pm-v2-tab-panel     { padding: 10px 16px !important; }
  .pp-approach-content { padding: 10px 16px !important; }
  .pp-storyboard       { padding: 10px !important; }
  .pp-example-scenario { padding: 8px 12px !important; margin-bottom: 8px !important; }
  .pp-scenario-header h4 { font-size: 13px !important; }
  .scenario-context    { font-size: 12px !important; }
  .pq-body             { padding: 10px 16px 0 !important; }
  .ps-generic-controls { padding: 8px 14px !important; }
  .storyboard-controls { padding: 8px 14px !important; }

  /* ── Tabs — font + padding reduced ──────────────────────── */
  .pm-v2-tab           { padding: 8px 10px !important; font-size: 11px !important; }
  .pm-v2-tab .tab-icon { font-size: 14px !important; }
  .pp-approach-tab     { padding: 7px 12px !important; font-size: 12px !important; }

  /* ── Step content ────────────────────────────────────────── */
  .step-content        { padding: 8px 10px !important; }
  .step-content h5     { font-size: 12px !important; }
  .step-content p      { font-size: 11.5px !important; line-height: 1.4 !important; }

  /* ── Map SVG: scale to fit in 96vh without scrolling ─────
     pmap-modal is 96vh tall. Header ~60px. Body = rest.
     SVG has viewBox 0 0 1000 640.  We let it fill width
     and set height:auto so it scales proportionally.
     The viewBox guarantees everything remains visible.    */
  .pmap-body {
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pmap-svg {
    width: 100% !important;
    height: auto !important;        /* scales with viewBox */
    max-height: calc(96vh - 80px) !important;
  }

  /* ── CTA Cards: ~50% smaller height + text ─────────────────
     Original padding: 16-18px 20px → 8px 12px
     Original icon:    52px / 48px  → 28px / 26px
     Original title:   16px / 15px  → 12px
     Original desc:    13px / 12px  → 10px
     Original gap:     16px / 14px  → 8px              */

  /* Process Steps card */
  .pm-v2-steps-generic-cta   { padding: 8px 12px !important; gap: 8px !important; border-radius: 10px !important; }
  .steps-generic-cta-icon    { width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 8px !important; }
  .steps-generic-cta-title   { font-size: 12px !important; margin-bottom: 2px !important; }
  .steps-generic-cta-desc    { font-size: 10px !important; }
  .steps-generic-cta-arrow   { font-size: 14px !important; }

  /* See in Practice card */
  .pm-v2-practice-cta        { padding: 8px 12px !important; gap: 8px !important; border-radius: 10px !important; }
  .practice-cta-icon         { width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 8px !important; }
  .practice-cta-title        { font-size: 12px !important; margin-bottom: 2px !important; }
  .practice-cta-desc         { font-size: 10px !important; }
  .practice-cta-arrow        { font-size: 14px !important; }

  /* Standard Quiz + Scenario Quiz cards */
  .pq-cta                    { padding: 8px 12px !important; gap: 8px !important; border-radius: 10px !important; }
  .pq-cta-icon               { width: 26px !important; height: 26px !important; font-size: 13px !important; border-radius: 8px !important; }
  .pq-cta-title              { font-size: 12px !important; margin-bottom: 1px !important; }
  .pq-cta-desc               { font-size: 10px !important; }
  .pq-cta-arrow              { font-size: 14px !important; }

  /* ── All 4 cards on one row — CSS Grid guarantees equal height.
     Grid items in the same row are ALWAYS the same height (spec).
     No stretch tricks needed — grid handles it automatically.   */
  .pm-v2-cta-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Each cta-row fills its grid cell (grid items stretch by default) */
  .pm-v2-cta-wrapper .pm-v2-cta-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  /* Cards inside each row fill the row's height */
  .pm-v2-cta-wrapper .pm-v2-cta-row > * {
    flex: 1 !important;
    min-width: 0 !important;
  }


  /* ── Overlay padding ──────────────────────────────────────  */
  .pp-modal-overlay,
  .ps-generic-overlay,
  .pq-overlay,
  .pmap-overlay { padding: 14px !important; }
}

/* ── pp-modal-meta inside header — desktop inline, mobile below ── */
/* Desktop: header already flex row → title | meta | close btn */
.pp-modal-header {
    flex-wrap: nowrap;
    gap: 16px;
}

/* Mobile: wrap so meta drops below title */
@media (max-width: 768px) {
    .pp-modal-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    .pp-modal-title {
        flex: 1 1 100% !important;   /* title takes full row */
        order: 1 !important;
    }
    .pp-modal-meta {
        flex: 1 1 auto !important;   /* meta below title */
        order: 2 !important;
    }
    .pp-modal-close {
        order: 0 !important;         /* close btn stays top-right */
        align-self: flex-start !important;
        flex-shrink: 0 !important;
    }
    /* Meta tags: revert to colored pills on mobile (not on green) */
    .pp-meta-tag {
        background: rgba(255,255,255,0.30) !important;
        color: #ffffff !important;
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}