/* ==========================================================================
   COJUBOO Premium Chat-Based Dark Theme Design System
   ========================================================================== */

:root {
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-card: #e2e8f0;
    
    --color-primary: #7c3aed;
    --color-primary-glow: rgba(124, 58, 237, 0.15);
    --color-ai-bubble: #f1f5f9;
    
    --color-up: #ef4444;     /* Red/Rose for returns >= 0 */
    --color-down: #3b82f6;   /* Blue/Sky for returns < 0 */
    
    --color-text-title: #0f172a;
    --color-text-body: #334155;
    --color-text-muted: #64748b;
    --color-text-primary: #0f172a;
    
    --font-sans: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #f1f5f9;
    color: var(--color-text-body);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Full Screen App Layout, styled as a centered mobile view on desktop */
.app-layout {
    display: flex;
    width: 100%;
    max-width: 480px; /* Mobile mockup width */
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Modern mobile dynamic viewport height */
    overflow: hidden;
    position: relative;
    margin: 0 auto; /* Center page layout on PC */
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.08); /* Soft phone frame shadow */
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* ==========================================================================
   Utility Typography & Badges
   ========================================================================== */
.positive { color: var(--color-up) !important; }
.negative { color: var(--color-down) !important; }
.profit-up { color: var(--color-up) !important; }
.profit-down { color: var(--color-down) !important; }

/* ==========================================================================
   Tab Navigation & Toggle Structure
   ========================================================================== */
.tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 100%;
    padding: 16px;
    animation: tabFadeIn 0.3s ease;
}

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

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

.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 74px;
    background-color: rgba(9, 9, 11, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-card);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    padding-bottom: 10px; /* Safe area spacer */
}

.nav-item {
    background: none;
    border: none;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    flex: 1;
}

.nav-item .icon {
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

.nav-item .label {
    font-size: 10px;
    font-weight: 500;
}

.nav-item.active {
    color: var(--color-primary);
}

.nav-item.active .icon {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ==========================================================================
   1. HOME TAB UI
   ========================================================================== */
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.logo-badge {
    background: linear-gradient(135deg, #a78bfa, #6d28d9);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.icon-profile {
    font-size: 28px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.home-hero {
    margin-bottom: 20px;
}

.hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-title);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.hero-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Search Container Home */
.search-box-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    margin-bottom: 20px;
}

.home-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 0;
}

.home-search-input::placeholder {
    color: rgba(161, 161, 170, 0.45);
}

.search-submit-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    outline: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-submit-btn:hover {
    opacity: 0.9;
}

/* Suggested Cards Grid */
.suggested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.suggested-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.suggested-card:hover {
    background-color: #202024;
    transform: translateY(-1px);
}

.suggested-card .emoji {
    font-size: 18px;
}

.suggested-card .text {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-body);
    line-height: 1.35;
}

/* 오늘의 시장 요약 Grid */
.market-summary-section, .gainer-section {
    margin-bottom: 24px;
}

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

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-title);
}

.more-link {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.more-link .material-symbols-rounded {
    font-size: 14px;
}

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

.market-mini-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.market-mini-card .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.market-mini-card .card-meta .label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.market-mini-card .card-meta .change-pct {
    font-size: 11px;
    font-weight: 500;
}

.market-mini-card .value {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.sparkline-canvas {
    width: 100%;
    height: 32px;
    margin-top: 6px;
    display: block;
}

/* 급상승 자산 TOP 3 List */
.gainer-list {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
}

.gainer-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-card);
}

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

.gainer-item .rank {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    width: 24px;
}

.gainer-item .name {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
}

.gainer-item .price {
    font-size: 13px;
    font-weight: 500;
    margin-right: 12px;
}

.gainer-item .change {
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(244, 63, 94, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

.gainer-item .change.negative {
    background-color: rgba(59, 130, 246, 0.08);
}

/* ==========================================================================
   2. AI TALK TAB UI (Chat Room Layout)
   ========================================================================== */
#tab-ai {
    padding: 0;
    height: calc(100vh - 74px); /* occupy full space minus tab-bar */
    height: calc(100dvh - 74px); /* Modern mobile dynamic viewport height */
    position: relative;
    display: flex;
    flex-direction: column;
}

.chat-header {
    height: 56px;
    border-bottom: 1px solid var(--border-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: var(--bg-main);
    position: sticky;
    top: 0;
    z-index: 10;
}

.chat-header .back-to-home {
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.chat-header .chat-title {
    font-size: 16px;
    font-weight: 600;
}

.chat-header .icon-history {
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* Chat Feed Scroll Area */
.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 200px; /* Leave space for bottom typing area */
}

/* Hide Scrollbar */
.chat-history::-webkit-scrollbar {
    display: none;
}

/* Chat Bubbles Core */
.chat-bubble {
    max-width: 88%;
    display: flex;
    flex-direction: column;
    animation: bubbleEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.chat-bubble.user {
    align-self: flex-end;
    background-color: #ffffff;
    border: 1.5px solid var(--color-primary);
    color: #1e293b;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.chat-bubble.user .bubble-time {
    color: #94a3b8;
    font-size: 10px;
    margin-top: 4px;
    text-align: right;
}

.chat-bubble.ai {
    align-self: flex-start;
    max-width: 95% !important;
    width: 100% !important;
}

.ai-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ai-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-image: url('seal_avatar_front.png') !important;
    background-size: 120% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    background-color: #ffffff !important;
    font-size: 0px !important;
    color: transparent !important;
    text-indent: -9999px !important;
    display: flex !important;
    overflow: hidden !important;
}

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

.chat-bubble.ai .bubble-content {
    background-color: var(--color-ai-bubble);
    border: 1px solid var(--border-card);
    border-radius: 4px 16px 16px 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-body);
}

/* Loading Spinner Indicator */
.chat-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.1);
    border-top: 2.5px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 2px 4px;
}

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

/* Bubble Report Card UI (Inside AI Bubble) */
.report-card {
    min-width: 280px;
    width: 100%;
}

.report-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.report-asset-name {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 12px;
}

/* Metrics Grid Inside AI response */
.report-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.report-metrics .metric {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-metrics .metric .lbl {
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.report-metrics .metric .val {
    font-size: 14px;
    font-weight: 600;
}

/* Estate Visual Card Styling */
.estate-card-visual {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 70px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
}

.visual-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
    opacity: 0.85;
    z-index: 1;
}

.visual-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--color-primary);
    color: white;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

.visual-info {
    position: relative;
    z-index: 2;
}

.apt-name-visual {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.apt-meta-visual {
    font-size: 9px;
    color: #c084fc;
}

/* Estate Metrics Layout */
.report-metrics-estate {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

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

.metric-row .sub-col {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-row .sub-col .lbl {
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.metric-row .sub-col .val {
    font-size: 13px;
    font-weight: 600;
}

.metric-row.full-width {
    width: 100%;
}

/* Comparison Layout */
.compare-period-label {
    font-size: 11px;
    color: var(--color-primary);
    font-weight: 500;
    margin-top: -8px;
    margin-bottom: 12px;
}

.compare-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.compare-rank-item {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compare-rank-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compare-rank-meta .left-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

.rank-badge.rank-1 { background-color: #fbbf24; }
.rank-badge.rank-2 { background-color: #9ca3af; }
.rank-badge.rank-3 { background-color: #b45309; }

.compare-rank-name {
    font-size: 12px;
    font-weight: 500;
}

.compare-rank-value {
    font-size: 12px;
    font-weight: 600;
}

.compare-gauge-bg {
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.compare-gauge-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary), #a78bfa);
}

/* Inner Report Canvas Chart */
.report-chart-container {
    position: relative;
    width: auto;
    margin-left: -14px;
    margin-right: -14px;
    height: 260px;
    margin-bottom: 12px;
}

.chart-title-sm {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 6px;
}

.report-canvas-chart {
    width: 100%;
    height: 260px;
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    display: block;
}

/* Floating Chart Tooltip Inside Chat bubble */
.chart-tooltip-floating {
    position: absolute;
    background-color: rgba(9, 9, 11, 0.95);
    border: 1px solid var(--border-card);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 9px;
    color: #fff;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.report-disclaimer {
    font-size: 9px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-btn {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-text-body);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Typing / Input Section Bottom fixed inside Chat Tab */
.chat-input-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.98) 25%);
    padding: 24px 24px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

/* Context suggestion chips on chat typing */
.context-chips-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.context-chips-panel .context-label {
    font-size: 10px;
    color: var(--color-primary);
    font-weight: 600;
}

.context-chips-wrapper {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* Hide Scrollbar context chips */
.context-chips-wrapper::-webkit-scrollbar {
    display: none;
}

.context-chips-wrapper .chip {
    white-space: nowrap;
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.context-chips-wrapper .chip:hover {
    background-color: var(--color-brand-purple-light);
    color: var(--color-brand-purple);
    border-color: var(--color-brand-purple);
}

.chat-input-bar {
    display: flex;
    align-items: center;
    background-color: var(--bg-input);
    border: 1px solid var(--border-card);
    border-radius: 20px;
    padding: 4px 4px 4px 14px;
}

.chat-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
}

.chat-search-input::placeholder {
    color: rgba(161, 161, 170, 0.4);
}

.chat-send-btn {
    background-color: var(--color-primary);
    color: white;
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chat-send-btn span {
    pointer-events: none;
}

/* ==========================================================================
   3. INTEREST TAB UI (Bookmarks)
   ========================================================================== */
.interest-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 16px;
}

.interest-header .title {
    font-size: 16px;
    font-weight: 600;
}

.interest-toggle-bar {
    display: flex;
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 16px;
    border: 1px solid var(--border-card);
}

.toggle-btn {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active {
    background-color: var(--bg-input);
    color: white;
}

.interest-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 60px 20px;
}

.empty-state .material-symbols-rounded {
    font-size: 40px;
    color: rgba(161, 161, 170, 0.2);
}

.empty-state p {
    font-size: 12px;
    line-height: 1.5;
}

/* Saved Question Card Item */
.saved-question-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.saved-question-card:hover {
    transform: translateY(-1px);
}

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

.saved-card-q {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-title);
    flex: 1;
    line-height: 1.4;
}

.saved-card-btn-delete {
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
}

.saved-card-btn-delete:hover {
    color: var(--color-up);
}

.saved-card-btn-delete .material-symbols-rounded {
    font-size: 16px;
}

.saved-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(255,255,255,0.03);
    padding-top: 8px;
}

.saved-card-return {
    font-weight: 600;
}

/* ==========================================================================
   4. BOTTOM PREMIUM PROMO BANNER
   ========================================================================== */
.bottom-promo-banner {
    position: absolute;
    bottom: 74px; /* Fix just above bottom-nav */
    left: 0;
    right: 0;
    background-color: #1e1b4b;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 90;
}

.banner-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-badge {
    font-size: 9px;
    font-weight: 600;
    color: #c084fc;
}

.promo-text {
    font-size: 10px;
    color: #e2e8f0;
}

.promo-btn {
    background-color: #6366f1;
    color: white;
    border: none;
    outline: none;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================================================
   5. REBALANCING BADGE STYLE
   ========================================================================== */
.rebalance-badge-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.rebalance-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c084fc;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.1);
}

.rebalance-badge .pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #a78bfa;
    border-radius: 50%;
    display: inline-block;
    animation: badge-pulse 1.8s infinite ease-in-out;
}

@keyframes badge-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
    }
    70% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(167, 139, 250, 0);
    }
    100% {
        transform: scale(0.85);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
    }
}

/* ==========================================================================
   6. GOAL ACHIEVEMENT SECTION STYLE
   ========================================================================== */
.goal-achievement-section {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.04) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1.5px dashed rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.goal-achievement-section.achieved {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.12) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.08);
}

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

.goal-title {
    font-size: 11px;
    font-weight: 600;
    color: #fef08a; /* Soft bright gold */
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}

.goal-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.goal-badge.achieved {
    background-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.goal-badge.failed {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-desc-main {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.goal-desc-sub {
    font-size: 10px;
    color: var(--color-text-muted);
}

/* Progress bar for ongoing goals */
.goal-progress-container {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.goal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 1s ease-in-out;
}

/* Goal Achievement - Cost / Profit Summary Row */
.goal-cost-profit-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.goal-cp-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    gap: 3px;
}

.goal-cp-divider {
    width: 1px;
    background: rgba(251, 191, 36, 0.15);
    align-self: stretch;
}

.goal-cp-lbl {
    font-size: 9px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
}

.goal-cp-val {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

.goal-cp-val.profit-up {
    color: var(--color-profit-up);
}

.goal-cp-val.profit-down {
    color: var(--color-profit-down);
}

/* Smart DCA Badge Styles */
.smart-dca-badge-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
    margin-bottom: 6px;
}

.smart-dca-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 159, 67, 0.1);
    border: 1px solid rgba(255, 159, 67, 0.25);
    color: #ff9f43;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.pulse-dot-orange {
    width: 5px;
    height: 5px;
    background-color: #ff9f43;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.7);
    animation: pulse-orange 1.6s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(255, 159, 67, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 159, 67, 0);
    }
}

/* Interactive Date Selector Card Styles */
.interactive-date-card {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    padding: 16px 20px !important;
    border-radius: 4px 16px 16px 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

.date-card-desc {
    font-size: 12px;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Investment Mode Segmented Toggle */
.segmented-control {
    display: flex;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    margin-top: 4px;
}

.segmented-btn {
    flex: 1;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.segmented-btn.active {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2) !important;
}

/* Investment Amount Picker Wrapper */
.amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.amount-input-wrapper .currency-symbol {
    position: absolute;
    left: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
}

.amount-input-wrapper .unit-text {
    position: absolute;
    right: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.date-custom-form {
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-input-row {
    display: flex;
    gap: 10px;
}

.date-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.date-lbl {
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.date-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
}

.date-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.date-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, #6d28d9 100%) !important;
    border: none;
    border-radius: 10px;
    padding: 11px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.date-submit-btn:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
    transform: translateY(-1px);
}

.date-submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}

/* ==========================================================================
   SIDEBAR & SESSION COMPONENT STYLES
   ========================================================================== */
.app-sidebar {
    width: 260px;
    height: 100%;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.1);
}

.app-sidebar.active {
    transform: translateX(0);
}

.sidebar-header {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sidebar-close-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.sidebar-close-btn:hover {
    color: var(--color-primary);
    background-color: #f1f5f9;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    cursor: pointer;
}

.brand-text-korean {
    display: none;
}

.brand-text-english {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--color-brand-purple);
    letter-spacing: -0.8px;
    text-align: left;
    text-transform: uppercase;
}

.brand-logo {
    font-size: 20px;
}

.brand-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-brand-purple);
    font-family: 'Outfit', sans-serif;
}

.new-chat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: transparent;
    color: var(--color-brand-purple);
    border: 1px solid var(--color-brand-purple);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.new-chat-btn:hover {
    background-color: var(--color-brand-purple-light);
}

.sidebar-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.sidebar-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    padding: 0 4px;
    margin-bottom: 2px;
}

.sidebar-section-header span.material-symbols-rounded {
    font-size: 16px;
}

.sidebar-section-header .section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.session-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    gap: 10px;
    margin-bottom: 2px;
}

.session-item:hover {
    background-color: rgba(104, 37, 227, 0.03);
    color: var(--color-primary);
}

.session-item.active {
    background-color: rgba(104, 37, 227, 0.05);
    color: var(--color-primary);
    font-weight: 700;
    border-left: 3px solid var(--color-primary);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.session-item .session-title-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-item .session-time {
    font-size: 10.5px;
    color: #94a3b8;
    margin-left: auto;
    font-weight: 500;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.session-item:hover .session-time {
    opacity: 0;
}

.session-item .session-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.session-item:hover .session-actions {
    opacity: 1;
}

.session-item .btn-session-delete,
.session-item .btn-session-rename {
    color: #64748b;
    font-size: 16px;
    padding: 4px;
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.session-item .btn-session-delete:hover {
    color: #ef4444; /* Force red since var(--color-down) is blue */
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.session-item .btn-session-rename:hover {
    color: var(--color-primary);
    background-color: rgba(104, 37, 227, 0.04);
    border-color: rgba(104, 37, 227, 0.2);
}

.session-item .btn-session-delete span,
.session-item .btn-session-rename span {
    font-size: 15px;
}

.session-rename-input {
    flex: 1;
    background-color: #ffffff;
    border: 1.5px solid var(--color-primary);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1e293b;
    outline: none;
    font-family: inherit;
    width: 100%;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Delete confirmation overlay for session items */
.session-item .delete-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.98);
}

.session-item.confirm-delete .delete-confirm-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.delete-confirm-overlay .confirm-msg {
    font-size: 13px;
    font-weight: 700;
    color: #991b1b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.delete-confirm-overlay .confirm-buttons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.delete-confirm-overlay button {
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.delete-confirm-overlay .btn-confirm-yes {
    background-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

.delete-confirm-overlay .btn-confirm-yes:hover {
    background-color: #dc2626;
    transform: translateY(-0.5px);
}

.delete-confirm-overlay .btn-confirm-no {
    background-color: #ffffff;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.delete-confirm-overlay .btn-confirm-no:hover {
    background-color: #f3f4f6;
    color: #1f2937;
    transform: translateY(-0.5px);
}

/* Sidebar Session Avatars */
.session-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.session-avatar span.material-symbols-rounded {
    font-size: 16px;
}

.avatar-vs {
    background-color: #f97316;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: -0.5px;
}

.avatar-bitcoin {
    background-color: #f59e0b;
    color: #ffffff;
    font-size: 15px;
}

.avatar-nvidia {
    background-color: #f0fdf4;
    color: #16a34a;
    border: 1px solid #dcfce7;
}

.avatar-apple {
    background-color: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

.avatar-samsung {
    background-color: #f1f5f9;
    color: #1e3a8a;
    border: 1px solid #e2e8f0;
}

.avatar-building {
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.avatar-tesla {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}

.avatar-index {
    background-color: #faf5ff;
    color: #7c3aed;
    border: 1px solid #f3e8ff;
}

.avatar-default {
    background-color: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #f8fafc;
}

.promo-banner-sidebar {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.1) 100%);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.promo-title-sidebar {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand-purple);
}

.promo-desc-sidebar {
    font-size: 10px;
    color: #64748b;
}

.promo-btn-sidebar {
    background-color: var(--color-brand-purple);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.promo-btn-sidebar:hover {
    opacity: 0.9;
}

.user-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.user-profile-row span.material-symbols-rounded {
    font-size: 20px;
}

/* ==========================================================================
   APP MAIN PANEL & LAYOUT
   ========================================================================== */
.app-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.main-header {
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    z-index: 10;
}

.menu-toggle-btn {
    background: none;
    border: none;
    color: #334155; /* Dark gray for white header menu icon */
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.menu-toggle-btn:hover {
    color: var(--color-primary);
    background-color: #f1f5f9;
    border-radius: 8px;
}

.current-session-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.main-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Mathematically prevents horizontal scroll swaying on mobile devices */
    display: flex;
    flex-direction: column;
    position: relative;
}

.home-starting-view {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-x: hidden; /* Double safety lock to prevent horizontal scroll bounds on mobile screen */
}

.chat-active-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 140px; /* Floating input buffer */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-main-panel .chat-input-bar {
    max-width: 720px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg-input);
    border: 1px solid var(--border-card);
    border-radius: 24px;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.app-main-panel .chat-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 0;
}

/* Sidebar Mobile Backdrop */
.sidebar-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.4);
    z-index: 99;
    display: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sidebar-backdrop.active {
    display: block;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Mobile Overlay Sidebar)
   ========================================================================== */
body {
    overflow: hidden;
}

.home-starting-view {
    padding: 24px 16px !important;
}

.chat-history {
    padding: 16px !important;
    padding-bottom: 120px !important;
}

.app-main-panel .chat-input-section {
    padding: 12px 16px !important;
}

/* Sidebar override for saved question card */
.app-sidebar .saved-question-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    gap: 4px;
}
.app-sidebar .saved-question-card:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transform: none;
}
.app-sidebar .saved-card-q {
    font-size: 11.5px;
    font-weight: 600;
    color: #e4e4e7;
}
.app-sidebar .saved-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #71717a;
    margin-top: 4px;
}
.app-sidebar .saved-card-btn-delete span {
    font-size: 14px;
}

@media (min-width: 769px) {
    .chat-history {
        padding-left: max(16px, calc((100% - 720px) / 2)) !important;
        padding-right: max(16px, calc((100% - 720px) / 2)) !important;
    }
    .context-chips-panel {
        width: 100% !important;
        max-width: 720px !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   7. SETTINGS MODAL STYLES
   ========================================================================== */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.settings-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.settings-modal .modal-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: rgba(24, 24, 27, 0.85); /* Zinc-900 transparent */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modal-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

.settings-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.settings-modal .modal-title span.material-symbols-rounded {
    color: var(--color-primary);
}

.settings-modal .modal-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.settings-modal .modal-close-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.settings-modal .modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.settings-modal .settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-modal .settings-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #f4f4f5;
    letter-spacing: -0.2px;
}

.settings-modal .settings-desc {
    font-size: 11px;
    color: #a1a1aa;
    line-height: 1.5;
}

.settings-modal .api-key-input-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.settings-modal .settings-input {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 12px;
    outline: none;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s;
}

.settings-modal .settings-input:focus {
    border-color: rgba(255, 159, 67, 0.4);
}

.settings-modal .btn-save-key {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.settings-modal .btn-save-key:hover {
    opacity: 0.9;
}

/* Sync Panel Styles */
.settings-modal .sync-panel {
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-modal .sync-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.settings-modal .sync-status-lbl {
    color: #a1a1aa;
}

.settings-modal .sync-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #e4e4e7;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-modal .sync-status-badge.syncing {
    background-color: rgba(255, 159, 67, 0.15);
    color: #ff9f43;
    border-color: rgba(255, 159, 67, 0.25);
}

.settings-modal .sync-status-badge.completed {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}

.settings-modal .sync-progress-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-modal .sync-progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.settings-modal .sync-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff9f43 0%, #ff5f6d 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.settings-modal .sync-progress-text {
    font-size: 10px;
    color: #71717a;
    font-weight: 500;
}

.settings-modal .sync-logs-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-modal .sync-logs-title {
    font-size: 10px;
    font-weight: 600;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.settings-modal .sync-logs-content {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 10px;
    font-family: monospace;
    font-size: 10px;
    color: #a1a1aa;
    height: 90px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-modal .sync-logs-content::-webkit-scrollbar {
    width: 4px;
}

.settings-modal .sync-logs-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.settings-modal .btn-start-sync {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.15) 0%, rgba(255, 95, 109, 0.15) 100%);
    border: 1px solid rgba(255, 159, 67, 0.25);
    color: #ff9f43;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.settings-modal .btn-start-sync:hover {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.25) 0%, rgba(255, 95, 109, 0.25) 100%);
    border-color: rgba(255, 159, 67, 0.4);
}

.settings-modal .btn-start-sync:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   8. SYNC COMPLETE TOAST NOTIFICATION STYLES
   ========================================================================== */
.sync-complete-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(24, 24, 27, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(16, 185, 129, 0.3); /* Green border */
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 320px;
    pointer-events: auto;
}

.sync-complete-toast.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.sync-complete-toast .toast-icon {
    font-size: 24px;
}

.sync-complete-toast .toast-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sync-complete-toast .toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.sync-complete-toast .toast-desc {
    font-size: 11px;
    color: #a1a1aa;
    line-height: 1.4;
}

/* ==========================================
   4. USER FEEDBACK UI STYLE
   ========================================== */
.card-feedback-bar {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0; /* Light slate border */
    gap: 8px;
}

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

.feedback-prompt-text {
    font-size: 11px;
    color: #64748b; /* Slate-500 */
    font-weight: 500;
}

.feedback-btn-group {
    display: flex;
    gap: 8px;
}

.btn-feedback-action {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc; /* Slate-50 */
    border: 1px solid #e2e8f0; /* Slate-200 */
    color: #475569; /* Slate-600 */
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-feedback-action span.material-symbols-rounded {
    font-size: 14px;
}

.btn-feedback-action:hover {
    background: #f1f5f9; /* Slate-100 */
    color: var(--color-brand-purple);
    border-color: var(--color-brand-purple-glow);
}

.btn-feedback-action.like-selected {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

.btn-feedback-action.dislike-selected {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.feedback-comment-form {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    animation: fadeInSlideDown 0.3s ease forwards;
}

.feedback-comment-input {
    flex: 1;
    background: #ffffff;
    border: 1px solid #cbd5e1; /* Slate-300 */
    border-radius: 6px;
    padding: 6px 10px;
    color: #1e293b; /* Slate-800 */
    font-size: 11px;
    outline: none;
    transition: border-color 0.2s;
}

.feedback-comment-input:focus {
    border-color: var(--color-brand-purple);
}

.btn-feedback-submit {
    background: var(--color-brand-purple);
    border: 1px solid var(--color-brand-purple);
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-feedback-submit:hover {
    background: #6d28d9;
}

.feedback-success-msg {
    font-size: 11px;
    color: var(--color-brand-purple);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

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

/* ==========================================================================
   KOZUBU BRAND PREMIUM Overhaul Design styling
   ========================================================================== */

:root {
    --color-brand-purple: #7c3aed;
    --color-brand-purple-glow: rgba(124, 58, 237, 0.15);
    --color-brand-purple-light: #f5f3ff;
}

/* Header Branding styling */
.header-brand-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--color-brand-purple);
    letter-spacing: -0.8px;
    flex: 1;
    text-align: left;
    padding-left: 12px;
    cursor: pointer;
    text-transform: uppercase;
}

@media (min-width: 769px) {
    .header-brand-logo {
        padding-left: 0;
    }
}

.header-session-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b; /* Slate-800 */
    flex: 1;
    text-align: left;
    padding-left: 12px;
    display: none; /* Hidden on starting view by default on all screens */
}

body.chat-active .header-session-title {
    display: block !important; /* Show session title in active chat */
}

@media (min-width: 769px) {
    .header-session-title {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    body.chat-active .header-brand-logo {
        display: block !important;
        flex: none;
    }
    body.chat-active .header-session-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: 140px;
        text-align: center;
        padding-left: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
    }
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; /* Always push actions to the far right */
}

.google-login-btn {
    display: none !important; /* 로그인 기능 비활성화로 인한 숨김 처리 */
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 1px solid var(--color-brand-purple);
    border-radius: 8px;
    padding: 6px 14px;
    color: var(--color-brand-purple);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    letter-spacing: -0.2px;
}

.google-login-btn:hover {
    background-color: var(--color-brand-purple-light);
}

.google-login-btn:active {
    background-color: rgba(124, 58, 237, 0.1);
}

.google-icon {
    display: block;
    flex-shrink: 0;
}

/* Center Toast Notification */
.center-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background-color: rgba(15, 23, 42, 0.95); /* Deep slate-900 with high opacity */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 320px;
    width: 85%;
    text-align: center;
    box-sizing: border-box;
}

.center-toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.center-toast-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(245, 158, 11, 0.15); /* Light translucent orange */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    margin-bottom: 2px;
}

.center-toast-icon-box span.material-symbols-rounded {
    font-size: 26px;
}

.center-toast-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.4;
    letter-spacing: -0.3px;
    word-break: keep-all;
}

.center-toast-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
    word-break: keep-all;
}

.header-icon-btn {
    background: none;
    border: none;
    color: #4b5563; /* Gray-600 */
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.header-icon-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.header-icon-btn span.material-symbols-rounded {
    font-size: 20px;
}

/* Home starting landing view layout */
.home-starting-view {
    max-width: 100% !important;
    width: 100%;
    padding: 30px 20px 30px 20px !important; /* Adjusted from 100px since bottom nav is removed */
    display: flex;
    flex-direction: column;
    gap: 28px !important;
    background: radial-gradient(circle at 70% 15%, #f8f5ff 0%, #ffffff 34%, #fbfbff 100%) !important;
    min-height: 100%;
    overflow-y: auto;
}

/* Center all landing layout contents up to 720px dynamically and prevent flexbox squeezing */
.home-hero-section,
.pill-search-container,
.suggested-chips-scroll,
.trending-simulations-section,
.about-kozubu-section,
.faq-pills-section {
    width: 100%;
    max-width: 720px !important;
    margin: 0 auto;
    flex-shrink: 0 !important; /* Critical to prevent vertical squeezing on various viewports */
}

/* Starting view sections */
.home-hero-section {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 196px;
    padding: 5px 0 0;
    margin-top: 10px;
}

.hero-text-content {
    position: relative;
    z-index: 3;
    max-width: 190px; /* Mathematically calculated safe zone to prevent overlap with the mascot's magnifying glass */
}

.hero-title-large {
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1e1b4b; /* Deep Indigo */
    line-height: 1.35;
    letter-spacing: -0.6px;
}

.highlight-purple {
    color: var(--color-brand-purple);
}

.hero-desc-sub {
    font-size: 13px;
    color: #64748b; /* Slate-500 */
    line-height: 1.5;
    margin-top: 10px;
    font-weight: 400;
}

.hero-character-wrapper {
    position: absolute;
    right: -5px;
    bottom: 58px;
    width: 178px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(124, 58, 237, 0.12));
}

/* Sparkling Dynamic Star Effects */
.hero-star-effect {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.35));
}

.hero-star-effect.star-left {
    width: 11px;
    height: 11px;
    left: 8px;
    top: 28px;
    animation: twinkle-left 2.5s ease-in-out infinite;
}

.hero-star-effect.star-right {
    width: 11px;
    height: 11px;
    right: 22px;
    top: 62px;
    animation: twinkle-right 3s ease-in-out infinite;
}

/* Twinkling In-Place Sparkle Animations */
@keyframes twinkle-left {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.35;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.5));
    }
}

@keyframes twinkle-right {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 2px 12px rgba(168, 85, 247, 0.6));
    }
}


@media (min-width: 769px) {
    .home-hero-section {
        min-height: 200px;
        padding-top: 5px;
    }
    .hero-text-content {
        max-width: 440px;
    }
    .hero-character-wrapper {
        width: 240px;
        height: auto;
        right: -30px;
        top: auto;
        bottom: 48px;
    }
    .hero-star-effect.star-left {
        width: 15px;
        height: 15px;
        left: 10px;
        top: 38px;
    }
    .hero-star-effect.star-right {
        width: 15px;
        height: 15px;
        right: 30px;
        top: 82px;
    }
    .pill-search-container {
        height: 62px !important;
    }
    .trending-cards-scroll {
        overflow-x: visible;
        gap: 16px;
        padding-bottom: 2px;
    }
    .trending-card {
        flex: 1 1 0px;
        width: auto;
        height: 185px;
    }
}

/* Rounded Pill Search Container */
.pill-search-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 58px;
    background: #ffffff;
    border: 1.5px solid #D9B7FF; /* Elegant light purple border from mockup */
    border-radius: 28px;
    padding: 5px 5px 5px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 22px rgba(112,48,234,.13);
    transition: all 0.25s ease;
}

.pill-search-container:focus-within {
    border-color: var(--color-brand-purple);
    box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.15), 0 8px 10px -6px rgba(124, 58, 237, 0.08);
}

.search-left-icon {
    color: #94a3b8;
    margin-right: 0;
    font-size: 20px;
}

.pill-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #1e1b4b;
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 0;
}

.pill-search-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.pill-search-submit-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-brand-purple);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

.pill-search-submit-btn:hover {
    background-color: #6d28d9;
}

.pill-search-submit-btn:active {
    transform: scale(0.95);
}

/* Suggested chips horizontal scroll panel */
.suggested-chips-scroll {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: -10px;
    padding-bottom: 8px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
}

.suggested-chips-scroll::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.suggested-chips-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 40px 2px 0; /* Right padding to offset the fade mask zone at the end */
}

.suggested-label {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px 6px 0;
    margin-right: 4px;
    user-select: none;
    flex-shrink: 0;
}

.suggested-chip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 3px 10px 3px 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.suggested-chip-logo {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.suggested-chip:hover {
    border-color: var(--color-brand-purple);
    color: var(--color-brand-purple);
}

.suggested-chip.active {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Trending simulations card layout */
.trending-simulations-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.trending-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-more-trending {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    outline: none;
}

.btn-more-trending:hover {
    color: var(--color-brand-purple);
}

.font-icon-sm {
    font-size: 14px !important;
}

/* Horizontal scrollable cards container */
.trending-cards-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 14px 2px;
    scrollbar-width: none;
}

.trending-cards-scroll::-webkit-scrollbar {
    display: none;
}

.trending-card {
    flex-shrink: 0;
    width: 185px;
    height: 175px; /* 모바일 카드 높이 지정 */
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 16px 14px 14px 14px;
    box-shadow: 0 10px 18px -4px rgba(124, 58, 237, 0.05), 0 4px 6px -2px rgba(124, 58, 237, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
    text-align: left;
    position: relative; /* 자식 absolute 배치를 위한 컨테이너 설정 */
    overflow: hidden; /* 차트 캔버스 둥근 테두리 클리핑 */
}

.trending-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -5px rgba(124, 58, 237, 0.1), 0 8px 12px -6px rgba(124, 58, 237, 0.04);
}

.trending-card:active {
    transform: scale(0.98);
}

.card-top-row,
.card-principal-lbl,
.card-price-value,
.card-price-change {
    position: relative;
    z-index: 2; /* 차트보다 상위에 표시되도록 설정 */
}

.card-top-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.card-asset-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.btc-icon { background: #ff9f43; }
.nvda-icon { background: #76b900; }
.aapl-icon { background: #000000; }

.card-asset-title {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    line-height: 1.45;
}

.card-principal-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 2px;
}

.card-price-value {
    font-size: 26px;
    font-weight: 400;
    color: #1e293b;
    line-height: 1.2;
    margin-top: 2px;
}

.card-price-change {
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

.card-chart-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%; /* 카드 세로의 75-80% 차지 */
    margin: 0;
    z-index: 1; /* 텍스트 아래 레이어 배치 */
    pointer-events: none; /* 카드 클릭 인터랙션 통과 허용 */
}

.mini-sparkline-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Feature grid section */
.about-kozubu-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    text-align: left;
}

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

.about-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.006);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}

.about-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-icon-circle span.material-symbols-rounded {
    font-size: 18px;
}

/* Icon bg styles corresponding to mockup colors */
.bg-purple-1 { background-color: #f5f3ff; }
.bg-purple-2 { background-color: #f3e8ff; }
.bg-purple-3 { background-color: #fae8ff; }
.bg-purple-4 { background-color: #ede9fe; }

.text-purple {
    color: var(--color-brand-purple);
}

.about-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
}

.about-card-desc {
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.4;
    font-weight: 500;
}

/* FAQ Pills grid section */
.faq-pills-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.faq-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-more-faq {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.btn-more-faq:hover {
    color: var(--color-brand-purple);
}

.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01);
    line-height: 1.35;
    transition: all 0.2s;
    text-align: left;
}

.faq-pill:hover {
    border-color: var(--color-brand-purple);
    color: var(--color-brand-purple);
    background-color: var(--color-brand-purple-light);
}

.faq-pill:active {
    transform: scale(0.99);
}

/* Floating Bottom Navigation Tab Bar styling - Completely Hidden */
.app-bottom-nav {
    display: none !important;
}

.nav-tab {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8; /* Slate-400 */
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    flex: 1;
}

.nav-tab span.material-symbols-rounded {
    font-size: 20px;
}

.nav-tab .tab-label {
    font-size: 9.5px;
    font-weight: 500;
    margin-top: 3px;
}

.nav-tab:hover {
    color: #64748b;
}

.nav-tab.active {
    color: var(--color-brand-purple);
}

/* Raised Center Tab Button */
.nav-tab.raise-center-btn {
    position: relative;
    top: -12px;
    flex-grow: 1.2;
}

.plus-circle-raised {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-brand-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s, background-color 0.2s;
}

.plus-circle-raised span.material-symbols-rounded {
    font-size: 22px;
}

.nav-tab.raise-center-btn:hover .plus-circle-raised {
    background-color: #6d28d9;
    transform: translateY(-2px);
}

.nav-tab.raise-center-btn:active .plus-circle-raised {
    transform: translateY(1px);
}

.nav-tab .text-raised {
    color: var(--color-brand-purple);
    font-weight: 700;
}

/* ==========================================================================
   MOCKUP SPECIFIC REFINED STYLING (100% Visual Accuracy)
   ========================================================================== */

/* Tiny mascot head in header branding logo */
.header-brand-mascot {
    display: none !important;
}

/* Scrolling suggested tag emojis/logos */
.chip-logo {
    font-weight: 700;
    margin-right: 4px;
    font-size: 13px;
}
.chip-logo.btc { color: #f59e0b; }
.chip-logo.nvda { color: #10b981; }
.chip-logo.aapl { color: #64748b; }

/* Unified lavender feature card grid row style */
.about-unified-container {
    background-color: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 20px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-grid-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.about-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.about-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.15);
}

.about-icon-badge span {
    font-size: 20px;
}

.about-icon-badge.bg-badge-1 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.about-icon-badge.bg-badge-2 { background: linear-gradient(135deg, #6ee7b7, #059669); }
.about-icon-badge.bg-badge-3 { background: linear-gradient(135deg, #f472b6, #db2777); }
.about-icon-badge.bg-badge-4 { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.about-icon-image {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.08);
}

.about-icon-image:hover {
    transform: scale(1.08);
}

.about-item-title {
    font-size: 11px;
    font-weight: 600;
    color: #1e1b4b; /* Indigo */
    margin-top: 2px;
}

.about-item-desc {
    font-size: 9px;
    color: #64748b;
    line-height: 1.3;
    font-weight: 400;
}

/* 2-Column Grid FAQ pill structures */
.faq-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.faq-pill-styled {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.faq-pill-styled:hover {
    border-color: var(--color-brand-purple);
    background-color: var(--color-brand-purple-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.05);
}

.faq-pill-search-icon {
    font-size: 16px;
    color: var(--color-brand-purple);
    flex-shrink: 0;
}

.faq-pill-text {
    font-size: 10.5px;
    font-weight: 500;
    color: #475569;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   CHAT ACTIVE VIEW & YIELD CARD OVERHAUL (100% Mockup Alignment)
   ========================================================================== */

/* Main Chat Area Background Override */
#chat-active-view {
    background-color: #F9FAFC !important;
}

.chat-history {
    background-color: #F9FAFC !important;
    padding-bottom: 160px !important; /* Extra padding for sticky bottom input */
}

/* User Chat Bubble Override */
.chat-bubble.user {
    align-self: flex-end;
    background-color: #ffffff !important;
    border: 1.5px solid var(--color-primary) !important;
    color: #1e293b !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.05) !important;
    margin-bottom: 8px !important;
}

.chat-bubble.user .bubble-time {
    color: #94a3b8 !important;
    font-size: 10px !important;
    margin-top: 4px;
    text-align: right;
}

/* AI Profile and Avatar in Chat Bubble */
.ai-profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 14px;
}

.ai-avatar-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    background-color: #ffffff !important;
    transform: scale(1.22) !important;
}

.ai-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.ai-time {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-left: 4px;
}

/* AI Message Bubble Intro Text (No box background) */
.bubble-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.report-intro-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    margin-left: 4px;
    margin-bottom: 14px !important;
    word-break: keep-all;
}

/* The Premium yield report card layout */
.premium-report-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 18px 14px !important;
    box-shadow: 0 10px 30px rgba(104, 37, 227, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Top stats row: three columns */
.premium-metrics-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.premium-metric-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.premium-metric-col:not(:last-child) {
    border-right: 1px solid #e2e8f0 !important;
    padding-right: 10px !important;
    margin-right: 2px !important;
}

.premium-lbl {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.premium-val {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
}

/* Final value gets larger font size and brand purple color */
.premium-val.val-purple {
    font-size: 17.5px !important;
    color: #6825E3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
}

.premium-val.metric-return {
    color: #6825E3 !important;
}

/* Sub-values underneath metrics */
.premium-sub-val {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}

.premium-sub-val.val-purple-light {
    color: #8b5cf6 !important;
}

.premium-sub-val.metric-return-multiplier {
    color: #8b5cf6 !important;
}

/* Lavender Period Banner */
.premium-period-banner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #F4EEFD !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

.premium-period-banner .banner-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex: 1 !important;
    border-right: 1px solid #d8b4fe !important;
    padding-right: 12px !important;
}

.premium-period-banner .banner-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex: 1 !important;
    padding-left: 12px !important;
}

.premium-period-banner .purple-icon {
    color: #6825E3 !important;
    font-size: 14px !important;
}

.premium-period-banner .banner-highlight {
    color: #0f172a !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin-left: 6px !important;
}

/* Chart Title and Container override */
.premium-chart-section {
    margin-bottom: 22px !important;
}

.premium-chart-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 12px 0 !important;
}

.report-chart-container {
    position: relative !important;
    width: auto !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    height: 260px !important;
}

.report-canvas-chart {
    width: 100% !important;
    height: 260px !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 4 Sub-Cards Grid */
.premium-sub-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.sub-card {
    border-radius: 14px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
    border: none !important;
}

.sub-card-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.sub-card-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.sub-card-subtext {
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Card BG colors */
.card-bg-purple {
    background-color: #F6F3FE !important;
}
.card-bg-rose {
    background-color: #FFF0F3 !important;
}
.card-bg-orange {
    background-color: #FFF9E6 !important;
}
.card-bg-green {
    background-color: #EDFBF4 !important;
}

/* Disclaimers list */
.premium-disclaimers {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.premium-disclaimers li {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* Action Links on bottom right */
.premium-card-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-right: 4px !important;
}

.action-link-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #6825E3 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: opacity 0.2s !important;
}

.action-link-btn:hover {
    opacity: 0.8 !important;
}

.action-link-btn span {
    font-size: 16px !important;
}

/* Bookmarks save button in single card is hidden or adjusted if needed */
.action-link-btn.btn-bookmark-new {
    display: none !important; /* Hidden in screenshot, or kept as small link */
}

/* Quick replies / suggested questions scroll override */
.premium-suggested-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.premium-suggested-grid .suggested-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
}

.premium-suggested-grid .suggested-pill:hover {
    border-color: #6825E3 !important;
    background-color: #F9F8FD !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(104, 37, 227, 0.06) !important;
}

.premium-suggested-grid .suggested-pill .pill-left-content {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    text-align: left !important;
}

.premium-suggested-grid .suggested-pill .pill-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
}

.premium-suggested-grid .suggested-pill .pill-badge.badge-blue {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.premium-suggested-grid .suggested-pill .pill-badge.badge-purple {
    background-color: #faf5ff !important;
    color: #6825e3 !important;
    border: 1px solid #e9d5ff !important;
}

.premium-suggested-grid .suggested-pill .pill-badge.badge-orange {
    background-color: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #ffedd5 !important;
}

.premium-suggested-grid .suggested-pill .pill-badge.badge-green {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.premium-suggested-grid .suggested-pill .pill-text {
    color: #475569 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.premium-suggested-grid .suggested-pill .pill-text strong {
    color: #1e293b !important;
    font-weight: 700 !important;
}

.premium-suggested-grid .suggested-pill span.material-symbols-rounded {
    font-size: 18px !important;
    color: #6825E3 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.premium-suggested-grid .suggested-pill:hover span.material-symbols-rounded {
    transform: translateX(4px) !important;
}

/* Chat bottom input section & bar styling */
.chat-input-section {
    background: linear-gradient(180deg, rgba(249, 250, 252, 0) 0%, rgba(249, 250, 252, 1) 40%) !important;
    padding: 16px 20px 24px 20px !important;
}

.chat-input-bar {
    border: 1.5px solid #ddd6fe !important; /* purple border */
    border-radius: 28px !important;
    background-color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(104, 37, 227, 0.04) !important;
    padding: 5px 5px 5px 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    position: relative !important;
}

.chat-input-bar:focus-within {
    border-color: #6825E3 !important;
    box-shadow: 0 6px 20px rgba(104, 37, 227, 0.1) !important;
}

.chat-search-input {
    font-size: 13.5px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
}

.chat-search-input::placeholder {
    color: #94a3b8 !important;
}

.chat-send-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #6825E3 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(104, 37, 227, 0.3) !important;
    transition: background-color 0.2s, transform 0.2s !important;
}

.chat-send-btn:hover {
    background-color: #581cd8 !important;
}

.chat-send-btn:active {
    transform: scale(0.95) !important;
}

.chat-send-btn span {
    font-size: 18px !important;
}

/* Floating capsule tooltip on chart */
.chart-tooltip-floating {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   8. RESPONSIVE DESKTOP LAYOUT OVERHAUL (Screens >= 769px)
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. Unlock full width of screen */
    .app-layout {
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    /* 2. Side-by-side static sidebar placement */
    .app-sidebar {
        position: relative !important;
        transform: translateX(0) !important;
        box-shadow: none !important;
        border-right: 1px solid #e2e8f0 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    }

    .app-sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        border-right: none !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transform: translateX(-100%) !important;
    }

    /* 3. Brand logo overrides (Kozubu left only, hide right panel logo) */
    .brand-text-korean {
        display: none !important;
    }

    .brand-text-english {
        display: block !important;
        font-family: 'Outfit', sans-serif;
        font-size: 21px;
        font-weight: 700;
        color: var(--color-brand-purple);
        letter-spacing: -0.8px;
        text-align: left;
        text-transform: uppercase;
    }

    .header-brand-logo {
        display: none !important; /* Hidden by default when sidebar is open on PC */
    }

    .app-sidebar.collapsed ~ .app-main-panel .header-brand-logo {
        display: flex !important; /* Show logo in main header when sidebar is collapsed */
    }
    .app-sidebar.collapsed ~ .app-main-panel .header-brand-logo .header-brand-mascot {
        display: none !important; /* Hide mascot image next to logo when sidebar is collapsed */
    }

    /* 4. Show sidebar toggle on PC/Desktop only when collapsed, and hide mobile-only bars */
    .menu-toggle-btn {
        display: none !important;
    }

    .app-sidebar.collapsed ~ .app-main-panel .menu-toggle-btn {
        display: flex !important;
        margin-right: 12px;
    }

    .app-bottom-nav {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

/* ==========================================================================
   9. PREMIUM BACKTEST RESULT DASHBOARD OVERHAUL
   ========================================================================== */
.premium-hero-banner {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

@media (max-width: 960px) {
    .premium-hero-banner {
        flex-direction: column;
        gap: 12px;
    }
}

.hero-left-box {
    flex: 1.25;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.hero-badge {
    align-self: flex-start;
    background-color: #f5f3ff;
    color: var(--color-primary);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(124, 58, 237, 0.1);
}

.hero-main-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.hero-mascot-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.hero-headline {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.5;
    margin: 0;
}

.highlight-purple-text {
    color: var(--color-primary);
    font-weight: 900;
}

.hero-capsules {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-capsule {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.hero-capsule .text-purple {
    color: var(--color-primary);
    font-weight: 700;
}

.hero-right-card {
    flex: 1;
    background: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(76, 29, 149, 0.15), 0 8px 10px -6px rgba(76, 29, 149, 0.15);
}

.hero-right-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 18px;
    gap: 8px;
}

.hero-stat-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-stat-lbl {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.hero-stat-val {
    font-size: 14.5px;
    color: #ffffff;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.2px;
}

.hero-stat-val.text-yellow {
    color: #facc15;
    font-size: 17.5px;
    font-weight: 800;
}

.hero-arrow-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px !important;
}

.hero-growth-badge {
    align-self: center;
    background: rgba(250, 204, 21, 0.15);
    border: 1px solid rgba(250, 204, 21, 0.3);
    color: #facc15;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 20px;
    text-align: center;
    width: 100%;
    letter-spacing: -0.2px;
}

/* Second Row (Metrics Grid Row Override) */
.premium-metrics-row {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 8px !important;
    margin-bottom: 20px !important;
    width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

@media (max-width: 640px) {
    .premium-metrics-row {
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Allow graceful wrap if text is extremely large (accessibility zoom) */
        justify-content: space-between !important;
        gap: 6px 4px !important; /* Horizontal and vertical gaps */
        padding: 12px 6px !important;
    }
}

.premium-metric-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-right: 1px solid #f1f5f9;
    text-align: center !important;
}

.premium-metric-col:last-child {
    border-right: none;
}

@media (max-width: 640px) {
    .premium-metric-col {
        flex: 1 1 90px !important; /* Allow growth, shrinkage, and safe wrapping width threshold */
        min-width: 80px !important;
        align-items: center !important;
        justify-content: center !important;
        border-right: 1px solid #f1f5f9 !important;
        border-bottom: none !important;
        padding-bottom: 4px !important;
        padding-top: 4px !important;
        padding-right: 2px !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
    .premium-metric-col:last-child {
        border-right: none !important;
        padding-right: 0 !important;
    }
    /* Robust accessibility font scaling using CSS clamp() */
    .premium-lbl {
        font-size: clamp(8.5px, 2.5vw, 10px) !important;
        margin-bottom: 4px !important;
    }
    .premium-val {
        font-size: clamp(10.5px, 3.2vw, 12.5px) !important;
    }
    .premium-val.val-purple {
        font-size: clamp(12px, 3.6vw, 14.5px) !important;
    }
    .premium-sub-val {
        font-size: clamp(8.5px, 2.5vw, 10px) !important;
    }
}

/* Sub-Cards Color Schemes */
.sub-card.card-bg-gold {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
}
.sub-card.card-bg-gold .sub-card-title {
    color: #b45309 !important;
}
.sub-card.card-bg-gold .sub-card-value {
    color: #78350f !important;
}

.sub-card.card-bg-red {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}
.sub-card.card-bg-red .sub-card-title {
    color: #b91c1c !important;
}
.sub-card.card-bg-red .sub-card-value {
    color: #991b1b !important;
}

.sub-card.card-bg-green {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}
.sub-card.card-bg-green .sub-card-title {
    color: #15803d !important;
}
.sub-card.card-bg-green .sub-card-value {
    color: #166534 !important;
}

.sub-card.card-bg-blue {
    background-color: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
}
.sub-card.card-bg-blue .sub-card-title {
    color: #1d4ed8 !important;
}
.sub-card.card-bg-blue .sub-card-value {
    color: #1e40af !important;
}

/* Fifth Row (Detailed Sub-metrics Row) */
.premium-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

@media (max-width: 960px) {
    .premium-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .premium-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding-top: 12px !important;
        margin-top: 12px !important;
    }
    .footer-col {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
    .footer-icon {
        font-size: 18px !important;
    }
    .footer-lbl {
        font-size: 9px !important;
    }
    .footer-val {
        font-size: 11.5px !important;
    }
    .footer-sub {
        font-size: 9px !important;
    }
}

.footer-col {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.01);
}

.footer-icon {
    font-size: 24px !important;
    color: var(--color-primary);
}

.footer-icon.text-purple { color: #7c3aed; }
.footer-icon.text-orange { color: #f97316; }
.footer-icon.text-blue { color: #3b82f6; }
.footer-icon.text-green { color: #22c55e; }

.footer-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-lbl {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
}

.footer-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
}

.footer-sub {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 500;
}

/* --- Collapsible Monthly Breakdown & Metrics styles --- */
.premium-monthly-breakdown, .premium-metrics-collapse {
  margin-top: 15px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  width: 100%;
}

.btn-toggle-monthly, .btn-toggle-metrics {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: color 0.2s ease;
  outline: none;
}

.btn-toggle-monthly:hover, .btn-toggle-metrics:hover {
  color: #6825E3;
}

.btn-toggle-monthly .toggle-icon, .btn-toggle-metrics .toggle-icon {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.btn-toggle-monthly.active .toggle-icon, .btn-toggle-metrics.active .toggle-icon {
  transform: rotate(180deg);
}

.monthly-table-wrapper {
  margin-top: 12px;
  max-height: 250px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  width: 100%;
}

/* Custom scrollbar for monthly table wrapper */
.monthly-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.monthly-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.monthly-table-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.monthly-breakdown-table {
  width: 100%;
  border-collapse: separate; /* Required for sticky border styling consistency */
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
}

.monthly-breakdown-table th, 
.monthly-breakdown-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap; /* Prevent awkward wrapping inside cells when table shrinks */
}

.monthly-breakdown-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 #e2e8f0;
}

/* Sticky First Column for horizontal scrolling (Year/Month) */
.monthly-breakdown-table th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 20; /* Above all other elements */
  background: #f8fafc;
  border-right: 1.5px solid #e2e8f0;
}

.monthly-breakdown-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2; /* Below th but above other tds */
  background: #ffffff;
  border-right: 1.5px solid #e2e8f0;
}

.monthly-breakdown-table tr:hover td:first-child {
  background: #f8fafc;
}

.monthly-breakdown-table td {
  color: #334155;
}

.monthly-breakdown-table tr:hover td {
  background: #f8fafc;
}

.monthly-breakdown-table .text-rose {
  color: #ef4444;
  font-weight: 500;
}

.monthly-breakdown-table .text-blue {
  color: #3b82f6;
  font-weight: 500;
}

/* ==========================================================================
   10. PREMIUM COMPARISON RESULT DASHBOARD OVERHAUL
   ========================================================================== */
.premium-compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}

@media (max-width: 960px) {
    .premium-compare-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.compare-intro-text {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Noto Sans KR', sans-serif;
}

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

.compare-header-action-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.compare-header-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(124, 58, 237, 0.02);
    transform: translateY(-1px);
}

/* Side-by-Side VS Banner */
.premium-compare-banner {
    display: flex;
    align-items: stretch;
    position: relative;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

@media (max-width: 960px) {
    .premium-compare-banner {
        flex-direction: column;
        gap: 24px;
    }
}

.compare-asset-card {
    flex: 1;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    border: 1.5px solid #e2e8f0;
    padding: 0 !important;
}

.compare-card-top-section {
    background-color: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 36px 20px 18px 20px;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.compare-card-bottom-section {
    padding: 20px;
    background-color: #ffffff;
}

/* Default neutral backgrounds for non-winner cards */
.compare-asset-card.card-theme-orange .compare-card-top-section,
.compare-asset-card.card-theme-indigo .compare-card-top-section {
    background-color: #f8fafc;
}

.compare-asset-card.card-theme-orange .compare-card-bottom-section,
.compare-asset-card.card-theme-indigo .compare-card-bottom-section {
    background-color: #ffffff !important;
}

/* Card metrics grid dividers */
.compare-card-metric:not(:last-child) {
    border-right: 1.5px solid #f1f5f9;
    padding-right: 8px;
}

/* Base colors for inactive (or default) card */
.compare-asset-card .compare-asset-name {
    color: #0f172a !important;
    font-weight: 700;
}

.compare-asset-card .compare-asset-symbol {
    color: #64748b !important;
    font-weight: 600;
}

.compare-asset-card .compare-card-subtitle {
    color: #64748b !important;
    margin-bottom: 0;
}

.compare-asset-card .compare-metric-lbl {
    color: #64748b !important;
}

.compare-asset-card .compare-metric-val {
    color: #0f172a;
}

.compare-asset-card .compare-metric-sub {
    color: #64748b !important;
}

.compare-asset-card .compare-asset-icon-box {
    background-color: #f1f5f9 !important;
}

.compare-asset-card .compare-asset-icon-box span {
    color: #64748b !important;
}

.compare-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.compare-asset-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-asset-icon-box.bg-orange {
    background-color: rgba(249, 115, 22, 0.1);
}

.compare-asset-icon-box.bg-indigo {
    background-color: rgba(124, 58, 237, 0.1);
}

.compare-asset-icon-box span {
    font-size: 20px !important;
}

.text-orange { color: #f97316; }
.text-indigo { color: #7c3aed; }

.compare-asset-name-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compare-asset-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.compare-asset-symbol {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
}

.compare-card-subtitle {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 16px;
    font-weight: 500;
}

.compare-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.compare-card-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compare-metric-lbl {
    font-size: 9px;
    color: #64748b;
    font-weight: 600;
}

.compare-metric-val {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.compare-metric-val.text-orange { color: #f97316; }
.compare-metric-val.text-indigo { color: #7c3aed; }

.compare-metric-sub {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}

.compare-asset-card.winner-card {
    position: relative;
    transform: scale(1.02);
    z-index: 2;
}

.compare-asset-card.card-theme-orange.winner-card {
    border: 2px solid #ff7a00 !important;
    box-shadow: 0 4px 20px rgba(255, 122, 0, 0.15) !important;
}

.compare-asset-card.card-theme-orange.winner-card .compare-card-top-section {
    background-color: #fffbf7 !important;
    border-bottom: 2px solid #ff7a00 !important;
}

.compare-asset-card.card-theme-orange.winner-card .compare-card-bottom-section {
    background-color: #ffffff !important;
}

.compare-asset-card.card-theme-orange.winner-card .compare-asset-icon-box {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.compare-asset-card.card-theme-orange.winner-card .compare-asset-icon-box span {
    color: #ea580c !important;
}

.compare-asset-card.card-theme-indigo.winner-card {
    border: 2px solid #7c3aed !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15) !important;
}

.compare-asset-card.card-theme-indigo.winner-card .compare-card-top-section {
    background-color: #faf5ff !important;
    border-bottom: 2px solid #7c3aed !important;
}

.compare-asset-card.card-theme-indigo.winner-card .compare-card-bottom-section {
    background-color: #ffffff !important;
}

.compare-asset-card.card-theme-indigo.winner-card .compare-asset-icon-box {
    background-color: rgba(124, 58, 237, 0.15) !important;
}

.compare-asset-card.card-theme-indigo.winner-card .compare-asset-icon-box span {
    color: #7c3aed !important;
}

/* Card Winner Ribbon (Top Left corner) */
.card-winner-ribbon {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 8px 18px 8px 16px;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top-left-radius: 15px; /* fits card's 16px border-radius nicely */
    border-bottom-right-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 5;
    animation: ribbonPulse 2s infinite ease-in-out;
}

.compare-asset-card.card-theme-orange .card-winner-ribbon {
    background: linear-gradient(135deg, #e05600 0%, #ff7a00 100%) !important;
}

.compare-asset-card.card-theme-indigo .card-winner-ribbon {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
}

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

/* Card Right Side Illustration (Trophy / Trend Line) */
.card-right-illustration {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 100px;
    height: 100px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Adjust title & subtitle max widths so they don't overlap illustration */
.compare-asset-name-group {
    max-width: calc(100% - 100px);
}
.compare-card-subtitle {
    max-width: calc(100% - 100px);
}

.default-trend-chart,
.winner-trophy {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trend-chart-svg {
    width: 100%;
    height: 100%;
}

.trophy-svg {
    width: 100%;
    height: 100%;
    animation: trophyFloat 3s infinite ease-in-out;
}

@keyframes trophyFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(1.5deg); }
}

.sparkle-star {
    transform-origin: center;
    animation: starTwinkle 1.5s infinite ease-in-out;
}
.star-1 { animation-delay: 0s; }
.star-2 { animation-delay: 0.3s; }
.star-3 { animation-delay: 0.6s; }
.star-4 { animation-delay: 0.9s; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* VS Badge absolute circle */
.compare-vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #1e1b4b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11.5px;
    border: 3.5px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
}

@media (max-width: 960px) {
    .compare-vs-badge {
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin: -12px 0;
    }
}

/* Duration selector active colors */
.compare-chart-time-selectors {
    display: flex;
    gap: 4px;
    background-color: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
}

.time-selector-btn {
    border: none;
    background: none;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-selector-btn.active {
    background-color: #ffffff;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.compare-chart-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compare-chart-legend {
    display: flex;
    gap: 12px;
    align-items: center;
}

.legend-item {
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot.dot-orange { color: #f97316; }
.legend-dot.dot-indigo { color: #7c3aed; }

/* Highlights Card Scheme */
.premium-compare-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .premium-compare-highlights {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .premium-compare-highlights {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Footer Section Split Grid */
.premium-compare-footer {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

@media (max-width: 960px) {
    .premium-compare-footer {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.compare-footer-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
    font-family: 'Noto Sans KR', sans-serif;
}

/* Metrics Table */
.compare-metrics-table {
    width: 100%;
    border-collapse: collapse;
}

.compare-metrics-table th {
    background-color: #f8fafc;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.compare-metrics-table td {
    padding: 10px;
    font-size: 11px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 500;
}

.compare-metrics-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-metrics-table td:nth-child(2),
.compare-metrics-table td:nth-child(3),
.compare-metrics-table td:nth-child(4) {
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
}

.compare-metrics-table td.winner-highlight {
    color: #f97316;
    font-weight: 700;
}

.compare-metrics-table td.winner-highlight-indigo {
    color: #7c3aed;
    font-weight: 700;
}

/* Dynamic Analysis Mascot Card */
.compare-analysis-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.01);
}

.analysis-mascot-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.analysis-mascot-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.analysis-bubble {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 10px 14px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.analysis-bubble::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -6px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.analysis-lead-text {
    font-size: 11.5px;
    line-height: 1.45;
    color: #1e293b;
    font-weight: 600;
}

.analysis-lead-text strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* 요약 분석 승리 자산별 강조 테마 */
.analysis-bubble strong.text-orange {
    color: #ea580c !important;
}
.analysis-bubble strong.text-indigo {
    color: #7c3aed !important;
}


.analysis-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.analysis-bullets li {
    font-size: 11px;
    line-height: 1.4;
    color: #475569;
    font-weight: 500;
}

.analysis-disclaimer {
    font-size: 9.5px;
    color: #94a3b8;
    font-weight: 500;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
}
/* --- Quick Amount Picker Chips --- */
.amount-quick-chips {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.chip-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
}

.chip-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--color-primary);
}

.chip-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2) !important;
}

/* --- Realtime Search Autocomplete Dropdown --- */
.search-autocomplete-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 6px;
  display: none;
  padding: 6px 0;
}

/* Custom Scrollbar for Dropdown */
.search-autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}
.search-autocomplete-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.search-autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.autocomplete-row {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.autocomplete-row:hover,
.autocomplete-row.active {
  background: var(--color-brand-purple-light) !important;
  color: var(--color-primary) !important;
}

.autocomplete-row:hover .row-name,
.autocomplete-row.active .row-name {
  color: var(--color-primary) !important;
}

.autocomplete-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.row-code {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #94a3b8;
  min-width: 55px;
}

.row-name {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  transition: color 0.15s ease;
}

.row-name mark {
  background: transparent;
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: underline;
}

.row-market {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 6px;
  border-radius: 4px;
  color: #64748b;
  background: #f1f5f9;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

.row-market.kospi {
  color: #e11d48;
  background: #fff1f2;
}

.row-market.kosdaq {
  color: #2563eb;
  background: #eff6ff;
}

.row-market.coin {
  color: #ca8a04;
  background: #fefce8;
}

.row-market.us {
  color: #7c3aed;
  background: #f5f3ff;
}

/* --- Realtime Autocomplete Tags Tokenizing --- */
.tag-input-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 58px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.selected-tags-holder {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-chip {
  background: var(--color-brand-purple-light);
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  padding: 4px 8px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-primary);
  user-select: none;
  animation: tagScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.05);
}

.tag-chip .tag-logo {
  font-size: 11px;
  font-weight: 800;
  margin-right: 2px;
}

.tag-chip .tag-close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 900;
  transition: all 0.15s ease;
  margin-left: 2px;
}

.tag-chip .tag-close:hover {
  background: #cbd5e1;
  color: #475569;
}

@keyframes tagScaleIn {
  0% { transform: scale(0.68); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Adjust input sizing to fit along chips dynamically */
.pill-search-input,
.chat-search-input {
  flex: 1 !important;
  min-width: 80px !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  height: 38px !important;
}

.pill-search-input:focus,
.chat-search-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.tag-vs {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.65;
  margin: 0 4px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  text-transform: lowercase;
  font-style: italic;
  font-family: 'Outfit', sans-serif;
  animation: tagScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Position chat autocomplete dropdown upwards since the input bar is at the bottom */
#chat-search-autocomplete {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  box-shadow: 0 -10px 30px rgba(104, 37, 227, 0.08) !important;
}

/* ==========================================================================
   11. SHARE PREVIEW MODAL (PREMIUM DYNAMIC VISUAL CARDS)
   ========================================================================== */
#share-preview-modal {
  position: fixed; /* Absolute fixed overlay on top of everything */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(15, 17, 26, 0.75);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

#share-preview-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.share-preview-dialog {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#share-preview-modal.show .share-preview-dialog {
  transform: scale(1);
}

.share-card-scale-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
  height: auto;
}

.share-preview-card {
  width: 480px;
  height: 600px;
  background: linear-gradient(135deg, #090a0f 0%, #15102a 50%, #0d091a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 20px 5px 16px 5px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Perfect space distribution for 4:5 aspect ratio */
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 
              inset 0 1px 1px rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transform: scale(var(--share-card-scale, 1));
  transform-origin: top center;
  flex-shrink: 0;
}

/* Festive Confetti Background Elements */
.share-confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 190px; /* Constrain firework particles to the top header region only */
  pointer-events: none;
  z-index: 1; /* Place below header elements, above card base background */
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  border-radius: 2px;
  opacity: 0.85;
}

/* Background Confetti/Glow styling */
.share-preview-card::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(104, 37, 227, 0.3) 0%, rgba(104, 37, 227, 0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* Mascot & Title Header layout (2nd Mockup Split Layout) */
.share-premium-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  position: relative;
  z-index: 2;
  margin-bottom: 2px;
  text-align: center;
}

.share-header-left {
  display: none; /* Character container hidden */
}

.share-giant-character {
  display: none;
}

.share-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.share-title-meta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.share-trophy {
  font-size: 32px;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.4));
  line-height: 1;
}

.share-winner-badge {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  background: #f59e0b;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
}

.share-winner-title {
  font-size: 42px;
  font-weight: 900;
  margin: 6px 0;
  color: #f59e0b; /* Solid orange for default/left theme */
  letter-spacing: -1.5px;
  line-height: 1.1;
  text-shadow: none; /* Remove glow for crisp readability */
}

.share-winner-title.theme-right {
  color: #a855f7 !important; /* Rich vibrant neon purple */
  text-shadow: none !important; /* Remove glow for crisp readability */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}

.share-winner-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 2px 0 6px 0;
}

/* 3-Column Premium Metadata Banner Styling */
.share-meta-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 6px 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
  z-index: 2;
  position: relative;
}

.share-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  padding: 0 4px;
}

.share-meta-item:last-child {
  border-right: none;
}

.share-meta-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.share-meta-icon {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

.share-meta-value {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

/* Highlight specifically the money amount in yellow-gold like mockup */
.share-meta-item:nth-child(2) .share-meta-value {
  color: #fbbf24;
  font-size: 15px;
}

.share-meta-sub-val {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
  line-height: 1;
}

/* Asset Cards Area */
.share-card-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  width: 100%;
}

.share-asset-subcard {
  flex: none;
  width: calc(50% - 28.5px);
  height: 190px; /* Sized down from 215px to prevent footer clipping while maintaining visual hierarchy */
  border-radius: 18px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.share-asset-subcard.theme-left {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.share-asset-subcard.theme-right {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0.03) 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Center-aligned single card when not comparing */
.share-asset-subcard.single-center {
  flex: none;
  width: 97.5% !important;
  margin: 0 auto;
}

.share-subcard-header {
  display: flex;
  flex-direction: row; /* Stack horizontally: icon on the left, text on the right */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally in subcard */
  gap: 8px;
  margin-bottom: 6px;
  height: 40px; /* Sized down from 72px to optimize vertical space */
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent shrinking in small viewports */
}

.share-asset-icon-circle {
  width: 36px; /* Sized down slightly to save space */
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.share-asset-icon-circle.left-icon-bg {
  background: #f59e0b;
}

.share-asset-icon-circle.right-icon-bg {
  background: #a855f7;
}

.share-asset-icon-circle span {
  font-size: 20px; /* Sized down icon */
  color: #ffffff;
}

.share-asset-name-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  text-align: left; /* Align text to the left */
}

.share-name-main {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.share-name-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

/* Premium Sparklines Wrapper with Axes and Background grids */
.share-mini-chart-wrapper {
  position: relative;
  width: calc(100% + 12px) !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
  height: 92px; /* Increased by 10px more for enhanced vertical visibility */
  margin-top: 0px; /* Optimized top margin for visual layout balance */
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Standardize vertical alignment start point */
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent shrinking in small viewports */
}

#share-right-card .share-mini-chart-wrapper {
  margin-top: 5px !important; /* Retain the 5px offset (0px base + 5px) for right card horizontal alignment */
}

.share-chart-y-axis {
  position: absolute;
  right: 2px;
  top: 0px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}

.share-chart-y-axis span {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.share-mini-chart-container {
  width: 100% !important;
  height: 80px; /* Sized up from 70px to make sparklines even larger and highly visible */
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.share-mini-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.share-chart-x-axis {
  position: absolute;
  bottom: 0px;
  left: 2px;
  right: 2px; /* Fully expand to match the 100% width canvas chart */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.share-chart-x-axis span {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.share-metrics-box {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 0 8px;
}

.share-metric-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.share-metric-value-row .share-metric-pct {
  margin-top: 0;
}

.share-metric-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  padding: 2.5px 8px;
  border-radius: 10px;
  width: fit-content;
  margin: 0 auto 3px auto;
}

.share-metric-val {
  font-size: 23px;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.share-metric-val.val-left-theme {
  color: #f59e0b;
}

.share-metric-val.val-right-theme {
  color: #a855f7;
}

.share-metric-pct {
  font-size: 13px;
  font-weight: 700;
  padding: 3.5px 9px;
  border-radius: 8px;
  width: fit-content;
  margin-top: 3px;
}

.share-metric-pct.badge-left-theme {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.share-metric-pct.badge-right-theme {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
}

.share-vs-divider {
  width: 54px;
  height: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: 54px;
  max-height: 54px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #11131e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  box-sizing: border-box;
}

.share-card-summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 6px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  z-index: 2;
  margin-bottom: 4px;
}

.summary-chart-icon {
  font-size: 22px;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}

.share-summary-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
}

/* Redesigned Integrated Footer Area (2nd Mockup Layout) */
.share-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 6px;
  width: 100%;
  z-index: 2;
  box-sizing: border-box;
}

.share-footer-integrated-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.share-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-bar-mascot {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.share-bar-text {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.share-bar-right {
  display: flex;
  align-items: center;
}

.share-bar-link {
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 12px;
  border-radius: 999px;
}

.share-footer-metadata-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.share-footer-disclaimer {
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  text-align: left;
  letter-spacing: -0.2px;
}

/* Modal Actions styling */
.share-preview-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.btn-share-preview-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-share-preview-action.btn-copy-link {
  background: #6825e3;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(104, 37, 227, 0.3);
}

.btn-share-preview-action.btn-copy-link:hover {
  background: #551cb8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(104, 37, 227, 0.4);
}

.btn-share-preview-action.btn-save-image {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-share-preview-action.btn-save-image:hover {
  background: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.btn-share-preview-action.btn-close-preview {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-share-preview-action.btn-close-preview:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* Floating animation for trophy */
@keyframes floatEffect {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}



/* Premium Highlight Colors & Alignments */
.share-highlight-yellow {
  color: #f59e0b;
  font-weight: 900;
}

.share-highlight-purple {
  color: #a855f7; /* Rich vibrant neon purple */
  font-weight: 900;
}

.left-sym-color {
  color: #f59e0b !important;
}

.right-sym-color {
  color: #a855f7 !important;
}

.share-brand-right {
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.share-brand-right .share-domain {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #11131e !important;
  font-family: 'Outfit', sans-serif !important;
}



/* ==========================================================================
   11.1. SHARE PLATFORM SELECTOR MODAL (NEW PREMIUM FEATURE)
   ========================================================================== */
#share-platform-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(10, 11, 20, 0.85); /* Slightly darker backing to isolate the popup */
  z-index: 2100; /* Float above everything including preview */
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  padding: 20px;
  box-sizing: border-box;
}

#share-platform-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.share-platform-dialog {
  width: 100%;
  max-width: 400px;
  background: rgba(13, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 
              inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: scale(0.95);
  transition: transform 0.25s ease;
  box-sizing: border-box;
}

#share-platform-modal.show .share-platform-dialog {
  transform: scale(1);
}

.share-platform-header {
  text-align: center;
}

.share-platform-title {
  font-size: 18px;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.share-platform-desc {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin: 0;
}

.share-platform-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.share-platform-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  gap: 14px;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #ffffff;
  outline: none;
  box-sizing: border-box;
}

.share-platform-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.platform-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon-wrap span {
  font-size: 20px;
  color: #ffffff;
}

.insta-bg {
  background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.twitter-bg {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.platform-symbol-x {
  font-size: 16px !important;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
}

.kakao-bg {
  background: #fee500;
}

.kakao-bg span {
  color: #191919 !important;
  font-size: 18px !important;
}

.blog-bg {
  background: #03cf5d;
}

.platform-text-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
}

.platform-name {
  font-size: 13px;
  font-weight: 750;
  color: #ffffff;
}

.platform-res {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.platform-chevron {
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease;
}

.share-platform-option:hover .platform-chevron {
  color: rgba(255, 255, 255, 0.6);
  transform: translateX(2px);
}

.btn-platform-close {
  width: 100%;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-platform-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* ==========================================================================
   11.2. MULTI-PLATFORM CLONE OVERRIDES FOR HTML2CANVAS CAPTURE
   ========================================================================== */

/* --- 1. Twitter Card Mode (1.91:1 / 2400 x 1260 px) --- */
.share-preview-card.platform-twitter {
  aspect-ratio: 1200 / 630 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 12px 24px !important;
  padding: 24px !important;
  align-content: space-between !important;
}

.share-preview-card.platform-twitter .share-premium-header-wrapper {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}

.share-preview-card.platform-twitter .share-meta-banner-grid {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  padding: 10px 4px !important;
}

.share-preview-card.platform-twitter .share-card-footer {
  grid-column: 1 !important;
  grid-row: 3 !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 8px !important;
}

.share-preview-card.platform-twitter .share-card-middle {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  justify-content: center !important;
  align-self: center !important;
}

.share-preview-card.platform-twitter .share-asset-subcard {
  width: 100% !important;
  flex: none !important;
  padding: 8px 10px !important;
}

.share-preview-card.platform-twitter .share-vs-divider {
  display: none !important; /* Hide VS to fit narrow horizontal column */
}

.share-preview-card.platform-twitter .share-card-summary {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-bottom: 0 !important;
  align-self: flex-end !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
}

.share-preview-card.platform-twitter .share-mini-chart-wrapper {
  height: 60px !important;
  margin: 1px 0 !important;
}

.share-preview-card.platform-twitter .share-mini-chart-container {
  height: 48px !important;
}

.share-preview-card.platform-twitter .share-metric-val {
  font-size: 18px !important;
}

/* --- 2. KakaoTalk Square Mode (1:1 / 2160 x 2160 px) --- */
.share-preview-card.platform-kakao {
  aspect-ratio: 1 / 1 !important;
  padding: 16px !important;
  justify-content: space-around !important; /* Compress beautifully */
}

.share-preview-card.platform-kakao .share-premium-header-wrapper {
  margin-bottom: 2px !important;
  gap: 12px !important;
}

.share-preview-card.platform-kakao .share-giant-character {
  width: 54px !important;
  height: 54px !important;
}

.share-preview-card.platform-kakao .share-winner-title {
  font-size: 22px !important;
}

.share-preview-card.platform-kakao .share-meta-banner-grid {
  margin-bottom: 4px !important;
  padding: 6px 2px !important;
}

.share-preview-card.platform-kakao .share-card-middle {
  margin-bottom: 4px !important;
}

.share-preview-card.platform-kakao .share-asset-subcard {
  padding: 8px 6px !important;
}

.share-preview-card.platform-kakao .share-mini-chart-wrapper {
  height: 65px !important;
  margin: 1px 0 !important;
}

.share-preview-card.platform-kakao .share-mini-chart-container {
  height: 52px !important;
}

.share-preview-card.platform-kakao .share-metric-val {
  font-size: 18px !important;
}

.share-preview-card.platform-kakao .share-card-summary {
  padding: 6px 10px !important;
  margin-bottom: 4px !important;
}

.share-preview-card.platform-kakao .share-summary-text {
  font-size: 11px !important;
}

.share-preview-card.platform-kakao .share-card-footer {
  padding-top: 6px !important;
  margin-top: 2px !important;
}

/* --- 3. Blog Cinema Mode (16:9 / 3840 x 2160 px UHD) --- */
.share-preview-card.platform-blog {
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 16px 32px !important;
  padding: 36px !important;
  align-content: space-between !important;
}

.share-preview-card.platform-blog .share-premium-header-wrapper {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  gap: 20px !important;
}

.share-preview-card.platform-blog .share-giant-character {
  width: 76px !important;
  height: 76px !important;
}

.share-preview-card.platform-blog .share-winner-title {
  font-size: 28px !important;
}

.share-preview-card.platform-blog .share-meta-banner-grid {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  padding: 12px 6px !important;
}

.share-preview-card.platform-blog .share-card-footer {
  grid-column: 1 !important;
  grid-row: 3 !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 12px !important;
}

.share-preview-card.platform-blog .share-card-middle {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  justify-content: center !important;
  align-self: center !important;
}

.share-preview-card.platform-blog .share-asset-subcard {
  width: 100% !important;
  flex: none !important;
  padding: 10px 12px !important;
}

.share-preview-card.platform-blog .share-vs-divider {
  display: none !important; /* Clean layout without VS */
}

.share-preview-card.platform-blog .share-card-summary {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-bottom: 0 !important;
  align-self: flex-end !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.share-preview-card.platform-blog .share-mini-chart-wrapper {
  height: 70px !important;
  margin: 1px 0 !important;
}

.share-preview-card.platform-blog .share-mini-chart-container {
  height: 56px !important;
}

.share-preview-card.platform-blog .share-metric-val {
  font-size: 20px !important;
}

/* ==========================================
   7. Trending Infinite Feed (SNS-style)
   ========================================== */
.trending-feed-view {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 16px 80px 16px !important;
    display: flex;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.feed-header {
    position: sticky !important;
    top: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    z-index: 99 !important;
}

.feed-back-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.feed-back-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.feed-title {
    font-size: 18px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.feed-header-icon {
    color: #6825E3 !important;
    font-size: 22px !important;
}

.feed-card-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 16px !important;
    width: 100% !important;
}

.feed-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.feed-card:hover {
    border-color: #8b5cf6 !important;
    box-shadow: 0 10px 24px rgba(104, 37, 227, 0.06) !important;
    transform: translateY(-2px) !important;
}

.feed-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.feed-card-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.feed-card-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.feed-card-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.feed-card-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.feed-card-asset-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.feed-card-time {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
}

.feed-card-tag {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #6825E3 !important;
    background: #f5f3ff !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    border: 1px solid #ede9fe !important;
}

.feed-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.feed-card-question {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
}

.feed-card-result-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    border: 1px solid #f1f5f9 !important;
}

.feed-card-result-values {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.feed-card-lbl {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.feed-card-val-arrow {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

.feed-card-pct {
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}

.feed-card-pct.positive {
    background: #fff5f5 !important;
    color: #f43f5e !important;
}

.feed-card-pct.negative {
    background: #eff6ff !important;
    color: #3b82f6 !important;
}

.feed-card-chart {
    height: 100px !important;
    width: 100% !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.feed-sparkline-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.feed-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
}

.feed-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.feed-action-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.feed-action-btn.active {
    color: #f43f5e !important;
}

.feed-action-btn.active span.material-symbols-rounded {
    font-variation-settings: 'FILL' 1 !important;
    color: #f43f5e !important;
}

.feed-action-btn.btn-run-simulation {
    color: #6825E3 !important;
    background: #f5f3ff !important;
}

.feed-action-btn.btn-run-simulation:hover {
    background: #eedffd !important;
}

.feed-loading-sentinel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 30px 10px !important;
    color: #94a3b8 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    width: 100% !important;
}

.feed-spinner {
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #e2e8f0 !important;
    border-top-color: #6825E3 !important;
    border-radius: 50% !important;
    animation: feed-spin 0.8s linear infinite !important;
}

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

/* Future Prediction Redirection Bubble Card & Chips */
.future-prediction-card {
    border-left: 4px solid var(--color-primary, #7c3aed);
    background: var(--bg-card, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.prediction-suggest-chip {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-card, #e2e8f0);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--color-text-body, #334155);
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    width: 100%;
}

.prediction-suggest-chip:hover {
    background-color: rgba(124, 58, 237, 0.05);
    border-color: var(--color-primary, #7c3aed);
    color: var(--color-primary, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.prediction-suggest-chip:active {
    transform: translateY(0);
}

/* Did You Mean Suggestion Chips Styling */
.did-you-mean-chip {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-card, #e2e8f0);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--color-text-body, #334155);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.did-you-mean-chip:hover {
    background-color: rgba(124, 58, 237, 0.05);
    border-color: var(--color-primary, #7c3aed);
    color: var(--color-primary, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.did-you-mean-chip:active {
    transform: translateY(0);
}

/* Quantitative Strategy Backtesting Styles */
.clickable-strategy-example:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-primary, #7c3aed) !important;
    transform: translateX(3px);
}

.trade-log-header:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.trade-log-section.expanded .expand-icon {
    transform: rotate(180deg);
}

.trade-log-table tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.trade-log-table th, .trade-log-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trade-outcome-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}

.trade-outcome-badge.win {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.trade-outcome-badge.loss {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}