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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f8f8f8;
    color: #333;
}

/* Top Navigation Bar */
.top-nav-bar {
    background-color: #1a1a1a;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 40px;
    height: 60px;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 20px 0;
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}

.nav-link:hover {
    color: #667eea;
    border-bottom-color: #667eea;
}

.nav-link.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

/* Dropdown Navigation */
.nav-dropdown {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.dropdown-toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-toggle:hover {
    color: #667eea;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #2a2a2a;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    top: 100%;
    left: 0;
    border-radius: 4px;
    margin-top: -3px;
    padding: 8px 0;
}

.nav-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    border: none;
}

.dropdown-item:hover {
    background-color: #3a3a3a;
    color: #667eea;
}

.dropdown-item.active {
    background-color: #1a1a1a;
    color: #667eea;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Header */
.header {
    margin-bottom: 40px;
}

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

.header h1 {
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -0.5px;
    margin: 0;
}

.version-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.version-selector label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.version-selector select {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    color: #333;
    cursor: pointer;
    font-weight: 500;
    transition: border-color 0.3s ease;
}

.version-selector select:hover {
    border-color: #333;
}

.version-selector select:focus {
    outline: none;
    border-color: #333;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
}

/* Step Navigation Buttons */
.step-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    overflow-x: auto;
}

.step-btn {
    padding: 10px 16px;
    border: 2px solid #ddd;
    background: white;
    color: #333;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.step-btn:hover {
    border-color: #000;
}

.step-btn.active {
    background: #000;
    color: white;
    border-color: #000;
}

/* Main Content */
.main-content {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.step-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.step-intro {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

/* Objective Selection */
.objective-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.objective-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 32px 24px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    font-family: inherit;
}

.objective-card:hover {
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.objective-card.active {
    border-color: #000;
    background: #f8f8f8;
}

.objective-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

.objective-card.disabled:hover {
    border-color: #e0e0e0;
    box-shadow: none;
}

.objective-card.disabled .objective-select-btn {
    opacity: 0.6;
    cursor: not-allowed;
}

.objective-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.objective-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.objective-card p {
    font-size: 14px;
    color: #666;
}

/* Objective Section Header */
.objective-section-header {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    margin-top: 40px;
}

.objective-section-header:first-of-type {
    margin-top: 0;
}

/* Large Objective Cards */
.objective-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.objective-card-large {
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    padding: 48px 32px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    font-family: inherit;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.objective-card-large:hover {
    border-color: #000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.objective-card-large.active {
    border-color: #000;
    background: #000;
    color: white;
}

.objective-card-large.active .objective-icon {
    font-size: 72px;
}

.objective-card-large.active h3 {
    color: white;
}

.objective-card-large.active p {
    color: #e0e0e0;
}

.objective-card-large .objective-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.objective-card-large h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000;
}

.objective-card-large p {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}

/* Form Elements */
.form-input,
.date-input,
.search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.form-input:focus,
.date-input:focus,
.search-input:focus {
    outline: none;
    border-color: #000;
}

/* Step Info Box */
.step-info-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-left: 4px solid #2196f3;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 40px;
    display: flex;
    gap: 16px;
}

.info-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.info-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.info-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 8px;
}

.info-content p:last-child {
    margin-bottom: 0;
}

/* Problem Statement Card */
.problem-statement-card {
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 40px;
}

.problem-statement-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* Multi-Year Analysis */
.multi-year-analysis {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin-bottom: 40px;
}

.charts-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.line-chart-wrapper {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
}

.line-chart-wrapper h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.line-chart-wrapper canvas {
    max-height: 250px;
}

.diagnosis-text-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #ffc107;
}

.diagnosis-text-box p {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 12px;
    color: #555;
}

.diagnosis-text-box p:last-child {
    margin-bottom: 0;
}

.diagnosis-metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.diagnosis-metric strong {
    color: #333;
}

.diagnosis-metric.positive {
    color: #28a745;
}

.diagnosis-metric.negative {
    color: #dc3545;
}

/* Country Breakdown Section */
.country-breakdown-section {
    margin-bottom: 40px;
}

.country-breakdown-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.country-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.country-breakdown-table thead {
    background: #f8f9fa;
}

.country-breakdown-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.country-breakdown-table td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.country-breakdown-table .country-code {
    font-weight: 600;
}

.country-breakdown-table .positive {
    color: #28a745;
    font-weight: 600;
}

.country-breakdown-table .negative {
    color: #dc3545;
    font-weight: 600;
}

.country-breakdown-table .neutral {
    color: #999;
}

/* Diagnosis Controls */
.diagnosis-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Diagnosis Tabs */
.diagnosis-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
}

.diagnosis-tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: #999;
    transition: all 0.3s ease;
    font-size: 14px;
}

.diagnosis-tab-btn:hover {
    color: #333;
}

.diagnosis-tab-btn.active {
    color: #000;
    border-bottom-color: #000;
}

/* Diagnosis Tab Content */
.diagnosis-tab-content {
    display: none;
}

.diagnosis-tab-content.active {
    display: block;
}

.placeholder-content {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    border: 2px dashed #e0e0e0;
}

.placeholder-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.placeholder-content p {
    font-size: 14px;
    color: #999;
}

.control-group {
    display: flex;
    flex-direction: column;
}

.control-group label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Country Cards Grid */
.country-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.country-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
}

.country-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: #333;
    transition: width 0.3s ease;
}

.progress-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.split-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.split-progress .progress-bar {
    flex: 1;
    margin-bottom: 0;
}

.split-progress .progress-bar.new {
    background: #fff3cd;
}

.split-progress .progress-bar.new .progress-fill {
    background: #ffc107;
}

.split-progress .progress-bar.returning {
    background: #d4edda;
}

.split-progress .progress-bar.returning .progress-fill {
    background: #28a745;
}

.trend-chart {
    height: 120px;
    margin: 16px 0;
    background: #fafafa;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 12px;
    gap: 6px;
}

.trend-bar {
    flex: 1;
    background: #ddd;
    border-radius: 2px;
    min-height: 20px;
}

.trend-bar.positive {
    background: #28a745;
}

.trend-bar.negative {
    background: #dc3545;
}

.diagnosis-callout {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 12px;
}

/* Market Tabs */
.market-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e0e0e0;
}

.market-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: #999;
    transition: all 0.3s ease;
}

.market-tab:hover {
    color: #333;
}

.market-tab.active {
    color: #000;
    border-bottom-color: #000;
}

/* Growth Cards */
.growth-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.growth-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.growth-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.growth-card__indicator {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    min-width: 30px;
    text-align: center;
}

.growth-card__title-group {
    flex: 1;
}

.growth-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.growth-card__subtitle {
    font-size: 12px;
    color: #666;
    margin: 0;
    font-weight: 500;
}

.growth-card__target {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Color variations by scenario */
.growth-card--maintain {
    background: #e8f0ff;
    border-color: #b3d9ff;
}

.growth-card--maintain .growth-card__indicator {
    color: #0052cc;
}

.growth-card--plus5 {
    background: #e6f7f0;
    border-color: #a8e6d9;
}

.growth-card--plus5 .growth-card__indicator {
    color: #00a870;
}

.growth-card--minus5 {
    background: #fff3e6;
    border-color: #ffc99f;
}

.growth-card--minus5 .growth-card__indicator {
    color: #e67e22;
}

.growth-card:hover {
    border-color: #000;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.growth-card.selected {
    border-color: #000;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.growth-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.growth-metric {
    font-size: 12px;
    color: #666;
}

.growth-metric strong {
    color: #333;
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

/* Value Projection Table */
.value-projection-table {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.projection-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.projection-label {
    font-weight: 600;
    font-size: 14px;
}

.projection-charts {
    display: flex;
    gap: 16px;
}

.projection-chart {
    flex: 1;
}

.chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    margin-bottom: 8px;
}

.chart-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.chart-bar-label {
    font-size: 12px;
    min-width: 100px;
}

.chart-bar-fill {
    flex: 1;
    height: 24px;
    background: #e0e0e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
}

/* Goal Summary Banner */
.goal-summary-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.goal-item {
    display: flex;
    flex-direction: column;
}

.goal-item-label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.goal-item-value {
    font-size: 28px;
    font-weight: 600;
}

/* Budget Calculator Section */
.budget-calc-section {
    margin-bottom: 30px;
}

.budget-display-card {
    background: white;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    margin-bottom: 40px;
}

.budget-display-card label {
    display: block;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.budget-display {
    font-size: 48px;
    font-weight: 300;
    color: #000;
}

.cpa-table,
.projection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 24px;
}

.cpa-table thead,
.projection-table thead {
    background: #f8f9fa;
}

.cpa-table th,
.projection-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.cpa-table td,
.projection-table td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.budget-calc-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
}

.summary-item {
    display: flex;
    flex-direction: column;
}

.summary-item label {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 28px;
    font-weight: 600;
    color: #333;
}

/* LTV Justification */
.ltv-justification {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.ltv-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #667eea;
}

.ltv-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

.ltv-metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.ltv-metric label {
    color: #999;
}

.ltv-metric value {
    font-weight: 600;
    color: #333;
}

.ltv-highlight {
    background: white;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
    text-align: center;
    border: 2px solid #667eea;
}

.ltv-highlight-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.ltv-highlight-value {
    font-size: 24px;
    font-weight: 600;
    color: #667eea;
}

/* Budget Allocation Section */
.budget-allocation-section {
    margin-bottom: 30px;
}

.budget-allocation-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.allocation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.allocation-table thead {
    background: #f8f9fa;
}

.allocation-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.allocation-table td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.allocation-table input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}

/* Campaign Setup Form */
.campaign-setup-form {
    margin-bottom: 30px;
}

.form-section {
    margin-bottom: 20px;
}

.form-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.date-range {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-range .date-input {
    flex: 1;
}

.date-range span {
    color: #999;
}

.file-upload {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.file-upload input {
    display: none;
}

.upload-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.checkbox-label input {
    width: 18px;
    height: 18px;
}

.help-text {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 4px;
}

/* Setup Summary */
.setup-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.setup-summary h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.setup-summary p {
    font-size: 13px;
    color: #666;
}

/* KPI Widgets */
.kpi-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.kpi-widget {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.kpi-widget.critical {
    background: #ffebee;
    border: 2px solid #dc3545;
}

.kpi-widget.warning {
    background: #fff3cd;
    border: 2px solid #ffc107;
}

.kpi-widget.success {
    background: #d4edda;
    border: 2px solid #28a745;
}

.kpi-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/* Optimization Tabs */
.optimization-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: #999;
    transition: all 0.3s ease;
    font-size: 14px;
}

.tab-btn:hover {
    color: #333;
}

.tab-btn.active {
    color: #000;
    border-bottom-color: #000;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.performance-table,
.sku-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.performance-table thead,
.sku-table thead {
    background: #f8f9fa;
}

.performance-table th,
.sku-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}

.performance-table td,
.sku-table td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

/* Alerts Panel */
.alerts-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item {
    background: #f8f9fa;
    border-left: 4px solid #ffc107;
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
}

.alert-item.critical {
    border-left-color: #dc3545;
    background: #ffebee;
}

.alert-item.success {
    border-left-color: #28a745;
    background: #d4edda;
}

/* Reporting */
.reporting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.target-achievement-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
}

.target-achievement-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.achievement-metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.achievement-metric label {
    color: #999;
}

.achievement-metric value {
    font-weight: 600;
}

.target-achievement-pct {
    font-size: 32px;
    font-weight: 600;
    color: #28a745;
    margin: 16px 0;
}

/* LTV Narrative */
.ltv-narrative-view {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.ltv-narrative-view h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.impact-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.impact-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.impact-row:last-child {
    border-bottom: none;
}

.impact-label {
    font-weight: 600;
    font-size: 13px;
}

.impact-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    font-size: 13px;
}

.impact-value {
    display: flex;
    flex-direction: column;
}

.impact-value-label {
    color: #999;
    font-size: 11px;
}

.impact-value-data {
    font-weight: 600;
    color: #333;
}

/* Buttons */
.btn-text,
.btn-primary,
.btn-next,
.btn-prev,
.btn-export,
.btn-complete {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-text {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.btn-text:hover {
    background: #f5f5f5;
}

.btn-primary {
    background: #000;
    color: white;
}

.btn-primary:hover {
    background: #333;
}

.btn-next,
.btn-export,
.btn-complete {
    background: #000;
    color: white;
    padding: 14px 32px;
    font-size: 16px;
}

.btn-next:hover,
.btn-export:hover,
.btn-complete:hover {
    background: #333;
}

.btn-prev {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    padding: 14px 32px;
    font-size: 16px;
}

.btn-prev:hover {
    background: #f5f5f5;
}

/* Step Footer */
.step-content {
    display: flex;
    flex-direction: column;
}

.step-content[style*="display: none"] {
    display: none !important;
}

.step-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 40px;
    margin-top: 0;
    padding-bottom: 20px;
    padding-top: 0;
    border-bottom: 1px solid #e0e0e0;
    border-top: none;
    order: -1;
}

/* Responsive */
@media (max-width: 1024px) {
    .projection-charts {
        flex-direction: column;
    }

    .impact-values {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 20px 10px;
    }

    .header h1 {
        font-size: 32px;
    }

    .step-buttons {
        gap: 6px;
    }

    .step-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .main-content {
        padding: 20px;
    }

    .budget-value {
        font-size: 40px;
    }

    .step-footer {
        flex-direction: column;
    }

    .btn-next,
    .btn-prev,
    .btn-export,
    .btn-complete {
        width: 100%;
    }

    .country-cards-grid,
    .objective-grid,
    .reporting-grid {
        grid-template-columns: 1fr;
    }

    .growth-metrics {
        grid-template-columns: 1fr;
    }

    .allocation-table {
        font-size: 11px;
    }

    .allocation-table th,
    .allocation-table td {
        padding: 8px;
    }

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

    .impact-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================================
   NARRATIVE & REPORTING STYLES
   ============================================================================ */

.narrative-section {
    margin: 40px 0;
    padding: 24px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.narrative-section h3 {
    margin-bottom: 20px;
}

.narrative-box {
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    padding: 16px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.narrative-box pre {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================================================
   ADVANCED FEATURES CONTAINER STYLES
   ============================================================================ */

#advancedFeaturesContainer,
#step2FeaturesContainer,
#advancedReportingContainer {
    margin-top: 40px;
}

#advancedFeaturesContainer > div,
#step2FeaturesContainer > div,
#advancedReportingContainer > div {
    margin-bottom: 40px;
}

/* ============================================================================
   OBJECTIVE SELECTOR STYLES
   ============================================================================ */

.objective-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    margin-top: 20px;
}

.objective-btn {
    padding: 28px;
    border: 2px solid #e8e8e8;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.objective-btn:hover {
    border-color: #bbb;
    background: #fafafa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.objective-btn.active {
    border-color: #000;
    background: #f5f5f5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.objective-btn.active::before {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: #000;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.objective-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.objective-btn:disabled:hover {
    border-color: #e8e8e8;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: none;
}

.objective-btn {
    position: relative;
}

.objective-btn-icon {
    font-size: 40px;
    min-width: 48px;
    flex-shrink: 0;
    line-height: 1;
}

.objective-btn-text {
    flex: 1;
}

.objective-btn-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.objective-btn-text p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* ============================================================================
   OBJECTIVE SELECTOR STYLES (DETAILED)
   ============================================================================ */

.objective-selector-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    margin-top: 24px;
}

.objective-card {
    padding: 32px;
    border: 2px solid #e8e8e8;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.objective-card:hover:not(:disabled) {
    border-color: #bbb;
    background: #fafafa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.objective-card.active {
    border-color: #000;
    background: #f5f5f5;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.objective-card.active::after {
    content: '✓ Selected';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 80px;
    height: 28px;
    background: #000;
    color: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.objective-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.objective-card-icon {
    font-size: 32px;
    line-height: 1;
}

.objective-card-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f0f0;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.objective-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

.objective-card-logic {
    padding: 12px;
    background: #f9f9f9;
    border-left: 3px solid #667eea;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.objective-card-logic p {
    margin: 0;
}

.objective-card-logic strong {
    color: #333;
}

.objective-card-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

.detail-item {
    display: flex;
    gap: 12px;
    font-size: 13px;
}

.detail-label {
    font-weight: 600;
    color: #333;
    min-width: 100px;
}

.detail-value {
    color: #666;
}

.objective-select-btn {
    margin-top: 8px;
    padding: 10px 16px;
    background: #000;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.objective-select-btn:hover {
    background: #333;
}

.objective-select-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.objective-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.objective-card.disabled {
    opacity: 0.6;
}

/* ============================================================================
   CAMPAIGN SETUP PANEL STYLES
   ============================================================================ */

.campaign-setup-panel {
    background: white;
    padding: 32px;
    border-radius: 8px;
    margin-top: 24px;
}

.campaign-setup-panel h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.setup-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
}

.setup-column-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.setup-column-forecast {
    position: sticky;
    top: 40px;
}

.form-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-hint {
    font-size: 12px;
    color: #999;
    margin: 4px 0 8px;
}

.form-hint.secondary {
    margin-top: 8px;
    text-decoration: underline;
    color: #667eea;
}

.input-with-label {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-label .currency {
    position: absolute;
    left: 12px;
    font-weight: 600;
    color: #333;
}

.input-with-label .form-input {
    padding-left: 28px;
}

.budget-distribution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.budget-insight {
    padding: 12px;
    background: #f0f3ff;
    border-left: 3px solid #667eea;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}

.bidding-strategy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.campaign-basics {
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-top: 12px;
}

.campaign-basics h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.campaign-section {
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.campaign-section h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
    cursor: pointer;
}

.campaign-section.collapsed h4::before {
    content: '▶ ';
    margin-right: 4px;
}

.investment-split {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 4px;
    font-size: 13px;
}

.split-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.split-item label {
    font-size: 11px;
    color: #999;
}

.split-value {
    font-weight: 600;
    color: #333;
}

.split-divider {
    width: 1px;
    height: 40px;
    background: #ddd;
}

.countries-controls {
    margin-bottom: 16px;
}

.control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.control-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn:hover {
    border-color: #333;
    background: #f9f9f9;
}

.countries-list {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.country-flag {
    font-size: 20px;
}

.country-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.remove-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.remove-btn:hover {
    color: #999;
}

.add-countries-btn {
    padding: 8px 12px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #667eea;
    transition: all 0.2s ease;
}

.add-countries-btn:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

.forecast-card {
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.forecast-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1a1a1a;
}

.forecast-subtitle {
    font-size: 11px;
    color: #999;
    margin-bottom: 16px;
}

.forecast-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forecast-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.forecast-label {
    color: #666;
    font-weight: 500;
}

.forecast-value {
    color: #333;
    font-weight: 600;
}
/* ============================================================================
   CAMPAIGN SETUP PANEL STYLES (REFINED)
   ============================================================================ */

.campaign-setup-panel {
    background: white;
    padding: 0;
    border-radius: 0;
    margin-top: 24px;
}

.campaign-setup-panel h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 32px;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.setup-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
}

@media (max-width: 1200px) {
    .setup-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.setup-column-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.setup-column-forecast {
    position: sticky;
    top: 20px;
    height: fit-content;
}

/* Form Elements */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-section label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}

.form-input {
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:hover {
    border-color: #d0d0d0;
}

.form-input:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-hint {
    font-size: 12px;
    color: #888;
    margin-top: -4px;
}

.form-hint.secondary {
    color: #667eea;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 8px;
}

.form-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* Campaign Basics Section */
.campaign-basics {
    padding: 28px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-top: 0;
}

.campaign-basics h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.date-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.date-input:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.date-range span {
    color: #999;
    font-weight: 500;
}

.input-with-label {
    position: relative;
    display: flex;
}

.input-with-label .currency {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #666;
    font-size: 14px;
}

.input-with-label .form-input {
    padding-left: 32px;
}

.budget-distribution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.budget-insight {
    padding: 14px;
    background: linear-gradient(135deg, #f0f3ff 0%, #f5f8ff 100%);
    border-left: 3px solid #667eea;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.budget-insight p {
    margin: 0;
}

.bidding-strategy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Campaign Sections */
.campaign-section {
    padding: 24px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.campaign-section:hover {
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.campaign-section h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a1a1a;
    cursor: pointer;
}

.campaign-section.collapsed h4::before {
    content: '▶ ';
    margin-right: 6px;
    color: #999;
}

.campaign-section:not(.collapsed) h4::before {
    content: '▼ ';
    margin-right: 6px;
    color: #999;
}

/* Investment Split */
.investment-split {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 8px;
}

.split-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.split-item:first-child {
    padding-left: 0;
}

.split-item:last-child {
    padding-right: 0;
}

.split-item label {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

.split-value {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 14px;
}

.split-divider {
    width: 1px;
    height: 48px;
    background: #f0f0f0;
}

/* Countries Section */
.countries-controls {
    margin-bottom: 20px;
}

.control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.control-btn {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn:hover {
    border-color: #ccc;
    background: #f9f9f9;
    color: #333;
}

.countries-list {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.country-item:hover {
    border-color: #e0e0e0;
    background: #f9f9f9;
}

.country-flag {
    font-size: 20px;
    min-width: 28px;
}

.country-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.remove-btn {
    background: none;
    border: none;
    color: #ddd;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn:hover {
    color: #999;
}

.add-countries-btn {
    padding: 10px 14px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #667eea;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.add-countries-btn:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

/* Forecast Card */
.forecast-card {
    padding: 24px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.forecast-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}

.forecast-subtitle {
    font-size: 11px;
    color: #999;
    margin-bottom: 20px;
}

.forecast-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.forecast-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
}

.forecast-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.forecast-label {
    color: #888;
    font-weight: 500;
    font-size: 13px;
}

.forecast-value {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 13px;
}

/* ============================================================================
   GROWTH DIAGNOSIS SECTION
   ============================================================================ */

.executive-summary {
    margin-bottom: 50px;
}

.executive-summary-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.summary-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.summary-trend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trend-emoji {
    font-size: 32px;
}

.trend-label {
    font-size: 20px;
    font-weight: 700;
}

.trend-label.positive {
    color: #2e7d32;
}

.trend-label.negative {
    color: #c62828;
}

.summary-problem {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.problem-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.problem-area {
    font-size: 18px;
    font-weight: 700;
    color: #667eea;
}

.summary-metrics {
    display: flex;
    gap: 24px;
}

.summary-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-name {
    font-size: 12px;
    font-weight: 600;
    color: #999;
}

.metric-val {
    font-size: 24px;
    font-weight: 700;
}

.metric-val.positive {
    color: #2e7d32;
}

.metric-val.negative {
    color: #c62828;
}

/* Priority Market Action Cards */
.priority-markets-section {
    margin-bottom: 50px;
}

.priority-markets-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.market-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.market-action-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.market-action-card:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    border-color: #667eea;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.country-code-large {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.trend-indicator {
    font-size: 18px;
}

.trend-indicator.positive {
    color: #2e7d32;
}

.trend-indicator.negative {
    color: #c62828;
}

.card-growth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}

.growth-row {
    display: flex;
    justify-content: space-between;
    color: #666;
}

.growth-row .val {
    font-weight: 600;
}

.growth-row .val.pos {
    color: #2e7d32;
}

.growth-row .val.neg {
    color: #c62828;
}

.card-problem {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

/* Recommended Objectives */
.recommended-objectives-section {
    margin-bottom: 40px;
}

.recommended-objectives-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.objective-recommendation-card {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 28px;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.objective-recommendation-card:hover {
    border-color: #667eea;
}

.objective-recommendation-card.recommended {
    background: #f5f7ff;
    border: 2px solid #667eea;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12);
}

.recommended-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.obj-icon {
    font-size: 32px;
}

.objective-recommendation-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Growth Diagnosis CTA */
.growth-diagnosis-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-primary-large {
    background-color: #667eea;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-large:hover {
    background-color: #5568d3;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Campaign Objectives Grid */
.campaign-objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.objective-panel {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.objective-panel:hover {
    border-color: #667eea;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.objective-panel.active {
    border: 2px solid #667eea;
    background: linear-gradient(135deg, #f5f7ff 0%, #f0f3ff 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
}

.panel-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background-color: transparent;
    color: transparent;
    min-width: 80px;
    text-align: center;
}

.panel-badge.recommended {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.panel-icon {
    font-size: 40px;
}

.objective-panel h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.objective-panel p {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 0;
    flex-grow: 1;
}

.objective-panel-btn {
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.objective-panel-btn:hover {
    background-color: #333;
}

.objective-panel.active .objective-panel-btn {
    background-color: #667eea;
}

.objective-panel.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9f9f9;
}

.objective-panel.disabled:hover {
    border-color: #e0e0e0;
    box-shadow: none;
    transform: none;
}

.objective-panel.disabled .panel-icon {
    opacity: 0.6;
}

.objective-panel.disabled h3,
.objective-panel.disabled p {
    color: #ccc;
}

.objective-panel.disabled .objective-panel-btn {
    background-color: #ccc;
    cursor: not-allowed;
}

.objective-panel.disabled .objective-panel-btn:hover {
    background-color: #ccc;
}

/* Objective-Specific Distinctions */
.objective-distinctions-panel {
    background: linear-gradient(135deg, #f5f7ff 0%, #f0f3ff 100%);
    border: 1px solid #e0e6ff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 32px;
}

.objective-distinctions-panel h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px 0;
}

.distinctions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.distinction-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
}

.distinction-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.distinction-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.distinction-subtitle {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.distinction-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-item {
    font-size: 11px;
    color: #666;
    padding: 6px;
    background: #fafafa;
    border-radius: 4px;
}

.metric-item strong {
    color: #667eea;
    font-weight: 600;
}

.no-objectives-message {
    text-align: center;
    padding: 16px;
    color: #999;
    font-size: 12px;
}

/* Objectives Calculators Container */
.objectives-calculators-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.objective-calculator-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.objective-calculator-card:hover {
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.calculator-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.calculator-icon {
    font-size: 28px;
}

.calculator-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.objectives-calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Goals & Budget Calculator (legacy - kept for reference) */
.goals-budget-calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 40px 0;
}

.calculator-column {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px;
}

.calculator-column h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.growth-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.growth-selector label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.growth-selector select {
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.customer-requirement-card {
    background: linear-gradient(135deg, #f5f7ff 0%, #f0f3ff 100%);
    border: 2px solid #667eea;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 16px;
}

.requirement-label {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.requirement-value {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
}

.requirement-period {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.cpa-display-card {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.cpa-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cpa-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.budget-breakdown-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 0;
    color: #666;
}

.breakdown-row span:last-child {
    font-weight: 600;
    color: #1a1a1a;
}

.breakdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 12px 0;
}

.breakdown-row.total {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    padding-top: 8px;
}

.breakdown-row.total span:last-child {
    color: #667eea;
    font-size: 18px;
}

/* Value Proof Widget */
.value-proof-widget {
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 32px;
    margin-top: 40px;
}

.value-proof-widget h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.value-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.value-metric {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.metric-badge {
    font-size: 32px;
    margin-bottom: 12px;
}

.metric-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.metric-description {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
}

.metric-subtext {
    font-size: 11px;
    color: #999;
}

.value-divider {
    font-size: 24px;
    color: #d0d0d0;
}

.value-insight {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    padding: 16px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.value-insight p {
    margin: 0;

.value-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.value-proof-section {
    padding: 24px;
    background: #f8f8f8;
    border-radius: 8px;
}

.value-proof-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8e8e8;
}
}

.value-insight strong {
    color: #1a1a1a;
}

/* Responsive - Stack on smaller screens */
@media (max-width: 1024px) {
    .config-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .countries-selection {
        grid-template-columns: 1fr;
    }

    .actual-budget-section {
        padding: 20px;
    }

    .budget-input-container {
        max-width: 100%;
    }

    .objectives-calculators-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .objectives-calculator-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .goals-budget-calculator {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .value-comparison {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .value-comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .value-divider {
        display: none;
    }
}

/* Media Planning Configuration */
.media-planning-config {
    background: #f9f9f9;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 32px;
}

.config-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.config-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.config-section .form-hint {
    margin-bottom: 12px;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
}

.date-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.date-range span {
    color: #999;
    font-weight: 500;
}

.countries-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.country-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.country-checkbox:hover {
    border-color: #667eea;
    background: #f5f7ff;
}

.country-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
}

/* Target Markets Section */
.target-markets-section {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}

.section-header {
    margin-bottom: 20px;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}

.section-hint {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Actual Budget Section */
.actual-budget-section {
    background: linear-gradient(135deg, #f5f7ff 0%, #f0f3ff 100%);
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 28px;
    margin: 32px 0;
}

.budget-section-header {
    margin-bottom: 20px;
}

.budget-section-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.budget-section-hint {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.budget-input-container {
    max-width: 400px;
}

.budget-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-symbol {
    position: absolute;
    left: 16px;
    font-weight: 600;
    color: #667eea;
    font-size: 16px;
}

.media-actual-budget {
    width: 100%;
    padding: 14px 16px 14px 40px;
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: white;
    transition: all 0.2s ease;
}

.media-actual-budget:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.media-actual-budget::placeholder {
    color: #bbb;
}

/* Media Plan Summary */
.media-plan-summary {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 24px;
    margin-top: 40px;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.summary-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.btn-export-spreadsheet {
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export-spreadsheet:hover {
    background: #5568d3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-export-spreadsheet:active {
    transform: translateY(0);
}

.summary-info {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.summary-table-wrapper {
    overflow-x: auto;
}

.media-plan-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.media-plan-summary-table thead {
    background: #f5f7ff;
    border-bottom: 2px solid #e8ecff;
}

.media-plan-summary-table th {
    padding: 12px;
    text-align: right;
    font-weight: 700;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.media-plan-summary-table th:first-child {
    text-align: left;
    color: #1a1a1a;
}

.media-plan-summary-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: right;
}

.media-plan-summary-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #1a1a1a;
}

.media-plan-summary-table tbody tr:hover {
    background: #f9f9f9;
}

.media-plan-summary-table tbody tr.country-row td:first-child {
    font-weight: 700;
    color: #1a1a1a;
    padding-top: 16px;
}

.media-plan-summary-table tbody tr.country-row td {
    background: #f5f7ff;
}

.media-plan-summary-table tbody tr.country-total td {
    background: #667eea;
    color: white;
    font-weight: 600;
    border-top: 2px solid #e8ecff;
}

.media-plan-summary-table tbody tr.country-total td:first-child {
    color: white;
}

.media-plan-summary-table .grand-total {
    font-weight: 700;
    background: #1a1a1a;
    color: white;
}

.media-plan-summary-table .grand-total td {
    background: #1a1a1a;
    color: white;
    border-top: 3px solid #667eea;
}

/* Country-Level Budget Allocation */
.country-allocation-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid #f0f0f0;
    overflow-x: auto;
}

.country-allocation-tab-btn {
    background: white;
    border: none;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}

.country-allocation-tab-btn:hover {
    color: #1a1a1a;
    background: #f9f9f9;
}

.country-allocation-tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.country-allocation-tab-content {
    display: none;
    padding: 20px 0;
}

.country-allocation-tab-content.active {
    display: block;
}

.country-allocation-header {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 4px solid #667eea;
}

.country-allocation-header p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* Countries Budget Split Section */
.countries-budget-split-section {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}

.countries-budget-table-wrapper {
    overflow-x: auto;
}

.countries-budget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.countries-budget-table thead {
    background: #f9f9f9;
    border-bottom: 2px solid #e8e8e8;
}

.countries-budget-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.countries-budget-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.countries-budget-table tbody tr:hover {
    background: #f9f9f9;
}

.countries-budget-table .budget-total-row {
    background: #f5f7ff;
    border-top: 2px solid #e8e8e8;
    font-weight: 600;
    color: #1a1a1a;
}

.countries-budget-table input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.countries-budget-table input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* Budget Split by Objective */
.budget-split-by-objective {
    background: linear-gradient(135deg, #f8f9ff 0%, #f5f7ff 100%);
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 28px;
    margin: 32px 0;
}

.budget-split-by-objective h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px 0;
}

.split-visualization {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
}

.split-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e8e8e8;
}

.split-icon {
    font-size: 32px;
}

.split-content {
    flex: 1;
}

.split-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.split-amount {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.split-percentage {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
}

.split-new {
    border-left: 4px solid #667eea;
}

.split-returning {
    border-left: 4px solid #00a870;
}

.split-divider {
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, #667eea 50%, transparent 100%);
}

.split-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

.total-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.total-amount {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
}

@media (max-width: 768px) {
    .split-visualization {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .split-divider {
        width: 100%;
        height: 2px;
    }
}

/* Media Planning Tabs */
.media-planning-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid #f0f0f0;
}

.media-planning-tab-btn {
    background: white;
    border: none;
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.media-planning-tab-btn:hover {
    color: #1a1a1a;
    background: #f9f9f9;
}

.media-planning-tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.media-planning-tab-content {
    display: none;
}

.media-planning-tab-content.active {
    display: block;
}

/* Budget Allocation Grid */
.budget-allocation-container {
    margin: 40px 0;
}

.allocation-header {
    margin-bottom: 24px;
}

.allocation-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.allocation-subtitle {
    font-size: 13px;
    color: #999;
}

.allocation-grid-wrapper {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 28px;
}

.budget-allocation-table {
    width: 100%;
    border-collapse: collapse;
}

.budget-allocation-table thead {
    background: #f8f8f8;
    border-bottom: 2px solid #e0e0e0;
}

.budget-allocation-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-allocation-table td {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.budget-allocation-table tbody tr:last-child td {
    border-bottom: none;
}

.budget-allocation-table tbody tr:hover {
    background-color: #fafafa;
}

.format-name {
    font-weight: 600;
    color: #1a1a1a;
}

.cpa-value {
    font-weight: 600;
    color: #667eea;
}

.share-input,
.budget-input {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    width: 100%;
    max-width: 120px;
}

.share-input:focus,
.budget-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.budget-value {
    font-weight: 600;
    color: #1a1a1a;
}

.allocation-total {
    background: #f5f7ff;
    border-top: 2px solid #e0e0e0;
    font-weight: 700;
}

.allocation-total td {
    padding: 14px 16px;
}

/* Allocation Summary */
.allocation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-card {
    background: linear-gradient(135deg, #f5f7ff 0%, #f0f3ff 100%);
    border: 1px solid #e8ecff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.summary-label {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

/* ============================================================================
   AUTOMATION SECTION STYLES
   ============================================================================ */

.automation-subsection {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.automation-subsection:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.subsection-header h5 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.subsection-header .form-hint {
    margin-bottom: 12px;
}

/* N-Code Generation */
.ncode-generation {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 6px;
}

.ncode-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

.status-label {
    font-weight: 500;
    color: #666;
}

.status-value {
    font-weight: 600;
    color: #00a870;
}

.btn-generate-ncodes {
    background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-generate-ncodes:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-generate-ncodes:active {
    transform: translateY(0);
}

.progress-container {
    margin-top: 12px;
}

.progress-bar {
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #5568d3 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.progress-text span {
    font-weight: 600;
    color: #667eea;
}

.ncode-results {
    margin-top: 12px;
}

.success-message {
    color: #00a870;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 8px 0;
}

.ncode-summary {
    background: white;
    padding: 10px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.summary-label {
    font-weight: 500;
    color: #666;
}

.summary-value {
    font-weight: 600;
    color: #1a1a1a;
}

/* Targeting Toggles */
.targeting-toggles {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 6px;
    display: grid;
    gap: 12px;
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.toggle-switch {
    position: relative;
    width: 40px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.toggle-switch.active {
    background: #00a870;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease;
}

.toggle-switch.active::after {
    left: 18px;
}

/* Audience Rows */
.audience-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.audience-info {
    flex: 1;
}

.audience-label {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.audience-definition {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.audience-toggle {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

/* SKU Selection Modes */
.sku-selection-modes {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 6px;
    display: grid;
    gap: 12px;
}

.mode-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.mode-info {
    flex: 1;
}

.mode-label {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.mode-badge {
    display: inline-block;
    background: #00a870;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.mode-description {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
}

.mode-warning {
    font-size: 13px;
    color: #d97706;
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #d97706;
}

.mode-row input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.toggle-switch.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.toggle-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.toggle-description {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* Creative Upload Grid */
.creative-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.upload-zone {
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.upload-zone:hover {
    border-color: #667eea;
    background: #f5f7ff;
}

.upload-zone.dragging-over {
    border-color: #667eea;
    background: #f0f3ff;
}

.upload-zone.uploaded {
    border: 2px solid #00a870;
    background: #f0fdf6;
}

.upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-text {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

.upload-subtext {
    font-size: 12px;
    color: #999;
    margin: 4px 0 0 0;
}

.file-input {
    display: none;
}

.uploaded-creatives {
    margin-top: 12px;
    padding: 10px;
    background: #f0fdf6;
    border: 1px solid #d4edda;
    border-radius: 4px;
    text-align: center;
}

.upload-count {
    font-size: 13px;
    color: #00a870;
    margin: 0;
}

/* Pacing Guardrail */
.pacing-guardrail {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 6px;
}

.guardrail-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.guardrail-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.guardrail-checkbox label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
}

.guardrail-description {
    font-size: 12px;
    color: #666;
    background: white;
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid #667eea;
    margin: 0;
}

/* Campaign Line Level Table */
.campaign-line-level,
.campaign-detail-level {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 30px;
}

.campaign-line-level h3,
.campaign-detail-level h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #1a1a1a;
}

.campaign-table-wrapper {
    overflow-x: auto;
}

.campaign-line-table,
.campaign-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.campaign-line-table thead,
.campaign-detail-table thead {
    background: #f5f5f5;
    border-bottom: 2px solid #e8e8e8;
}

.campaign-line-table th,
.campaign-detail-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    font-size: 12px;
}

.campaign-line-table td,
.campaign-detail-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 12px;
}

.campaign-line-table tbody tr:hover,
.campaign-detail-table tbody tr:hover {
    background: #fafafa;
}

.campaign-line-table tbody tr:last-child td,
.campaign-detail-table tbody tr:last-child td {
    border-bottom: none;
}

/* Campaign Charts */
.campaign-charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.chart-item {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
}

.chart-item h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.chart-item canvas {
    max-width: 100%;
    height: auto;
}

/* Optimization Alerts Section */
.optimization-alerts-section {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.optimization-alerts-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #1a1a1a;
}

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

    .campaign-table-wrapper {
        font-size: 12px;
    }

    .campaign-line-table th,
    .campaign-line-table td {
        padding: 8px 4px;
    }
}