Create styles.css

styles.css

@@ -0,0 +1,1591 @@
+:root {
+    --primary: #6c5ce7;
+    --primary-light: #a29bfe;
+    --secondary: #00cec9;
+    --accent: #fd79a8;
+    --success: #00b894;
+    --warning: #fdcb6e;
+    --danger: #d63031;
+    --neutral: #dfe6e9;
+    --dark: #2d3436;
+    --bg: #f9f9f9;
+    --card-bg: #ffffff;
+    --text: #2d3436;
+    --text-light: #636e72;
+    --border: #dfe6e9;
+    --shadow: rgba(0, 0, 0, 0.1);
+    
+    --category-yield: #00b894;
+    --category-risk: #ff7675;
+    --category-arbitrage: #fdcb6e;
+    --category-nft: #6c5ce7;
+    
+    --tier-basic: #0984e3;
+    --tier-pro: #6c5ce7;
+    --tier-enterprise: #00b894;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+/* Dashboard Layout */
+.dashboard {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header Styles */
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logo h1 {
+    font-size: 24px;
+    font-weight: 800;
+    color: var(--primary);
+}
+
+.logo h1 span {
+    font-size: 14px;
+    color: var(--text-light);
+    font-weight: 400;
+}
+
+.logo-animation {
+    animation: pulse 3s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+.recursive-path {
+    animation: flow 10s infinite;
+}
+
+.recursive-path-2 {
+    animation: flow 10s infinite reverse;
+}
+
+@keyframes flow {
+    0%, 100% { stroke-dasharray: 0, 150; stroke-dashoffset: 0; }
+    50% { stroke-dasharray: 150, 0; stroke-dashoffset: -75; }
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+    gap: 20px;
+}
+
+nav a {
+    text-decoration: none;
+    color: var(--text-light);
+    font-weight: 500;
+    padding: 8px 12px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+nav a:hover {
+    color: var(--primary);
+    background-color: rgba(108, 92, 231, 0.1);
+}
+
+nav li.active a {
+    color: var(--primary);
+    background-color: rgba(108, 92, 231, 0.1);
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.wallet-status {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 6px;
+}
+
+.wallet-status .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.wallet-status.connected {
+    color: var(--success);
+}
+
+.wallet-status.connected .dot {
+    background-color: var(--success);
+}
+
+.profile-icon {
+    cursor: pointer;
+}
+
+/* Main Content */
+main {
+    padding: 30px 0;
+}
+
+.dashboard-section {
+    display: none;
+}
+
+.dashboard-section.active {
+    display: block;
+}
+
+.section-header {
+    margin-bottom: 30px;
+}
+
+.section-header h2 {
+    font-size: 24px;
+    margin-bottom: 5px;
+}
+
+.subtitle {
+    color: var(--text-light);
+    font-size: 16px;
+}
+
+/* Dashboard Overview */
+.dashboard-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.metric-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+}
+
+.metric-icon {
+    background-color: rgba(108, 92, 231, 0.1);
+    padding: 10px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.metric-data h3 {
+    font-size: 14px;
+    color: var(--text-light);
+    margin-bottom: 5px;
+}
+
+.metric-data .value {
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+
+.change {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.change.positive {
+    color: var(--success);
+}
+
+.change.negative {
+    color: var(--danger);
+}
+
+.change.neutral {
+    color: var(--text-light);
+}
+
+/* Charts Section */
+.dashboard-charts {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.chart-container {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.chart-container.large {
+    grid-column: 1 / -1;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.chart-header h3 {
+    font-size: 16px;
+}
+
+.chart-controls {
+    display: flex;
+    gap: 5px;
+}
+
+.chart-controls button {
+    background: none;
+    border: 1px solid var(--border);
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-light);
+    transition: all 0.2s ease;
+}
+
+.chart-controls button:hover {
+    background-color: rgba(108, 92, 231, 0.1);
+    color: var(--primary);
+    border-color: var(--primary-light);
+}
+
+.chart-controls button.active {
+    background-color: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.chart {
+    height: 250px;
+    position: relative;
+}
+
+.chart-container.large .chart {
+    height: 300px;
+}
+
+/* AI Marketplace Section */
+.marketplace-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 0 15px;
+    box-shadow: 0 2px 8px var(--shadow);
+    width: 300px;
+}
+
+.search-bar input {
+    flex: 1;
+    border: none;
+    padding: 12px 0;
+    background: transparent;
+    outline: none;
+    color: var(--text);
+}
+
+.search-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.filter-options {
+    display: flex;
+    gap: 10px;
+}
+
+.filter-options select {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border);
+    padding: 8px 12px;
+    border-radius: 8px;
+    color: var(--text);
+    outline: none;
+    cursor: pointer;
+}
+
+.model-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.model-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.model-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 24px var(--shadow);
+}
+
+.model-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.model-category {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 20px;
+}
+
+.model-category.yield {
+    background-color: rgba(0, 184, 148, 0.1);
+    color: var(--category-yield);
+}
+
+.model-category.risk {
+    background-color: rgba(255, 118, 117, 0.1);
+    color: var(--category-risk);
+}
+
+.model-category.arbitrage {
+    background-color: rgba(253, 203, 110, 0.1);
+    color: var(--category-arbitrage);
+}
+
+.model-category.nft {
+    background-color: rgba(108, 92, 231, 0.1);
+    color: var(--category-nft);
+}
+
+.model-rating {
+    font-size: 14px;
+    font-weight: 700;
+    color: #f39c12;
+}
+
+.model-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.model-card p {
+    font-size: 14px;
+    color: var(--text-light);
+    line-height: 1.5;
+    margin-bottom: 15px;
+    flex-grow: 1;
+}
+
+.model-metrics {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--bg);
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.model-metrics .metric {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.model-metrics .label {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-bottom: 5px;
+}
+
+.model-metrics .value {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.model-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.model-price {
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.deploy-button {
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.deploy-button:hover {
+    background-color: #5d4fd6;
+}
+
+.marketplace-cta {
+    background: linear-gradient(to right, var(--primary), var(--secondary));
+    color: white;
+    border-radius: 12px;
+    padding: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.cta-content h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.cta-content p {
+    font-size: 16px;
+    opacity: 0.9;
+    max-width: 60%;
+}
+
+.cta-button {
+    background-color: white;
+    color: var(--primary);
+    border: none;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-weight: 600;
+    font-size: 16px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.cta-button:hover {
+    transform: scale(1.05);
+}
+
+/* Premium Data Feeds Section */
+.data-feed-tiers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.tier-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px var(--shadow);
+    overflow: hidden;
+    position: relative;
+    transition: transform 0.2s ease;
+}
+
+.tier-card:hover {
+    transform: translateY(-5px);
+}
+
+.tier-card.recommended {
+    border: 2px solid var(--primary);
+    transform: scale(1.03);
+}
+
+.recommended-badge {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: var(--primary);
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 20px;
+}
+
+.tier-header {
+    padding: 20px;
+    color: white;
+    text-align: center;
+}
+
+.tier-header.basic {
+    background-color: var(--tier-basic);
+}
+
+.tier-header.pro {
+    background-color: var(--tier-pro);
+}
+
+.tier-header.enterprise {
+    background-color: var(--tier-enterprise);
+}
+
+.tier-header h3 {
+    font-size: 22px;
+    margin-bottom: 10px;
+}
+
+.tier-price {
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.tier-features {
+    list-style: none;
+    padding: 20px;
+}
+
+.tier-features li {
+    padding: 10px 0;
+    font-size: 14px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+}
+
+.tier-features li::before {
+    content: "✓";
+    margin-right: 10px;
+    color: var(--success);
+    font-weight: bold;
+}
+
+.tier-features li.unavailable {
+    color: var(--text-light);
+    opacity: 0.7;
+}
+
+.tier-features li.unavailable::before {
+    content: "×";
+    color: var(--text-light);
+}
+
+.tier-button {
+    width: 100%;
+    padding: 15px;
+    border: none;
+    background-color: var(--primary);
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.tier-button:hover {
+    background-color: #5d4fd6;
+}
+
+.data-sample {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.data-sample-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.refresh-button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--primary);
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.data-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+.data-card {
+    background-color: var(--bg);
+    padding: 15px;
+    border-radius: 8px;
+}
+
+.data-card h4 {
+    margin-bottom: 15px;
+    font-size: 16px;
+}
+
+.sentiment-meter {
+    height: 10px;
+    background-color: var(--border);
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.sentiment-value {
+    height: 100%;
+    background: linear-gradient(to right, #ff9f43, #00b894);
+    border-radius: 5px;
+}
+
+.sentiment-label {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.anomaly-alert {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.anomaly-alert.warning {
+    background-color: rgba(253, 203, 110, 0.2);
+    color: #d35400;
+}
+
+.prediction-chart {
+    height: 100px;
+    margin-bottom: 10px;
+}
+
+.prediction-ranges {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.prediction-ranges .range {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.prediction-ranges .label {
+    font-weight: 600;
+}
+
+.correlation-matrix {
+    height: 100px;
+    margin-bottom: 10px;
+}
+
+.data-card p {
+    font-size: 14px;
+    color: var(--text-light);
+}
+
+/* DeFi Hub Section */
+.product-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.product-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+    transition: transform 0.2s ease;
+}
+
+.product-card:hover {
+    transform: translateY(-5px);
+}
+
+.product-icon {
+    margin-bottom: 15px;
+}
+
+.product-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.product-card p {
+    font-size: 14px;
+    color: var(--text-light);
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.product-stats {
+    background-color: var(--bg);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+}
+
+.product-stats .stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.product-stats .label {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-bottom: 5px;
+}
+
+.product-stats .value {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.action-button {
+    width: 100%;
+    padding: 12px;
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.action-button:hover {
+    background-color: #5d4fd6;
+}
+
+.protocol-metrics {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.protocol-metrics h3 {
+    margin-bottom: 20px;
+}
+
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.metric-block {
+    background-color: var(--bg);
+    padding: 15px;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.metric-block h4 {
+    font-size: 14px;
+    color: var(--text-light);
+    margin-bottom: 10px;
+}
+
+.large-value {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+
+/* Notification Center */
+.notification-center {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.notification {
+    display: flex;
+    align-items: flex-start;
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    margin-bottom: 10px;
+    max-width: 350px;
+    animation: slideIn 0.3s ease forwards;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+.notification-icon {
+    padding: 8px;
+    border-radius: 8px;
+    margin-right: 12px;
+}
+
+.notification-icon.success {
+    background-color: rgba(0, 184, 148, 0.1);
+    color: var(--success);
+}
+
+.notification-content {
+    flex: 1;
+}
+
+.notification-content h4 {
+    font-size: 16px;
+    margin-bottom: 5px;
+}
+
+.notification-content p {
+    font-size: 14px;
+    color: var(--text-light);
+}
+
+.close-notification {
+    background: none;
+    border: none;
+    color: var(--text-light);
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0 5px;
+}
+
+/* Deep Research Laboratory Styles */
+.research-visualization {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.symbolic-sequence {
+    background: linear-gradient(to right, rgba(108, 92, 231, 0.05), rgba(0, 206, 201, 0.05));
+    border-radius: 12px;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    box-shadow: 0 4px 15px var(--shadow);
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 30px;
+}
+
+.sequence-container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
+.sequence-description {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.sequence-description h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: var(--primary);
+}
+
+.sequence-description p {
+    font-size: 14px;
+    color: var(--text-light);
+    line-height: 1.5;
+}
+
+.monetization-strategies {
+    margin-top: 30px;
+}
+
+.implementation-timeline {
+    margin-top: 15px;
+}
+
+.research-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.research-module {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+    display: flex;
+    flex-direction: column;
+}
+
+.module-large {
+    grid-column: span 2;
+}
+
+.module-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.module-header h3 {
+    font-size: 16px;
+    color: var(--text);
+}
+
+.module-controls {
+    display: flex;
+    gap: 5px;
+}
+
+.module-controls button {
+    background: none;
+    border: 1px solid var(--border);
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: var(--text-light);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.module-controls button:hover {
+    background-color: rgba(108, 92, 231, 0.1);
+    color: var(--primary);
+}
+
+.module-controls button.active {
+    background-color: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.visualization {
+    background-color: var(--bg);
+    border-radius: 8px;
+    height: 200px;
+    margin-bottom: 15px;
+    position: relative;
+    overflow: hidden;
+}
+
+#modelEvolutionViz {
+    height: 300px;
+}
+
+.node-network {
+    width: 100%;
+    height: 100%;
+}
+
+.overlay-stats {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background-color: rgba(255, 255, 255, 0.85);
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.overlay-stats .stat {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.overlay-stats .label {
+    font-size: 12px;
+    color: var(--text-light);
+}
+
+.overlay-stats .value {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.module-footer {
+    font-size: 13px;
+    color: var(--text-light);
+    line-height: 1.4;
+}
+
+.research-metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.research-metrics .metric {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.research-metrics .label {
+    font-size: 14px;
+    min-width: 100px;
+}
+
+.research-metrics .value {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--primary);
+    min-width: 40px;
+    text-align: right;
+}
+
+.progress-bar {
+    flex: 1;
+    height: 6px;
+    background-color: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-bar .progress {
+    height: 100%;
+    background-color: var(--primary);
+    border-radius: 3px;
+}
+
+.research-data {
+    width: 100%;
+    overflow: auto;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.data-table th, 
+.data-table td {
+    padding: 8px 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table th {
+    font-weight: 600;
+    color: var(--text-light);
+}
+
+.rating {
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.rating.very-high {
+    background-color: rgba(108, 92, 231, 0.15);
+    color: var(--primary);
+}
+
+.rating.high {
+    background-color: rgba(0, 184, 148, 0.15);
+    color: var(--category-yield);
+}
+
+.rating.medium {
+    background-color: rgba(253, 203, 110, 0.15);
+    color: var(--category-arbitrage);
+}
+
+.rating.low {
+    background-color: rgba(255, 118, 117, 0.15);
+    color: var(--category-risk);
+}
+
+.timeline {
+    font-size: 12px;
+    color: var(--text-light);
+}
+
+.insight-box {
+    display: flex;
+    gap: 10px;
+    background-color: rgba(108, 92, 231, 0.1);
+    padding: 12px;
+    border-radius: 8px;
+    line-height: 1.4;
+}
+
+.insight-icon {
+    min-width: 18px;
+    color: var(--primary);
+}
+
+.insight-box p {
+    font-size: 13px;
+    color: var(--text);
+    margin: 0;
+}
+
+.research-action-panel {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.research-action-panel h3 {
+    font-size: 16px;
+    margin-bottom: 15px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.action-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.action-button:hover {
+    background-color: rgba(108, 92, 231, 0.1);
+    border-color: var(--primary-light);
+}
+
+.action-button.primary {
+    background-color: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.action-button.primary:hover {
+    background-color: #5d4fd6;
+}
+
+.button-icon {
+    color: currentColor;
+}
+
+.research-progress {
+    margin-top: 10px;
+}
+
+.progress-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.research-progress .progress-bar {
+    height: 8px;
+    border-radius: 4px;
+}
+
+.progress-value {
+    height: 100%;
+    background: linear-gradient(to right, var(--primary), var(--secondary));
+    border-radius: 4px;
+    transition: width 1s ease;
+}
+
+/* New Monetization Research Section Styles */
+.monetization-metrics {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.metric-tile {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 4px 6px var(--shadow);
+}
+
+.metric-tile h4 {
+    font-size: 14px;
+    color: var(--text-light);
+    margin-bottom: 8px;
+}
+
+.metric-tile .metric-value {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.forecast-container {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.forecast-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.forecast-header h3 {
+    font-size: 18px;
+}
+
+.forecast-chart {
+    height: 250px;
+}
+
+.monetization-strategies {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.strategy-card {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.strategy-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: var(--primary);
+}
+
+.strategy-card p {
+    font-size: 14px;
+    color: var(--text-light);
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.strategy-metrics {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--bg);
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.strategy-metrics .metric {
+    text-align: center;
+}
+
+.strategy-metrics .label {
+    font-size: 12px;
+    color: var(--text-light);
+    margin-bottom: 5px;
+}
+
+.strategy-metrics .value {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.implementation-timeline {
+    position: relative;
+    padding-left: 20px;
+    border-left: 2px solid var(--primary-light);
+    margin-bottom: 15px;
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: 15px;
+    padding-left: 15px;
+}
+
+.timeline-item:before {
+    content: "";
+    position: absolute;
+    left: -26px;
+    top: 5px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--primary);
+}
+
+.timeline-item .phase {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.timeline-item .description {
+    font-size: 13px;
+    color: var(--text-light);
+}
+
+.quantum-symbolic-matrix {
+    background: linear-gradient(to right, rgba(108, 92, 231, 0.05), rgba(0, 206, 201, 0.05));
+    padding: 20px;
+    border-radius: 12px;
+    margin-top: 20px;
+}
+
+.quantum-header {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: var(--primary);
+    text-align: center;
+}
+
+.matrix-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.matrix-cell {
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 8px;
+    padding: 10px;
+    text-align: center;
+    font-size: 13px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+}
+
+.matrix-cell:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: white;
+}
+
+.matrix-value {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 5px;
+    color: var(--primary);
+}
+
+.matrix-label {
+    font-size: 11px;
+    color: var(--text-light);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .dashboard-charts {
+        grid-template-columns: 1fr;
+    }
+    
+    .marketplace-controls {
+        flex-direction: column;
+        gap: 15px;
+        align-items: flex-start;
+    }
+    
+    .search-bar {
+        width: 100%;
+    }
+    
+    .filter-options {
+        width: 100%;
+    }
+    
+    .filter-options select {
+        flex: 1;
+    }
+    
+    .marketplace-cta {
+        flex-direction: column;
+        gap: 20px;
+        text-align: center;
+    }
+    
+    .cta-content p {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        gap: 15px;
+        align-items: flex-start;
+    }
+    
+    nav ul {
+        width: 100%;
+        overflow-x: auto;
+        padding-bottom: 10px;
+    }
+    
+    .user-profile {
+        width: 100%;
+        justify-content: flex-end;
+    }
+    
+    .model-grid,
+    .data-feed-tiers,
+    .product-cards {
+        grid-template-columns: 1fr;
+    }
+    
+    .tier-card.recommended {
+        transform: scale(1);
+    }
+    
+    .protocol-metrics .metrics-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .protocol-metrics .metrics-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Responsive Design for Research Lab */
+@media (max-width: 1024px) {
+    .research-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .module-large {
+        grid-column: span 1;
+    }
+    
+    .symbolic-sequence {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+    
+    .sequence-description {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .action-buttons {
+        flex-direction: column;
+    }
+    
+    .formula {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .monetization-metrics {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    .matrix-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .monetization-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .monetization-metrics {
+        grid-template-columns: 1fr;
+    }
+    
+    .matrix-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .sequence-container canvas {
+        width: 100%;
+        height: auto;
+    }
+}