:root {
    --primary: #332590;
    --bg-light: #f4f7f6;
}

body { margin: 0; display: flex; height: 100vh; font-family: 'Segoe UI', sans-serif; overflow: hidden; background: var(--bg-light); }

/* Layout Structure */
.sidebar { width: 250px; background: var(--primary); color: white; display: flex; flex-direction: column; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; }
iframe { width: 100%; height: 100%; border: none; background: white; }

/* Navigation Buttons */
.nav-link { 
    background: none; border: none; color: white; padding: 15px; text-align: left; 
    font-size: 16px; cursor: pointer; border-radius: 8px; transition: 0.3s; margin-bottom: 5px;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.15); }

/* Top Bar & Marquee Logic */
.top-bar { height: 60px; background: white; border-bottom: 1px solid #ddd; display: flex; align-items: center; overflow: hidden; }
#stockRibbonContainer { width: 100%; overflow: hidden; white-space: nowrap; position: relative; }

#stockRibbon {
    min-width: 100%;
    display: flex;
    align-items: center;
    height: 50px; /* Ensure it has height */
    white-space: nowrap;
    animation: none !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: wrap;
    color: #333 !important;
    background: #fff;
    padding: 10px;
    z-index: 9999;
}
.marquee-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Push start to the right edge */
    animation: marquee 40s linear infinite;
}
/* The actual scrolling animation */
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.strategy-indicator { margin-top: auto; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 8px; font-size: 14px; }
body {
    margin: 0;
    display: flex;
    font-family: 'Inter', sans-serif;
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 250px;
    background-color: #1e1e2f;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}

.nav-link {
    background: transparent;
    color: white;
    border: none;
    text-align: left;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-link:hover, .nav-link.active {
    background-color: #33334d;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.top-bar {
    background-color: #0f0f1a;
    color: #00ff00;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
}

#view {
    flex: 1;
    width: 100%;
    border: none;
}

#app-container {
    padding: 20px;
}

.strategy-indicator {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #33334d;
    font-size: 0.9em;
    color: #aaa;
}