/* --- CSS Design System & Variables --- */
:root {
    --bg-dark: #090d16;
    --bg-card: rgba(18, 26, 43, 0.7);
    --bg-card-hover: rgba(28, 40, 65, 0.85);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-active: rgba(16, 185, 129, 0.4);
    
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;

    --accent-emerald: #10b981;
    --accent-emerald-glow: rgba(16, 185, 129, 0.25);
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --font-heading: 'Outfit', -apple-system, sans-serif;
    --font-body: 'Pretendard', -apple-system, sans-serif;
    --shadow-glow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Background Glowing Globes */
.background-globes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.globe {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.globe-1 {
    top: -10%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-emerald), var(--accent-blue));
}

.globe-2 {
    bottom: 10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-purple), var(--accent-cyan));
}

.globe-3 {
    top: 40%;
    left: 45%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-amber), var(--accent-rose));
    opacity: 0.15;
}

/* App Container */
.app-container {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    padding: 24px 20px 60px 20px;
}

/* Glassmorphism Card Utility */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 4px 20px var(--accent-emerald-glow);
}

.app-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-ai {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent-emerald), var(--accent-cyan));
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

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

.last-updated {
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-pwa-install {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.25));
    border: 1px solid #10b981;
    color: #6ee7b7;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
    transition: all 0.25s ease;
    animation: pwaPulse 2.2s infinite;
}

.btn-pwa-install:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.45), rgba(6, 182, 212, 0.45));
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
}

@keyframes pwaPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.65); }
}

.btn-refresh {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-refresh:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-emerald);
}

.btn-refresh i.spinning {
    animation: spin 1s linear infinite;
}

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

/* Portfolio Banner */
.portfolio-banner {
    padding: 28px 32px;
    margin-bottom: 28px;
}

.banner-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: center;
}

.portfolio-health {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.health-gauge-box {
    text-align: center;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(0,0,0,0) 70%);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    min-width: 120px;
}

.health-score {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 800;
    color: var(--accent-emerald);
    line-height: 1;
}

.health-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
}

.health-info {
    flex: 1;
}

.status-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald);
    border: 1px solid var(--accent-emerald);
    margin-bottom: 10px;
}

.advice-heading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.advice-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.allocation-chart-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 18px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

.chart-title {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-container {
    position: relative;
    height: 150px;
    width: 100%;
}

/* Nav Tabs */
.nav-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 12px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid var(--accent-emerald);
}

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

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

/* Assets Grid */
.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.asset-card {
    padding: 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.asset-card:hover {
    transform: translateY(-4px);
    background: var(--bg-card-hover);
    border-color: var(--border-active);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
}

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

.asset-category {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asset-name {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.3;
}

.asset-symbol-tag {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

.rating-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.rating-STRONG_BUY {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid #10b981;
}

.rating-ACCUMULATE {
    background: rgba(6, 182, 212, 0.2);
    color: #38bdf8;
    border: 1px solid #06b6d4;
}

.rating-HOLD {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid #f59e0b;
}

.rating-TRIM, .rating-SELL {
    background: rgba(244, 63, 94, 0.2);
    color: #f87171;
    border: 1px solid #f43f5e;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}

.price-val {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
}

.price-change {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.change-up { color: var(--accent-rose); }
.change-down { color: var(--accent-blue); }
.change-neutral { color: var(--text-muted); }

.card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.metric-item {
    text-align: center;
}

.metric-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 14px;
    font-weight: 600;
}

.card-advice-snippet {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-emerald);
}

/* Skeleton Loading */
.skeleton-card {
    height: 280px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tab 2: AI Comprehensive Reports */
.reports-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.report-card {
    padding: 28px;
}

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

.report-title-box h3 {
    font-size: 20px;
    font-weight: 700;
}

.report-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.report-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.report-section-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

.report-section-box h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-section-box p {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.6;
}

/* Tab 3: News Feed */
.news-feed-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
}

.news-item-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-item-card:hover {
    border-color: var(--accent-cyan);
}

.news-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.news-sentiment-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.news-tag-POSITIVE { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.news-tag-NEGATIVE { background: rgba(244, 63, 94, 0.2); color: #f87171; }
.news-tag-NEUTRAL { background: rgba(156, 163, 175, 0.2); color: #d1d5db; }

.news-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
}

.news-title:hover {
    color: var(--accent-cyan);
}

.news-snippet {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.news-press-time {
    font-size: 12px;
    color: var(--text-dim);
}

/* Modal Overlay & Card */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 8, 15, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.open {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-card {
    width: 90%;
    max-width: 940px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px;
    position: relative;
    border: 1px solid var(--border-active);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #fff;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-glass);
}

.modal-category {
    font-size: 13px;
    color: var(--accent-cyan);
    font-weight: 700;
    text-transform: uppercase;
}

.modal-symbol-name {
    font-size: 26px;
    font-weight: 800;
}

.modal-symbol-code {
    font-size: 14px;
    color: var(--text-dim);
}

.modal-price {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    text-align: right;
}

.modal-change {
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.modal-advice-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
    padding: 20px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-emerald);
    margin-bottom: 24px;
}

.rating-badge-large {
    font-size: 18px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 30px;
    background: var(--accent-emerald);
    color: #000;
}

.hero-details {
    font-size: 15px;
    line-height: 1.6;
}

.modal-chart-section {
    margin-bottom: 28px;
}

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

.tech-indicators-row {
    display: flex;
    gap: 8px;
}

.tech-tag {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text-muted);
}

.modal-canvas-box {
    position: relative;
    height: 280px;
    width: 100%;
}

.modal-analysis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.analysis-box {
    padding: 20px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glass);
}

.analysis-box h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--accent-emerald);
}

.thesis-box h4 { color: var(--accent-cyan); }
.action-box h4 { color: var(--accent-emerald); }
.risk-box h4 { color: var(--accent-amber); }

.analysis-box p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
}

/* --- Naver Stock News AI Summarizer Component Styles --- */
.playmcp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(254, 229, 0, 0.2), rgba(255, 179, 0, 0.15));
    border: 1px solid rgba(254, 229, 0, 0.4);
    color: #fee500;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Executive Briefing Banner */
.briefing-container {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.briefing-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.briefing-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent-emerald);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-emerald);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.briefing-main-title {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(90deg, #ffffff, var(--accent-emerald));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.briefing-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-cnt-badge {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 12px;
    color: var(--text-muted);
}

.briefing-bullets-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bullet-item {
    font-size: 15px;
    line-height: 1.5;
    color: #e5e7eb;
    font-weight: 500;
}

.bullet-item strong {
    color: var(--accent-emerald);
}

.bullet-skeleton {
    height: 18px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    animation: skeletonPulse 1.5s infinite ease-in-out;
}

@keyframes skeletonPulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
}

.briefing-keywords-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.kw-label {
    color: var(--accent-amber);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.keywords-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chip-skeleton {
    width: 60px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* Search Bar Section */
.search-section {
    margin: 20px 0;
    padding: 8px 12px;
}

.search-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-icon {
    font-size: 18px;
    color: var(--accent-cyan);
    margin-left: 10px;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 15px;
    font-family: var(--font-body);
    padding: 10px 4px;
}

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

.search-btn {
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-cyan));
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

/* Category Pills */
.category-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.cat-pill {
    background: rgba(18, 26, 43, 0.8);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.cat-pill:hover {
    background: rgba(28, 40, 65, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.cat-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* News Summary Grid */
.news-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-emerald);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.news-card:hover::before {
    opacity: 1;
}

.news-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.news-press-tag {
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.12);
    padding: 3px 8px;
    border-radius: 4px;
}

.news-cat-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 4px;
}

.news-date {
    color: var(--text-dim);
}

.news-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #ffffff;
}

/* 3-Line Summary Box inside Card */
.news-3line-box {
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-sm);
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-bullet {
    font-size: 13.5px;
    line-height: 1.45;
    color: #d1d5db;
}

.news-keywords-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kw-chip {
    font-size: 11.5px;
    background: rgba(139, 92, 246, 0.15);
    color: #c084fc;
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}

.sentiment-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.sentiment-pill.POSITIVE {
    background: rgba(16, 185, 129, 0.18);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sentiment-pill.NEGATIVE {
    background: rgba(244, 63, 94, 0.18);
    color: var(--accent-rose);
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.sentiment-pill.NEUTRAL {
    background: rgba(156, 163, 175, 0.18);
    color: var(--text-muted);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.btn-news-detail {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-news-detail:hover {
    background: var(--accent-emerald);
    color: #000000;
    border-color: var(--accent-emerald);
    font-weight: 700;
}

/* Modal Specifics for News Detail */
.news-modal-card {
    max-width: 800px;
}

.news-modal-headline {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin-top: 10px;
}

.news-takeaway-hero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-takeaway-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sentiment-badge-large {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--accent-emerald);
    color: #000000;
}

.takeaway-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-emerald);
}

.takeaway-body-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #ffffff;
}

.news-modal-summary-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 20px;
}

.news-modal-summary-box h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 12px;
}

.summary-bullets-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-bullets-list li {
    font-size: 14.5px;
    line-height: 1.55;
    color: #e5e7eb;
}

.news-modal-keywords-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.news-modal-text-section h4 {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.article-text-preview {
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #9ca3af;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-line;
    border: 1px solid var(--border-glass);
}

.original-link-row {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.btn-original-link {
    background: var(--accent-blue);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-original-link:hover {
    background: #2563eb;
}

/* Backtest Simulation Tab Styles */
.backtest-controls {
    padding: 22px 28px;
    margin-bottom: 24px;
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: flex-end;
}

.control-item label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.control-item input, .control-item select {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}

.control-item input:focus, .control-item select:focus {
    border-color: var(--accent-emerald);
}

.btn-run-backtest {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-cyan));
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-run-backtest:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px var(--accent-emerald-glow);
}

.backtest-table-card {
    padding: 24px;
    margin-bottom: 24px;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.card-header-row h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.fee-tax-badge {
    font-size: 12px;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.12);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.table-responsive {
    overflow-x: auto;
}

.backtest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.backtest-table th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-glass);
}

.backtest-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}

.backtest-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.bt-return-pos {
    color: #10b981;
    font-weight: 700;
}

.bt-mdd-val {
    color: #f43f5e;
    font-weight: 700;
}

.backtest-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.chart-card {
    padding: 22px;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-card-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.chart-subtag {
    font-size: 11px;
    color: var(--text-dim);
}

.bt-canvas-box {
    position: relative;
    height: 300px;
    width: 100%;
}

.strategy-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.insight-card {
    padding: 22px;
    position: relative;
}

.insight-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.s1-badge { background: rgba(244, 63, 94, 0.2); color: #f43f5e; }
.s2-badge { background: rgba(6, 182, 212, 0.2); color: #06b6d4; }
.s3-badge { background: rgba(16, 185, 129, 0.2); color: #10b981; }

.insight-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.insight-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ========================================================
   Trading Assistant (MTS) Custom Styles
   ======================================================== */
.assistant-hero {
    margin-bottom: 24px;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 50%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
}

.assistant-hero h2 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.assistant-hero p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.assistant-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.assistant-card {
    padding: 24px;
    border-radius: var(--radius-md);
}

.card-header-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.card-header-icon i {
    font-size: 18px;
    color: var(--accent-emerald);
}

.card-header-icon h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.inputs-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.inputs-form-grid .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.inputs-form-grid .form-group input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all 0.2s;
}

.inputs-form-grid .form-group input:focus {
    outline: none;
    border-color: var(--accent-emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.btn-evaluate-assistant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
    transition: all 0.2s ease;
}

.btn-evaluate-assistant:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(16, 185, 129, 0.4);
    filter: brightness(1.05);
}

/* Guide Card Steps */
.guide-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-step-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.guide-step-item .step-num {
    width: 26px;
    height: 26px;
    background: var(--accent-emerald);
    color: #000;
    font-weight: 800;
    font-size: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-step-item .step-content strong {
    display: block;
    font-size: 13px;
    color: #fff;
    margin-bottom: 3px;
}

.guide-step-item .step-content p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.guide-step-item code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 5px;
    border-radius: 3px;
    color: #38bdf8;
    font-size: 11px;
}

/* Status Overview Card */
.status-overview-card {
    padding: 24px;
    margin-bottom: 24px;
    border-radius: var(--radius-md);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.overview-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.total-portfolio-badge {
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--accent-emerald);
    border-radius: 20px;
    font-size: 14px;
    color: var(--accent-emerald);
}

.weights-progress-box {
    margin-bottom: 22px;
}

.weights-bar-container {
    display: flex;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.weight-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.seg-qld { background: linear-gradient(90deg, #0284c7, #06b6d4); }
.seg-usd { background: linear-gradient(90deg, #d97706, #fbbf24); }
.seg-cash { background: linear-gradient(90deg, #059669, #10b981); }

.weights-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.weights-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

.dot-qld { background: #06b6d4; }
.dot-usd { background: #fbbf24; }
.dot-cash { background: #10b981; }

.target-note {
    margin-left: auto;
    font-size: 12px;
    color: #a78bfa;
}

/* Cards PnL Grid (2-Column for QLD & USD) */
.cards-pnl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.asset-pnl-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.asset-pnl-card .pnl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.asset-pnl-card .asset-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.rsi-badge {
    padding: 2px 8px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #38bdf8;
}

.interest-badge {
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-emerald);
}

.pnl-numbers .num-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pnl-numbers .num-row strong {
    color: #fff;
}

.text-positive { color: #10b981 !important; }
.text-negative { color: #f43f5e !important; }
.text-cyan { color: #06b6d4 !important; }
.text-amber { color: #fbbf24 !important; }
.text-emerald { color: #10b981 !important; }

/* Orders Action Grid */
.orders-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.order-box {
    padding: 22px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.order-box-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.order-title-group .ticker-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.order-title-group h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.badge-action {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.badge-hold {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.badge-sell {
    background: rgba(244, 63, 94, 0.2);
    color: #f43f5e;
    border: 1px solid #f43f5e;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
}

.badge-buy {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.order-details-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-details-list li {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.5;
}

.order-details-list li i {
    color: var(--accent-emerald);
    font-size: 11px;
    margin-right: 6px;
}

/* Realignment Table Card */
.realignment-card {
    padding: 24px;
    border-radius: var(--radius-md);
}

.realignment-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.realignment-table-box {
    overflow-x: auto;
}

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

.realignment-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-weight: 600;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.realignment-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.realignment-table tr:last-child td {
    border-bottom: none;
}

/* --- Hero Top Row & Control Buttons --- */
.hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.hero-control-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-hero-action {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-hero-action:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--accent-emerald);
    transform: translateY(-2px);
}

.btn-secondary-action:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--accent-cyan);
}

/* Polling Status Bar */
.polling-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 8px;
}

.polling-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.polling-badge {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid var(--accent-emerald);
    border-radius: 12px;
    color: var(--accent-emerald);
    font-weight: 700;
    font-size: 12px;
}

.polling-badge.badge-paused {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

.polling-timer strong {
    color: #38bdf8;
    font-size: 15px;
}

.live-rate-badge {
    color: #cbd5e1;
}

.live-rate-badge strong {
    color: #fbbf24;
}

.polling-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.poll-interval-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #cbd5e1;
}

.poll-interval-selector label {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.poll-interval-selector select {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.poll-interval-selector select:hover,
.poll-interval-selector select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.btn-polling-toggle, .btn-manual-fetch {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-polling-toggle:hover, .btn-manual-fetch:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Live Trade Execution Alert Box */
.live-execution-alert-box {
    margin-bottom: 24px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(245, 158, 11, 0.12) 50%, rgba(16, 185, 129, 0.12) 100%);
    border: 2px solid #f43f5e;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 30px rgba(244, 63, 94, 0.25);
    animation: alertPulse 2.5s infinite;
}

@keyframes alertPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(244, 63, 94, 0.25); border-color: #f43f5e; }
    50% { box-shadow: 0 0 35px rgba(244, 63, 94, 0.5); border-color: #fb7185; }
}

.alert-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.alert-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-flashing-beacon {
    padding: 4px 10px;
    background: #f43f5e;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.alert-title-wrap h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.btn-copy-order {
    padding: 10px 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.2s;
}

.btn-copy-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

.alert-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.alert-metric-chip {
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-metric-chip.chip-sell {
    border-left: 4px solid #f43f5e;
}

.alert-metric-chip.chip-buy {
    border-left: 4px solid #10b981;
}

.chip-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.chip-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.alert-order-instruction {
    font-size: 13px;
    color: #fde047;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 14px;
    border-radius: 6px;
}

/* DB Saved Pill */
.db-saved-pill {
    margin-left: auto;
    font-size: 11px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    transition: all 0.3s;
}

.db-saved-pill.saved-pulse {
    background: var(--accent-emerald);
    color: #000;
    font-weight: 800;
    box-shadow: 0 0 10px var(--accent-emerald);
}

.full-width-group {
    grid-column: span 2;
}

.input-with-auto-rate {
    display: flex;
    gap: 8px;
}

.btn-sync-rate {
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-sync-rate:hover {
    background: rgba(16, 185, 129, 0.2);
    color: #fff;
    border-color: var(--accent-emerald);
}

/* Strategy Config Modal */
.strategy-modal-card, .trade-log-modal-card {
    max-width: 780px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.strategy-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

/* 3-column variant for cash ratio fields */
.strategy-form-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Styled select wrapper */
.form-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-select-styled {
    width: 100%;
    padding: 9px 38px 9px 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.form-select-styled:hover {
    border-color: rgba(56, 189, 248, 0.5);
}

.form-select-styled:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.form-select-styled option {
    background: #1e293b;
    color: #f1f5f9;
}

.form-select-arrow {
    position: absolute;
    right: 12px;
    font-size: 11px;
    color: #64748b;
    pointer-events: none;
    transition: color 0.2s;
}

.form-select-wrapper:hover .form-select-arrow {
    color: #38bdf8;
}

.strat-section-title {
    grid-column: span 2;
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.strategy-form-grid .form-group label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}

.strategy-form-grid .form-group input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}

.modal-action-footer {
    display: flex;
    justify-content: flex-end;
}

.btn-save-strategy {
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: all 0.2s;
}

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

/* Trade Log Table */
.trade-log-table-box {
    overflow-x: auto;
}

.trade-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.trade-log-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-log-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

/* App Toast Notification */
.app-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 14px 22px;
    border: 1px solid var(--accent-emerald);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.app-toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Footer */
.main-footer {
    text-align: center;
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--border-glass);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.8;
}

/* Responsive Breakdown */
@media (max-width: 900px) {
    .assistant-grid {
        grid-template-columns: 1fr;
    }
    .cards-pnl-grid {
        grid-template-columns: 1fr;
    }
    .orders-action-grid {
        grid-template-columns: 1fr;
    }
    .banner-content {
        grid-template-columns: 1fr;
    }
}

/* Guide Button */
.btn-guide-action {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(59, 130, 246, 0.35)) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    color: #38bdf8 !important;
}
.btn-guide-action:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.5)) !important;
    box-shadow: 0 4px 18px rgba(6, 182, 212, 0.35);
}

/* Strategy Guide Modal Card */
.strategy-guide-modal-card {
    max-width: 1020px !important;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(11, 17, 33, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    border-radius: 16px;
}

.modal-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.guide-version-tag {
    background: rgba(139, 92, 246, 0.2);
    color: #c084fc;
    border: 1px solid rgba(139, 92, 246, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.guide-backtest-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.strategy-guide-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 10px 4px 24px 4px;
}

.guide-rule-block {
    background: rgba(18, 27, 49, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.guide-rule-block .rule-title {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.guide-rule-block .rule-title h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.rule-tag {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.tag-rule1 { background: linear-gradient(135deg, #0284c7, #06b6d4); }
.tag-rule2 { background: linear-gradient(135deg, #d97706, #f59e0b); }
.tag-rule3 { background: linear-gradient(135deg, #059669, #10b981); }
.tag-rule4 { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.tag-rule5 { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.tag-param { background: linear-gradient(135deg, #4f46e5, #6366f1); }

.rule-summary {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

/* High-Contrast Table Container */
.guide-table-box {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 15, 29, 0.85);
    margin: 4px 0 8px 0;
}

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

.guide-table th {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
    color: #38bdf8;
    font-weight: 800;
    padding: 12px 16px;
    border-bottom: 2px solid rgba(56, 189, 248, 0.3);
    text-align: left;
    white-space: nowrap;
}

.guide-table td {
    padding: 13px 16px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
    line-height: 1.5;
}

.guide-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.guide-table tr:hover td {
    background: rgba(56, 189, 248, 0.06);
}

.guide-table tr:last-child td {
    border-bottom: none;
}

/* Tip Callout Cards */
.rule-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.rule-tip-card i {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.rule-tip-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.rule-tip-card p {
    margin: 0;
    line-height: 1.5;
}

.tip-safe {
    background: rgba(6, 182, 212, 0.1);
    border-left: 4px solid #06b6d4;
    color: #bae6fd;
}
.tip-safe strong { color: #38bdf8; }

.tip-info {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
    color: #fde68a;
}
.tip-info strong { color: #fbbf24; }

.tip-tax {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10b981;
    color: #a7f3d0;
}
.tip-tax strong { color: #34d399; }

/* Algorithm Grid Card */
.rule-algorithm-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 8px;
    padding: 16px 18px;
}

.algo-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.algo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.algo-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
}

.algo-item p {
    margin: 0;
}

.algo-badge {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    display: block;
    margin-bottom: 6px;
}

/* 3-Column Sub-Cards Grid */
.guide-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.guide-sub-card {
    background: rgba(0, 0, 0, 0.3);
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
}

.guide-sub-card h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 7px;
}

.guide-sub-card p {
    margin: 0;
}

@media (max-width: 900px) {
    .algo-grid, .guide-cards-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Visual Dashboard: Cash Gap & RSI/PnL Trigger Gauges
   ========================================================================== */

/* Cash Ammo Gap Hero Card */
.cash-gap-visual-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cash-gap-hero-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gap-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gap-title {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

.gap-badge span {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.badge-positive {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-negative {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
}

/* 3-Zone Cash Gauge Bar */
.gauge-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0;
}

.gauge-bar-track {
    position: relative;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.gauge-zone {
    height: 100% !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.zone-deficit {
    background: linear-gradient(90deg, #f43f5e, #fb923c);
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.zone-ideal {
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

.zone-cap {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    opacity: 0.7;
}

.gauge-pointer {
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
}

.pointer-pin {
    width: 5px;
    height: 32px;
    background: #ffffff;
    border-radius: 2.5px;
    box-shadow: 0 0 12px #ffffff, 0 0 20px #38bdf8;
}

.pointer-label {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    background: #0f172a;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.gauge-scale-markers {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 16px;
}

.marker-target {
    color: #10b981;
    font-weight: 700;
}

.marker-cap {
    color: #38bdf8;
    font-weight: 700;
}

.cash-cap-status-pill {
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pill-normal {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.pill-alert {
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid #f43f5e;
    color: #fca5a5;
    animation: pulse 1.5s infinite;
}

/* Allocation Gap Mini List */
.alloc-gap-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.alloc-gap-item {
    display: grid;
    grid-template-columns: 145px 1fr 125px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}

.alloc-name {
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.alloc-bar-wrap {
    width: 100%;
}

.alloc-bar-bg {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.alloc-bar-fill {
    height: 100% !important;
    display: block !important;
    border-radius: 6px;
    transition: width 0.4s ease;
    min-width: 6px;
}

.fill-qld {
    background: linear-gradient(90deg, #06b6d4, #3b82f6) !important;
}

.fill-usd {
    background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
}

.fill-cash {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}

.alloc-gap-val {
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
}

/* Metric Visual Progress Box in Asset Cards */
.metric-visual-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
}

.metric-visual-header strong {
    font-size: 13.5px;
}

.pnl-bar-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pnl-bar-fill {
    height: 100% !important;
    display: block !important;
    border-radius: 6px;
    transition: width 0.4s ease;
    min-width: 6px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

.pnl-bar-fill.fill-pos {
    background: linear-gradient(90deg, #10b981, #06b6d4) !important;
}

.pnl-bar-fill.fill-neg {
    background: linear-gradient(90deg, #f43f5e, #e11d48) !important;
}

.pnl-condition-tag {
    font-size: 11.5px;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pnl-condition-tag.tag-pos {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pnl-condition-tag.tag-neg {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.pnl-condition-tag.tag-cash {
    background: rgba(6, 182, 212, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

/* ==========================================================================
   Daily Change Pill & Velocity / Momentum Visual Meter
   ========================================================================== */
.daily-change-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.daily-change-pill.badge-pos {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.daily-change-pill.badge-neg {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
}
.daily-change-pill.badge-flat {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.sub-diff-val {
    font-size: 11.5px;
    font-weight: 700;
    margin-left: 4px;
}
.sub-diff-val.text-pos { color: #34d399; }
.sub-diff-val.text-neg { color: #fb7185; }
.sub-diff-val.text-flat { color: #94a3b8; }

.velocity-visual-box {
    margin-top: 10px;
    border-color: rgba(56, 189, 248, 0.22);
    background: rgba(15, 23, 42, 0.55);
    padding: 13px 15px;
    border-radius: 10px;
}

.velocity-status-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: -0.2px;
}

.velocity-status-badge.velocity-surge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(6, 182, 212, 0.3));
    color: #6ee7b7;
    border: 1px solid #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    animation: speedSurgePulse 1.8s infinite;
}

.velocity-status-badge.velocity-up {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.velocity-status-badge.velocity-consolidate {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.velocity-status-badge.velocity-flat {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.velocity-status-badge.velocity-down {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

.velocity-status-badge.velocity-plunge {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.3), rgba(244, 63, 94, 0.3));
    color: #fecdd3;
    border: 1px solid #f43f5e;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.4);
    animation: speedPlungePulse 1.5s infinite;
}

@keyframes speedSurgePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 14px rgba(16, 185, 129, 0.7); }
}

@keyframes speedPlungePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(244, 63, 94, 0.3); }
    50% { box-shadow: 0 0 14px rgba(244, 63, 94, 0.8); }
}

/* Velocity Track Wrapper & Dynamic Needle */
.velocity-track-wrapper {
    position: relative;
    margin: 28px 4px 14px 4px;
}

.velocity-pointer {
    position: absolute;
    top: -24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.velocity-pointer .pointer-bubble {
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    background: #0f172a;
    padding: 1.5px 6px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.velocity-pointer .pointer-needle {
    width: 2.5px;
    height: 22px;
    background: #ffffff;
    border-radius: 1.5px;
    box-shadow: 0 0 8px #ffffff, 0 0 12px #38bdf8;
    margin-top: 1px;
}

.velocity-grad-track {
    position: relative;
    width: 100%;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.v-zone {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v-zone span {
    font-size: 8.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.v-zone-plunge { width: 25%; background: linear-gradient(90deg, #be123c, #e11d48); }
.v-zone-down { width: 15%; background: linear-gradient(90deg, #ea580c, #f97316); }
.v-zone-neutral { width: 20%; background: linear-gradient(90deg, #1e293b, #334155); }
.v-zone-up { width: 15%; background: linear-gradient(90deg, #0d9488, #059669); }
.v-zone-surge { width: 25%; background: linear-gradient(90deg, #059669, #10b981); }

/* 3-Pillar Speed Decomposition Chips */
.velocity-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.v-chip {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v-chip .v-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
}

.v-chip .v-val {
    font-size: 12.5px;
    font-weight: 800;
    color: #f1f5f9;
}

.velocity-desc-tag {
    margin-top: 8px;
    font-size: 11.5px;
    color: #cbd5e1;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--accent-cyan);
}

/* ==========================================================================
   RSI Trigger Anchor Meter Chart (1/2/3-Tier Dip & TP Anchor System)
   ========================================================================== */
.rsi-visual-box {
    margin-top: 10px;
    border-color: rgba(6, 182, 212, 0.25);
    background: rgba(15, 23, 42, 0.5);
    padding: 14px 16px 12px 16px;
    border-radius: 10px;
}

.rsi-current-text {
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(6, 182, 212, 0.18);
    border: 1px solid rgba(6, 182, 212, 0.35);
    padding: 2px 9px;
    border-radius: 5px;
}

.rsi-anchor-wrapper {
    position: relative;
    margin: 34px 4px 40px 4px;
}

/* Top Live Floating Anchor Pin */
.rsi-live-pointer {
    position: absolute;
    top: -32px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 30;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.live-bubble {
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #0284c7, #06b6d4);
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #38bdf8;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 2px 6px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.live-needle {
    width: 3.5px;
    height: 30px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 10px #ffffff, 0 0 18px #38bdf8;
    margin-top: 1px;
}

/* Center Graduated Bar Track */
.rsi-anchor-track {
    position: relative;
    width: 100%;
    height: 22px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 11px;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.rsi-zone {
    height: 100% !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.zone-dip3 {
    background: linear-gradient(90deg, #065f46, #047857) !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.zone-dip2 {
    background: linear-gradient(90deg, #047857, #059669) !important;
}

.zone-dip1 {
    background: linear-gradient(90deg, #059669, #0d9488) !important;
}

.zone-neutral {
    background: linear-gradient(90deg, #1e293b, #334155) !important;
}

.zone-tp {
    background: linear-gradient(90deg, #e11d48, #be123c) !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.zone-label-inside {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Vertical Tick Marks on Bar */
.rsi-tick-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 5;
    pointer-events: none;
}

/* Bottom Milestone Anchor Pins */
.rsi-anchor-pins-row {
    position: relative;
    height: 28px;
    margin-top: 4px;
}

.anchor-pin-item {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
}

.anchor-pin-arrow {
    font-size: 8px;
    line-height: 1;
    margin-bottom: 1px;
}

.anchor-pin-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 1.5px 5px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.anchor-dip3 .anchor-pin-arrow { color: #34d399; }
.anchor-dip3 .anchor-pin-tag { background: rgba(6, 95, 70, 0.8); color: #6ee7b7; border: 1px solid #059669; }

.anchor-dip2 .anchor-pin-arrow { color: #10b981; }
.anchor-dip2 .anchor-pin-tag { background: rgba(4, 120, 87, 0.8); color: #a7f3d0; border: 1px solid #10b981; }

.anchor-dip1 .anchor-pin-arrow { color: #38bdf8; }
.anchor-dip1 .anchor-pin-tag { background: rgba(13, 148, 136, 0.8); color: #bae6fd; border: 1px solid #06b6d4; }

.anchor-tp .anchor-pin-arrow { color: #fb7185; }
.anchor-tp .anchor-pin-tag { background: rgba(190, 18, 60, 0.8); color: #fecdd3; border: 1px solid #f43f5e; }

/* 4-Stage Distance Badges Grid */
.rsi-distance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.dist-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 6px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
}

.chip-dip1 { background: rgba(6, 182, 212, 0.12); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.3); }
.chip-dip2 { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.chip-dip3 { background: rgba(5, 150, 105, 0.18); color: #6ee7b7; border: 1px solid rgba(5, 150, 105, 0.35); }
.chip-tp { background: rgba(244, 63, 94, 0.12); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.3); }

.dist-chip.active-trigger {
    background: linear-gradient(135deg, #10b981, #06b6d4) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
    animation: pulse 1.5s infinite;
}

.dist-chip.active-sell {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #ffffff !important;
    border-color: #fb7185 !important;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
    animation: pulse 1.5s infinite;
}

.cash-interest-preview {
    font-size: 12px;
    color: #cbd5e1;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* ==========================================================================
   AI Portfolio Strategic Advisor Component Styles (Indented Hierarchical Layout)
   ========================================================================== */
.ai-advisor-card {
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), rgba(15, 23, 42, 0.9));
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ai-advisor-header-clean {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-header-text h3 {
    font-size: 17.5px;
    font-weight: 800;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-header-sub {
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 4px;
    display: block;
}

.ai-token-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #c084fc;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-placeholder-clean {
    padding: 20px 24px;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 8px;
    border: 1px dashed rgba(139, 92, 246, 0.25);
    text-align: center;
}

.ai-placeholder-clean p {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
}

/* AI Report Hierarchical Layout */
.ai-report-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.ai-report-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.report-section-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* 1-Level Header with Icon */
.section-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.section-card-title h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
}

/* 2-Level Indented Body Content */
.report-section-content {
    margin-left: 6px;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.summary-paragraph {
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Section 2 Indented Sub-sessions */
.indented-sub-session {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-item-header {
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub-item-body {
    font-size: 12.5px;
    color: #e2e8f0;
    line-height: 1.5;
    padding-left: 16px;
}

.indented-callout-box {
    padding: 10px 12px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.callout-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #c084fc;
    display: flex;
    align-items: center;
    gap: 6px;
}

.callout-body {
    font-size: 12px;
    color: #f1f5f9;
    line-height: 1.55;
    padding-left: 16px;
}

/* Section 3 Indented Action Checklist */
.indented-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.indented-action-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12.5px;
    color: #e2e8f0;
    line-height: 1.5;
}

.action-bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

@media (max-width: 1024px) {
    .ai-report-sections {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Interactive AI Follow-up Strategic Q&A Component Styles (Spacious Textarea)
   ========================================================================== */
.ai-followup-container {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-followup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.followup-title-group h4 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.followup-subtitle {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
    display: block;
}

/* Quick Question Chips */
.ai-quick-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.quick-chip-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.quick-chip-btn {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-chip-btn:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
    transform: translateY(-1px);
}

/* Follow-up Multi-line Textarea Area */
.ai-followup-textarea-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ai-followup-textarea-box:focus-within {
    border-color: #38bdf8;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.28);
}

.followup-textarea-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.followup-textarea-icon {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
}

.ai-followup-textarea {
    width: 100% !important;
    min-height: 90px;
    box-sizing: border-box;
    display: block;
    background: rgba(8, 14, 28, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px 10px 38px;
    font-size: 13.5px;
    color: #ffffff;
    outline: none;
    resize: vertical;
    line-height: 1.6;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ai-followup-textarea:focus {
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(8, 14, 28, 0.9);
}

.ai-followup-textarea::placeholder {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
}

.followup-textarea-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.textarea-shortcut-hint {
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.textarea-shortcut-hint strong {
    color: #cbd5e1;
}

.btn-ai-followup-send {
    background: linear-gradient(135deg, #0284c7, #06b6d4);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.btn-ai-followup-send:hover {
    background: linear-gradient(135deg, #0369a1, #0891b2);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.45);
}

.btn-ai-followup-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Q&A Dialogue Stream */
.ai-followup-stream {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
}

.followup-qa-card {
    background: rgba(18, 27, 49, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn 0.3s ease;
}

.user-question-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 3px solid #38bdf8;
}

.user-q-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.user-q-content {
    flex: 1;
}

.user-q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.user-q-label {
    font-size: 11.5px;
    font-weight: 800;
    color: #38bdf8;
}

.user-q-time {
    font-size: 11px;
    color: #64748b;
}

.user-q-text {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* AI Answer Content */
.ai-answer-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 6px;
}

.ai-a-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.ai-a-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-a-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-a-tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.answer-category-badge {
    background: rgba(139, 92, 246, 0.2);
    color: #c084fc;
    border: 1px solid rgba(139, 92, 246, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.answer-rule-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.ai-a-summary-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #f1f5f9;
    line-height: 1.6;
}

.ai-a-summary-box p {
    margin: 0;
}

/* Separated QA To-Do and Monitoring Blocks */
.qa-todo-box {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3.5px solid #10b981;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qa-todo-title {
    font-size: 12px;
    font-weight: 800;
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qa-todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qa-todo-item {
    font-size: 12.5px;
    color: #e2e8f0;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.qa-todo-bullet {
    color: #10b981;
    font-size: 11px;
    margin-top: 3px;
}

.qa-monitoring-box {
    background: rgba(6, 182, 212, 0.08);
    border-left: 3.5px solid #06b6d4;
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qa-monitoring-title {
    font-size: 12px;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qa-monitoring-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qa-monitoring-item {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.qa-monitoring-bullet {
    color: #38bdf8;
    font-size: 10px;
    margin-top: 4px;
}

/* Distinct AI Report Section Styles for Todo vs Monitoring */
.report-section-todo {
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(15, 23, 42, 0.95));
}

.report-section-monitoring {
    border-color: rgba(6, 182, 212, 0.35);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(15, 23, 42, 0.95));
}

.indented-todo-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 12.5px;
    font-weight: 600;
    color: #ecfdf5;
    line-height: 1.5;
}

.indented-monitoring-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.5;
}

.todo-check-icon {
    color: #10b981;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.monitoring-eye-icon {
    color: #38bdf8;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ==========================================================================
   RSI Historical Trajectory & Trigger Visualizer Chart Styles
   ========================================================================== */
.rsi-trend-chart-section {
    margin-top: 20px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.rsi-trend-chart-section:hover {
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 12px 40px rgba(2, 132, 199, 0.15);
}

.rsi-chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rsi-chart-title-group h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rsi-chart-subtitle {
    font-size: 12px;
    color: #94a3b8;
}

.rsi-chart-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rsi-period-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.btn-rsi-period {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-rsi-period:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.btn-rsi-period.active {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.rsi-view-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.btn-rsi-view {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-rsi-view:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.btn-rsi-view.active {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.rsi-split-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.rsi-single-chart-card,
.rsi-overlay-chart-card {
    background: rgba(8, 14, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.single-chart-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.single-chart-meta .meta-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #ffffff;
}

.ticker-badge {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.ticker-qld {
    background: rgba(2, 132, 199, 0.25);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.ticker-usd {
    background: rgba(217, 119, 6, 0.25);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.meta-rsi-val {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.meta-rsi-val strong {
    font-size: 14px;
}

.rsi-status-pill {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.rsi-status-pill.status-overheat {
    background: rgba(225, 29, 72, 0.25);
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.4);
}

.rsi-status-pill.status-dip {
    background: rgba(5, 150, 105, 0.25);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

.meta-legend-badges {
    display: flex;
    gap: 10px;
}

.legend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #cbd5e1;
}

.dot-color-qld {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #06b6d4;
    box-shadow: 0 0 6px #06b6d4;
}

.dot-color-usd {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
}

.canvas-wrapper-rsi {
    position: relative;
    width: 100%;
    height: 240px;
}

.canvas-wrapper-large {
    height: 300px;
}

.rsi-threshold-legend-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: #94a3b8;
}

.thresh-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.thresh-item strong {
    color: #cbd5e1;
}

.thresh-line-sample {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
}

.line-tp {
    background: #f43f5e;
    box-shadow: 0 0 4px #f43f5e;
}

.line-cool {
    background: #94a3b8;
    border-top: 1px dashed #cbd5e1;
}

.thresh-box-sample.box-neutral {
    display: inline-block;
    width: 12px;
    height: 8px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.line-dip1 {
    background: #06b6d4;
}

.line-dip2 {
    background: #10b981;
}

.line-dip3 {
    background: #059669;
}


/* ================================================================
   RSI Ticker Tab Navigation (Horizontal Compact Selector Bar)
   ================================================================ */

.rsi-ticker-tab-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 4px;
}

.rsi-ticker-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(8px);
}

.rsi-ticker-tab:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.rsi-ticker-tab-active {
    background: rgba(2, 132, 199, 0.2) !important;
    border-color: var(--tab-color, #06b6d4) !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.3);
}

.rsi-tab-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rsi-tab-sub-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 1px;
}

.ticker-code-tag {
    letter-spacing: 0.4px;
    line-height: 1.2;
}

.ticker-name-label {
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.rsi-active-chart-panel {
    width: 100%;
    overflow: visible;
}

/* ================================================================
   ⚡ Velocity & Momentum Visual Meter Styles
   ================================================================ */
.velocity-meter-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

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

.velocity-track-wrapper {
    position: relative;
    margin: 28px 6px 14px 6px;
}

.velocity-pointer {
    position: absolute;
    top: -28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    pointer-events: none;
    transition: left 0.4s ease;
}

.velocity-bubble {
    font-size: 10.5px;
    font-weight: 800;
    color: #ffffff;
    background: #0284c7;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    white-space: nowrap;
}

.velocity-needle {
    width: 3px;
    height: 26px;
    background: #ffffff;
    border-radius: 1.5px;
    box-shadow: 0 0 8px #ffffff;
    margin-top: 1px;
}

.velocity-track {
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 7px;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.velocity-zone-neg {
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, #e11d48, #f43f5e);
}

.velocity-zone-flat {
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, #334155, #475569);
}

.velocity-zone-pos {
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
}

.velocity-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .rsi-split-charts-grid {
        grid-template-columns: 1fr;
    }
    .canvas-wrapper-rsi {
        height: 210px;
    }
    .rsi-chart-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .rsi-chart-controls {
        width: 100%;
        justify-content: space-between;
    }
    .rsi-ticker-tab {
        min-width: 72px;
        padding: 7px 10px;
    }
}

/* ==========================================================================
   Strategy Simulator & Multi-Test Comparison Lab Styles
   ========================================================================== */
.sim-unified-header-card {
    padding: 16px 20px;
    margin-bottom: 20px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
}

.sim-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-selector-group,
.sim-name-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sim-selector-group {
    min-width: 240px;
    flex: 1;
}

.sim-name-input-group {
    min-width: 280px;
    flex: 1.4;
}

.sim-selector-group label,
.sim-name-input-group label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-selector-group select,
.sim-name-input-group input[type="text"] {
    background: rgba(8, 14, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
}

.sim-name-input-group input[type="text"]:focus,
.sim-selector-group select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.sim-direct-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.btn-sim-std {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-sim-new {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(56, 189, 248, 0.35));
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.5);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.btn-sim-new:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(56, 189, 248, 0.55));
    color: #ffffff;
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);
}

.btn-sim-edit {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.btn-sim-edit:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.3);
    color: #ffffff;
    border-color: #fbbf24;
    transform: translateY(-1px);
}

.btn-sim-del {
    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

.btn-sim-del:hover:not(:disabled) {
    background: rgba(244, 63, 94, 0.28);
    color: #ffffff;
    border-color: #f43f5e;
    transform: translateY(-1px);
}

.btn-sim-save-bottom {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    padding: 14px 24px;
    font-size: 15px;
    border-radius: 12px;
}

.btn-sim-save-bottom:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Modal Overlay Centering */
.port-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(4, 8, 18, 0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.port-modal-card {
    margin: auto !important;
    position: relative !important;
    background: #0d152a !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 189, 248, 0.18) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    width: 90% !important;
    max-width: 480px !important;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPopIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.badge-trade {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-trade.badge-sell {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.badge-trade.badge-buy {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.badge-trade.badge-buy2 {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.35);
}
.badge-trade.badge-buy3 {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.badge-trade.badge-rebalance {
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.35);
}

.sim-mode-toggle {
    display: flex;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
}

.btn-sim-mode {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-sim-mode:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.btn-sim-mode.active {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.sim-saved-badge {
    background: rgba(244, 63, 94, 0.85);
    color: #ffffff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 800;
}

.sim-preset-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-label {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.preset-chip {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-chip:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

.preset-chip.active {
    background: rgba(2, 132, 199, 0.25);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.sim-config-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sim-config-card {
    padding: 18px 20px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.sim-config-card-full {
    grid-column: 1 / -1;
}

.sim-common-risk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 1024px) {
    .sim-common-risk-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .sim-common-risk-grid {
        grid-template-columns: 1fr;
    }
}

.card-header-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-mini h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
}

.card-header-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #e2e8f0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.card-header-toggle:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}

.card-header-toggle input[type="checkbox"] {
    accent-color: #0284c7;
    cursor: pointer;
}

.sim-section-disabled {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.85);
    transition: all 0.25s ease;
}

.weight-total-pill {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.weight-total-pill.invalid {
    background: rgba(225, 29, 72, 0.2);
    color: #fda4af;
    border-color: rgba(225, 29, 72, 0.4);
}

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

.sim-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sim-form-group label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.sim-form-group input[type="number"],
.sim-form-group select,
.sim-form-group input[type="text"] {
    background: rgba(8, 14, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.sim-form-group input:focus,
.sim-form-group select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.input-with-subtext {
    position: relative;
}

.subtext-hint {
    font-size: 11px;
    color: #38bdf8;
    margin-top: 3px;
    display: block;
}

.sim-dual-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.slider-header strong {
    font-size: 13px;
}

.sim-form-group input[type="range"] {
    width: 100%;
    accent-color: #0284c7;
    cursor: pointer;
}

.weight-visual-bar-mini {
    display: flex;
    height: 18px;
    border-radius: 9px;
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
}

.w-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    transition: width 0.2s ease;
}

.w-qld {
    background: linear-gradient(90deg, #0284c7, #06b6d4);
    color: #ffffff;
}

.w-usd {
    background: linear-gradient(90deg, #d97706, #fbbf24);
    color: #000000;
}

.w-cash {
    background: linear-gradient(90deg, #059669, #10b981);
    color: #ffffff;
}

.sim-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #0284c7;
}

.sim-helper-badge {
    font-size: 11.5px;
    color: #a7f3d0;
    background: rgba(6, 95, 70, 0.35);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.sim-action-bar {
    margin: 10px 0 24px 0;
    text-align: center;
}

.btn-run-simulation-glow {
    width: 100%;
    max-width: 600px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
}

.btn-run-simulation-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.55);
    filter: brightness(1.1);
}

/* Results Output */
.sim-results-container {
    animation: fadeIn 0.3s ease;
}

.sim-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
}

.res-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.res-title-group h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.status-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.period-badge-tag {
    font-size: 11.5px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

.active-test-tag {
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 6px;
}

.sim-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.kpi-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpi-highlight-card {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}

.kpi-label {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-main-val {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
}

.kpi-sub-val {
    font-size: 12px;
    color: #cbd5e1;
}

/* Benchmark Comparison Table */
.sim-benchmarks-card,
.sim-annual-card,
.sim-trades-card {
    margin-bottom: 20px;
    padding: 18px 20px;
}

.sim-benchmarks-table,
.sim-annual-table,
.sim-trade-log-table,
.sim-saved-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.sim-benchmarks-table th,
.sim-annual-table th,
.sim-trade-log-table th,
.sim-saved-table th {
    background: rgba(8, 14, 28, 0.8);
    color: #94a3b8;
    padding: 10px 12px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.sim-benchmarks-table td,
.sim-annual-table td,
.sim-trade-log-table td,
.sim-saved-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    white-space: nowrap;
}

.sim-benchmarks-table tr:hover td,
.sim-annual-table tr:hover td,
.sim-trade-log-table tr:hover td,
.sim-saved-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.sim-strategy-row {
    background: rgba(2, 132, 199, 0.12) !important;
    font-weight: 700;
}

.sim-strategy-row td {
    color: #38bdf8 !important;
}

.sim-default-row {
    background: rgba(168, 85, 247, 0.10) !important;
    font-weight: 700;
}

.sim-default-row td {
    color: #e9d5ff !important;
}

.sim-charts-grid,
.sim-charts-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.sim-chart-card {
    padding: 18px 22px;
}

.sim-chart-header {
    margin-bottom: 14px;
}

.sim-chart-header h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #ffffff;
}

.sim-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
}

.btn-toggle-mini {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
}

/* Multi-Test Comparison Lab */
.sim-lab-header-card,
.sim-pills-filter-card,
.sim-saved-table-card,
.sim-compare-chart-card {
    padding: 18px 20px;
    margin-bottom: 16px;
}

.lab-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.lab-title-row h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #ffffff;
}

.lab-title-row p {
    margin: 0;
    font-size: 12.5px;
    color: #94a3b8;
}

.btn-refresh-saved {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh-saved:hover {
    background: rgba(255, 255, 255, 0.15);
}

.sim-filter-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pill-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.pill-filter-item:hover {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}

.pill-filter-item.active {
    background: rgba(2, 132, 199, 0.25);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.btn-remove-from-compare {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.25);
    color: #fda4af;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-remove-from-compare:hover {
    background: rgba(244, 63, 94, 0.3);
    color: #ffffff;
    border-color: #f43f5e;
    transform: scale(1.1);
}

.pill-filter-item input[type="checkbox"] {
    accent-color: #0284c7;
    cursor: pointer;
}

.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.scenario-name-cell strong {
    color: #ffffff;
    display: block;
    font-size: 13px;
}

.scenario-name-cell small {
    color: #94a3b8;
    font-size: 11px;
}

/* ==========================================================================
   📱 Samsung Galaxy S25 & Mobile Comprehensive Responsive Optimization
   ========================================================================== */

/* Universal Mobile Fixes */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Tablet & Mobile Screens (<= 900px) */
@media (max-width: 900px) {
    .assistant-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .cards-pnl-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .orders-action-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .banner-content {
        grid-template-columns: 1fr !important;
    }
    .sim-config-grid,
    .sim-charts-grid {
        grid-template-columns: 1fr !important;
    }
    .sim-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .sim-top-row {
        flex-direction: column;
        align-items: stretch;
    }
    .algo-grid, .guide-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Samsung Galaxy S25 & Smartphones (<= 768px) */
@media (max-width: 768px) {
    /* 1. App Container & Global Padding */
    .app-container {
        padding: 10px 10px 48px 10px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .glass-card {
        padding: 14px 12px;
        border-radius: 12px;
    }

    /* 2. Main Header */
    .main-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 14px;
    }

    .logo-area {
        gap: 10px;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 18px;
    }

    .app-title {
        font-size: 18px;
        flex-wrap: wrap;
        gap: 6px;
        line-height: 1.3;
    }

    .badge-ai {
        font-size: 10px;
        padding: 2px 6px;
    }

    .app-subtitle {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .playmcp-tag {
        grid-column: span 2;
        text-align: center;
        justify-content: center;
        font-size: 11px;
        padding: 4px 8px;
    }

    .last-updated {
        font-size: 11px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 6px;
        justify-content: center;
    }

    .btn-refresh {
        padding: 7px 10px;
        font-size: 12px;
        justify-content: center;
    }

    .btn-pwa-install {
        grid-column: span 2;
        justify-content: center;
        padding: 9px 12px;
        font-size: 13px;
        width: 100%;
    }

    /* 3. Horizontal Scrollable Navigation Tabs */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding: 2px 2px 10px 2px;
        margin-bottom: 14px;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 8px 14px;
        border-radius: 20px;
    }

    /* 4. Assistant Hero & Top Status Bar */
    .assistant-hero {
        padding: 14px 12px;
        margin-bottom: 14px;
    }

    .hero-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
    }

    .assistant-hero h2 {
        font-size: 18px;
    }

    .assistant-hero p {
        font-size: 12.5px;
    }

    .hero-control-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .btn-hero-action {
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Polling Status Bar */
    .polling-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 10px;
    }

    .polling-info {
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: 11.5px;
    }

    .polling-badge {
        font-size: 11px;
        padding: 3px 8px;
    }

    .polling-timer strong {
        font-size: 13px;
    }

    .polling-actions {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        gap: 6px;
    }

    .poll-interval-selector {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .btn-polling-toggle, .btn-manual-fetch {
        flex: 1;
        text-align: center;
        justify-content: center;
        padding: 7px 8px;
        font-size: 11.5px;
    }

    /* 5. Inputs Form Grid & Target Weights */
    .inputs-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .inputs-form-grid .form-group label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .inputs-form-grid .form-group input {
        padding: 8px 10px;
        font-size: 13px;
    }

    .full-width-group {
        grid-column: span 2;
    }

    .btn-evaluate-assistant {
        padding: 12px;
        font-size: 14px;
    }

    /* 6. Cash Ammo Gap Hero Card */
    .cash-gap-hero-box {
        padding: 12px 10px;
        gap: 10px;
    }

    .gap-status-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .gap-title {
        font-size: 12px;
    }

    .alloc-gap-item {
        grid-template-columns: 110px 1fr 90px;
        gap: 6px;
        font-size: 11.5px;
    }

    .alloc-name {
        font-size: 11.5px;
    }

    .alloc-gap-val {
        font-size: 11px;
    }

    /* 7. Asset Cards (QLD & USD) */
    .asset-pnl-card {
        padding: 14px 12px;
    }

    .asset-pnl-card .asset-title {
        font-size: 13.5px;
    }

    .pnl-numbers .num-row {
        font-size: 12px;
        margin-bottom: 5px;
    }

    /* Velocity Meter Box */
    .velocity-visual-box {
        padding: 10px 8px;
    }

    .velocity-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .velocity-tag-badge {
        font-size: 10.5px;
        padding: 2px 7px;
    }

    .velocity-grad-track {
        height: 18px;
    }

    .track-zone {
        font-size: 9px;
    }

    .velocity-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .v-chip {
        padding: 4px 2px;
    }

    .v-chip .v-label {
        font-size: 9px;
    }

    .v-chip .v-val {
        font-size: 10.5px;
    }

    .velocity-comment-row {
        font-size: 11px;
    }

    /* RSI Anchor Range Meter */
    .rsi-anchor-wrapper {
        padding: 10px 8px;
    }

    .rsi-anchor-track {
        height: 22px;
    }

    .rsi-distance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .rsi-dist-card {
        padding: 8px;
    }

    .rsi-dist-card span {
        font-size: 10.5px;
    }

    .rsi-dist-card strong {
        font-size: 13.5px;
    }

    /* 8. Live Execution Alerts & Orders Grid */
    .live-execution-alert-box {
        padding: 14px 12px;
        margin-bottom: 16px;
    }

    .alert-box-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .alert-title-wrap h3 {
        font-size: 16px;
    }

    .btn-copy-order {
        width: 100%;
        text-align: center;
        padding: 9px 12px;
        font-size: 12px;
    }

    .alert-summary-cards {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .alert-metric-chip {
        padding: 10px 12px;
    }

    .chip-label {
        font-size: 10px;
    }

    .chip-val {
        font-size: 14px;
    }

    .alert-order-instruction {
        font-size: 11.5px;
        padding: 8px 10px;
    }

    .order-box {
        padding: 14px 12px;
    }

    .order-box-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .order-title-group h4 {
        font-size: 14px;
    }

    .badge-action {
        font-size: 11.5px;
        padding: 4px 10px;
    }

    .order-details-list li {
        font-size: 12px;
    }

    /* 9. Backtest & Simulator Lab on Mobile */
    .sim-unified-header-card {
        padding: 12px 10px;
    }

    .sim-selector-group select, .sim-name-input-group input {
        font-size: 12px;
        padding: 7px 10px;
    }

    .sim-direct-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .sim-direct-actions button {
        justify-content: center;
        padding: 8px 6px;
        font-size: 11.5px;
    }

    .btn-sim-run-main {
        grid-column: span 2;
        padding: 10px !important;
        font-size: 13px !important;
    }

    .sim-preset-chips-wrap, .sim-filter-pills-wrap {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .sim-preset-chips-wrap::-webkit-scrollbar,
    .sim-filter-pills-wrap::-webkit-scrollbar {
        display: none;
    }

    .sim-preset-chip, .pill-filter-item {
        flex-shrink: 0;
        font-size: 11px;
        padding: 5px 10px;
    }

    .sim-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }

    .sim-kpi-card {
        padding: 8px 10px;
    }

    .sim-kpi-label {
        font-size: 10px;
    }

    .sim-kpi-val {
        font-size: 15px;
    }

    .sim-kpi-desc {
        font-size: 9.5px;
    }

    .sim-canvas-wrapper {
        height: 200px;
    }

    /* 10. Guaranteed Horizontal Scroll for Large Data Tables */
    .table-responsive-wrapper,
    .sim-comparison-table-wrap,
    .trade-log-table-box,
    .guide-table-box,
    .realignment-table-box {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        position: relative;
        border-radius: 8px;
    }

    .sim-benchmarks-table,
    .sim-annual-table,
    .sim-trade-log-table,
    .sim-saved-table,
    .trade-log-table,
    .guide-table,
    .realignment-table {
        min-width: 540px !important;
        font-size: 11.5px !important;
    }

    .sim-benchmarks-table th, .sim-benchmarks-table td,
    .sim-annual-table th, .sim-annual-table td,
    .sim-trade-log-table th, .sim-trade-log-table td,
    .sim-saved-table th, .sim-saved-table td,
    .trade-log-table th, .trade-log-table td,
    .guide-table th, .guide-table td,
    .realignment-table th, .realignment-table td {
        padding: 8px 10px !important;
    }

    /* 11. Modals on Mobile */
    .strategy-modal-card, .trade-log-modal-card, .strategy-guide-modal-card {
        width: 96% !important;
        max-height: 92vh !important;
        padding: 16px 12px !important;
    }

    .strategy-form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .strat-section-title {
        grid-column: span 2;
        font-size: 12.5px;
    }

    /* Toast Notification on Mobile */
    .app-toast {
        left: 14px;
        right: 14px;
        bottom: 20px;
        text-align: center;
        font-size: 12.5px;
        padding: 10px 16px;
    }
}

/* Ultra Compact (Galaxy S25 One-Handed / <= 380px) */
@media (max-width: 380px) {
    .app-container {
        padding: 6px 6px 40px 6px;
    }
    .inputs-form-grid, .strategy-form-grid {
        grid-template-columns: 1fr;
    }
    .full-width-group {
        grid-column: span 1;
    }
    .sim-direct-actions {
        grid-template-columns: 1fr;
    }
    .btn-sim-run-main {
        grid-column: span 1;
    }
    .alert-summary-cards {
        grid-template-columns: 1fr;
    }
    .rsi-distance-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   🔒 Google Authentication & Lock Screen Styles
   ========================================================================== */

/* Header User Auth Profile Badge */
.user-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.user-avatar-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #38bdf8;
}

.user-email-span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #38bdf8;
}

.btn-logout {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-logout:hover {
    color: #f43f5e;
    transform: scale(1.15);
}

/* Fullscreen Auth Lock Overlay */
.auth-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 14, 28, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

.auth-card {
    max-width: 440px;
    width: 100%;
    padding: 36px 30px;
    text-align: center;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(6, 182, 212, 0.25);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: authCardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.auth-logo-badge {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45);
    margin-bottom: 4px;
}

.auth-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

.auth-desc {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 4px 0;
}

/* 2FA Step Progress Indicator */
.auth-2fa-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 6px 0 10px 0;
    padding: 8px 12px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.auth-step-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.auth-step-pill .step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.auth-step-pill.active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

.auth-step-pill.active .step-num {
    background: #0284c7;
    color: #ffffff;
}

.auth-step-pill.completed {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.auth-step-pill.completed .step-num {
    background: #10b981;
    color: #ffffff;
}

.step-arrow {
    color: #475569;
    font-size: 12px;
}

/* Step 1 Success Card */
.step1-success-card {
    width: 100%;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6ee7b7;
    font-size: 13px;
    animation: fadeIn 0.3s ease;
}

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

.btn-step1-reset {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.btn-step1-reset:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
}

/* Passcode Form Styles */
.passcode-auth-section,
.google-auth-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    animation: fadeIn 0.3s ease;
}

.passcode-label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.passcode-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.passcode-input-group input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    color: #f8fafc;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.passcode-input-group input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
    background: rgba(30, 41, 59, 1);
}

.btn-passcode-submit {
    padding: 12px 20px;
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

.btn-passcode-submit:hover {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.45);
}

.btn-passcode-submit:active {
    transform: translateY(0);
}

.google-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 48px;
    margin: 6px 0;
}

.auth-error-alert {
    width: 100%;
    padding: 10px 14px;
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid #f43f5e;
    border-radius: 8px;
    color: #fda4af;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.auth-footer-note {
    font-size: 11.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 28px 18px;
    }
    .auth-title {
        font-size: 20px;
    }
    .auth-desc {
        font-size: 12.5px;
    }
    .user-auth-badge {
        grid-column: span 2;
        justify-content: space-between;
        width: 100%;
    }
    .user-email-span {
        max-width: 200px;
    }
}

/* ==========================================================================
   🔔 Sound Toggle & 🚨 RSI Event Alert Pop-up Modal Styles
   ========================================================================== */

/* Sound Toggle Button in Polling Bar */
.btn-sound-toggle {
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 6px;
    color: #34d399;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-sound-toggle:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    transform: translateY(-1px);
}

.btn-sound-toggle.sound-muted {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

/* RSI Event Alert Pop-up Modal Card */
.rsi-alert-modal-card {
    max-width: 500px;
    width: 92%;
    padding: 24px 22px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(24, 15, 30, 0.98));
    border: 2px solid #f43f5e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(244, 63, 94, 0.4);
    border-radius: 20px;
    animation: rsiModalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.rsi-alert-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
}

.rsi-alert-beacon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.5);
    flex-shrink: 0;
}

.rsi-alert-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #f43f5e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 6px;
    margin-bottom: 4px;
}

.rsi-alert-badge.badge-buy-alert {
    background: #10b981;
}

.rsi-alert-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.3px;
    line-height: 1.35;
}

.rsi-alert-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.rsi-alert-metrics-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rsi-alert-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.rsi-alert-lbl {
    color: #94a3b8;
    font-weight: 600;
}

.rsi-alert-val {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.rsi-alert-reason-box {
    background: rgba(245, 158, 11, 0.12);
    border-left: 4px solid #f59e0b;
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
    color: #fde68a;
    line-height: 1.5;
}

.rsi-alert-footer {
    display: flex;
    gap: 10px;
}

.btn-confirm-alert {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-alert:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 480px) {
    .rsi-alert-modal-card {
        padding: 18px 14px;
    }
    .rsi-alert-title {
        font-size: 15px;
    }
    .rsi-alert-modal-header {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .rsi-alert-beacon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .rsi-alert-footer {
        flex-direction: column;
    }
    .btn-confirm-alert {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   🌅 Real-Time Market Session Badge (Pre-Market, Regular, After-Hours)
   ========================================================================== */
.market-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* Pre-Market (프리장) */
.market-session-pill.session-pre {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.6);
    color: #fde68a;
    animation: preMarketPulse 2s infinite ease-in-out;
}

@keyframes preMarketPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
}

/* Regular Market (정규장) */
.market-session-pill.session-regular {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
}

/* After-Hours (애프터마켓) */
.market-session-pill.session-post {
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.6);
    color: #e9d5ff;
}

/* Closed (장마감) */
.market-session-pill.session-closed {
    background: rgba(100, 116, 139, 0.18);
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   🚨 AI Order Confirmation & Pending Queue Styles
-------------------------------------------------------------------------- */
.pending-orders-container {
    margin-bottom: 24px;
    padding: 24px 28px;
    border-left: 5px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.09), rgba(15, 23, 42, 0.9));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15);
    animation: fadeIn 0.3s ease-in-out;
}

.pending-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 12px;
}

.pending-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pending-header-title h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #fca5a5;
    letter-spacing: -0.3px;
}

.pending-badge-mode {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pending-orders-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.pending-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pending-order-card {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pending-order-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pending-order-card.action-sell {
    border-left: 4px solid #3b82f6;
}

.pending-order-card.action-buy {
    border-left: 4px solid #10b981;
}

.pending-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pending-asset-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.pending-order-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.pending-order-badge.badge-sell {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.pending-order-badge.badge-buy {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.pending-timestamp {
    font-size: 12px;
    color: var(--text-dim);
}

.pending-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    background: rgba(15, 23, 42, 0.5);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pending-metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pending-metric-item .p-label {
    font-size: 11.5px;
    color: var(--text-dim);
}

.pending-metric-item .p-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

/* AI Strategic Review Box */
.ai-review-card {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-review-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #d8b4fe;
}

.ai-verdict-pill {
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.ai-verdict-pill.verdict-approved {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.5);
}

.ai-verdict-pill.verdict-caution {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.ai-verdict-pill.verdict-rejected {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.ai-reason-text {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.6;
    margin: 0;
}

/* Actions Row */
.pending-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.btn-confirm-order {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-confirm-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
    filter: brightness(1.1);
}

.btn-reject-order {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-reject-order:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.6);
}

@media (max-width: 768px) {
    .pending-orders-container {
        padding: 16px;
    }
    .pending-actions-row {
        width: 100%;
        justify-content: stretch;
    }
    .btn-confirm-order, .btn-reject-order {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   📡 Balance Sync Mode Selector & Broker Status Bar
   ========================================================================== */
.balance-sync-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.balance-mode-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.45);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
}

.btn-bal-mode {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-bal-mode:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
}

.btn-bal-mode.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.portfolio-mode-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    gap: 8px;
}

.mode-status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #cbd5e1;
}

.mode-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.broker-env-text {
    font-weight: 700;
    color: #38bdf8;
}

.status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    display: inline-block;
}

.status-indicator-dot.offline {
    background: #94a3b8;
    box-shadow: none;
}

.status-indicator-dot.manual {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.btn-sync-broker {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-sync-broker:hover {
    background: rgba(56, 189, 248, 0.3);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.btn-goto-settings {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-goto-settings:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Modal Balance Sync Mode Toggle */
.balance-mode-toggle-modal {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.balance-mode-toggle-modal .btn-bal-mode {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.6);
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.balance-mode-toggle-modal .btn-bal-mode.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(6, 182, 212, 0.25));
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

/* Locked / Readonly State for Inputs when in Auto Sync Mode */
.input-locked {
    background: rgba(15, 23, 42, 0.4) !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 768px) {
    .portfolio-mode-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .mode-actions {
        justify-content: flex-end;
    }
    .balance-mode-toggle-modal {
        flex-direction: column;
    }
}

/* ==========================================================================
   📊 Comprehensive Portfolio & Asset Dashboard Styles
   ========================================================================== */
.total-asset-chip {
    margin-left: auto;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.asset-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.asset-metric-tile {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.asset-metric-tile.highlight-tile {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.tile-lbl {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.tile-val-main {
    font-size: 15.5px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.2px;
}

.tile-val-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.tile-val-badge {
    display: inline-flex;
    align-items: center;
    padding: 1.5px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
    width: fit-content;
}

.badge-profit {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-loss {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
}

/* Stacked Ratio Bar */
.asset-stacked-bar-section {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.stacked-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 7px;
}

.stacked-bar-header .lbl {
    color: #cbd5e1;
    font-weight: 600;
}

.stacked-progress-track {
    width: 100%;
    height: 22px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.stacked-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    transition: width 0.3s ease;
    overflow: hidden;
    padding: 0 4px;
}

.seg-invested {
    background: linear-gradient(90deg, #0284c7, #06b6d4);
}

.seg-cash-ammo {
    background: linear-gradient(90deg, #059669, #10b981);
}

/* ==========================================================================
   📡 In-flight / Active Orders Container Styles
   ========================================================================== */
.active-orders-container {
    margin-bottom: 20px;
    border-left: 4px solid #06b6d4;
    background: rgba(15, 23, 42, 0.85);
    padding: 16px 20px;
}

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

.active-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.active-header-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
}

.active-order-guard-note {
    font-size: 12px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.active-orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.active-order-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.active-order-item-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(30, 41, 59, 0.9);
}

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

.active-ticker-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.active-order-badge {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.active-order-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #cbd5e1;
}

.btn-cancel-in-flight {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-cancel-in-flight:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   📈 Dedicated Individual RSI Charts Styles (Side-by-Side in 1 Row)
.rsi-charts-row-grid,
.unified-rsi-master-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.rsi-individual-card {
    padding: 20px 22px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.canvas-wrapper-dedicated {
    height: 240px;
    width: 100%;
    position: relative;
    margin-top: 10px;
}

.unified-asset-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 22px;
    transition: all 0.3s ease;
}

.unified-asset-card:hover {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.unified-order-content {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .rsi-charts-row-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   📜 Permanent Audit Trail Table Styles
   ========================================================================== */
.audit-logs-card {
    margin-top: 24px;
    margin-bottom: 30px;
    padding: 20px 24px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.audit-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.audit-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-title-group h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #f8fafc;
}

.audit-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-note {
    font-size: 11.5px;
    color: #94a3b8;
}

.btn-refresh-audit {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-refresh-audit:hover {
    background: rgba(56, 189, 248, 0.25);
    color: #ffffff;
}

.audit-desc {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 14px 0;
}

.audit-table-responsive-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 15, 29, 0.8);
}

.audit-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.audit-logs-table th {
    background: rgba(30, 41, 59, 0.9);
    color: #94a3b8;
    padding: 10px 12px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.audit-logs-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    vertical-align: middle;
}

.audit-row:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.audit-ai-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 220px;
}

.ai-score-pill {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    width: fit-content;
}

.ai-comment-snippet {
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-odno-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.odno-chip {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.reason-snippet {
    font-size: 10.5px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.btn-sync-mts-status {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2));
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-sync-mts-status:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(6, 182, 212, 0.35));
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.audit-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-table-approve {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-table-approve:hover {
    background: rgba(16, 185, 129, 0.35);
    color: #ffffff;
}

.btn-table-reject {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-table-reject:hover {
    background: rgba(244, 63, 94, 0.35);
    color: #ffffff;
}

.btn-table-cancel {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-table-cancel:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ffffff;
}

/* Formal Lifecycle Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pill-pending-approval {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.pill-rejected-user {
    background: rgba(244, 63, 94, 0.18);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.45);
}

.pill-submitted-mts {
    background: rgba(14, 165, 233, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.45);
}

.pill-unfilled-mts {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.45);
}

.pill-partial-mts {
    background: rgba(217, 119, 6, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(217, 119, 6, 0.45);
}

.pill-filled-mts {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.pill-cancelled-mts {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.45);
}

.pill-failed-mts {
    background: rgba(225, 29, 72, 0.25);
    color: #fda4af;
    border: 1px solid rgba(225, 29, 72, 0.5);
}

.badge-action {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.badge-action.audit-buy {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.4);
}

.badge-action.audit-sell {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.4);
}

@media (max-width: 768px) {
    .asset-summary-grid {
        grid-template-columns: 1fr;
    }
    .active-order-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .active-item-right {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   📁 Multi-Portfolio Switcher Bar & Asset Manager UI Styles
   ========================================================================== */

.portfolio-switcher-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
    gap: 12px;
}

.portfolio-select-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.select-label-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
}

.portfolio-select-dropdown {
    background: rgba(2, 6, 23, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    color: #38bdf8;
    font-size: 14.5px;
    font-weight: 800;
    padding: 8px 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    min-width: 240px;
}

.portfolio-select-dropdown:hover,
.portfolio-select-dropdown:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.portfolio-select-dropdown option {
    background: #0f172a;
    color: #e2e8f0;
}

.portfolio-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.portfolio-sync-badge.manual {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}

.portfolio-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-portfolio-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn-new-port {
    background: linear-gradient(135deg, #0284c7, #0284c7);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-new-port:hover {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.btn-manage-port {
    background: rgba(51, 65, 85, 0.7);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-manage-port:hover {
    background: rgba(71, 85, 105, 0.8);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Dynamic Asset Input Rows (Column 1) */
.portfolio-assets-input-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.lbl-assets-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #e2e8f0;
}

.btn-add-asset-pill {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-asset-pill:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
}

.portfolio-assets-inputs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.asset-input-row-card {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 100px 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    transition: border-color 0.2s ease;
}

.asset-input-row-card:hover {
    border-color: rgba(56, 189, 248, 0.3);
}

.asset-badge-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asset-sym-pill {
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.asset-name-sub {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.asset-field-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.asset-field-group label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.asset-field-group input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    width: 100%;
}

.btn-remove-asset-row {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-remove-asset-row:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   Multi-Portfolio Modals & Dynamic Strategy Styling
   ========================================================================== */
.modal-portfolio-builder,
.modal-portfolio-manager,
.modal-add-asset,
.strategy-modal-card {
    max-width: 880px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(10, 15, 30, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.1);
    border-radius: 16px;
}

.strat-port-info-banner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8));
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.strat-port-info-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.strat-port-info-left h4 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.strat-port-info-left p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.strat-port-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.port-tag-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.strat-assets-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.strat-asset-row-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.2s, transform 0.2s;
}

.strat-asset-row-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.strat-asset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.strat-asset-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.strat-asset-sym-badge {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    font-weight: 900;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.strat-asset-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #e2e8f0;
}

.strat-asset-inputs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.strat-asset-inputs-grid--5col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.strat-asset-inputs-grid--6col {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.strat-asset-input-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.strat-asset-input-item label {
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
}

.strat-asset-input-item input {
    background: rgba(8, 14, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
    transition: all 0.2s;
}

.strat-asset-input-item input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    outline: none;
}

.port-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.port-modal-grid .full-width-group {
    grid-column: 1 / -1;
}

.port-modal-grid .form-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.port-modal-grid .form-group input,
.port-modal-grid .form-group select {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    color: #ffffff;
    width: 100%;
    transition: all 0.2s ease;
}

.port-modal-grid .form-group input:focus,
.port-modal-grid .form-group select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    outline: none;
}

.modal-assets-builder-section {
    background: rgba(8, 14, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

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

.builder-title {
    font-size: 14px;
    font-weight: 800;
    color: #e2e8f0;
}

.btn-builder-add-row {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-builder-add-row:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
}

.table-responsive-builder {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
}

.builder-assets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.builder-assets-table th {
    background: rgba(15, 23, 42, 0.95);
    color: #94a3b8;
    font-weight: 700;
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.builder-assets-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.builder-assets-table input {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12.5px;
    color: #ffffff;
    width: 100%;
    font-weight: 600;
    transition: border-color 0.2s;
}

.builder-assets-table input:focus {
    border-color: #38bdf8;
    outline: none;
}

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

.btn-modal-cancel {
    background: rgba(51, 65, 85, 0.6);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover {
    background: rgba(51, 65, 85, 0.85);
    color: #ffffff;
}

.btn-modal-submit {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.2s;
}

.btn-modal-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
}

/* Portfolio Manager Cards */
.portfolio-cards-manager-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.port-manager-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    transition: border-color 0.2s, background 0.2s;
}

.port-manager-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.9);
}

.port-manager-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.port-manager-info p {
    margin: 0 0 10px 0;
    font-size: 12.5px;
    color: #94a3b8;
}

.port-manager-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.port-manager-tag {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.port-manager-tag.manual {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
}

.port-manager-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-port-mgr-select {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-port-mgr-select:hover {
    background: #0369a1;
}

.btn-port-mgr-edit {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-port-mgr-edit:hover {
    background: rgba(56, 189, 248, 0.28);
}

.btn-port-mgr-delete {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-port-mgr-delete:hover {
    background: rgba(239, 68, 68, 0.25);
}

@media (max-width: 768px) {
    .portfolio-switcher-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .portfolio-select-dropdown {
        width: 100%;
    }
    .port-modal-grid {
        grid-template-columns: 1fr;
    }
    .strat-asset-inputs-grid {
        grid-template-columns: 1fr 1fr;
    }
    .strat-asset-inputs-grid--6col {
        grid-template-columns: repeat(3, 1fr);
    }
    .strategy-form-grid--3col {
        grid-template-columns: 1fr 1fr;
    }
    .asset-input-row-card {
        grid-template-columns: 1fr 1fr;
    }
    .asset-badge-info {
        grid-column: 1 / -1;
    }
}










/* ====================================================
   Optimizer Button (in results header)
   ==================================================== */
.btn-optimizer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(99,102,241,0.15));
    border: 1px solid rgba(56,189,248,0.4);
    border-radius: 8px;
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-optimizer:hover {
    background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(99,102,241,0.25));
    border-color: rgba(56,189,248,0.7);
    color: #e0f2fe;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(56,189,248,0.2);
}

/* ====================================================
   Optimizer Full-Screen Modal
   ==================================================== */
.optimizer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 10, 22, 0.96);
    backdrop-filter: blur(12px);
    z-index: 9900;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}

.optimizer-modal-content {
    width: 100%;
    max-width: 1240px;
    min-height: calc(100vh - 40px);
    background: rgba(13, 20, 40, 0.98);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.optimizer-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
    gap: 16px;
}

.optimizer-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.optimizer-header-left > i {
    font-size: 28px;
    flex-shrink: 0;
}

.optimizer-header-left h2 {
    font-size: 20px;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 3px;
}

.optimizer-header-left p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.optimizer-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.optimizer-close-btn:hover {
    background: rgba(239,68,68,0.2);
    border-color: rgba(239,68,68,0.5);
    color: #f87171;
}

/* Control Bar */
.optimizer-control-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.015);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.optimizer-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.optimizer-control-group label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.optimizer-mode-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.opt-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.opt-mode-btn:hover {
    background: rgba(56,189,248,0.1);
    border-color: rgba(56,189,248,0.3);
    color: #e2e8f0;
}
.opt-mode-btn.active {
    background: rgba(56,189,248,0.18);
    border-color: rgba(56,189,248,0.5);
    color: #38bdf8;
}

.optimizer-slider {
    -webkit-appearance: none;
    width: 220px;
    height: 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    outline: none;
    cursor: pointer;
}
.optimizer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px rgba(56,189,248,0.5);
    cursor: pointer;
}

.optimizer-comb-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px dashed rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    font-size: 12px;
    color: #cbd5e1;
}

.optimizer-comb-preview strong {
    font-weight: 700;
}

.btn-run-optimizer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: auto;
}
.btn-run-optimizer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14,165,233,0.35);
}
.btn-run-optimizer:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Exclusion Settings Panel */
.optimizer-exclusion-panel {
    background: rgba(30, 41, 59, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.opt-excl-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #cbd5e1;
}
.opt-excl-header strong {
    color: #c084fc;
}
.opt-excl-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.opt-excl-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 12.5px;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.opt-excl-label:hover {
    border-color: rgba(192, 132, 252, 0.4);
    color: #f1f5f9;
}
.opt-excl-label input[type="checkbox"] {
    accent-color: #a855f7;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.opt-excl-label input[type="checkbox"]:checked + span {
    color: #f8fafc;
    font-weight: 600;
}

/* Results Area */
.optimizer-results-area {
    flex: 1;
    padding: 24px 28px;
    overflow-y: auto;
}

.optimizer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    text-align: center;
    gap: 8px;
}

.optimizer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    text-align: center;
    gap: 16px;
}

.optimizer-loading h3 {
    color: #38bdf8;
    font-size: 18px;
    font-weight: 700;
}

.optimizer-loading p {
    color: #94a3b8;
    font-size: 14px;
}

.optimizer-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(56,189,248,0.15);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pipeline Progress Steps (Loading state) */
.pipeline-progress-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 820px;
    margin: 10px 0;
}
.pipeline-step-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    font-size: 12px;
    color: #64748b;
    transition: all 0.3s;
}
.pipeline-step-item .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    font-size: 10.5px;
    font-weight: 700;
}
.pipeline-step-item.active {
    background: rgba(56,189,248,0.15);
    border-color: rgba(56,189,248,0.5);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56,189,248,0.25);
}
.pipeline-step-item.active .step-num {
    background: #38bdf8;
    color: #0f172a;
}
.pipeline-step-item.done {
    background: rgba(52,211,153,0.12);
    border-color: rgba(52,211,153,0.35);
    color: #34d399;
}
.pipeline-step-item.done .step-num {
    background: #34d399;
    color: #0f172a;
}

/* Pipeline Summary List (Results card) */
.pipeline-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}
.pipeline-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.5;
}
.pipeline-summary-badge {
    padding: 2px 8px;
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.3);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* AI Report Body */
.ai-report-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-dominant-box {
    padding: 12px 16px;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.6;
}
.ai-dominant-box strong {
    color: #fbbf24;
}
.ai-sensitivity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.ai-sensitivity-card {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 10px 14px;
}
.ai-sens-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.ai-sens-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #38bdf8;
}
.ai-sens-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
}
.ai-sens-tag.HIGH { background: rgba(248,113,113,0.2); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }
.ai-sens-tag.MEDIUM { background: rgba(251,191,36,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.ai-sens-tag.LOW { background: rgba(52,211,153,0.2); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.ai-sens-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
}
.ai-micro-guide {
    font-size: 12.5px;
    color: #a78bfa;
    background: rgba(167,139,250,0.08);
    border: 1px dashed rgba(167,139,250,0.3);
    padding: 10px 14px;
    border-radius: 8px;
    line-height: 1.5;
}

/* Summary Bar */
.optimizer-summary-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: center;
}
.optimizer-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(56,189,248,0.1);
    border: 1px solid rgba(56,189,248,0.25);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: #38bdf8;
}

/* Rank Cards Grid */
.optimizer-rank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .optimizer-rank-grid { grid-template-columns: 1fr; }
}

.optimizer-rank-card {
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.optimizer-rank-card:hover {
    border-color: rgba(56,189,248,0.35);
    background: rgba(56,189,248,0.04);
    transform: translateY(-2px);
}
.optimizer-rank-card.selected {
    border-color: #38bdf8;
    background: rgba(56,189,248,0.08);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.3), 0 8px 32px rgba(56,189,248,0.12);
}
.optimizer-rank-card.rank-1 { border-top: 3px solid #fbbf24; }
.optimizer-rank-card.rank-2 { border-top: 3px solid #94a3b8; }
.optimizer-rank-card.rank-3 { border-top: 3px solid #cd7f32; }
.optimizer-rank-card.selected.rank-1 { border-color: #fbbf24; box-shadow: 0 0 0 1px rgba(251,191,36,0.4), 0 8px 32px rgba(251,191,36,0.12); }

.rank-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rank-medal {
    font-size: 26px;
    line-height: 1;
}

.rank-selected-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(56,189,248,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 11px;
    transition: all 0.2s;
    opacity: 0;
}
.optimizer-rank-card.selected .rank-selected-check {
    opacity: 1;
    background: rgba(56,189,248,0.2);
    border-color: #38bdf8;
}

.rank-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));
    gap: 8px;
    background: rgba(15, 23, 42, 0.4);
    padding: 8px 10px;
    border-radius: 8px;
}

.rank-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rank-kpi-label {
    font-size: 10.5px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rank-kpi-val {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.rank-params-diff {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.param-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 2px 7px;
    color: #cbd5e1;
    width: fit-content;
}

.param-diff-badge.changed {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.3);
    color: #fbbf24;
}

.rank-reasoning {
    font-size: 12px;
    color: #64748b;
    line-height: 1.55;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
}

.rank-select-hint {
    font-size: 11.5px;
    color: #475569;
    text-align: center;
    font-style: italic;
}

/* Save Section */
.optimizer-save-section {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 4px;
}

.optimizer-save-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.optimizer-save-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
}

.optimizer-save-label i {
    font-size: 20px;
}

.optimizer-save-label strong {
    display: block;
    color: #e2e8f0;
    font-size: 14px;
}

.optimizer-save-label span {
    font-size: 12px;
}

.optimizer-save-input {
    flex: 2;
    min-width: 220px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
}
.optimizer-save-input:focus {
    border-color: rgba(16,185,129,0.5);
}
.optimizer-save-input::placeholder {
    color: #475569;
}

.btn-save-optimizer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #059669, #0d9488);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-save-optimizer:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(5,150,105,0.35);
}
.btn-save-optimizer:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}