/* ============================================
   CONTENT CREATION MODULE FIXES
   Fixes for progress bar alignment, button colors, and stage output visibility
   ============================================ */

/* ============================================
   CONTENT TYPE SELECTION - IMPROVED LAYOUT
   ============================================ */
.content-type-selector-group {
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-type-selector-group .platform-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-type-selector-group .platform-label i {
    font-size: 20px;
}

.content-type-selector-group .platform-label strong {
    font-size: 16px;
    color: #f0f0f0;
    font-weight: 600;
}

.content-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.content-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(40, 40, 40, 0.8);
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #e0e0e0;
    font-weight: 500;
}

.content-type-option i {
    font-size: 16px;
    color: #dc2626;
}

.content-type-option:hover {
    border-color: rgba(220, 38, 38, 0.6);
    background: rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
}

.content-type-option.selected {
    border-color: #dc2626;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
    color: #fff;
}

.content-type-option.selected i {
    color: #f87171;
}

/* Creation Status Bar - Improved Alignment */
/* Using !important to override main.css dark-mode specific selectors */
.creation-status-bar,
body.dark-mode .creation-status-bar {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    position: relative !important;
    padding: 40px 60px 20px 60px !important;
    margin-bottom: 40px !important;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 16px !important;
}

/* Progress line - precisely centered with the status-icon circles */
/* Calculation: top padding (40px) + half of icon height (30px) - half of line height (2px) = 68px */
.creation-status-bar::before,
body.dark-mode .creation-status-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 68px !important;
    left: 80px !important;
    right: 80px !important;
    height: 4px !important;
    background: rgba(50, 50, 50, 1) !important;
    background-color: #323232 !important;
    z-index: 0 !important;
    transform: none !important;
    border-radius: 2px !important;
}

.status-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    z-index: 1;
}

.status-icon,
body.dark-mode .status-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #1f1f1f !important;
    border: 4px solid #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #888 !important;
    transition: all 0.3s ease !important;
}

.status-step.active .status-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 16px rgba(213, 0, 50, 0.3);
    animation: pulse 2s infinite;
}

.status-step.completed .status-icon {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.status-step.pending .status-icon {
    background: var(--white);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.status-step span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.status-step.active span {
    color: var(--primary-color);
    font-weight: 700;
}

.status-step.completed span {
    color: var(--success-color);
}

/* Fixed: Dark Mode "In Progress" Button - Much Better Visibility */
.stage-status-badge.status-in-progress {
    background: rgba(213, 0, 50, 0.15);
    color: #D50032;
    font-weight: 700;
}

body.dark-mode .stage-status-badge.status-in-progress {
    background: rgba(220, 38, 38, 0.2);
    color: #dc2626;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.2);
}

/* Fixed: Stage Output - Improved Visibility */
.stage-content {
    min-height: 60px;
    margin: 10px 0;
}

.stage-output {
    background: var(--background);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    animation: fadeIn 0.5s ease;
}

body.dark-mode .stage-output {
    background: #1a1a1a;
    border-color: #333;
}

.output-item {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

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

.output-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 700;
}

body.dark-mode .output-item strong {
    color: rgba(255, 255, 255, 0.95);
}

.output-value {
    background: var(--white);
    padding: 6px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

body.dark-mode .output-value {
    background: #0f0f0f;
    color: #e5e5e5;
    border-color: #333;
}

/* Stage Cards - Better Contrast */
.stage-card {
    background: var(--white);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.stage-card.in-progress {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(213, 0, 50, 0.15);
    background: rgba(213, 0, 50, 0.02);
}

.stage-card.completed {
    border-color: var(--success-color);
    background: rgba(6, 167, 125, 0.02);
}

body.dark-mode .stage-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border-color: #333;
}

body.dark-mode .stage-card.in-progress {
    border-color: #dc2626;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.15);
    background: linear-gradient(135deg, #1a1212 0%, #0f0a0a 100%);
}

body.dark-mode .stage-card.completed {
    border-color: #f87171;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
}

/* Stage Title Icons */
.stage-title i {
    color: var(--primary-color);
}

body.dark-mode .stage-title i {
    color: #dc2626;
}

/* Waiting Approval State - Better Visibility */
.stage-status-badge.status-waiting-approval {
    background: rgba(247, 127, 0, 0.15);
    color: #F77F00;
    font-weight: 700;
}

body.dark-mode .stage-status-badge.status-waiting-approval {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    font-weight: 700;
}

/* Needs Attention State - For Review Stage Not Approved */
.stage-card.needs-attention {
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.03);
}

body.dark-mode .stage-card.needs-attention {
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, #1a1812 0%, #0f0d0a 100%);
}

.stage-status-badge.status-needs-attention {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-weight: 700;
    animation: attentionPulse 2s infinite;
}

body.dark-mode .stage-status-badge.status-needs-attention {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    font-weight: 700;
}

@keyframes attentionPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

/* Review Decision Container Styles */
.review-decision-container {
    background: var(--background);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

body.dark-mode .review-decision-container {
    background: #1a1a1a;
    border-color: #333;
}

.review-decision-container .channel-issues,
.review-decision-container .channel-recommendations {
    margin-bottom: 8px;
}

.review-decision-container ul {
    margin: 4px 0 0 16px;
    padding: 0;
}

.review-decision-container li {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

body.dark-mode .review-decision-container li {
    color: #a1a1aa;
}

.decision-buttons .btn {
    flex: 1;
    min-width: 180px;
}

/* ============================================
   CONTENT CREATION COMPLETION SUMMARY
   ============================================ */

.completion-summary {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 30px;
    animation: completionPulse 0.5s ease-out;
}

@keyframes completionPulse {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.completion-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.completion-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.completion-text h3 {
    margin: 0 0 6px 0;
    font-size: 24px;
    color: #10B981;
}

.completion-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

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

.completion-actions .btn-large {
    padding: 14px 28px;
    font-size: 15px;
}

body.dark-mode .completion-summary {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.4);
}

.module-header-actions {
    display: flex;
    gap: 10px;
}

/* ============================================
   CONTENT PLANNER ENHANCEMENTS
   ============================================ */

/* Selection checkbox column */
.col-select {
    width: 40px;
    text-align: center;
}

.col-drag {
    width: 36px;
    text-align: center;
    padding: 0 !important;
}

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 36px;
    cursor: grab;
    color: var(--text-secondary);
    opacity: 0.4;
    transition: all 0.2s;
    padding: 8px 4px;
    user-select: none;
    -webkit-user-select: none;
}

.drag-handle:hover {
    opacity: 1;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 4px;
}

.drag-handle:active,
.drag-handle[draggable="true"]:active {
    cursor: grabbing;
    opacity: 1;
    color: #dc2626;
}

.plan-row.dragging {
    opacity: 0.5;
    background: rgba(220, 38, 38, 0.1) !important;
}

.plan-row.dragging .drag-handle {
    cursor: grabbing;
    opacity: 1;
    color: #dc2626;
}

body.dark-mode .drag-handle:hover {
    background: rgba(220, 38, 38, 0.15);
}

body.dark-mode .plan-row.dragging {
    background: rgba(220, 38, 38, 0.15) !important;
}

/* Row selection highlight */
.plan-row.selected {
    background: rgba(220, 38, 38, 0.08) !important;
}

.plan-row.selected td {
    border-color: rgba(220, 38, 38, 0.2);
}

body.dark-mode .plan-row.selected {
    background: rgba(220, 38, 38, 0.12) !important;
}

/* ============================================
   CONTENT PLANNER FORM ELEMENTS - DARK MODE FIX
   ============================================ */

/* Custom Checkboxes */
.planning-table input[type="checkbox"],
.planner-card input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--white);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.planning-table input[type="checkbox"]:checked,
.planner-card input[type="checkbox"]:checked {
    background: #dc2626;
    border-color: #dc2626;
}

.planning-table input[type="checkbox"]:checked::after,
.planner-card input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.planning-table input[type="checkbox"]:hover,
.planner-card input[type="checkbox"]:hover {
    border-color: #dc2626;
}

body.dark-mode .planning-table input[type="checkbox"],
body.dark-mode .planner-card input[type="checkbox"] {
    background: #1a1a1a;
    border-color: #444;
}

body.dark-mode .planning-table input[type="checkbox"]:checked,
body.dark-mode .planner-card input[type="checkbox"]:checked {
    background: #dc2626;
    border-color: #dc2626;
}

/* Custom Date Picker */
.planning-table input[type="date"],
.planner-card input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 130px;
}

.planning-table input[type="date"]:focus,
.planner-card input[type="date"]:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

body.dark-mode .planning-table input[type="date"],
body.dark-mode .planner-card input[type="date"] {
    background: #1f1f1f;
    border-color: #444;
    color: #e5e5e5;
    color-scheme: dark;
}

body.dark-mode .planning-table input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode .planner-card input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}

body.dark-mode .planning-table input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.dark-mode .planner-card input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Custom Dropdowns/Selects */
.planning-table select,
.planner-card select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 100px;
}

.planning-table select:focus,
.planner-card select:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.planning-table select:disabled,
.planner-card select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--background);
}

body.dark-mode .planning-table select,
body.dark-mode .planner-card select {
    background-color: #1f1f1f;
    border-color: #444;
    color: #e5e5e5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

body.dark-mode .planning-table select:disabled,
body.dark-mode .planner-card select:disabled {
    background-color: #151515;
}

body.dark-mode .planning-table select option,
body.dark-mode .planner-card select option {
    background: #1f1f1f;
    color: #e5e5e5;
    padding: 8px;
}

/* Text Inputs */
.planning-table input[type="text"],
.planning-table input[type="url"],
.planner-card input[type="text"],
.planner-card input[type="url"] {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
}

.planning-table input[type="text"]:focus,
.planning-table input[type="url"]:focus,
.planner-card input[type="text"]:focus,
.planner-card input[type="url"]:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

body.dark-mode .planning-table input[type="text"],
body.dark-mode .planning-table input[type="url"],
body.dark-mode .planner-card input[type="text"],
body.dark-mode .planner-card input[type="url"] {
    background: #1f1f1f;
    border-color: #444;
    color: #e5e5e5;
}

body.dark-mode .planning-table input[type="text"]::placeholder,
body.dark-mode .planning-table input[type="url"]::placeholder,
body.dark-mode .planner-card input[type="text"]::placeholder,
body.dark-mode .planner-card input[type="url"]::placeholder {
    color: #666;
}

/* Status Select - Special styling */
.planning-table .status-select,
.planner-card .status-select {
    font-weight: 600;
    font-size: 12px;
    padding: 4px 24px 4px 8px;
    border-radius: 12px;
}

body.dark-mode .planning-table .status-select,
body.dark-mode .planner-card .status-select {
    border-color: transparent;
}

/* Drag and drop visual feedback */
.plan-row.dragging {
    opacity: 0.5;
    background: rgba(220, 38, 38, 0.1);
}

.plan-row.drop-target {
    position: relative;
}

.plan-row.drop-target.drop-above::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #dc2626;
    border-radius: 2px;
}

.plan-row.drop-target.drop-below::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #dc2626;
    border-radius: 2px;
}

/* Highlight new row */
.plan-row.highlight-new {
    animation: highlightNew 2s ease-out;
}

@keyframes highlightNew {
    0% { background: rgba(16, 185, 129, 0.3); }
    100% { background: transparent; }
}

/* Button group for selection actions */
.btn-group {
    display: flex;
    gap: 0;
}

.btn-group .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Row actions - more compact */
.row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.row-actions .btn-icon,
.planning-table .row-actions .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-color, #dee2e6);
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    transition: all 0.2s;
}

.row-actions .btn-icon:hover:not(:disabled),
.planning-table .row-actions .btn-icon:hover:not(:disabled) {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

.row-actions .btn-icon:focus,
.planning-table .row-actions .btn-icon:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

.row-actions .btn-icon.danger:hover:not(:disabled),
.planning-table .row-actions .btn-icon.danger:hover:not(:disabled) {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

.row-actions .btn-icon:disabled,
.planning-table .row-actions .btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent !important;
}

body.dark-mode .row-actions .btn-icon,
body.dark-mode .planning-table .row-actions .btn-icon {
    border-color: #444;
    color: #888;
}

body.dark-mode .row-actions .btn-icon:hover:not(:disabled),
body.dark-mode .planning-table .row-actions .btn-icon:hover:not(:disabled) {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

/* ============================================
   GLOBAL COLOR OVERRIDES - REMOVE ALL GREEN
   ============================================ */

/* Override btn-success hover to use red instead of green */
.btn-success:hover,
body.dark-mode .btn-success:hover {
    background: #b91c1c !important;
}

/* Override any remaining green focus rings */
*:focus {
    outline-color: #dc2626 !important;
}

/* Ensure all buttons in planner use red hover */
.planning-table button:hover:not(:disabled),
.planning-table .btn:hover:not(:disabled),
.content-planner-container button:hover:not(:disabled) {
    border-color: #dc2626;
}

/* Override default browser focus styles */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px;
}

/* All icon buttons in dark mode */
body.dark-mode .btn-icon:hover,
body.dark-mode button.btn-icon:hover {
    background: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
}

/* ============================================
   LEARNING HUB - INTERACTIVE DOCUMENTATION
   ============================================ */

.learning-hub {
    min-height: 100vh;
    padding-bottom: 60px;
}

/* Hero Section */
.learning-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.02) 100%);
    border-radius: 24px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.learning-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at 70% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    flex: 1;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 20px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.learning-hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.learning-hero > .hero-content > p {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}

/* Progress Ring */
.hero-progress {
    display: flex;
    align-items: center;
    gap: 20px;
}

.progress-ring {
    width: 80px;
    height: 80px;
    position: relative;
}

.progress-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-ring .progress-bg {
    fill: none;
    stroke: rgba(220, 38, 38, 0.1);
    stroke-width: 8;
}

.progress-ring .progress-fill {
    fill: none;
    stroke: #dc2626;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100);
    transition: stroke-dashoffset 0.5s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
}

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

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

.progress-detail {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Hero Visual - Orbit Animation */
.hero-visual {
    width: 200px;
    height: 200px;
    position: relative;
    flex-shrink: 0;
}

.visual-orbit {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring {
    position: absolute;
    border: 2px dashed rgba(220, 38, 38, 0.2);
    border-radius: 50%;
    animation: orbitSpin 20s linear infinite;
}

.orbit-ring:nth-child(1) {
    width: 120px;
    height: 120px;
}

.orbit-ring:nth-child(2) {
    width: 180px;
    height: 180px;
    animation-duration: 30s;
    animation-direction: reverse;
}

.orbit-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    animation: orbitFloat 8s ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
}

.orbit-icon:nth-child(3) { top: 10px; right: 30px; }
.orbit-icon:nth-child(4) { bottom: 20px; left: 10px; }
.orbit-icon:nth-child(5) { top: 50%; left: 0; }

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Search Bar */
.learning-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 32px;
    transition: all 0.3s;
}

.learning-search:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.learning-search i {
    color: var(--text-secondary);
    font-size: 18px;
}

.learning-search input {
    flex: 1;
    border: none;
    background: none;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
}

.learning-search input::placeholder {
    color: var(--text-secondary);
}

body.dark-mode .learning-search {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .learning-search input {
    color: #e5e5e5;
}

body.dark-mode .learning-hero {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
}

body.dark-mode .hero-badge {
    background: rgba(220, 38, 38, 0.2);
}

body.dark-mode .progress-ring .progress-bg {
    stroke: rgba(220, 38, 38, 0.2);
}

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

/* Lesson Card */
.lesson-card {
    background: var(--white);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
    animation: cardSlideIn 0.5s ease backwards;
    animation-delay: var(--delay, 0s);
}

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

.lesson-card:hover {
    border-color: #dc2626;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.15);
}

.lesson-card.complete {
    border-color: #10b981;
}

.lesson-card.complete::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
}

.card-status {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.card-status .lesson-num {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.card-status .fa-check-circle {
    color: #10b981;
    font-size: 24px;
}

.card-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #dc2626;
    margin-bottom: 16px;
}

.card-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.card-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.card-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

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

.mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.card-progress > span {
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    min-width: 35px;
}

body.dark-mode .lesson-card {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .lesson-card:hover {
    border-color: #dc2626;
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.2);
}

body.dark-mode .card-icon {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
}

body.dark-mode .card-content h3 {
    color: #e5e5e5;
}

body.dark-mode .card-progress {
    border-top-color: #333;
}

body.dark-mode .mini-progress {
    background: #333;
}

/* Lesson View */
.lesson-view {
    animation: fadeIn 0.3s ease;
}

.lesson-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--white);
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.back-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.lesson-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text-primary);
}

.nav-btn:hover:not(:disabled) {
    border-color: #dc2626;
    color: #dc2626;
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.section-indicator {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: center;
}

body.dark-mode .lesson-header {
    background: #1a1a1a;
    border-color: #333;
}

/* Section Content */
.lesson-content {
    background: var(--white);
    border-radius: 16px;
    padding: 40px;
    min-height: 400px;
    border: 1px solid var(--border-color);
}

body.dark-mode .lesson-content {
    background: #1a1a1a;
    border-color: #333;
}

body.dark-mode .section-header h2 {
    color: #e5e5e5;
}

body.dark-mode .lesson-hero {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
}

body.dark-mode .lesson-hero h2 {
    color: #e5e5e5;
}

body.dark-mode .lesson-hero .hero-icon {
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.4);
}

.section-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.section-header {
    margin-bottom: 32px;
    text-align: center;
}

.section-type {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.section-type.intro { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.section-type.checklist { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.section-type.steps { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.section-type.content { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.section-type.features { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.section-type.exercise { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.section-type.pipeline { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.section-type.code { background: rgba(75, 85, 99, 0.1); color: #4b5563; }
.section-type.accordion { background: rgba(249, 115, 22, 0.1); color: #f97316; }

.section-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.section-intro {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

/* Lesson Footer */
.lesson-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.complete-btn {
    padding: 14px 32px;
    font-size: 15px;
}

/* Lesson Hero */
.lesson-hero {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 32px;
}

.lesson-hero .hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    margin: 0 auto 20px;
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3);
}

.lesson-hero h2 {
    font-size: 24px;
    margin: 0 0 12px 0;
}

.lesson-hero p {
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Feature Highlights */
.feature-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.highlight-card {
    background: var(--white);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.highlight-card:hover {
    border-color: #dc2626;
    transform: translateY(-2px);
}

.highlight-card i {
    font-size: 32px;
    color: #dc2626;
    margin-bottom: 12px;
}

.highlight-card h4 {
    font-size: 16px;
    margin: 0 0 8px 0;
}

.highlight-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

body.dark-mode .highlight-card {
    background: #0f0f0f;
    border-color: #333;
}

body.dark-mode .highlight-card h4 {
    color: #e5e5e5;
}

body.dark-mode .prereq-item {
    background: #0f0f0f;
}

body.dark-mode .prereq-item:hover {
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .prereq-item .checkmark {
    border-color: #444;
}

body.dark-mode .prereq-content strong {
    color: #e5e5e5;
}

body.dark-mode .step-item {
    background: #0f0f0f;
}

body.dark-mode .step-item:hover {
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .step-content h4 {
    color: #e5e5e5;
}

body.dark-mode .feature-card {
    background: #0f0f0f;
    border-color: #333;
}

body.dark-mode .feature-card h4 {
    color: #e5e5e5;
}

body.dark-mode .feature-icon {
    background: rgba(220, 38, 38, 0.2);
}

body.dark-mode .pipeline-stage {
    background: #0f0f0f;
    border-color: #333;
}

body.dark-mode .pipeline-stage .stage-icon {
    background: rgba(220, 38, 38, 0.2);
}

body.dark-mode .pipeline-stage .stage-info h4 {
    color: #e5e5e5;
}

body.dark-mode .concept-block {
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .concept-content h4 {
    color: #e5e5e5;
}

body.dark-mode .concept-list li {
    color: #ccc;
}

body.dark-mode .info-block h4 {
    color: #e5e5e5;
}

body.dark-mode .tip-box {
    background: rgba(59, 130, 246, 0.15);
}

body.dark-mode .tip-box div {
    color: #ccc;
}

body.dark-mode .metric-card {
    background: #0f0f0f;
    border-color: #333;
}

body.dark-mode .metric-icon {
    background: rgba(220, 38, 38, 0.2);
}

body.dark-mode .metric-info h4 {
    color: #e5e5e5;
}

body.dark-mode .architecture-diagram {
    background: #0f0f0f;
}

body.dark-mode .step-list .step {
    background: #0f0f0f;
}

body.dark-mode .step-list .step p {
    color: #ccc;
}

body.dark-mode .accordion-item {
    border-color: #333;
}

body.dark-mode .accordion-header {
    background: #0f0f0f;
    color: #e5e5e5;
}

body.dark-mode .accordion-header:hover {
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .exercise-block {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-color: rgba(236, 72, 153, 0.3);
}

body.dark-mode .exercise-header h4 {
    color: #e5e5e5;
}

body.dark-mode .nav-btn {
    border-color: #444;
    color: #ccc;
}

body.dark-mode .nav-btn:hover:not(:disabled) {
    border-color: #dc2626;
    color: #dc2626;
}

body.dark-mode .back-btn {
    color: #ccc;
}

body.dark-mode .back-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* ============================================
   QUICK STAGE EXECUTION - INLINE VERSION
   ============================================ */

.quick-stage-section {
    margin-top: 40px;
}

.section-divider {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

body.dark-mode .section-divider::before,
body.dark-mode .section-divider::after {
    background: #333;
}

.section-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Quick Stage Buttons */
.quick-stage-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.quick-stage-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

body.dark-mode .quick-stage-btn {
    background: #1a1a1a;
    border-color: #333;
    color: #e5e5e5;
}

.quick-stage-btn:hover {
    border-color: #dc2626;
    transform: translateY(-2px);
}

.quick-stage-btn.active {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .quick-stage-btn.active {
    background: rgba(220, 38, 38, 0.15);
}

.quick-stage-btn i {
    font-size: 16px;
}

/* Quick Stage Inline Form */
.quick-stage-form-inline {
    margin-top: 24px;
    padding: 24px;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    animation: slideDown 0.3s ease;
}

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

body.dark-mode .quick-stage-form-inline {
    background: #0f0f0f;
    border-color: #333;
}

.quick-stage-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .quick-stage-form-header {
    border-bottom-color: #333;
}

.quick-stage-form-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

body.dark-mode .quick-stage-form-header h4 {
    color: #e5e5e5;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-ghost:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Platform Selector - Button Style */
.quick-platform-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

body.dark-mode .platform-btn {
    background: #1a1a1a;
    border-color: #333;
    color: #ccc;
}

.platform-btn:hover {
    border-color: #dc2626;
}

.platform-btn.active {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

body.dark-mode .platform-btn.active {
    background: rgba(220, 38, 38, 0.15);
    color: #fff;
}

.platform-btn i {
    font-size: 16px;
}

.optional {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Quick Stage Results - Inline */
.quick-stage-results-inline {
    margin-top: 24px;
    padding: 20px;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    animation: slideDown 0.3s ease;
}

body.dark-mode .quick-stage-results-inline {
    background: #0f0f0f;
    border-color: #333;
}

.quick-stage-results-inline .results-header {
    border-bottom: none;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.quick-stage-results-inline .results-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

body.dark-mode .quick-stage-results-inline .results-header h4 {
    color: #e5e5e5;
}

.results-actions {
    display: flex;
    gap: 8px;
}

/* ============================================
   DEBUGGER TABS - COMPLETE REWRITE
   ============================================ */

.debugger-tabs-wrapper {
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
}

body.dark-mode .debugger-tabs-wrapper {
    border-bottom-color: #333;
}

.debugger-tabs-row {
    display: flex;
    gap: 0;
}

.debugger-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.debugger-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

body.dark-mode .debugger-tab-btn:hover {
    background: #252525;
    color: #e5e5e5;
}

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

body.dark-mode .debugger-tab-btn.active {
    color: #f87171;
    border-bottom-color: #f87171;
}

.debugger-tab-btn i {
    font-size: 16px;
}

/* Tab Badge - The numbers */
.tab-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    background: #dc2626;
    color: #ffffff;
    margin-left: 4px;
}

body.dark-mode .tab-badge {
    background: #ef4444;
    color: #ffffff;
}

/* Hide old classes if they exist */
.debugger-tabs {
    display: none !important;
}

.mini-progress {
    display: none !important;
}

/* ============================================
   QUICK STAGE FEEDBACK MODAL
   ============================================ */

.quick-stage-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .quick-stage-actions {
    border-top-color: #333;
}

/* Feedback Modal Overlay */
.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.feedback-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Feedback Modal */
.feedback-modal {
    background: var(--white);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.feedback-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.feedback-modal-header {
    flex-shrink: 0;
}

.feedback-modal-footer {
    flex-shrink: 0;
}

.feedback-modal-overlay.active .feedback-modal {
    transform: scale(1) translateY(0);
}

body.dark-mode .feedback-modal {
    background: #1a1a1a;
    border: 1px solid #333;
}

/* Modal Header */
.feedback-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, transparent 100%);
}

body.dark-mode .feedback-modal-header {
    border-bottom-color: #333;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, transparent 100%);
}

.feedback-modal-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.dark-mode .feedback-modal-header h3 {
    color: #e5e5e5;
}

.feedback-modal-header h3 i {
    color: #dc2626;
}

.btn-close {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-close:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Modal Body */
.feedback-modal-body {
    padding: 24px;
}

.feedback-hint {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.feedback-textarea {
    width: 100%;
    resize: vertical;
    min-height: 100px;
    font-size: 14px;
    line-height: 1.5;
}

body.dark-mode .feedback-textarea {
    background: #0f0f0f;
    border-color: #333;
    color: #e5e5e5;
}

body.dark-mode .feedback-textarea:focus {
    border-color: #dc2626;
}

/* Suggestions */
.feedback-suggestions {
    margin-top: 16px;
}

.suggestion-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-chip {
    padding: 6px 14px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-chip:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: #dc2626;
}

body.dark-mode .suggestion-chip {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

body.dark-mode .suggestion-chip:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: #dc2626;
}

/* Modal Footer */
.feedback-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--background);
}

body.dark-mode .feedback-modal-footer {
    border-top-color: #333;
    background: #0f0f0f;
}

/* Responsive viewport-cap for all feedback modals */
@media (max-width: 960px) {
    .feedback-modal {
        max-width: calc(100vw - 40px) !important;
    }
}

@media (max-width: 600px) {
    .feedback-modal {
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 12px;
    }
    
    .feedback-modal-body {
        padding: 16px;
    }
    
    .feedback-modal-header {
        padding: 16px;
    }
    
    .feedback-modal-footer {
        padding: 12px 16px;
    }
}

/* Dark-mode feedback modal using CSS variables */
body.dark-mode .feedback-modal {
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border-color, #333);
}

body.dark-mode .feedback-modal-header {
    border-bottom-color: var(--border-color, #333);
}

body.dark-mode .feedback-modal-footer {
    border-top-color: var(--border-color, #333);
    background: var(--bg-base, #0f0f0f);
}

body.dark-mode .feedback-textarea {
    background: var(--bg-base, #0f0f0f);
    border-color: var(--border-color, #333);
    color: var(--text-primary, #e5e5e5);
}

/* Details/Summary styling for output preview in modals */
.feedback-modal details {
    border-radius: 8px;
}

.feedback-modal details summary {
    list-style: none;
}

.feedback-modal details summary::-webkit-details-marker {
    display: none;
}

.feedback-modal details summary::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.625rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
    display: inline-block;
    margin-right: 4px;
}

.feedback-modal details[open] summary::before {
    transform: rotate(180deg);
}

.feedback-modal details > div {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.feedback-modal details > div::-webkit-scrollbar {
    width: 6px;
}

.feedback-modal details > div::-webkit-scrollbar-track {
    background: transparent;
}

.feedback-modal details > div::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

body.dark-mode .feedback-modal details {
    border-color: rgba(139, 92, 246, 0.3);
}

/* Loading state in results */
.stage-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: var(--text-secondary);
}

.stage-loading i {
    font-size: 32px;
    color: #dc2626;
}

body.dark-mode .stage-loading {
    color: #888;
}

/* Quick Stage Edit Container */
.quick-stage-edit-container {
    margin: 20px 0;
    animation: slideDown 0.3s ease;
}

.quick-stage-edit-textarea {
    width: 100%;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 16px;
    border-radius: 8px;
    resize: vertical;
    min-height: 200px;
}

body.dark-mode .quick-stage-edit-textarea {
    background: #0a0a0a;
    border-color: #333;
    color: #e5e5e5;
}

body.dark-mode .quick-stage-edit-textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.quick-stage-edit-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .results-header {
    border-bottom-color: #333;
}

.results-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-header h3 i {
    color: #10b981;
}

body.dark-mode .results-header h3 {
    color: #e5e5e5;
}

.results-content {
    font-size: 14px;
}

.output-formatted {
    margin-bottom: 20px;
}

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

.output-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--text-primary);
}

body.dark-mode .output-section h4 {
    color: #e5e5e5;
}

.output-section h5 {
    margin: 16px 0 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.output-object {
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}

body.dark-mode .output-object {
    border-left-color: #333;
}

.output-field {
    margin-bottom: 8px;
}

.output-key {
    font-weight: 600;
    color: #dc2626;
    margin-right: 8px;
}

.output-value {
    color: var(--text-primary);
}

body.dark-mode .output-value {
    color: #e5e5e5;
}

.output-list {
    margin: 8px 0;
    padding-left: 24px;
}

.output-list li {
    margin: 4px 0;
    color: var(--text-primary);
}

body.dark-mode .output-list li {
    color: #ccc;
}

.review-item {
    padding: 16px;
    background: var(--background);
    border-radius: 10px;
    margin-bottom: 12px;
}

body.dark-mode .review-item {
    background: #0f0f0f;
}

.review-item strong {
    display: inline-block;
    margin-right: 12px;
    text-transform: capitalize;
}

.review-item .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.review-item .badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.review-item .badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.raw-output {
    margin-top: 16px;
}

.raw-output summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px;
}

.raw-output summary:hover {
    color: #dc2626;
}

.raw-output pre {
    margin: 12px 0 0;
    padding: 16px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 12px;
    color: #e5e5e5;
}

/* Prerequisites Checklist */
.prereq-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prereq-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--background);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.prereq-item:hover {
    background: rgba(220, 38, 38, 0.05);
}

.prereq-item input[type="checkbox"] {
    display: none;
}

.prereq-item .checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.prereq-item input:checked + .checkmark {
    background: #10b981;
    border-color: #10b981;
}

.prereq-item input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 14px;
}

.prereq-content strong {
    display: block;
    font-size: 15px;
}

.prereq-content span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Step by Step */
.step-by-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--background);
    border-radius: 12px;
    transition: all 0.3s;
}

.step-item:hover {
    background: rgba(220, 38, 38, 0.05);
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
}

.step-content p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.try-it-btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card {
    padding: 24px;
    background: var(--background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.feature-card:hover {
    border-color: #dc2626;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #dc2626;
    margin-bottom: 16px;
}

.feature-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.feature-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Exercise Block */
.exercise-block {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(236, 72, 153, 0.02) 100%);
    border: 2px solid rgba(236, 72, 153, 0.2);
    border-radius: 16px;
    padding: 32px;
}

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

.exercise-header i {
    font-size: 24px;
    color: #f87171;
}

.exercise-header h4 {
    margin: 0;
    font-size: 20px;
}

.exercise-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

body.dark-mode .task-item {
    background: rgba(0, 0, 0, 0.2);
}

.task-number {
    width: 28px;
    height: 28px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.task-item p {
    margin: 0;
    font-size: 14px;
}

.exercise-start {
    background: #dc2626;
    border-color: #dc2626;
}

.exercise-start:hover {
    background: #db2777;
}

/* Pipeline Visual */
.pipeline-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 24px 0;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--background);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    transition: all 0.3s;
    min-width: 100px;
}

.pipeline-stage:hover {
    border-color: #dc2626;
    transform: translateY(-2px);
}

.pipeline-stage .stage-icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #dc2626;
}

.pipeline-stage .stage-info {
    text-align: center;
}

.pipeline-stage .stage-info h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pipeline-stage .stage-info p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.pipeline-connector {
    color: var(--text-secondary);
    font-size: 16px;
}

/* Concept Block */
.concept-block {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 12px;
    margin-bottom: 20px;
}

.concept-icon {
    width: 56px;
    height: 56px;
    background: #dc2626;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.concept-content h4 {
    margin: 0 0 8px 0;
}

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

.concept-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
}

.concept-list i {
    color: #dc2626;
}

/* Info Blocks */
.info-block {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.info-block.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.info-block.warning > i {
    color: #f59e0b;
    font-size: 24px;
}

.info-block.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.info-block.success > i {
    color: #10b981;
    font-size: 24px;
}

.info-block h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
}

.info-block p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.info-block ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.info-block li {
    font-size: 13px;
    margin: 4px 0;
}

/* Tip Box */
.tip-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    font-size: 14px;
}

.tip-box > i {
    color: #3b82f6;
    font-size: 18px;
    margin-top: 2px;
}

/* Metrics Showcase */
.metrics-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.metric-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.metric-icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #dc2626;
    flex-shrink: 0;
}

.metric-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.metric-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Architecture Diagram */
.architecture-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 32px;
    background: var(--background);
    border-radius: 12px;
    margin-bottom: 20px;
}

.arch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 12px;
}

body.dark-mode .arch-node {
    background: #1a1a1a;
}

.arch-node i {
    font-size: 24px;
    color: #dc2626;
}

.arch-node span {
    font-size: 12px;
    font-weight: 600;
}

.arch-arrow {
    color: var(--text-secondary);
}

/* Code Block */
.code-block {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0f0f0f;
    border-bottom: 1px solid #333;
}

.code-header span {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

.copy-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: #333;
    color: #fff;
}

.code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
}

.code-block code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #e5e5e5;
    line-height: 1.6;
}

/* Step List */
.step-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-list .step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--background);
    border-radius: 8px;
}

.step-list .step-num {
    width: 28px;
    height: 28px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-list .step p {
    margin: 0;
    font-size: 14px;
}

/* Accordion */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: var(--background);
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: all 0.2s;
    color: var(--text-primary);
}

.accordion-header:hover {
    background: rgba(220, 38, 38, 0.05);
}

.accordion-header i:first-child {
    color: #dc2626;
}

.accordion-header span {
    flex: 1;
}

.accordion-icon {
    transition: transform 0.3s;
}

.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--white);
}

.accordion-item.open .accordion-content {
    max-height: 300px;
}

.accordion-content ul {
    margin: 0;
    padding: 16px 20px 16px 50px;
}

.accordion-content li {
    margin: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

body.dark-mode .accordion-content {
    background: #1a1a1a;
}

/* Visual Explainer */
.visual-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 24px 0;
}

.explainer-image {
    background: var(--background);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.mock-planner {
    border-radius: 8px;
    overflow: hidden;
}

.mock-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(220, 38, 38, 0.1);
    font-size: 12px;
    font-weight: 600;
}

.mock-week { color: #dc2626; }
.mock-brand { color: var(--text-secondary); }

.mock-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--white);
}

body.dark-mode .mock-table {
    background: #1a1a1a;
}

body.dark-mode .explainer-image {
    background: #0f0f0f;
    border-color: #333;
}

body.dark-mode .mock-row {
    background: #1a1a1a;
}

body.dark-mode .explainer-text h4 {
    color: #e5e5e5;
}

.mock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--background);
    border-radius: 6px;
    font-size: 12px;
}

.mock-row span:first-child {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 24px;
}

.mock-cat {
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--cat-color);
    color: white;
    font-size: 10px;
    font-weight: 600;
}

.explainer-text h4 {
    margin: 0 0 12px 0;
    font-size: 18px;
}

.explainer-text p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Drag Demo Animation */
.feature-demo {
    margin-top: 16px;
    padding: 12px;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 8px;
}

.demo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--white);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    transition: all 0.3s;
}

body.dark-mode .demo-row {
    background: #1a1a1a;
}

.demo-row i {
    color: var(--text-secondary);
    cursor: grab;
}

.demo-row.draggable {
    animation: demoDrag 3s ease-in-out infinite;
}

@keyframes demoDrag {
    0%, 100% { transform: translateY(0); background: var(--white); }
    25% { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    50% { transform: translateY(30px); background: rgba(220, 38, 38, 0.05); }
    75% { transform: translateY(26px); }
}

body.dark-mode .demo-row.draggable {
    animation: demoDragDark 3s ease-in-out infinite;
}

@keyframes demoDragDark {
    0%, 100% { transform: translateY(0); background: #1a1a1a; }
    25% { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    50% { transform: translateY(30px); background: rgba(220, 38, 38, 0.1); }
    75% { transform: translateY(26px); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .learning-hero {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }

    .visual-explainer {
        grid-template-columns: 1fr;
    }

    .learning-hero h1 {
        font-size: 28px;
    }

    .hero-visual {
        width: 150px;
        height: 150px;
    }

    .hero-progress {
        justify-content: center;
    }

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

    .lesson-header {
        flex-direction: column;
        gap: 16px;
    }

    .lesson-content {
        padding: 24px 16px;
    }

    .section-header h2 {
        font-size: 22px;
    }

    .feature-highlights,
    .feature-grid,
    .metrics-showcase {
        grid-template-columns: 1fr;
    }

    .pipeline-visual {
        flex-direction: column;
    }

    .pipeline-connector {
        transform: rotate(90deg);
    }

    .architecture-diagram {
        flex-direction: column;
    }

    .arch-arrow {
        transform: rotate(90deg);
    }

    .concept-block {
        flex-direction: column;
        text-align: center;
    }

    .info-block {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   ANALYTICS ENHANCEMENTS
   ============================================ */

/* Creation time stats */
.creation-time-container {
    padding: 10px 0;
}

.creation-time-overview {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.time-stat-large {
    display: flex;
    flex-direction: column;
}

.time-stat-large .time-value {
    font-size: 32px;
    font-weight: 700;
    color: #10B981;
}

.time-stat-large .time-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-stat {
    display: flex;
    flex-direction: column;
}

.time-stat .time-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.time-stat .time-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.stage-times {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-time-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--background);
    border-radius: 8px;
}

.stage-time-row .stage-name {
    flex: 1;
    font-weight: 500;
    font-size: 13px;
}

.stage-time-row .stage-count {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 10px;
}

.stage-time-row .stage-avg {
    font-weight: 600;
    font-size: 13px;
    color: #10B981;
    min-width: 60px;
    text-align: right;
}

body.dark-mode .stage-time-row {
    background: #1a1a1a;
}

/* Stage breakdown */
.stage-breakdown-container {
    padding: 10px 0;
}

.stage-breakdown-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-summary {
    text-align: center;
}

.breakdown-summary h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.breakdown-bar {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--border-color);
}

.breakdown-segment {
    transition: width 0.5s ease;
    min-width: 2px;
}

.breakdown-segment:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.breakdown-segment:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.breakdown-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.breakdown-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.breakdown-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.breakdown-legend .legend-name {
    color: var(--text-secondary);
}

.breakdown-legend .legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Pipeline visual */
.pipeline-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 0;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--stage-color) 10%, transparent);
    border: 2px solid var(--stage-color);
    border-radius: 12px;
    min-width: 80px;
}

.pipeline-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-color);
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.pipeline-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stage-color);
}

.pipeline-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.pipeline-arrow {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Empty state improvements */
.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

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

.empty-state .helper-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
}

/* Analytics quick stats - 5 cards */
.analytics-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Mobile responsive for planner */
@media (max-width: 768px) {
    .col-select, .col-drag {
        display: none;
    }
    
    .row-actions {
        flex-direction: column;
        gap: 2px;
    }
    
    .row-actions .btn-icon {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .completion-actions {
        flex-direction: column;
    }
    
    .pipeline-visual {
        flex-direction: column;
    }
    
    .pipeline-arrow {
        transform: rotate(90deg);
    }
    
    .creation-time-overview {
        flex-direction: column;
        gap: 16px;
    }
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .creation-status-bar,
    body.dark-mode .creation-status-bar {
        padding: 30px 30px 20px 30px !important;
    }
    
    /* Line position: padding-top (30px) + half icon (26px) - half line (2px) = 54px */
    .creation-status-bar::before,
    body.dark-mode .creation-status-bar::before {
        top: 54px !important;
        left: 50px !important;
        right: 50px !important;
    }
    
    .status-icon,
    body.dark-mode .status-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
    }
    
    .status-step span {
        font-size: 13px;
    }
    
    .stage-card {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .creation-status-bar,
    body.dark-mode .creation-status-bar {
        padding: 20px 16px 30px 16px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }
    
    .creation-status-bar::before,
    body.dark-mode .creation-status-bar::before {
        display: none !important;
    }
    
    .status-step {
        flex: 0 0 calc(50% - 8px);
    }
    
    .status-icon,
    body.dark-mode .status-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        border-width: 3px !important;
    }
    
    .status-step span {
        font-size: 11px;
    }
    
    .stage-card {
        padding: 20px;
        border-radius: 12px;
    }
    
    .stage-output {
        padding: 10px;
    }
    
    .output-value {
        padding: 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .creation-status-bar,
    body.dark-mode .creation-status-bar {
        padding: 16px 12px 24px 12px !important;
        gap: 12px !important;
    }
    
    .status-step {
        flex: 0 0 calc(33.33% - 8px);
    }
    
    .status-icon,
    body.dark-mode .status-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border-width: 2px !important;
    }
    
    .status-step span {
        font-size: 9px;
    }
    
    .stage-card {
        padding: 16px;
        border-radius: 10px;
    }
    
    .stage-title {
        font-size: 14px;
    }
    
    .stage-status-badge {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .output-item strong {
        font-size: 11px;
    }
    
    .output-value {
        font-size: 11px;
        padding: 6px;
    }
}

/* ============================================
   MULTI-CONTENT OUTPUT WITH PER-ITEM APPROVAL
   ============================================ */

.multi-content-output {
    padding: 8px 0;
}

.multi-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

body.dark-mode .multi-content-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%);
    border-color: rgba(220, 38, 38, 0.3);
}

.approval-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.approval-stats i {
    color: #10b981;
}

.platform-content-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-content-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.platform-content-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    font-size: 16px;
}

.platform-content-section h4 .badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

body.dark-mode .platform-content-section h4 .badge {
    background: rgba(255, 255, 255, 0.08);
}

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

.content-item-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px;
    transition: all 0.25s ease;
}

body.dark-mode .content-item-card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

.content-item-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.content-item-card.approved {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

body.dark-mode .content-item-card.approved {
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.2);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.item-header h5 {
    margin: 8px 0 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

body.dark-mode .item-header h5 {
    color: #e5e5e5;
}

.item-number {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.item-content {
    font-size: 13px;
    line-height: 1.5;
}

.field-row {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    transition: background 0.2s;
}

body.dark-mode .field-row {
    background: rgba(0, 0, 0, 0.25);
}

.field-row:hover {
    background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .field-row:hover {
    background: rgba(0, 0, 0, 0.35);
}

.field-row:last-child {
    margin-bottom: 0;
}

/* Approval toggle button styles */
.content-item-card .btn-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
}

.content-item-card .btn-outline:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-item-card .btn-success {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.content-item-card .btn-success:hover {
    background: #059669;
    border-color: #059669;
}

/* Quick stage multi-content display */
.multi-content-quick .platform-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.multi-content-quick .platform-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.multi-content-quick .content-piece {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

body.dark-mode .multi-content-quick .content-piece {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Mobile responsive for multi-content */
@media (max-width: 768px) {
    .multi-content-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .item-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .item-header > div:first-child {
        width: 100%;
    }
    
    .item-header button {
        width: 100%;
    }
    
    .content-item-card {
        padding: 14px;
    }
    
    .field-row {
        padding: 8px 10px;
    }
}

/* ============================================
   TREND RADAR MODULE STYLES
   ============================================ */

.trend-radar-module {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header */
.radar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.radar-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.radar-title i {
    color: #10b981;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.radar-subtitle {
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.radar-last-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
}

.radar-last-updated:not(:empty)::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 10px;
    opacity: 0.7;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Main Content Layout */
.radar-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

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

/* Radar Visualization */
.radar-visualization {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 24px;
    position: relative;
    overflow: visible;
}

/* Wrapper for radar with label columns */
.radar-with-labels {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 20px 0;
}

/* Side label columns */
.radar-labels-column {
    flex: 1;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

.radar-labels-column.left {
    align-items: flex-end;
}

.radar-labels-column.right {
    align-items: flex-start;
}

/* Side labels */
.side-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 180px;
}

.radar-labels-column.left .side-label {
    flex-direction: row-reverse;
}

.side-label:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--label-color);
    transform: translateX(0);
}

.radar-labels-column.left .side-label:hover {
    transform: translateX(4px);
}

.radar-labels-column.right .side-label:hover {
    transform: translateX(-4px);
}

.side-label.selected {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--label-color);
}

.side-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.side-label-icon {
    font-size: 10px;
    color: #10b981;
    flex-shrink: 0;
}

.side-label-text {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-trends-side {
    min-height: 100px;
}

.radar-container {
    position: relative;
    width: 380px;
    height: 380px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, rgba(0, 0, 0, 0.3) 70%);
    box-shadow: 
        inset 0 0 60px rgba(16, 185, 129, 0.1),
        0 0 40px rgba(16, 185, 129, 0.1);
}

/* Radar sweep animation */
.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 4px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.8) 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.radar-sweep::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, transparent 100%);
    transform-origin: left center;
    filter: blur(10px);
}

/* Radar rings */
.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ring-size);
    height: var(--ring-size);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.radar-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 95%, var(--ring-color) 100%);
    opacity: 0.1;
}


/* Radar crosshair */
.radar-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.radar-crosshair::before,
.radar-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
}

.radar-crosshair::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}

.radar-crosshair::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
}

/* Quadrant labels - positioned in each quadrant corner */
.radar-quadrant-labels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.quadrant-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.quadrant-label i {
    font-size: 9px;
    opacity: 0.8;
}

/* Quadrant positioning */
.quadrant-label.quadrant-tech {
    top: 8%;
    left: 50%;
    transform: translateX(15%);
}

.quadrant-label.quadrant-platform {
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}

.quadrant-label.quadrant-content {
    bottom: 8%;
    left: 50%;
    transform: translateX(-115%);
}

.quadrant-label.quadrant-market {
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}

/* Ring labels - zone indicators */
.ring-label {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: var(--ring-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Radar blips */
.radar-blips {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.radar-blip {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
}

.blip-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%);
    background: var(--blip-color);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--blip-color);
    transition: all 0.3s ease;
}

.blip-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: var(--blip-color);
    border-radius: 50%;
    opacity: 0;
    animation: blipPulse 3s ease-out infinite;
}

@keyframes blipPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.25;
    }
    50% {
        opacity: 0.15;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Sonar sweep hit effect */
.radar-blip.swept .blip-core {
    box-shadow: 0 0 12px var(--blip-color), 0 0 20px var(--blip-color);
    filter: brightness(1.3);
}

.radar-blip.swept .blip-pulse {
    animation: blipSweptPulse 0.6s ease-out;
}

@keyframes blipSweptPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.radar-blip:hover .blip-core {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 0 14px var(--blip-color);
}

.radar-blip.selected .blip-core {
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow: 0 0 18px var(--blip-color), 0 0 30px var(--blip-color);
}

.radar-blip.highlighted .blip-core {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 14px var(--blip-color), 0 0 24px var(--blip-color);
}

.radar-blip.highlighted .blip-pulse {
    animation: blipPulseHighlight 1s ease-out infinite;
}

@keyframes blipPulseHighlight {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* Blip hover tooltip */
.blip-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(15, 15, 15, 0.95);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.15s ease;
    min-width: 150px;
    overflow: hidden;
}

.blip-tooltip.active {
    opacity: 1;
}

.blip-tooltip .tooltip-header {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid;
    border-color: inherit;
}

.blip-tooltip .tooltip-header strong {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.blip-tooltip .tooltip-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blip-tooltip .tooltip-zone {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blip-tooltip .tooltip-quadrant {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.blip-tooltip .tooltip-quadrant i {
    color: #10b981;
}

/* Radar center */
.radar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.radar-center i {
    font-size: 20px;
    color: #10b981;
    z-index: 2;
}

.center-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    animation: centerPulse 2s ease-out infinite;
}

@keyframes centerPulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.2;
    }
}

/* Radar Legend */
.radar-legend {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Trend List Panel */
.trend-list-panel {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.trend-list {
    max-height: 600px;
    overflow-y: auto;
    padding: 12px;
}

.trend-zone-group {
    margin-bottom: 16px;
}

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

.zone-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zone-color);
    border-left: 3px solid var(--zone-color);
    padding-left: 8px;
}

.zone-count {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

.trend-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.trend-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.trend-item.selected {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.trend-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #10b981;
    flex-shrink: 0;
}

.trend-item-content {
    flex: 1;
    min-width: 0;
}

.trend-item-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-item-content p {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.trend-item-metrics .metric {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Trend Detail Panel */
.trend-detail-panel {
    position: fixed;
    top: 60px;
    right: 0;
    width: 400px;
    height: calc(100vh - 60px);
    background: var(--surface-primary);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.detail-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.detail-header .btn-ghost {
    position: absolute;
    top: 16px;
    right: 16px;
}

.detail-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    padding-right: 40px;
}

.detail-badges {
    display: flex;
    gap: 8px;
}

.detail-badges .badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.trend-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

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

.metric-card {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.metric-header i {
    color: #10b981;
}

.metric-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.metric-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.trend-notes {
    padding: 16px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
    margin-bottom: 24px;
}

.trend-notes h4 {
    font-size: 12px;
    color: #f59e0b;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-notes p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.detail-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-actions {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
}

.detail-actions .btn {
    flex: 1;
}

.btn-danger {
    color: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.4) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Update Modal */
.radar-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.radar-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.radar-modal {
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    background: var(--surface-primary);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.radar-modal-overlay.active .radar-modal {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Update instructions */
.update-instructions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.instruction-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.step-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.instruction-step h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.instruction-step p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.prompt-container,
.response-container {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.prompt-textarea,
.response-textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.6;
    resize: vertical;
    border-radius: 0;
}

.prompt-textarea:focus,
.response-textarea:focus,
.prompt-textarea:active,
.response-textarea:active,
.prompt-textarea[readonly],
.response-textarea[readonly] {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Override any global textarea/form-control styles within radar modal */
.radar-modal textarea,
.radar-modal .prompt-textarea,
.radar-modal .response-textarea,
.radar-modal-overlay textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.radar-modal textarea:focus,
.radar-modal textarea:active,
.radar-modal-overlay textarea:focus,
.radar-modal-overlay textarea:active {
    background: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.response-textarea {
    min-height: 120px;
}

.response-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Add/Edit trend modal specific */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.metrics-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}

.metric-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-input label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.metric-input label i {
    color: #10b981;
}

.metric-input input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.metric-input input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    cursor: pointer;
}

.range-value {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
    text-align: center;
}

/* Empty state */
.trend-list .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.trend-list .empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.trend-list .empty-state p {
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .trend-radar-module {
        padding: 16px;
    }
    
    .radar-header {
        flex-direction: column;
    }
    
    .radar-content {
        grid-template-columns: 1fr;
    }
    
    .radar-with-labels {
        flex-direction: column;
        gap: 16px;
    }
    
    .radar-labels-column {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        justify-content: center;
    }
    
    .radar-labels-column.left,
    .radar-labels-column.right {
        align-items: center;
    }
    
    .radar-labels-column.left .side-label {
        flex-direction: row;
    }
    
    .radar-container {
        width: 280px;
        height: 280px;
    }
    
    .side-label {
        max-width: 140px;
    }
    
    .side-label-text {
        font-size: 10px;
    }
    
    .ring-label {
        font-size: 7px;
    }
    
    .quadrant-label {
        font-size: 8px;
        padding: 2px 5px;
    }
    
    .quadrant-label i {
        display: none;
    }
    
    .radar-legend {
        flex-direction: column;
        align-items: center;
    }
    
    .trend-detail-panel {
        width: 100%;
        left: 0;
    }
}

/* ============================================
   TREND RADAR SAVE BUTTON STATES
   ============================================ */

.unsaved-dot {
    color: #fbbf24;
    margin-left: 4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================
   CONTENT CREATION EDITING ACTIONS
   ============================================ */

.editing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.editing-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.editing-actions .btn-saved {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.editing-actions .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.editing-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   COLLAPSED STAGE CARDS WITH SLIDE ANIMATION
   ============================================ */

.stage-card {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Stage body - the collapsible content area */
.stage-body {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
}

.stage-card.collapsed .stage-body {
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.stage-card:not(.collapsed) .stage-body {
    opacity: 1;
}

.stage-card.collapsed {
    padding: 0 !important;
    margin-bottom: 8px !important;
}

.stage-card.collapsed .stage-card-header {
    padding: 12px 20px !important;
    margin: 0 !important;
    border-bottom: none;
    border-radius: 12px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
    min-height: 0 !important;
}

.stage-card-header.clickable {
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 12px 12px 0 0;
}

.stage-card.collapsed .stage-card-header.clickable {
    border-radius: 12px;
}

.stage-card-header.clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Ensure the stage title stays aligned properly in collapsed state */
.stage-card.collapsed .stage-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin: 0;
}

.stage-card.collapsed .stage-title i {
    font-size: 15px;
}

.stage-card.collapsed .stage-title span {
    font-size: 14px;
}

.collapse-icon {
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 6px;
    transition: transform 0.3s ease;
    width: 12px;
    text-align: center;
}

.status-approved {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.stage-status-badge {
    transition: all 0.3s ease;
}

/* Retry progress indicator */
.retry-progress {
    animation: pulse-retry 1.5s ease-in-out infinite;
}

@keyframes pulse-retry {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   TREND RADAR HEADER ACTIONS
   ============================================ */

.radar-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radar-header-actions .brand-selector {
    min-width: 160px;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.radar-header-actions .brand-selector:focus {
    outline: none;
    border-color: var(--primary-color);
}

.radar-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radar-btn-group .btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.radar-btn-group .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.radar-btn-group .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.radar-btn-group .btn-outline i {
    opacity: 0.7;
}

/* Save button with unsaved changes */
.radar-btn-group #radar-save-btn.has-changes {
    background: rgba(217, 119, 6, 0.2) !important;
    border-color: #d97706 !important;
    color: #fbbf24 !important;
}

.radar-btn-group #radar-save-btn.has-changes:hover {
    background: rgba(217, 119, 6, 0.3) !important;
}

@media (max-width: 768px) {
    .radar-header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .radar-header-actions .brand-selector {
        width: 100%;
    }
    
    .radar-btn-group {
        flex-wrap: wrap;
    }
    
    .radar-btn-group .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   PLANNING STAGE OUTPUT - KEY MESSAGES VERTICAL DISPLAY
   ============================================ */

/* Ensure stage output is properly scrollable and displays content vertically */
.stage-output {
    max-height: none;
    overflow: visible;
}

/* Output items should display vertically */
.output-item {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid #dc2626;
}

.output-item strong {
    display: block;
    color: #f87171;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Lists in output items should be vertical */
.output-item ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.output-item ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
}

.output-item ul li i {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Stage card body should allow scrolling when content is tall */
.stage-card-body {
    max-height: none;
    overflow: visible;
}

/* In side panel mode (smaller width), ensure content is fully visible */
@media (max-width: 1200px) {
    .output-item {
        padding: 10px 12px;
    }
    
    .output-item ul li {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* For very narrow viewports (side panel mode) */
@media (max-width: 600px) {
    .stage-output {
        font-size: 13px;
    }
    
    .output-item {
        padding: 8px 10px;
        margin-bottom: 12px;
    }
    
    .output-item strong {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .output-item ul li {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ============================================
   BRAND FORM TOOLTIPS AND PLATFORM SELECTION
   ============================================ */

/* Tooltip icon styling */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.4);
    cursor: help;
    transition: color 0.2s ease;
}

.tooltip-icon:hover {
    color: #f87171;
}

.tooltip-icon i {
    font-size: 12px;
}

/* Platform selection grid */
.platform-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.platform-checkbox {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.platform-checkbox:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.platform-checkbox.selected {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.4);
}

.platform-checkbox input[type="checkbox"] {
    display: none;
}

.platform-checkbox-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.platform-checkbox-content i {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.platform-checkbox-content span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Platform checkbox selected state */
.platform-checkbox.selected .platform-checkbox-content span {
    color: #fff;
}

/* Responsive platform grid */
@media (max-width: 768px) {
    .platform-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .platform-selection-grid {
        grid-template-columns: 1fr;
    }
    
    .platform-checkbox {
        padding: 10px 12px;
    }
}

/* ============================================
   IDEAS DASHBOARD MODULE
   ============================================ */

/* ============================================
   IDEAS DASHBOARD - COMPACT LAYOUT
   ============================================ */

.ideas-dashboard-module {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.ideas-dashboard-compact {
    padding: 16px;
}

/* Compact Header */
.ideas-header-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ideas-title-compact {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ideas-title-compact i {
    color: #f59e0b;
    font-size: 18px;
}

.ideas-header-stats {
    display: flex;
    gap: 12px;
    flex: 1;
}

.header-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.header-stat i {
    font-size: 10px;
}

.header-stat.attention {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Tab Navigation */
.ideas-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.ideas-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ideas-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.ideas-tab.active {
    background: rgba(220, 38, 38, 0.15);
    color: #fff;
}

.tab-count {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 11px;
}

.ideas-tab.active .tab-count {
    background: rgba(220, 38, 38, 0.3);
}

/* Tab Content */
.ideas-tab-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-height: 400px;
}

.ideas-tab-panel,
.pipeline-tab-panel,
.timeline-tab-panel {
    padding: 16px;
}

/* Ideas Toolbar */
.ideas-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Ideas Cards Grid */
.ideas-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.idea-card-compact {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s ease;
}

.idea-card-compact:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.idea-card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.idea-status-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.idea-status-badge.status-new {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.idea-status-badge.status-researching {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.idea-status-badge.status-ready {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.idea-type-badge {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.idea-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.idea-card-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.idea-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.idea-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.idea-date i {
    margin-right: 4px;
}

.idea-card-actions {
    display: flex;
    gap: 6px;
}

.btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-icon.btn-primary {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.btn-icon.btn-primary:hover {
    background: rgba(220, 38, 38, 0.25);
}

/* Pipeline Compact - Horizontal scrolling with SEO on the right */
.pipeline-columns-compact {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.pipeline-columns-compact::-webkit-scrollbar {
    height: 8px;
}

.pipeline-columns-compact::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.pipeline-columns-compact::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.pipeline-columns-compact::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pipeline-columns-compact .pipeline-column {
    flex: 0 0 280px;
    min-width: 280px;
}

/* Empty State Compact */
.empty-state-compact {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state-compact i {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 12px;
    display: block;
}

.empty-state-compact h3 {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 6px 0;
    font-size: 16px;
}

.empty-state-compact p {
    margin: 0 0 16px 0;
    font-size: 13px;
}

/* Legacy styles kept for compatibility */
.ideas-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.ideas-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ideas-title i {
    color: #f59e0b;
}

.ideas-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0 0;
}

/* Stats Grid */
.ideas-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Responsive for compact dashboard */
@media (max-width: 1200px) {
    .pipeline-columns-compact .pipeline-column {
        flex: 0 0 240px;
        min-width: 240px;
    }
}

@media (max-width: 768px) {
    .ideas-header-compact {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ideas-header-stats {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .ideas-tabs {
        overflow-x: auto;
    }
    
    .pipeline-columns-compact {
        grid-template-columns: 1fr;
    }
    
    .ideas-cards-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-ideas .stat-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-projects .stat-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-videos .stat-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stat-attention .stat-icon {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.stat-attention.has-attention .stat-icon {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    animation: pulse 2s infinite;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Attention Banner */
.attention-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    margin-bottom: 24px;
    gap: 16px;
}

.attention-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attention-content i {
    font-size: 24px;
    color: #fbbf24;
}

.attention-content strong {
    color: #fbbf24;
}

.attention-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

/* Main Content Grid */
.ideas-content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 32px;
}

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

.section-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h2 i {
    color: rgba(255, 255, 255, 0.5);
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin: 0;
}

/* Ideas Pool */
.ideas-pool-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

.ideas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}

.idea-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.idea-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

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

.idea-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.idea-status.status-new {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.idea-status.status-researching {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.idea-status.status-ready {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.idea-type {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.idea-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
}

.idea-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.idea-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
}

.idea-meta i {
    margin-right: 4px;
}

.idea-actions {
    display: flex;
    gap: 8px;
}

/* Pipeline Columns */
.projects-pipeline-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

.pipeline-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pipeline-column {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px;
    min-height: 200px;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid;
    padding-left: 10px;
}

.column-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
}

.column-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

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

.column-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

/* Project Cards */
.project-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    position: relative;
    transition: all 0.2s ease;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.project-card.needs-attention {
    border-color: rgba(251, 191, 36, 0.4);
}

.attention-indicator {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    background: #fbbf24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #000;
    animation: pulse 2s infinite;
}

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

.project-type {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.project-deadline {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.project-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px 0;
}

.project-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.progress-bar-mini {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-mini .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 30px;
}

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

.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
}

/* Waterfall Section */
.waterfall-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

.waterfall-timeline {
    padding: 20px 0;
}

.waterfall-empty {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.4);
}

.waterfall-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.timeline-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 10px 0;
}

.timeline-item {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

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

.timeline-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    margin-bottom: 12px;
    position: relative;
}

.timeline-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(200px - 16px + 24px);
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
}

.timeline-item:last-child .timeline-marker::after {
    display: none;
}

.timeline-marker.planning { background: #f59e0b; }
.timeline-marker.in-progress { background: #3b82f6; }
.timeline-marker.review { background: #dc2626; }
.timeline-marker.completed { background: #10b981; }

.timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%;
}

.timeline-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.timeline-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 6px 0;
}

.timeline-status {
    font-size: 10px;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state i {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 16px;
    display: block;
}

.empty-state h3 {
    color: #fff;
    margin: 0 0 8px 0;
    font-size: 18px;
}

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

/* Notes styling in modal */
.existing-notes {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 16px;
}

.note-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.note-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.note-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.note-item-actions {
    display: flex;
    gap: 4px;
}

.note-item-actions .btn-icon {
    padding: 4px 6px;
    font-size: 12px;
}

.note-item p.note-text {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.note-edit-form {
    margin-top: 8px;
}

.note-edit-form .note-edit-input {
    margin-bottom: 8px;
}

.note-edit-buttons {
    display: flex;
    gap: 8px;
}

/* Highlight pulse animation */
.highlight-pulse {
    animation: highlightPulse 1s ease;
}

@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}

/* ============================================
   VIDEO WORKFLOW MODULE
   ============================================ */

.video-workflow-module {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.video-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.video-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-title i {
    color: #ef4444;
}

.video-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0 0;
}

.video-header-actions {
    display: flex;
    gap: 12px;
}

/* Welcome Screen */
.video-welcome {
    text-align: center;
    padding: 40px 20px;
}

.welcome-illustration {
    margin-bottom: 40px;
}

.workflow-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.stage-icon-preview {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ef4444;
}

.preview-stage span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.stage-connector {
    color: rgba(255, 255, 255, 0.3);
}

.welcome-content h2 {
    font-size: 24px;
    color: #fff;
    margin: 0 0 12px 0;
}

.welcome-content > p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px 0;
}

.workflow-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: inline-block;
    text-align: left;
}

.workflow-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.workflow-benefits li i {
    color: #10b981;
    font-size: 14px;
}

.welcome-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.coming-soon-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.coming-soon-notice i {
    font-size: 24px;
    color: #3b82f6;
}

.coming-soon-notice strong {
    color: #3b82f6;
    display: block;
}

.coming-soon-notice p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* Workflow Progress */
.workflow-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.progress-step.complete,
.progress-step.current {
    opacity: 1;
}

.step-indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.progress-step.current .step-indicator {
    background: #ef4444;
    color: #fff;
}

.progress-step.complete .step-indicator {
    background: #10b981;
    color: #fff;
}

.step-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-connector {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
}

/* Stage Content */
.stage-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.stage-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-header h2 {
    font-size: 22px;
    color: #fff;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stage-header h2 i {
    color: #ef4444;
}

.stage-header p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.stage-body {
    padding: 40px;
    min-height: 300px;
}

.coming-soon-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.coming-soon-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.coming-soon-placeholder h3 {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}

.coming-soon-placeholder p {
    margin: 8px 0 0 0;
}

.stage-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Responsive */
@media (max-width: 1200px) {
    .ideas-content-grid {
        grid-template-columns: 1fr;
    }
    
    .pipeline-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ideas-dashboard-module,
    .video-workflow-module {
        padding: 16px;
    }
    
    .ideas-title,
    .video-title {
        font-size: 22px;
    }
    
    .ideas-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pipeline-columns {
        grid-template-columns: 1fr;
    }
    
    .attention-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .workflow-preview {
        flex-direction: column;
    }
    
    .stage-connector {
        display: none;
    }
    
    .workflow-progress {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .step-connector {
        display: none;
    }
}

/* ============================================
   COMPLIANCE CHECKER - COMING SOON PAGE
   ============================================ */

.compliance-coming-soon {
    min-height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

/* Background Effects */
.coming-soon-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.bg-gradient-orbs {
    position: absolute;
    inset: 0;
}

.bg-gradient-orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    bottom: -50px;
    left: -50px;
    animation-delay: -7s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #10b981, #34d399);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.05); }
}

.bg-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Main Content */
.coming-soon-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Shield Animation */
.shield-animation {
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.shield-outer {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shield-inner {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 10px 40px rgba(139, 92, 246, 0.4),
        inset 0 -4px 20px rgba(0, 0, 0, 0.2);
    animation: shieldPulse 3s ease-in-out infinite;
}

.shield-inner i {
    font-size: 48px;
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 15px 60px rgba(139, 92, 246, 0.6); }
}

.shield-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), transparent);
    animation: shieldPulseExpand 2s ease-out infinite;
}

@keyframes shieldPulseExpand {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.shield-ring {
    position: absolute;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    animation: ringRotate 10s linear infinite;
}

.ring-1 {
    inset: -20px;
    animation-direction: normal;
}

.ring-2 {
    inset: -35px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 15s;
}

.ring-3 {
    inset: -50px;
    border-style: dotted;
    animation-duration: 20s;
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scan-lines {
    position: absolute;
    inset: -30px;
    overflow: hidden;
    border-radius: 50%;
}

.scan-line {
    position: absolute;
    width: 200%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent);
    top: 50%;
    left: -50%;
    animation: scanMove 3s ease-in-out infinite;
}

@keyframes scanMove {
    0%, 100% { transform: translateY(-80px) rotate(-45deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(80px) rotate(-45deg); opacity: 0; }
}

/* Title */
.coming-soon-title {
    margin-bottom: 24px;
}

.badge-coming {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f87171;
    margin-bottom: 16px;
    animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.5); }
}

.coming-soon-title h1 {
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #f0f0f0 0%, #f87171 50%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coming-soon-title .subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Description */
.coming-soon-description {
    max-width: 600px;
    margin: 0 auto 40px;
}

.coming-soon-description p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Features Preview */
.features-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.feature-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 24px 16px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feature-icon i {
    font-size: 22px;
    color: #f87171;
}

.feature-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 8px 0;
}

.feature-card p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
}

/* CTA Section */
.coming-soon-cta {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 32px;
}

.cta-text {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px 0;
}

.cta-form {
    display: flex;
    gap: 12px;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}

.email-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.email-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
}

.btn-glow {
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
    transition: all 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6);
    transform: translateY(-2px);
}

/* Development Progress */
.development-progress {
    max-width: 500px;
    margin: 0 auto;
}

.development-progress .progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.development-progress .progress-percent {
    color: #f87171;
    font-weight: 700;
}

.progress-bar-fancy {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}

.progress-bar-fancy .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171, #dc2626);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: progressShimmer 2s linear infinite;
}

@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.progress-bar-fancy .progress-glow {
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6));
    filter: blur(4px);
    animation: glowMove 2s ease-in-out infinite;
}

.progress-milestones {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.milestone {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.4);
}

.milestone.completed {
    color: #10b981;
}

.milestone.active {
    color: #fbbf24;
}

.milestone i {
    font-size: 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .features-preview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .coming-soon-title h1 {
        font-size: 32px;
    }
    
    .features-preview {
        grid-template-columns: 1fr;
    }
    
    .cta-form {
        flex-direction: column;
    }
    
    .progress-milestones {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* ============================================
   MODULE CONTROL SECTIONS
   ============================================ */

.cockpit-modules-panel .modules-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

.module-section {
    width: 100%;
}

.module-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    padding-left: 4px;
    border-left: 2px solid rgba(139, 92, 246, 0.5);
    padding-left: 8px;
}

.module-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Make module cards smaller in the new layout */
.module-section .module-toggle-card {
    padding: 12px;
}

.module-section .module-toggle-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.module-section .module-toggle-name {
    font-size: 12px;
}

.module-section .module-toggle-desc {
    font-size: 10px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .module-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============================================
   VIDEO WORKFLOW MODULE - ENHANCED STYLES
   ============================================ */

/* Project Title Bar */
.project-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(30, 30, 30, 0.6);
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 20px;
}

.project-title-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding: 8px;
    border-radius: 8px;
}

.project-title-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
}

.project-progress-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.project-progress-mini .progress-bar-mini {
    width: 100px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.project-progress-mini .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Concepts Grid */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.concept-card {
    background: rgba(30, 30, 30, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.concept-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

.concept-card.selected {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

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

.concept-number {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
}

.engagement-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
}

.engagement-badge.high {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.engagement-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.engagement-badge.low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.concept-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.concept-hook {
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
}

.concept-details {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

.concept-details i {
    margin-right: 6px;
    color: #3b82f6;
}

.concept-points {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.concept-points strong {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8);
}

.concept-points ul {
    margin: 0;
    padding-left: 16px;
}

.concept-points li {
    margin-bottom: 4px;
}

.ai-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.ai-recommendation i {
    color: #3b82f6;
    font-size: 18px;
}

/* Script Output */
.script-output .script-meta {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.script-output .script-meta i {
    margin-right: 6px;
    color: #3b82f6;
}

.script-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.script-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.script-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-section h4 i {
    color: #3b82f6;
}

.script-content {
    background: rgba(20, 20, 20, 0.5);
    padding: 16px;
    border-radius: 8px;
}

.script-content p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 12px 0;
}

.script-notes {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.script-notes .duration {
    color: #3b82f6;
}

.script-notes .visual-notes {
    color: rgba(255, 255, 255, 0.5);
}

.script-notes .visual-notes i {
    margin-right: 4px;
}

.timestamps-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.timestamps-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.timestamps-section h4 i {
    margin-right: 8px;
    color: #3b82f6;
}

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

.timestamps-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.timestamps-list .ts-time {
    font-family: monospace;
    color: #3b82f6;
    min-width: 50px;
}

/* Design Output */
.design-output .design-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.design-item {
    background: rgba(20, 20, 20, 0.5);
    padding: 16px;
    border-radius: 8px;
}

.design-item.full-width {
    grid-column: span 2;
}

.design-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.design-item p {
    font-size: 14px;
    color: #fff;
    margin: 0;
}

.color-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-family: monospace;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.design-notes {
    margin-top: 20px;
    padding: 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
}

.design-notes h5 {
    font-size: 13px;
    font-weight: 700;
    color: #f87171;
    margin: 0 0 8px 0;
}

.design-notes p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Cutter Output */
.cutter-output .editing-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.overview-item {
    background: rgba(20, 20, 20, 0.5);
    padding: 16px;
    border-radius: 8px;
}

.overview-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.overview-item p {
    font-size: 13px;
    color: #fff;
    margin: 0;
}

.broll-section, .music-section {
    margin-top: 20px;
}

.broll-section h5, .music-section h5 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.broll-section h5 i, .music-section h5 i {
    margin-right: 8px;
    color: #ef4444;
}

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

.broll-table th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(30, 30, 30, 0.8);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.broll-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.music-item {
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(30, 30, 30, 0.8);
    border-radius: 6px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.music-item .mood {
    color: #f59e0b;
    font-weight: 600;
}

.music-item .genre {
    color: rgba(255, 255, 255, 0.6);
}

/* SEO Output */
.seo-output .seo-field {
    margin-bottom: 20px;
}

.seo-output .seo-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.seo-output .seo-field label.seo-field-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.seo-value {
    background: rgba(20, 20, 20, 0.5);
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #fff;
}

.seo-value.title-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.char-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.description-preview {
    white-space: pre-wrap;
    line-height: 1.6;
    max-height: 320px;
    overflow-y: auto;
}

.tags-list, .hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-radius: 4px;
    font-size: 12px;
}

.hashtag {
    padding: 6px 12px;
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border-radius: 4px;
    font-size: 12px;
}

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

.chapters-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.chapter-time {
    font-family: monospace;
    color: #10b981;
    min-width: 50px;
}

/* Recent Projects */
.recent-projects-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-projects-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px 0;
}

.recent-projects-section h3 i {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.recent-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.project-card-mini {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-card-mini:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(40, 40, 40, 0.6);
}

.project-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
}

.project-card-info {
    flex: 1;
}

.project-card-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.project-stage {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.project-card-arrow {
    color: rgba(255, 255, 255, 0.3);
}

/* Import Ideas Modal */
.ideas-import-list {
    max-height: 400px;
    overflow-y: auto;
}

.idea-import-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.idea-import-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.idea-import-icon {
    width: 40px;
    height: 40px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
}

.idea-import-info {
    flex: 1;
}

.idea-import-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.idea-import-info p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Loading animation */
.stage-body.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.loading-animation {
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.loading-animation h3 {
    font-size: 16px;
    color: #fff;
    margin: 0 0 8px 0;
}

.loading-animation p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Selected concept preview */
.selected-concept-preview {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
}

.selected-concept-preview h4 {
    font-size: 13px;
    color: #10b981;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-concept-preview .concept-card {
    margin: 0;
    padding: 12px;
}

/* Form row */
.stage-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .stage-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .design-output .design-grid {
        grid-template-columns: 1fr;
    }
    
    .design-item.full-width {
        grid-column: span 1;
    }
    
    .cutter-output .editing-overview {
        grid-template-columns: 1fr;
    }
    
    .concepts-grid {
        grid-template-columns: 1fr;
    }
}

/* Color input */
.form-control-color {
    height: 44px;
    padding: 4px;
    cursor: pointer;
}

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */

.language-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(30, 30, 30, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
}

.language-btn:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(40, 40, 40, 0.6);
}

.language-btn.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    color: #fff;
}

.lang-flag {
    font-size: 24px;
    line-height: 1;
}

.lang-name {
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   GREETING SCREEN
   ============================================ */

.greeting-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.greeting-screen.visible {
    opacity: 1;
}

.greeting-screen.fade-out {
    opacity: 0;
}

.greeting-content {
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    animation: greetingFadeIn 1s ease 0.3s forwards;
}

@keyframes greetingFadeIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.greeting-hello {
    font-size: clamp(32px, 8vw, 72px);
    font-weight: 300;
    color: #fff;
    margin: 0;
    letter-spacing: 0.05em;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.greeting-message {
    font-size: clamp(14px, 3vw, 20px);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.greeting-skip {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0;
    animation: greetingSkipFadeIn 0.5s ease 1.5s forwards;
    cursor: pointer;
    transition: color 0.2s ease;
}

.greeting-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

@keyframes greetingSkipFadeIn {
    to {
        opacity: 1;
    }
}

/* ============================================
   HEADER LANGUAGE SWITCHER
   ============================================ */

.language-switcher {
    position: relative;
}

.lang-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-flag-icon {
    font-size: 20px;
    line-height: 1;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.lang-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    transition: all 0.2s ease;
    text-align: left;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lang-option .lang-flag {
    font-size: 18px;
}

/* ============================================
   NAVI LOGO BRANDING
   ============================================ */

/* Header Brand */
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.header-logo:hover {
    transform: scale(1.05);
}

.app-title {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* Loader Logo */
.navi-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navi-logo-img {
    width: 80px;
    height: 80px;
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

.navi-title {
    font-size: 42px !important;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 50%, #f87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    text-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .header-logo {
        width: 32px;
        height: 32px;
    }
    
    .app-title {
        font-size: 18px;
    }
    
    .navi-logo-img {
        width: 60px;
        height: 60px;
    }
    
    .navi-title {
        font-size: 32px !important;
    }
}

@media (max-width: 400px) {
    .header-logo {
        width: 28px;
        height: 28px;
    }
    
    .app-title {
        font-size: 16px;
    }
}

/* ============================================
   RESPONSIVE OPTIMIZATIONS - ALL MODULES
   ============================================ */

/* Extra Large Screens (1600px+) */
@media (min-width: 1600px) {
    .ideas-dashboard-module,
    .video-workflow-module,
    .compliance-coming-soon {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .concepts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .features-preview {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .module-section-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Large Screens (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .ideas-dashboard-module,
    .video-workflow-module {
        padding: 24px;
    }
    
    .ideas-title,
    .video-title {
        font-size: 28px;
    }
}

/* Medium Screens / Tablets (768px - 1199px) */
@media (max-width: 1199px) {
    .project-title-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .project-title-input {
        font-size: 18px;
    }
    
    .project-progress-mini {
        justify-content: flex-start;
    }
    
    .workflow-progress {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .step-connector {
        display: none;
    }
    
    .progress-step {
        flex: 0 0 auto;
        min-width: 100px;
    }
}

/* Small Tablets / Large Phones (600px - 767px) */
@media (max-width: 767px) {
    /* Ideas Dashboard */
    .ideas-header {
        flex-direction: column;
        gap: 16px;
    }
    
    .ideas-header-actions {
        width: 100%;
        display: flex;
        justify-content: stretch;
    }
    
    .ideas-header-actions .btn {
        flex: 1;
    }
    
    .ideas-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ideas-tab {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Video Workflow */
    .video-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .video-header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    
    .video-header-actions .btn {
        flex: 1;
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .workflow-progress {
        gap: 8px;
    }
    
    .progress-step {
        min-width: 80px;
        padding: 8px;
    }
    
    .step-label {
        font-size: 10px;
    }
    
    /* Stage cards */
    .stage-card {
        border-radius: 12px;
    }
    
    .stage-header {
        padding: 16px;
    }
    
    .stage-header h2 {
        font-size: 18px;
    }
    
    .stage-body {
        padding: 16px;
    }
    
    .stage-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .stage-footer .btn {
        flex: 1;
        min-width: 120px;
    }
    
    /* Concepts Grid */
    .concepts-grid {
        grid-template-columns: 1fr;
    }
    
    .concept-card {
        padding: 16px;
    }
    
    /* Script Output */
    .script-section {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    
    .script-content {
        padding: 12px;
    }
    
    /* Design Output */
    .design-output .design-grid {
        grid-template-columns: 1fr;
    }
    
    .design-item.full-width {
        grid-column: span 1;
    }
    
    /* Cutter Output */
    .cutter-output .editing-overview {
        grid-template-columns: 1fr;
    }
    
    .broll-table {
        display: block;
        overflow-x: auto;
    }
    
    /* SEO Output */
    .tags-list,
    .hashtags-list {
        gap: 6px;
    }
    
    .tag,
    .hashtag {
        padding: 4px 10px;
        font-size: 11px;
    }
    
    /* Compliance Checker */
    .coming-soon-title h1 {
        font-size: 28px;
    }
    
    .shield-outer {
        width: 100px;
        height: 100px;
    }
    
    .shield-inner {
        width: 70px;
        height: 70px;
    }
    
    .shield-inner i {
        font-size: 32px;
    }
    
    .features-preview {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .feature-card {
        padding: 16px 12px;
    }
    
    .feature-card h3 {
        font-size: 13px;
    }
    
    /* Control Center Modules */
    .module-section-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .module-toggle-card {
        padding: 10px;
    }
}

/* Mobile Phones (< 600px) */
@media (max-width: 599px) {
    /* Ideas Dashboard */
    .ideas-dashboard-module {
        padding: 12px;
    }
    
    .ideas-title {
        font-size: 20px;
    }
    
    .ideas-subtitle {
        font-size: 12px;
    }
    
    .ideas-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .idea-card-compact {
        padding: 12px;
    }
    
    .idea-card-title {
        font-size: 14px;
    }
    
    /* Pipeline */
    .pipeline-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .pipeline-column {
        min-height: auto;
    }
    
    .column-cards {
        max-height: 200px;
        overflow-y: auto;
    }
    
    /* Video Workflow */
    .video-workflow-module {
        padding: 12px;
    }
    
    .video-title {
        font-size: 20px;
    }
    
    .workflow-benefits li {
        font-size: 13px;
        padding: 8px 0;
    }
    
    .welcome-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .welcome-actions .btn {
        width: 100%;
    }
    
    .recent-projects-grid {
        grid-template-columns: 1fr;
    }
    
    /* Stage forms */
    .stage-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 13px;
    }
    
    .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Compliance Checker */
    .compliance-coming-soon {
        padding: 20px 12px;
    }
    
    .coming-soon-title h1 {
        font-size: 24px;
    }
    
    .coming-soon-title .subtitle {
        font-size: 14px;
    }
    
    .features-preview {
        grid-template-columns: 1fr;
    }
    
    .coming-soon-cta {
        padding: 16px;
    }
    
    .cta-form {
        flex-direction: column;
    }
    
    .progress-milestones {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .milestone {
        font-size: 10px;
    }
    
    /* Control Center Modules */
    .cockpit-modules-panel .modules-grid {
        padding: 12px;
    }
    
    .module-section-grid {
        grid-template-columns: 1fr;
    }
    
    .module-toggle-card {
        padding: 12px;
    }
    
    .module-toggle-name {
        font-size: 13px;
    }
    
    /* Language Selector */
    .language-selector {
        flex-direction: column;
    }
    
    .language-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Very Small Screens (< 400px) */
@media (max-width: 399px) {
    .ideas-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .ideas-header-stats {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-stat {
        font-size: 11px;
    }
    
    .ideas-tabs {
        gap: 4px;
    }
    
    .ideas-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .tab-count {
        display: none;
    }
    
    .progress-step {
        min-width: 60px;
    }
    
    .step-indicator {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .step-label {
        font-size: 9px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .idea-card-compact,
    .concept-card,
    .project-card-mini,
    .language-btn,
    .module-toggle-card {
        min-height: 44px; /* Apple's recommended touch target size */
    }
    
    .btn-icon,
    .idea-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .concept-card.selected {
        border-width: 3px;
    }
    
    .language-btn.active {
        border-width: 3px;
    }
    
    .module-toggle-card.enabled {
        border-width: 2px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .shield-animation *,
    .preview-stage,
    .loading-spinner,
    .progress-fill,
    .orb {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   TREND RADAR - QUADRANT LABELS FIX
   ============================================ */

/* Quadrant labels positioning */
.radar-quadrant-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.quadrant-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.quadrant-label i {
    font-size: 16px;
    color: #10b981;
}

.quadrant-label span {
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Position each quadrant label */
.quadrant-label.quadrant-content {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.quadrant-label.quadrant-platform {
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
}

.quadrant-label.quadrant-technology {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.quadrant-label.quadrant-audience {
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
}

/* Zone ring labels */
.radar-ring {
    position: absolute;
    width: var(--ring-size);
    height: var(--ring-size);
    border: 1px solid var(--ring-color, rgba(255, 255, 255, 0.2));
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-label {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 500;
    color: var(--ring-color, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Responsive: Hide/shrink quadrant labels on smaller screens */
@media (max-width: 1200px) {
    .quadrant-label span {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .quadrant-label i {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .quadrant-label {
        font-size: 9px;
    }
    
    .quadrant-label span {
        display: none;
    }
    
    .quadrant-label i {
        font-size: 16px;
        background: rgba(0, 0, 0, 0.7);
        padding: 6px;
        border-radius: 50%;
    }
    
    .ring-label {
        font-size: 7px;
        padding: 1px 4px;
    }
}

@media (max-width: 600px) {
    .quadrant-label {
        display: none;
    }
    
    .ring-label {
        display: none;
    }
    
    /* Show legend instead on very small screens */
    .radar-legend {
        display: flex !important;
        flex-direction: column;
    }
}

/* ============================================
   COMPLIANCE CHECKER - RED THEME
   ============================================ */

.compliance-coming-soon {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

.coming-soon-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.bg-gradient-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg-gradient-orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.bg-gradient-orbs .orb-1 {
    width: 400px;
    height: 400px;
    background: #dc2626;
    top: -100px;
    left: -100px;
    animation: orbFloat 8s ease-in-out infinite;
}

.bg-gradient-orbs .orb-2 {
    width: 300px;
    height: 300px;
    background: #f87171;
    bottom: -50px;
    right: -50px;
    animation: orbFloat 10s ease-in-out infinite reverse;
}

.bg-gradient-orbs .orb-3 {
    width: 200px;
    height: 200px;
    background: #991b1b;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}

.bg-grid-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.coming-soon-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
}

/* Shield Animation */
.shield-animation {
    margin-bottom: 40px;
}

.shield-outer {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.shield-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(220, 38, 38, 0.4);
}

.shield-inner i {
    font-size: 36px;
    color: white;
}

.shield-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(220, 38, 38, 0.2);
    border-radius: 20px;
    animation: shieldPulse 2s ease-in-out infinite;
}

@keyframes shieldPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.shield-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(220, 38, 38, 0.3);
    border-radius: 50%;
}

.shield-ring.ring-1 {
    width: 100px;
    height: 100px;
    animation: ringExpand 3s ease-out infinite;
}

.shield-ring.ring-2 {
    width: 100px;
    height: 100px;
    animation: ringExpand 3s ease-out infinite 1s;
}

.shield-ring.ring-3 {
    width: 100px;
    height: 100px;
    animation: ringExpand 3s ease-out infinite 2s;
}

@keyframes ringExpand {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
    animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
    0% { top: 0; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Title */
.coming-soon-title {
    margin-bottom: 24px;
}

.coming-soon-title .badge-coming {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 20px;
    color: #f87171;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.coming-soon-title h1 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.coming-soon-title .subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
}

/* Description */
.coming-soon-description {
    margin-bottom: 40px;
}

.coming-soon-description p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Features Preview */
.features-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-4px);
}

.feature-card .feature-icon {
    width: 56px;
    height: 56px;
    background: rgba(220, 38, 38, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.feature-card .feature-icon i {
    font-size: 24px;
    color: #f87171;
}

.feature-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* CTA */
.coming-soon-cta {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 40px;
}

.coming-soon-cta .cta-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

/* Progress */
.development-progress {
    max-width: 500px;
    margin: 0 auto;
}

.development-progress .progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.development-progress .progress-percent {
    color: #f87171;
    font-weight: 600;
}

.progress-bar-fancy {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.progress-bar-fancy .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 4px;
    transition: width 1s ease;
}

.progress-bar-fancy .progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressGlowMove 2s linear infinite;
}

@keyframes progressGlowMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-milestones {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.milestone {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 4px;
}

.milestone.completed {
    color: #f87171;
}

.milestone.active {
    color: #fbbf24;
}

.milestone i {
    font-size: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .compliance-coming-soon {
        padding: 20px;
    }
    
    .coming-soon-title h1 {
        font-size: 28px;
    }
    
    .features-preview {
        grid-template-columns: 1fr;
    }
    
    .shield-outer {
        width: 100px;
        height: 100px;
    }
    
    .shield-inner {
        width: 60px;
        height: 60px;
    }
    
    .shield-inner i {
        font-size: 28px;
    }
}

/* ============================================
   LEARNING HUB - COMPREHENSIVE RESPONSIVE
   ============================================ */

/* Extra Large Screens */
@media (min-width: 1600px) {
    .learning-hub {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .curriculum-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lesson-content {
        font-size: 17px;
    }
    
    .section-header h2 {
        font-size: 32px;
    }
}

/* Large Screens */
@media (min-width: 1200px) and (max-width: 1599px) {
    .curriculum-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Screens / Tablets */
@media (max-width: 1199px) {
    .learning-hub {
        padding-bottom: 40px;
    }
    
    .learning-hero {
        padding: 32px;
        gap: 24px;
    }
    
    .hero-visual {
        width: 180px;
        height: 180px;
    }
    
    .curriculum-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .lesson-card {
        padding: 20px;
    }
}

/* Small Tablets */
@media (max-width: 900px) {
    .curriculum-grid {
        grid-template-columns: 1fr;
    }
    
    .learning-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .learning-tabs {
        min-width: max-content;
    }
    
    .step-by-step {
        gap: 16px;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin-bottom: 12px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .learning-hub {
        padding: 16px;
        padding-bottom: 30px;
    }
    
    .learning-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 20px;
    }
    
    .learning-hero h1 {
        font-size: 24px;
    }
    
    .learning-hero p {
        font-size: 14px;
    }
    
    .hero-visual {
        width: 120px;
        height: 120px;
        order: -1;
    }
    
    .hero-progress {
        justify-content: center;
    }
    
    .hero-progress-item {
        font-size: 12px;
    }
    
    .curriculum-grid {
        gap: 12px;
    }
    
    .lesson-card {
        padding: 16px;
    }
    
    .lesson-card-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .lesson-card h3 {
        font-size: 16px;
    }
    
    .lesson-card p {
        font-size: 13px;
    }
    
    /* Lesson View Mobile */
    .lesson-header {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .lesson-content {
        padding: 20px 16px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .section-header h2 {
        font-size: 20px;
    }
    
    .lesson-hero {
        padding: 24px 16px;
    }
    
    .lesson-hero h2 {
        font-size: 22px;
    }
    
    .feature-highlights,
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .highlight-card {
        padding: 16px;
    }
    
    .highlight-card i {
        font-size: 24px;
    }
    
    .highlight-card h4 {
        font-size: 15px;
    }
    
    .callout-box {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }
    
    .callout-icon {
        margin-bottom: 12px;
    }
    
    .pipeline-visual {
        flex-direction: column;
        gap: 12px;
    }
    
    .pipeline-stage {
        width: 100%;
    }
    
    .pipeline-connector {
        transform: rotate(90deg);
        margin: 4px 0;
    }
    
    .step-by-step.detailed {
        gap: 20px;
    }
    
    .step-item[data-step] {
        padding-left: 0;
    }
    
    .step-number {
        position: static;
        display: inline-flex;
        width: 36px;
        height: 36px;
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .step-content h4 {
        font-size: 16px;
    }
    
    /* Tips Grid Mobile */
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .tip-card {
        padding: 16px;
    }
    
    .tip-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    /* Try It Buttons */
    .try-it-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Accordion Mobile */
    .accordion-header {
        padding: 14px 16px;
        font-size: 14px;
    }
    
    .accordion-content {
        padding: 14px 16px;
    }
    
    /* Best Practices List */
    .practice-item {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .practice-icon {
        margin: 0 auto;
    }
    
    /* Quick Start Cards */
    .quick-start-cards {
        grid-template-columns: 1fr;
    }
    
    /* Search Bar */
    .search-bar {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Small Phones */
@media (max-width: 480px) {
    .learning-hub {
        padding: 12px;
    }
    
    .learning-hero {
        padding: 20px 16px;
    }
    
    .learning-hero h1 {
        font-size: 20px;
    }
    
    .hero-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .hero-visual {
        width: 100px;
        height: 100px;
    }
    
    .curriculum-grid {
        gap: 10px;
    }
    
    .lesson-card {
        padding: 14px;
    }
    
    .lesson-card-meta {
        font-size: 11px;
    }
    
    .lesson-header {
        padding: 14px;
    }
    
    .lesson-content {
        padding: 16px 14px;
        font-size: 14px;
    }
    
    .section-header h2 {
        font-size: 18px;
    }
    
    .lesson-hero h2 {
        font-size: 20px;
    }
    
    .lesson-hero p {
        font-size: 13px;
    }
    
    .callout-box h4 {
        font-size: 15px;
    }
    
    .callout-box p {
        font-size: 13px;
    }
    
    /* Navigation in lesson view */
    .lesson-nav {
        flex-direction: column;
        gap: 8px;
    }
    
    .lesson-nav .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Stage detail cards */
    .stage-detail {
        padding: 16px;
    }
    
    .stage-header-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .stage-icon {
        margin: 0 auto;
    }
    
    /* Stages overview mini cards */
    .stages-overview {
        gap: 16px;
    }
    
    .stage-card-mini {
        padding: 16px;
    }
    
    .stage-card-mini h4 {
        font-size: 15px;
    }
}

/* ============================================
   TUTORIAL - COMPREHENSIVE RESPONSIVE
   ============================================ */

/* Very small mobile */
@media (max-width: 360px) {
    .navi-tutorial-overlay .navi-terminal {
        width: 100% !important;
        border-radius: 0;
        min-height: 50vh;
        max-height: 85vh;
    }
    
    .terminal-header {
        padding: 10px 12px;
    }
    
    .terminal-title {
        font-size: 10px;
    }
    
    .terminal-body {
        padding: 12px;
    }
    
    .terminal-line {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .terminal-line.system {
        font-size: 11px;
    }
    
    .terminal-hint {
        font-size: 11px;
    }
    
    .terminal-footer {
        padding: 10px 12px;
    }
    
    .progress-dot {
        width: 5px;
        height: 5px;
    }
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

.language-switcher {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-flag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-svg {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--surface-primary, #1a1a1a);
    border: 1px solid var(--border-default, #333);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.lang-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-primary, #fff);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.lang-option:first-child {
    border-radius: 8px 8px 0 0;
}

.lang-option:last-child {
    border-radius: 0 0 8px 8px;
}

.lang-option:hover {
    background: rgba(220, 38, 38, 0.1);
}

.lang-flag {
    display: flex;
    align-items: center;
}

.lang-flag .flag-svg {
    border-radius: 2px;
}

/* ============================================
   PERSONALIZED GREETING SCREEN
   ============================================ */

.greeting-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.greeting-screen.visible {
    opacity: 1;
}

.greeting-screen.fade-out {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.greeting-content {
    text-align: center;
    animation: greetingFadeIn 1s ease forwards;
}

@keyframes greetingFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.greeting-hello {
    font-size: 4rem;
    font-weight: 300;
    color: #fff;
    margin: 0 0 16px 0;
    letter-spacing: 2px;
}

.greeting-message {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    margin: 0;
}

.greeting-skip {
    position: absolute;
    bottom: 40px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    animation: greetingPulse 2s ease-in-out infinite;
}

@keyframes greetingPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* Responsive greeting */
@media (max-width: 768px) {
    .greeting-hello {
        font-size: 2.5rem;
    }
    
    .greeting-message {
        font-size: 1.1rem;
        padding: 0 20px;
    }
}

/* ============================================
   ADMIN DASHBOARD STYLES
   ============================================ */

.admin-dashboard {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Admin Header */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-header .header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}

.admin-badge i {
    font-size: 14px;
}

.admin-header .module-title {
    margin: 0;
    font-size: 28px;
    color: #fff;
}

.admin-header .module-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.admin-header .header-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Admin Loading */
.admin-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--text-secondary);
}

.admin-loading .loading-spinner {
    font-size: 32px;
    color: #dc2626;
}

/* Admin Content */
.admin-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Admin Section */
.admin-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-section .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.admin-section .section-title i {
    color: #dc2626;
}

/* Admin Grid */
.admin-grid {
    display: grid;
    gap: 20px;
}

.admin-grid.two-cols {
    grid-template-columns: 1.5fr 1fr;
}

.admin-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.admin-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

/* Admin Card */
.admin-card {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.admin-card.full-width {
    grid-column: 1 / -1;
}

.admin-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.admin-card .card-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.admin-card .card-header h3 i {
    color: var(--text-secondary);
}

.admin-card .card-badge {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.admin-card .card-body {
    padding: 20px;
}

/* Quick Stats */
.admin-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.quick-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.quick-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.quick-stat-card:nth-child(1)::before { background: #3b82f6; }
.quick-stat-card:nth-child(2)::before { background: #f59e0b; }
.quick-stat-card:nth-child(3)::before { background: #10b981; }
.quick-stat-card:nth-child(4)::before { background: #ec4899; }

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.stat-icon.brands { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.tokens { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-icon.requests { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.content { background: rgba(236, 72, 153, 0.15); color: #ec4899; }

.stat-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.stat-trend {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
}

.stat-trend.neutral {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.stat-trend.demo {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Chart Container */
.chart-container {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 40px;
}

.chart-empty i {
    font-size: 40px;
    opacity: 0.3;
}

.chart-empty .empty-hint {
    font-size: 12px;
    opacity: 0.6;
}

/* Simple Bar Chart */
.simple-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
    gap: 8px;
    padding: 0 8px;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.chart-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    min-height: 4px;
}

.chart-bar-wrapper:hover .chart-bar {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    transform: scaleY(1.05);
}

.bar-label {
    font-size: 10px;
    color: var(--text-secondary);
}

.chart-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}

/* Module Breakdown */
.breakdown-container {
    min-height: 200px;
}

.breakdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 40px;
}

.breakdown-empty i {
    font-size: 40px;
    opacity: 0.3;
}

.module-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.breakdown-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
}

.breakdown-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.breakdown-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.breakdown-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.breakdown-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.breakdown-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Brands Table */
.brands-table-container {
    overflow-x: auto;
}

.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
    color: var(--text-secondary);
}

.table-empty i {
    font-size: 48px;
    opacity: 0.3;
}

.brands-table {
    width: 100%;
    min-width: 700px;
}

.brands-table .table-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 100px;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.brands-table .th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.brands-table .table-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brands-table .table-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 100px;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.2s ease;
    align-items: center;
}

.brands-table .table-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.brands-table .td {
    font-size: 14px;
    color: #fff;
}

.brand-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-color {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-name {
    font-weight: 500;
}

.platform-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.platform-icons i {
    font-size: 16px;
    color: var(--text-secondary);
}

.more-count {
    font-size: 11px;
    color: var(--text-secondary);
}

.token-badge {
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.content-count {
    color: var(--text-secondary);
}

.activity-time {
    font-size: 13px;
    color: var(--text-secondary);
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

/* Top Brands List */
.top-list {
    min-height: 200px;
}

.top-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 40px;
}

.top-list-empty i {
    font-size: 40px;
    opacity: 0.3;
}

.top-brands-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-brand-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-brand-item .rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.top-brand-item .brand-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.top-brand-item .brand-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.top-brand-item .brand-name {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.top-brand-item .usage-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.top-brand-item .usage-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.top-brand-item .usage-value {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

/* Activity Feed */
.activity-feed {
    min-height: 200px;
}

.activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 40px;
}

.activity-empty i {
    font-size: 40px;
    opacity: 0.3;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-icon.quick-create {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.activity-icon.video-production {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.activity-icon.ideas {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.activity-icon.chatbot {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.activity-icon.unknown {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

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

.activity-brand {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.activity-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.activity-details {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.activity-tokens {
    color: #f59e0b;
}

/* Content Stats */
.content-stats {
    min-height: 200px;
}

.content-stats-summary {
    text-align: center;
    margin-bottom: 20px;
}

.stat-big {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.stat-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.content-breakdown h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.breakdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
}

.breakdown-label i {
    color: var(--text-secondary);
    width: 16px;
}

.breakdown-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.no-data {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Health Cards */
.health-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.health-card.success {
    border-color: rgba(16, 185, 129, 0.3);
}

.health-card.warning {
    border-color: rgba(245, 158, 11, 0.3);
}

.health-card.error {
    border-color: rgba(239, 68, 68, 0.3);
}

.health-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 18px;
    color: var(--text-secondary);
}

.health-card.success .health-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.health-card.warning .health-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.health-card.error .health-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.health-info {
    display: flex;
    flex-direction: column;
}

.health-label {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.health-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.health-status.success {
    color: #10b981;
}

.health-status.warning {
    color: #f59e0b;
}

.health-status.error {
    color: #ef4444;
}

/* Access Denied */
.admin-access-denied {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.access-denied-card {
    text-align: center;
    padding: 48px;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.denied-icon {
    font-size: 64px;
    color: #dc2626;
    margin-bottom: 24px;
}

.access-denied-card h2 {
    font-size: 24px;
    color: #fff;
    margin: 0 0 12px;
}

.access-denied-card p {
    color: var(--text-secondary);
    margin: 0 0 24px;
}

/* Responsive Admin Dashboard */
@media (max-width: 1200px) {
    .admin-grid.two-cols {
        grid-template-columns: 1fr;
    }
    
    .admin-grid.three-cols {
        grid-template-columns: 1fr 1fr;
    }
    
    .admin-grid.four-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .admin-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-dashboard {
        padding: 16px;
    }
    
    .admin-header {
        flex-direction: column;
        gap: 16px;
    }
    
    .admin-header .header-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    .admin-quick-stats {
        grid-template-columns: 1fr;
    }
    
    .admin-grid.three-cols,
    .admin-grid.four-cols {
        grid-template-columns: 1fr;
    }
    
    .brands-table .table-header,
    .brands-table .table-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
    
    .brands-table .platforms-col,
    .brands-table .activity-col,
    .brands-table .actions-col {
        display: none;
    }
    
    .stat-value {
        font-size: 24px;
    }
}

/* ============================================
   USER ACCOUNT MENU STYLES
   ============================================ */

.user-account-menu {
    position: relative;
}

.user-account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-account-btn:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-color: rgba(220, 38, 38, 0.5);
}

.user-account-btn i:first-child {
    font-size: 18px;
    color: #f87171;
}

.user-account-btn .fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.user-account-dropdown.open + .user-account-btn .fa-chevron-down,
.user-account-menu:has(.user-account-dropdown.open) .user-account-btn .fa-chevron-down {
    transform: rotate(180deg);
}

.user-account-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: linear-gradient(135deg, #1e1e1e 0%, #141414 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.user-account-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: rgba(220, 38, 38, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-avatar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-radius: 12px;
    font-size: 20px;
    color: #fff;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.user-role {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.user-dropdown-actions {
    padding: 8px;
}

.dropdown-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.dropdown-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dropdown-action-btn i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.dropdown-action-btn:hover i {
    color: #f87171;
}

.dropdown-action-btn.logout-btn {
    color: #f87171;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
    border-radius: 10px;
}

.dropdown-action-btn.logout-btn i {
    color: #f87171;
}

.dropdown-action-btn.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Admin header items visibility */
.admin-only-header {
    display: none !important;
}

body.logged-in.admin-mode .admin-only-header {
    display: flex !important;
}

/* Mobile responsiveness for user account menu */
@media (max-width: 768px) {
    .user-account-btn {
        padding: 8px 10px;
    }
    
    .user-account-name {
        max-width: 100px;
        font-size: 13px;
    }
    
    .user-account-dropdown {
        width: 240px;
        right: -20px;
    }
}

@media (max-width: 480px) {
    .user-account-name {
        display: none;
    }
    
    .user-account-btn {
        padding: 8px;
    }
    
    .user-account-btn .fa-chevron-down {
        display: none;
    }
}

/* ============================================
   SETTINGS HEADER ALIGNMENT
   Left-align all settings section headers
   ============================================ */

.settings-header-left {
    text-align: left !important;
}

.settings-header-left h3,
.settings-header-left p {
    text-align: left !important;
}

/* Admin badge inline next to Settings title */
.admin-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-badge-inline i {
    font-size: 11px;
}

/* ============================================
   CUSTOM TOOLTIP STYLES FOR VIDEO WORKFLOW
   Tooltips for phase indicators
   ============================================ */

/* General tooltip using data-tooltip attribute */
.has-tooltip {
    position: relative;
    cursor: pointer;
}

.has-tooltip::before,
.has-tooltip::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
}

/* Tooltip content */
.has-tooltip::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    background: rgba(15, 15, 15, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: #f0f0f0;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 280px;
    white-space: normal;
    text-align: center;
}

/* Tooltip arrow */
.has-tooltip::after {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(15, 15, 15, 0.98);
}

/* Show tooltip on hover */
.has-tooltip:hover::before,
.has-tooltip:hover::after {
    visibility: visible;
    opacity: 1;
}

.has-tooltip:hover::before {
    transform: translateX(-50%) translateY(-4px);
}

/* Tooltip for preview stages in video workflow */
.preview-stage.has-tooltip::before {
    bottom: calc(100% + 16px);
    min-width: 200px;
}

/* Progress step tooltips */
.progress-step.has-tooltip::before {
    bottom: calc(100% + 14px);
    font-size: 12px;
    padding: 8px 12px;
}

/* Single stage buttons tooltips */
.btn-stage[title]:hover {
    position: relative;
}

/* Make sure tooltips don't get cut off */
.workflow-preview {
    overflow: visible;
    padding-top: 60px;
    margin-top: -40px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .has-tooltip::before {
        font-size: 12px;
        padding: 8px 10px;
        max-width: 200px;
    }
    
    .preview-stage.has-tooltip::before {
        display: none;
    }
}

/* AI Suggestion styling for pre-filled fields */
.ai-suggested {
    border-color: rgba(139, 92, 246, 0.4) !important;
    background: rgba(139, 92, 246, 0.06) !important;
    transition: border-color 0.3s, background 0.3s;
}

.ai-suggested:focus {
    border-color: rgba(139, 92, 246, 0.6) !important;
    background: transparent !important;
}

/* Navi Agent: Thinking indicator */
.chatbot-message-thinking {
    opacity: 0.85;
}

.chatbot-message-thinking .chatbot-message-avatar {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.chatbot-thinking-label {
    font-size: 11px;
    color: #a78bfa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.chatbot-message-thinking-result {
    opacity: 0.65;
    font-size: 12px;
    margin-bottom: 2px;
}

.chatbot-message-thinking-result .chatbot-message-avatar {
    background: rgba(139, 92, 246, 0.2);
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 10px;
}

.chatbot-message-thinking-result .chatbot-message-avatar i {
    color: #a78bfa;
}

.chatbot-thinking-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
    padding: 6px 10px;
    background: rgba(139, 92, 246, 0.06);
    border-radius: 8px;
    border-left: 2px solid rgba(139, 92, 246, 0.3);
}

/* ============================================================
   NAVI FULL-SCREEN AI ASSISTANT MODE
   ============================================================ */

.navi-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: #0f0f0f;
    color: #f5f5f5;
    font-family: inherit;
}

/* Header — matches widget chatbot-header (brand red gradient) */
.navi-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: linear-gradient(135deg, var(--primary-color, #D50032) 0%, #B8002A 100%);
    color: #ffffff;
    border-bottom: none;
    flex-shrink: 0;
}

.navi-fs-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.navi-fs-logo {
    width: 32px;
    height: 32px;
}

.navi-fs-title-group {
    display: flex;
    flex-direction: column;
}

.navi-fs-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
}

.navi-fs-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.navi-fs-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navi-fs-context {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.12);
    padding: 6px 14px;
    border-radius: 20px;
}

.navi-fs-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.navi-fs-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

.navi-fs-exit-btn {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary-color, #D50032);
    font-weight: 600;
}

.navi-fs-exit-btn:hover {
    background: rgba(255,255,255,0.9);
    color: var(--primary-color, #D50032);
}

.navi-fs-exit-btn:hover {
    background: rgba(255,255,255,0.9);
    color: var(--primary-color, #D50032);
}

.navi-fs-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.navi-fs-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.04);
    background: rgba(10,10,10,0.55);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.navi-fs-project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navi-fs-proj-filter {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}
.navi-fs-proj-filter.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.45);
    color: #93c5fd;
}
.chat-wf-result-grid .chat-wf-section {
    margin-bottom: 12px;
}

.navi-fs-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 4px 4px 0;
    gap: 2px;
}

.navi-fs-tab {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 6px 6px 0 0;
}

.navi-fs-tab.active {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.04);
}

.navi-fs-tab:hover {
    color: rgba(255,255,255,0.7);
}

.navi-fs-sidebar-panel {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}

.navi-fs-sidebar-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding: 8px 8px;
    margin-bottom: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    font-size: 0.78rem;
}

.navi-fs-sidebar-item:hover {
    background: rgba(255,255,255,0.04);
}

.navi-fs-sidebar-item small {
    color: #9ca3af;
}

.navi-fs-sidebar-empty,
.navi-fs-sidebar-meta {
    color: #9ca3af;
    font-size: 0.82rem;
    padding: 6px 4px;
}

.navi-fs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.navi-fs-sidebar-newbtn {
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #dc2626, #f87171);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.navi-fs-sidebar-newbtn:hover {
    filter: brightness(1.1);
}

.navi-fs-kb-back {
    border-style: dashed;
    opacity: 0.9;
}

.navi-fs-kb-breadcrumb {
    font-weight: 600;
    color: #e5e5e5 !important;
    margin-bottom: 8px;
}

.navi-fs-kb-pinned-box {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.06);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.navi-fs-kb-pinned-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #10b981;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.navi-fs-kb-pinned-head small {
    color: #9ca3af;
    font-weight: 400;
    width: 100%;
    margin-top: 2px;
}

.navi-fs-kb-pinned-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    color: #e5e5e5;
    margin-top: 4px;
}

.navi-fs-kb-pinned-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navi-fs-kb-unpin {
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.navi-fs-kb-unpin:hover {
    background: rgba(248, 113, 113, 0.15);
}

.navi-fs-kb-pinned-empty {
    color: #9ca3af;
    font-size: 0.75rem;
    margin: 4px 0 0;
}

.navi-fs-sidebar-item.navi-fs-kb-pinned {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}

.navi-fs-kb-section-head {
    margin: 12px 0 6px;
    padding: 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.navi-fs-preview-panel {
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.navi-fs-preview-panel.navi-fs-preview-full {
    height: 100%;
}

.navi-fs-preview-panel.navi-fs-preview-fit {
    height: 100%;
    overflow: hidden;
    gap: 6px;
}

.navi-fs-preview-content-fit {
    flex: 0 1 auto;
    overflow: hidden;
}

.navi-fs-preview-snip {
    margin: 0 0 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #d4d4d4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.navi-fs-preview-snip-muted {
    color: #9ca3af;
    -webkit-line-clamp: 3;
}

.navi-fs-preview-img-compact {
    display: block;
    width: 100%;
    max-height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.navi-fs-history-msgs-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.navi-fs-history-msgs-compact .navi-fs-history-msg {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.navi-fs-history-msgs-compact .navi-fs-history-msg:last-child {
    border-bottom: none;
}

.navi-fs-history-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.navi-fs-delete-btn {
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    color: #fca5a5 !important;
}

.navi-fs-history-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 4px;
}

.navi-fs-history-row .navi-fs-sidebar-item {
    flex: 1;
    margin-bottom: 0;
}

.navi-fs-history-delete {
    flex-shrink: 0;
    width: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(248, 113, 113, 0.55);
    cursor: pointer;
    font-size: 0.75rem;
}

.navi-fs-history-delete:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

/* Companion mode — workflow in main area, chat docked right */
body.navi-companion-mode #main-content {
    margin-right: min(400px, 38vw);
    transition: margin-right 0.25s ease;
}

body.navi-companion-mode .chatbot-widget.navi-companion-docked .chatbot-window {
    position: fixed;
    top: 72px;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(380px, 36vw);
    height: auto;
    max-height: none;
    z-index: 10001;
}

body.navi-companion-mode .chatbot-widget.navi-companion-docked .chatbot-toggle {
    display: none;
}

body.navi-companion-mode .chatbot-widget.navi-companion-docked {
    z-index: 10050;
}

body.navi-companion-mode .modal-overlay {
    right: min(400px, 38vw);
    z-index: 9990;
}

body.navi-companion-mode .modal-overlay .modal-content {
    max-width: min(520px, calc(100vw - min(400px, 38vw) - 48px));
}

.navi-fs-preview-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    cursor: pointer;
}

.navi-fs-preview-back:hover {
    color: rgba(255,255,255,0.9);
}

.navi-fs-preview-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.navi-fs-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.navi-fs-preview-head strong {
    font-size: 0.9rem;
    color: #f5f5f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navi-fs-preview-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

.navi-fs-preview-close:hover {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.06);
}

.navi-fs-preview-meta {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: #9ca3af;
}

.navi-fs-preview-body {
    margin: 0;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #d4d4d4;
}

.navi-fs-preview-img {
    display: block;
    width: 100%;
    max-height: min(55vh, 420px);
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
    background: #0f0f0f;
}

.navi-fs-mem-hint-line {
    font-size: 0.7rem !important;
    line-height: 1.4;
    opacity: 0.75;
    margin-bottom: 8px !important;
}

.navi-fs-history-msgs {
    max-height: 280px;
    overflow-y: auto;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navi-fs-history-msg {
    padding: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    font-size: 0.75rem;
}

.navi-fs-history-msg-user {
    border-left: 2px solid rgba(248,113,113,0.5);
}

.navi-fs-history-msg-assistant {
    border-left: 2px solid rgba(96,165,250,0.4);
}

.navi-fs-history-role {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin-bottom: 4px;
}

.navi-fs-history-msg p {
    margin: 0;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-break: break-word;
}

.navi-fs-history-summary {
    cursor: default !important;
    opacity: 0.85;
}

/* Messages area */
.navi-fs-messages {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
}

/* Welcome */
.navi-fs-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px 40px;
    gap: 16px;
}

.navi-fs-welcome-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.3);
}

.navi-fs-welcome h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.navi-fs-welcome p {
    font-size: 15px;
    color: var(--text-secondary, #94a3b8);
    max-width: 480px;
    line-height: 1.6;
    margin: 0;
}

.navi-fs-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.navi-fs-quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-primary, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.navi-fs-quick-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.navi-fs-quick-btn i {
    color: var(--primary, #dc2626);
}

/* Messages */
.navi-fs-msg {
    display: flex;
    gap: 12px;
    max-width: 100%;
    animation: naviMsgFadeIn 0.3s ease;
}

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

.navi-fs-msg-user {
    justify-content: flex-end;
}

.navi-fs-msg-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.navi-fs-msg-thinking .navi-fs-msg-avatar {
    background: rgba(220, 38, 38, 0.2);
}

.navi-fs-msg-thinking .navi-fs-msg-avatar i {
    color: #fca5a5;
}

.navi-fs-msg-bubble {
    max-width: 680px;
    padding: 14px 18px;
    border-radius: 16px;
    line-height: 1.6;
    font-size: 14px;
}

.navi-fs-msg-user .navi-fs-msg-bubble {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.navi-fs-msg-assistant .navi-fs-msg-bubble {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.06);
    border-bottom-left-radius: 4px;
}

.navi-fs-msg-error .navi-fs-msg-bubble,
.navi-fs-msg-bubble.navi-fs-msg-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.navi-fs-msg-thinking .navi-fs-msg-bubble {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.15);
    opacity: 0.7;
}

.navi-fs-thinking-text {
    font-size: 13px;
    font-style: italic;
    color: var(--text-secondary, #94a3b8);
}

.navi-fs-msg-text {
    word-break: break-word;
}

.navi-fs-msg-text strong {
    color: #fca5a5;
}

.navi-fs-msg-time {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    margin-top: 6px;
    text-align: right;
}

.navi-fs-msg-user .navi-fs-msg-time {
    color: rgba(255,255,255,0.5);
}

/* Input area */
.navi-fs-input-area {
    flex-shrink: 0;
    padding: 16px 32px 20px;
    background: #141414;
    border-top: 1px solid rgba(255,255,255,0.06);
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.navi-fs-input-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 8px 12px;
    transition: border-color 0.2s;
}

.navi-fs-input-container:focus-within {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.navi-fs-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary, #e2e8f0);
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    outline: none;
    padding: 6px 4px;
    min-height: 24px;
    max-height: 160px;
    font-family: inherit;
}

.navi-fs-input::placeholder {
    color: var(--text-secondary, #64748b);
}

.navi-fs-send-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.navi-fs-send-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: scale(1.05);
}

.navi-fs-input-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .navi-fs-header {
        padding: 12px 16px;
    }
    .navi-fs-messages {
        padding: 16px;
    }
    .navi-fs-input-area {
        padding: 12px 16px 16px;
    }
    .navi-fs-exit-btn span {
        display: none;
    }
    .navi-fs-context {
        display: none;
    }
    .navi-fs-welcome {
        padding: 40px 16px 24px;
    }
    .navi-fs-welcome h2 {
        font-size: 20px;
    }
    .navi-fs-quick-actions {
        flex-direction: column;
    }
}

/* Preserved line breaks in stage output (captions, hooks, etc.) */
.text-block-preserve,
.field-value .text-block-preserve,
.output-text.text-block-preserve {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.65;
    font-size: 0.9rem;
}

/* Quick Create — in-progress projects overview */
.qc-projects-overview {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.06);
}

.qc-projects-overview.qc-projects-compact {
    padding: 10px 14px;
}

.qc-projects-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.08);
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.qc-projects-toggle:hover {
    background: rgba(220, 38, 38, 0.14);
}

.qc-projects-toggle .qc-projects-chevron {
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.qc-projects-overview.is-open .qc-projects-toggle .qc-projects-chevron {
    transform: rotate(180deg);
}

.qc-projects-drawer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.qc-projects-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font-size: 0.88rem;
}

.qc-projects-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.qc-projects-show-more {
    margin: 8px 0 0;
    font-size: 0.8rem;
    opacity: 0.65;
    text-align: center;
}

.qc-projects-header h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qc-projects-header .helper-text {
    margin: 0 0 12px;
    font-size: 0.85rem;
}

.qc-project-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.qc-project-card:last-child {
    margin-bottom: 0;
}

.qc-project-title {
    display: block;
    color: #f3f4f6;
    font-size: 0.95rem;
}

.qc-project-meta {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: #9ca3af;
}

.qc-project-preview {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: #b3b3b3;
    font-style: italic;
}

.qc-project-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.qc-projects-empty {
    margin: 0;
    font-size: 0.85rem;
    color: #9ca3af;
}

/* ============================================
   AGENT MEMORY — fullscreen chat sidebar tab
   ============================================ */
.navi-fs-mem-scope {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin-bottom: 6px;
    min-width: 0;
}

.navi-fs-mem-scope .navi-fs-ellipsis {
    flex: 1;
    min-width: 0;
}

.navi-fs-mem-scope i {
    color: #9ca3af;
}

.navi-fs-mem-scope strong {
    color: #f5f5f5;
}

.navi-fs-mem-scope-admin {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.navi-fs-mem-scope-admin i {
    color: #f59e0b;
}

.navi-fs-sidebar-panel .navi-fs-mem-tags,
.navi-fs-sidebar-panel .navi-fs-mem-badges {
    display: none;
}

.navi-fs-mem-section {
    margin-bottom: 12px;
    padding: 8px 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.navi-fs-mem-section:last-child {
    margin-bottom: 0;
}

.navi-fs-mem-section-recent {
    margin-top: 2px;
}

.navi-fs-mem-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin: 8px 0 6px;
    padding: 0 2px;
}

.navi-fs-mem-section-head i {
    color: #fbbf24;
}

.navi-fs-mem-item {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 4px;
    margin-bottom: 2px;
    transition: background 0.15s;
}

.navi-fs-mem-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.navi-fs-mem-pinned {
    border-left: 3px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.navi-fs-mem-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #e5e5e5;
    margin-bottom: 2px;
}

.navi-fs-mem-head i {
    color: #fbbf24;
    font-size: 0.8rem;
}

.navi-fs-mem-head strong {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navi-fs-mem-kind {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    padding: 2px 6px;
    border-radius: 4px;
}

.navi-fs-ellipsis,
.navi-fs-ellipsis-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.navi-fs-mem-content {
    margin: 0 0 4px;
    font-size: 0.68rem;
    color: #9ca3af;
    line-height: 1.35;
}

.navi-fs-mem-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.navi-fs-mem-tags span {
    background: rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.navi-fs-sidebar-panel .navi-fs-mem-actions button {
    padding: 2px 5px;
    font-size: 0.65rem;
}

.navi-fs-mem-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.navi-fs-mem-actions button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9ca3af;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.15s, border-color 0.15s;
}

.navi-fs-mem-actions button:hover {
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.4);
}

.navi-fs-mem-pinned .navi-fs-mem-actions [data-fs-mem-toggle-pin] {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}

/* Memory composer modal */
.navi-mem-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.navi-mem-modal {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    max-width: 520px;
    width: 100%;
    color: #f5f5f5;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.navi-mem-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navi-mem-modal-head h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navi-mem-modal-head h3 i {
    color: #fbbf24;
}

.navi-mem-modal-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1rem;
}

.navi-mem-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.navi-mem-modal-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #d4d4d4;
}

.navi-mem-modal-body input[type="text"],
.navi-mem-modal-body textarea,
.navi-mem-modal-body select {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5f5f5;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-family: inherit;
}

.navi-mem-modal-body textarea {
    resize: vertical;
    min-height: 80px;
}

.navi-mem-pin-row {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.navi-mem-pin-row input {
    margin: 0;
}

.navi-mem-modal-actions {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}