:root {
    /* Black scale — heading hierarchy, darkest (most prominent) to lightest */
    --main-black: #1C1C1E;
    /* buttons, navbar, page title (h1) */
    --black-2: #2C2C2E;
    /* section headings (h2), hero metric values */
    --black-3: #3A3A3C;
    /* card titles (h3), body values, form input text */

    /* Gray scale — body text & UI elements, darkest to lightest */
    --gray-1: #52525B;
    /* primary body text, form labels */
    --gray-2: #71717A;
    /* secondary/description text */
    --gray-3: #A1A1AA;
    /* muted / placeholder text */
    --gray-4: #D4D4D8;
    /* visible borders */
    --gray-5: #E4E4E7;
    /* subtle borders */
    --gray-6: #F4F4F5;
    /* subtle background fills */
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-synthesis: none;
    -webkit-font-synthesis: none;
}

/* Prevent synthetic faux-bold dilation on pixel font W95FA */
.home-page-title,
.pub-title,
.wip-title,
.wip-badge,
.blue-strip,
.win-title-strip,
.taskbar-btn,
.retro-btn-start,
.retro-groupbox legend,
.retro-field-label,
.retro-calc-btn,
.retro-kpi-title,
.retro-kpi-num,
.retro-status-badge,
.retro-metric-label,
.retro-metric-val,
.retro-scale-seg,
.retro-scale-legend,
.retro-tier-header,
.retro-table th,
.construction-text,
.bank-doc-title,
.sec-doc-title,
.port-doc-title,
.bank-section-heading,
.sec-section-heading,
.sec-software-content strong,
.sec-repo-label,
.chip-name,
.chip-val,
.port-ticker-date,
.home-page-title,
.welcome-window .name-title,
.pos,
.neg {
    font-weight: normal !important;
}

/* Work In Process Center Layout */
.wip-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fills the visible screen height minus the header and container padding */
    min-height: calc(100vh - 140px);
    text-align: center;
}

/* Sizing the image directly */
.wip-img img {
    width: 150px;
    /* 60px is quite small for Patrick, 80px-120px is usually ideal */
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---- HEADER STYLING ---- */


.terminal-cursor {
    display: inline-block;
    color: var(--gray-4);
    font-weight: 400;
    margin-left: 2px;
    animation: blink 1s step-start infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    50.1%,
    100% {
        opacity: 0;
    }
}

/* ---- REDESIGNED WINDOWS 95 TASKBAR (SITE NAVIGATION) ---- */

.site-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #C3C3C3;
    border-top: 2px solid #FFFFFF;
    box-shadow: inset 0 1px 0 #DFDFDF;
    z-index: 9999;
    user-select: none;
    box-sizing: border-box;
}

.taskbar-inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 6px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.taskbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}

/* Unified Taskbar Button: All buttons share exact same height, font, and 3D bevels */
.taskbar-btn {
    height: 32px;
    padding: 0 10px;
    background-color: #C3C3C3;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: inset 1px 1px #DFDFDF, inset -1px -1px #828282;
    color: #000000;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    border-radius: 0;
    margin: 0;
    user-select: none;
    outline: 1px dotted transparent;
    outline-offset: -4px;
}

.taskbar-btn-home {
    letter-spacing: 0.02em;
}

/* Tactile Button Press Animation on Hover, Active State, and When Menu is Open */
.taskbar-btn:hover,
.taskbar-btn:active,
.taskbar-btn.is-active,
.taskbar-btn.is-pressed,
.taskbar-dropdown:hover .taskbar-btn,
.taskbar-dropdown.is-open .taskbar-btn,
.taskbar-dropdown:focus-within .taskbar-btn {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    background-color: #DFDFDF;
    padding-top: 2px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 0px;
    outline-color: transparent;
}

.taskbar-btn:hover .taskbar-btn-text,
.taskbar-btn:active .taskbar-btn-text,
.taskbar-btn.is-active .taskbar-btn-text,
.taskbar-btn.is-pressed .taskbar-btn-text,
.taskbar-dropdown:hover .taskbar-btn .taskbar-btn-text,
.taskbar-dropdown.is-open .taskbar-btn .taskbar-btn-text,
.taskbar-dropdown:focus-within .taskbar-btn .taskbar-btn-text {
    color: #000000;
}

.taskbar-btn.is-active {
    background-image: radial-gradient(#949494 20%, transparent 21%), radial-gradient(#949494 20%, transparent 21%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

.taskbar-btn:focus-visible {
    outline-color: #000000;
}

.taskbar-btn-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.taskbar-btn-text {
    line-height: 1;
}

.taskbar-caret {
    font-size: 11px;
    margin-left: -2px;
    line-height: 1;
}

/* Vertical Etched 3D Divider */
.taskbar-divider {
    width: 2px;
    height: 24px;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    margin: 0 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Dropdown Menu Wrapper */
.taskbar-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* Popup Menu (Windows 95 Cascading Style) */
.taskbar-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    background-color: #C3C3C3;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: inset 1px 1px #DFDFDF, inset -1px -1px #828282, 3px 3px 0 rgba(0, 0, 0, 0.45);
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, auto);
    gap: 16px;
    padding: 8px 10px;
    z-index: 10000;
    border-radius: 0;
    box-sizing: border-box;
}

/* Hover bridge so mouse can move smoothly into the popup */
.taskbar-menu::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.taskbar-dropdown:hover .taskbar-menu,
.taskbar-dropdown.is-open .taskbar-menu {
    display: grid;
}

.taskbar-menu-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-heading {
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    color: #000080;
    margin-bottom: 5px;
    padding: 2px 6px 4px 6px;
    border-bottom: 1px solid #828282;
    box-shadow: 0 1px 0 #FFFFFF; /* Sunken 3D etched groove */
}

.taskbar-menu-item {
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 14.5px;
    color: #000000;
    text-decoration: none;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0;
    user-select: none;
    outline: 1px dotted transparent;
    outline-offset: -2px;
}

.taskbar-menu-item:hover {
    background-color: #000080;
    color: #FFFFFF;
    outline-color: #FFFFFF;
}

.menu-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;
    display: block;
}

/* Right Area: Contact Shortcuts + Dedicated Clock Tray */
.taskbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

/* Standalone Noticeable Contact Shortcuts */
.taskbar-shortcuts {
    display: flex;
    align-items: center;
    gap: 4px;
}

.taskbar-shortcut-btn,
.taskbar-shortcut-btn.taskbar-btn {
    width: 36px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.taskbar-shortcut-btn:hover,
.taskbar-shortcut-btn:active,
.taskbar-shortcut-btn.taskbar-btn:hover,
.taskbar-shortcut-btn.taskbar-btn:active {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    background-color: #DFDFDF;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 0;
    padding-bottom: 0;
    outline-color: transparent;
}

.taskbar-shortcut-icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

/* Dedicated Windows 95 Clock Sunken Tray */
.taskbar-clock-tray {
    height: 32px;
    background-color: #C3C3C3;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.tray-clock-icon {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}

.tray-clock {
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13.5px;
    color: #000000;
    font-weight: normal;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

@media (max-width: 680px) {
    .site-nav {
        height: auto;
    }
    .taskbar-inner {
        flex-wrap: wrap;
        padding: 4px;
        gap: 6px;
    }
    .taskbar-left {
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }
    .taskbar-right {
        margin-left: auto;
    }
}

/* ---- HEADER END ---- */

/* ---- LANDING PAGE REALISTIC RETRO DESKTOP LAYOUT ---- */

.home-container {
    padding: 8px 18px 0 18px;
    max-width: 1460px;
    margin: 0 auto;
}

.desktop-workspace {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Window Rows: Staggered Desktop Layout */
.desktop-row {
    display: flex;
    width: 100%;
}

.desktop-row-top {
    gap: 16px;
    align-items: flex-start;
}

.welcome-window {
    flex: 0 0 calc((100% - 16px) * 0.573);
    width: calc((100% - 16px) * 0.573);
    max-width: calc((100% - 16px) * 0.573);
    margin-top: 0;
}

.wip-window-1 {
    width: 440px;
    max-width: 92vw;
    margin: 0 auto;
}

.wip-window-1 .window-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 28px 20px;
    text-align: center;
    background-color: #C3C3C3;
}

.notes-window {
    flex: 0 0 calc((100% - 16px) * 0.427);
    width: calc((100% - 16px) * 0.427);
    max-width: calc((100% - 16px) * 0.427);
    margin-top: 6px; /* Subtle stagger to break horizontal grid alignment */
}

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

.projects-window {
    flex: 0 0 calc((100% - 16px) * 0.603);
    width: calc((100% - 16px) * 0.603);
    max-width: calc((100% - 16px) * 0.603);
    margin-left: 2px;
}

.wip-window {
    flex: 0 0 calc((100% - 16px) * 0.397);
    width: calc((100% - 16px) * 0.397);
    max-width: calc((100% - 16px) * 0.397);
    margin-top: 4px; /* Subtle stagger to break horizontal grid alignment */
}

/* Ensure dragged windows are freed from percentage constraints */
.retro-window[data-dragged="true"] {
    max-width: none !important;
    flex: none !important;
}

/* Core Retro Window Anatomy */
.retro-window {
    border-top: solid 2px #DFDFDF;
    border-left: solid 2px #DFDFDF;
    border-right: solid 2px #000000;
    border-bottom: solid 2px #000000;
    background-color: #C3C3C3;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: box-shadow 0.1s ease;
}

.retro-window.active-win {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.65);
}

.inner-retro-window {
    padding: 2px;
    border-top: solid 1px #FFFFFF;
    border-left: solid 1px #FFFFFF;
    border-right: solid 1px #828282;
    border-bottom: solid 1px #828282;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
}

/* Title Bar: Classic Windows 95 (Active Navy vs Inactive Gray) */
.blue-strip {
    background-color: #808080; /* Inactive title bar */
    color: #DFDFDF;
    height: 30px;
    padding: 2px 4px 2px 8px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'W95FA', monospace, sans-serif;
    letter-spacing: 0.02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
    cursor: grab;
}

.blue-strip:active {
    cursor: grabbing;
}

.retro-window.active-win .blue-strip {
    background-color: #000080; /* Active Windows 95 Navy */
    color: #FFFFFF;
}

.win-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.win-title-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    image-rendering: pixelated;
    display: block;
}

.win-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Window Control Buttons: _ □ ✕ */
.win-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.win-btn {
    background-color: #C3C3C3;
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    box-shadow: inset 1px 1px #DFDFDF, inset -1px -1px #828282;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.win-btn:active {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    padding-top: 1px;
    padding-left: 1px;
}

.win-btn-close {
    margin-left: 2px;
}

/* Window Menu Bar: File Edit View Help */
.win-menubar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    background-color: #C3C3C3;
    border-bottom: 1px solid #828282;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 14.5px;
    line-height: 1;
    color: #000000;
    user-select: none;
}

.win-menu-item {
    padding: 2px 6px;
    cursor: default;
}

.win-menu-item:hover {
    background-color: #000080;
    color: #FFFFFF;
}

.menu-acc {
    text-decoration: underline;
}

/* Explorer Address Bar */
.win-addressbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    background-color: #C3C3C3;
    border-bottom: 1px solid #828282;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13.5px;
    color: #000000;
}

.address-label {
    font-size: 13.5px;
    color: #333333;
}

.address-field {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding: 2px 8px;
    font-size: 13.5px;
    box-sizing: border-box;
    height: 23px;
}

.address-path {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000000;
    font-size: 13.5px;
}

.address-caret {
    font-size: 10px;
    color: #000000;
}

/* Window Content Body */
.window-body {
    padding: 8px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Window Status Bar */
.win-statusbar {
    display: flex;
    gap: 4px;
    padding: 2px 4px;
    background-color: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    margin-top: auto;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13px;
    line-height: 16px;
    user-select: none;
    box-sizing: border-box;
}

.status-panel {
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding: 1px 8px;
    font-size: 13px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
}

.panel-flex {
    flex: 1;
}

/* Window Minimizing / Shading */
.retro-window.is-minimized .inner-retro-window > :not(.blue-strip) {
    display: none !important;
}

.retro-window.is-minimized {
    height: auto !important;
    min-height: unset !important;
}

/* Welcome Window Typography & Layout */
.welcome-window .inner-retro-window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.welcome-window .window-body {
    padding: 6px 8px;
    background-color: #C3C3C3;
    display: flex;
    flex-direction: column;
}

.welcome-canvas {
    background: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.welcome-hero-title {
    font-size: 44px;
    font-weight: bold;
    font-synthesis: weight;
    -webkit-font-synthesis: weight;
    -webkit-text-stroke: 0.5px #000000;
    color: #000000;
    margin: 0 0 3px 0;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.welcome-author-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.welcome-author-row .author-by {
    font-size: 17px;
    color: #555555;
    letter-spacing: 0.03em;
}

.welcome-author-row .author-name {
    font-size: 28px;
    color: #000080;
    letter-spacing: 0.02em;
    font-weight: bold;
    font-synthesis: weight;
    -webkit-font-synthesis: weight;
    -webkit-text-stroke: 0.3px #000080;
}

.welcome-hero-desc {
    font-size: 17.5px;
    line-height: 1.35;
    color: #222222;
    margin: 0 0 8px 0;
}

.welcome-meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EFEFEF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding: 3px 8px;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
}

.meta-chip .chip-lbl {
    color: #444444;
}

.meta-chip .chip-num,
.meta-chip .chip-val {
    color: #000080;
    font-weight: bold;
    font-synthesis: weight;
    -webkit-font-synthesis: weight;
}

/* Release Notes Body & Layout */
.notes-window .inner-retro-window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notes-window .window-body {
    padding: 6px 8px;
    justify-content: center;
}

.release-notes-body {
    font-size: 15px;
    line-height: 1.45;
    color: #000000;
    white-space: pre-line;
    height: 120px;
    overflow-y: auto;
    background: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 6px 10px;
    margin: 0;
    font-family: 'W95FA', monospace, sans-serif;
    box-sizing: border-box;
}

.release-notes-body::-webkit-scrollbar {
    width: 14px;
}

.release-notes-body::-webkit-scrollbar-track {
    background: #DFDFDF;
}

.release-notes-body::-webkit-scrollbar-thumb {
    background: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
}

/* ---- PUBLISHED CARDS (Win95 Inset Style) ---- */
.pub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
}

.pub-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    background: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    min-height: unset;
    box-sizing: border-box;
    cursor: pointer;
    outline: 1px dotted transparent;
    outline-offset: -3px;
}

.pub-card:hover {
    outline-color: #000082;
    transform: none;
    box-shadow: none;
}

.pub-card:hover .pub-title {
    color: #000082;
    text-decoration: underline;
}

.pub-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pub-meta {
    display: flex;
    flex-direction: column;
}

.pub-date {
    display: block;
    font-size: 13.5px;
    font-weight: normal;
    color: var(--gray-2);
    margin-bottom: 2px;
}

.pub-title {
    margin: 0 0 3px 0;
    font-size: 20px;
    font-weight: bold;
    color: #000080;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pub-desc {
    margin: 0 0 5px 0;
    font-size: 15px;
    line-height: 1.38;
    color: var(--gray-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Classic Windows 95 3D Push Button */
.pub-action {
    display: inline-flex;
    align-items: center;
    background-color: #C3C3C3;
    color: #000000;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: inset -1px -1px #828282, inset 1px 1px #DFDFDF;
    padding: 3px 12px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: 'W95FA', monospace, sans-serif;
    text-decoration: none;
    width: fit-content;
    margin-top: auto;
    user-select: none;
    outline: 1px dotted transparent;
    outline-offset: -3px;
}

.pub-card:hover .pub-action {
    outline-color: #000000;
    transform: none;
}

.pub-card:active .pub-action {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    padding: 4px 11px 2px 13px;
}

/* Sunken Retro Thumbnail Frame */
.pub-thumb {
    width: 135px;
    height: 92px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 0;
    overflow: hidden;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    background-color: #000000;
    box-shadow: none;
}

.pub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
    image-rendering: pixelated;
    transition: none;
}

/* ---- WIP CARDS (Horizontal Retro Rows) ---- */
.wip-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: space-between;
}

.wip-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 10px;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    box-sizing: border-box;
    cursor: default;
    outline: 1px dotted transparent;
    outline-offset: -3px;
}

a.wip-card {
    cursor: pointer;
}

.wip-card:hover {
    outline-color: #000082;
    box-shadow: none;
    transform: none;
}

.wip-card:hover .wip-title {
    color: #000082;
}

.wip-thumb {
    width: 90px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    background-color: #000000;
}

.wip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
}

.wip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.wip-badge {
    background-color: #FFF380;
    color: #000000;
    border: 1px solid #808000;
    font-size: 12.5px;
    font-weight: bold;
    font-family: 'W95FA', monospace, sans-serif;
    padding: 1px 6px;
    letter-spacing: 0.03em;
    display: inline-block;
}

.wip-tag {
    font-size: 14px;
    color: var(--gray-2);
}

.wip-title {
    margin: 1px 0 2px 0;
    font-size: 17px;
    font-weight: bold;
    color: #000000;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wip-progress-bar {
    height: 12px;
    background-color: #C3C3C3;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding: 1px;
    display: flex;
    gap: 2px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 160px;
}

.wip-progress-block {
    width: 9px;
    height: 100%;
    background-color: #000082;
    flex-shrink: 0;
}

/* Responsive Rules for Small Screens */
@media (max-width: 960px) {
    .desktop-row-top,
    .desktop-row-bottom {
        flex-direction: column;
        gap: 12px;
        margin-top: 0;
    }

    .welcome-window,
    .notes-window,
    .projects-window,
    .wip-window {
        width: 100% !important;
        flex: none !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
    }

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

    .home-container {
        padding: 12px 12px 60px 12px;
    }
}

@media (max-width: 680px) {
    .welcome-canvas {
        text-align: center;
        gap: 8px;
        padding: 10px 12px;
    }

    .welcome-author-row {
        justify-content: center;
    }

    .welcome-meta-strip {
        justify-content: center;
    }

    .welcome-hero-title {
        font-size: 32px;
    }

    .welcome-author-row .author-name {
        font-size: 22px;
    }
}

/* ---- LANDING PAGE END ----*/

body {
    font-family: 'W95FA', monospace, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    -webkit-font-synthesis: none;
    font-synthesis-weight: none;
    color: var(--gray-1);
    margin: 0;
    padding: 0 0 70px 0;

    /* Windows 95 Classic Teal Desktop */
    background-color: #008080;
    position: relative;
}

body.home-body {
    padding-bottom: 0;
    min-height: 100vh;
    box-sizing: border-box;
}

@media (max-height: 720px), (max-width: 960px) {
    body.home-body {
        padding-bottom: 44px;
    }
}

body.wip-body {
    padding-bottom: 42px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 2. Main Page Content */
.container {
    position: relative;
    z-index: 1;
    /* Above grain, but below the header */
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 32px 40px;
}

.wip-container {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    min-height: calc(100vh - 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}



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

.formula-badge {
    display: inline-flex;
    font-family: 'Times New Roman', Times, serif;
    align-items: center;
    gap: 8px;
    font-size: 25px;
    font-style: italic;
}

.fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.numerator {
    border-bottom: 1.5px solid currentColor;
    padding: 0 4px 2px 4px;
    line-height: 1.1;
}

.denominator {
    padding: 2px 4px 0 4px;
    line-height: 1.1;
}

.page-header {
    margin-bottom: 36px;
}

.page-title {
    font-size: 36px;
    font-weight: normal;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
    color: var(--main-black);
}

.page-title-2 {
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
    color: var(--main-black);
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.showcase-item img {
    width: 100%;
    display: block;
    border-radius: 2px;
    border: 1px solid var(--gray-4);

}

.showcase-caption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--gray-2);
    text-align: center;
}

@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

.name-title {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
    color: var(--main-black);
    margin-left: 12px;
}

.page-sub {
    font-size: 22px;
    font-weight: 300;
    color: var(--gray-2);
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    line-height: 20px;
}

.gen-text {
    font-size: 18px;
    font-weight: 300;
    color: var(--gray-2);
    letter-spacing: -0.01em;
    margin: 0 0 15px 0;
    margin-top: 6px;
}

.gen-text-bullet {
    font-size: 18px;
    font-weight: 500;
    color: var(--gray-2);
    letter-spacing: -0.01em;
    margin: 0 0 30px 0;
    margin-left: 10px;
}

.spacing-block {
    height: 8px;
}

.spacing-block-2 {
    height: 20px;
}

.main-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--black-2);
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    margin-top: 8px;
}

.bullet-list {
    margin-bottom: 40px;
}

.stats-line {
    
    font-size: 18px;
    font-weight: 200;
    color: var(--gray-1);
    margin: 0 0 10px 0;
    letter-spacing: 0.02em;
    
}

.stats-line .sep {
    margin: 0 10px;
    color: var(--gray-4);
}

.code-lines {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-1);
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
    padding-bottom: 0px;
    margin-left: 10px;
}

.currently-line {
    font-size: 0.95rem;
    color: var(--gray-2);
    margin: 0;
}

.currently-line .rotating {
    color: var(--main-black);
    font-weight: 600;
}

.interpret-container {
    padding: 20px 24px 22px 24px;
}

/* 4 Discrete Color Segments */
.scale-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 15px;
    border-radius: 0px;
    overflow: hidden;
    gap: 3px;
    background-color: transparent;
    margin-top: 30px;
}

.bar-segment.seg-poor {
    background-color: #ef4444;
    /* Red */
    border-radius: 0px 0 0 0px;
}

.bar-segment.seg-good {
    background-color: #f59e0b;
    /* Amber/Yellow */
}

.bar-segment.seg-very-good {
    background-color: #10b981;
    /* Green */
}

.bar-segment.seg-excellent {
    background-color: #059669;
    /* Dark Emerald */
    border-radius: 0 0px 0px 0;
}

/* Axis & Threshold Numbers */
.scale-axis {
    position: relative;
    width: 100%;
    height: 26px;
    margin-top: 4px;
    margin-bottom: 14px;
}

.axis-mark {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.tick-line {
    width: 1.5px;
    height: 6px;
    background-color: var(--gray-3);
    margin-bottom: 2px;
}

.tick-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-2);
    font-family: inherit;
}

/* Precise divider alignments (0%, 25%, 50%, 75%, 100%) */
.axis-mark.mark-start {
    left: 0%;
    transform: translateX(0);
    align-items: flex-start;
}

.axis-mark.mark-1 {
    left: 25%;
}

.axis-mark.mark-2 {
    left: 50%;
}

.axis-mark.mark-3 {
    left: 75%;
}

.axis-mark.mark-end {
    left: 100%;
    transform: translateX(-100%);
    align-items: flex-end;
}

/* 4-Column Explanations */
.scale-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.scale-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.range-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid currentColor;
    /* Automatically matches the text color */
    background-color: transparent;
    margin-bottom: 6px;
    display: inline-block;
    font-family: inherit;
}

.range-pill.poor {
    color: #d22020;
}

.range-pill.good {
    color: #e0930d;
}

.range-pill.very-good {
    color: #079a70;
}

.range-pill.excellent {
    color: #065f46;
}

.tier-title {
    margin: 0 0 4px 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--main-black);
}

.tier-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--gray-2);
}

@media (max-width: 768px) {
    .scale-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 16px;
    }
}

/* Two-Column Master Layout */
.dashboard-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 28px;
    align-items: start;
}

/* Shared Card Surface */
.card-surface {
    background: #ffffff;
    border: 1px solid var(--gray-4);
    border-radius: 2px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.card-surface-2 {
    background: #ffffff;
    border: 1px solid var(--gray-4);
    border-radius: 2px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin-bottom: 28px;
}

/* Shared Section Header */
.panel-section-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--black-2);
    margin: 0 0 14px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-section-title-2 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--black-2);
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.construction-text {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.03em;
    color: #000000;
    margin: 0 0 16px 0;
    padding-bottom: 0px;
    text-align: center;
    display: block;
}

/* Form Controls & Labels */
.field-group {
    margin-bottom: 14px;
}

.field-label {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--gray-1);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}

.input-base {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: var(--black-3);
    padding: 10px 14px;
    border: 1px solid var(--gray-4);
    border-radius: 2px;
    outline: none;
    background: #ffffff;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-base:focus {
    border-color: var(--main-black);
    box-shadow: 0 0 0 1px var(--main-black);
}

.input-base::placeholder {
    color: var(--gray-3);
    font-weight: 400;
}

select.input-base {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Asset Allocation List */
.assets-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-1);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    padding: 0 2px;
}

.assets-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}

.asset-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Buttons */
.btn-add-asset {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--gray-4);
    border-radius: 2px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-1);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 20px;
}

.btn-add-asset:hover {
    border-color: var(--main-black);
    color: var(--main-black);
    background: var(--gray-6);
}

.btn-calculate {
    width: 100%;
    background-color: var(--main-black);
    color: #ffffff;
    border: 1px solid var(--main-black);
    border-radius: 2px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-calculate:hover {
    background-color: var(--black-2);
}

/* Right Side: Analytics Canvas */
.analytics-canvas {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Hero Sharpe Display */
.hero-metric-display {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0 20px 0;
    border-bottom: 1px solid var(--gray-6);
}

.hero-value {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--black-2);
    line-height: 1;
}

/* Sub-metrics Row */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 16px;
}

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

.breakdown-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-1);
    letter-spacing: 0.02em;
}

.breakdown-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--black-3);
}

/* Mathematical Components Table */
.details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.details-table th {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-1);
    letter-spacing: 0.04em;
    padding: 8px 0 10px 0;
    border-bottom: 1px solid var(--gray-6);
}

.movers-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-1);
    letter-spacing: 0.04em;
    padding: 8px 0 10px 0;
    border-bottom: 1px solid var(--gray-6);
}

.details-table th:last-child {
    text-align: right;
}

.details-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-6);
    font-size: 14px;
    color: var(--gray-1);
}

.details-table td strong {
    color: var(--black-3);
    font-weight: 500;
}

.details-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--black-3);
}

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


/* =============================================================
   RETRO SCROLLABLE APPLICATION WINDOWS (BANK TERMINAL & SEC SCRAPER)
   ============================================================= */

.bank-app-container,
.sec-app-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;
    font-family: 'W95FA', monospace, sans-serif;
}

.bank-window,
.sec-window {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    min-height: 540px;
}

.bank-window .inner-retro-window,
.sec-window .inner-retro-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Inside Scrollable Content */
.bank-scroll-body,
.sec-scroll-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    background-color: #C3C3C3;
    box-sizing: border-box;
}

/* Windows 95 Scrollbar */
.bank-scroll-body::-webkit-scrollbar,
.sec-scroll-body::-webkit-scrollbar {
    width: 16px;
}

.bank-scroll-body::-webkit-scrollbar-track,
.sec-scroll-body::-webkit-scrollbar-track {
    background: #DFDFDF;
    border-left: 1px solid #828282;
}

.bank-scroll-body::-webkit-scrollbar-thumb,
.sec-scroll-body::-webkit-scrollbar-thumb {
    background: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    box-shadow: inset 1px 1px 0 #DFDFDF, inset -1px -1px 0 #000000;
}

/* Document Header Inside Window */
.bank-doc-header,
.sec-doc-header {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #828282;
    box-shadow: 0 1px 0 #FFFFFF;
}

.bank-doc-title,
.sec-doc-title {
    font-size: 30px;
    font-weight: normal !important;
    color: var(--main-black);
    margin: 0 0 6px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.bank-doc-sub,
.sec-doc-sub {
    font-size: 17px;
    color: var(--gray-1);
    margin: 0;
    line-height: 1.45;
}

/* Section Blocks */
.bank-section-block,
.sec-section-block {
    margin-bottom: 30px;
}

.bank-section-top,
.sec-section-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bank-section-badge,
.sec-section-badge {
    background-color: #000080;
    color: #FFFFFF;
    font-size: 13px;
    padding: 2px 7px;
    letter-spacing: 0.04em;
    font-family: 'W95FA', monospace, sans-serif;
    border: 1px solid #000000;
}

.bank-section-heading,
.sec-section-heading {
    font-size: 20px;
    font-weight: normal !important;
    color: #000000;
    margin: 0;
}

.bank-section-desc,
.sec-section-desc {
    font-size: 16px;
    color: #222222;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

/* Helper Functions & Tags List */
.bank-funcs-wrap,
.sec-funcs-wrap {
    margin-bottom: 12px;
}

.bank-funcs-label,
.sec-funcs-label {
    font-size: 14.5px;
    font-weight: bold;
    color: #000080;
    margin-bottom: 5px;
}

.bank-funcs-list,
.sec-funcs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bank-func-tag,
.sec-func-tag {
    background-color: #DFDFDF;
    border: 1px solid #828282;
    padding: 2px 7px;
    font-size: 13.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #000080;
}

/* Inset Retro Code Box */
.bank-code-box,
.sec-code-box {
    background-color: #1E1E1E;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    margin-bottom: 10px;
    overflow-x: auto;
    box-sizing: border-box;
}

.bank-code-topbar,
.sec-code-topbar {
    background-color: #DFDFDF;
    border-bottom: 1px solid #828282;
    padding: 3px 10px;
    font-size: 13px;
    color: #404040;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.bank-code-box pre,
.sec-code-box pre {
    margin: 0;
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 15px;
    line-height: 1.55;
    background: #1E1E1E;
    color: #D4D4D4;
}

.bank-code-box pre code,
.sec-code-box pre code {
    font-family: inherit;
    font-size: inherit;
    background: transparent !important;
}

/* Roadmap & Inset Panels */
.bank-roadmap-box,
.sec-roadmap-box {
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 16px 20px;
    margin-top: 10px;
}

.bank-roadmap-list,
.sec-roadmap-list {
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

/* SEC Scraper Specific Retro Elements */
.sec-repo-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.sec-repo-label {
    font-size: 15px;
    font-weight: bold;
    color: #000080;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: #000080;
    text-decoration: underline;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

.retro-link-btn:hover {
    color: #0000FF;
}

.sec-software-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.sec-software-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 10px 14px;
    font-size: 15.5px;
    color: #000000;
    line-height: 1.5;
}

.sec-software-bullet {
    color: #000080;
    font-size: 14px;
    user-select: none;
    line-height: 1.5;
}

.sec-software-content {
    flex: 1;
}

.sec-software-content strong {
    color: #000080;
}

.sec-steps-list {
    margin: 0;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

.sec-steps-list li {
    margin-bottom: 8px;
}

.sec-steps-list li:last-child {
    margin-bottom: 0;
}

.retro-kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 13px;
    background-color: #DFDFDF;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    box-shadow: 1px 1px 0 #000000;
    color: #000000;
    line-height: 1.2;
}

/* Retro Showcase Gallery */
.retro-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.retro-showcase-item {
    display: flex;
    flex-direction: column;
}

.retro-showcase-frame {
    background-color: #000000;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 4px;
    box-sizing: border-box;
}

.retro-showcase-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.retro-showcase-caption {
    margin-top: 8px;
    font-size: 15px;
    color: #000000;
    text-align: center;
    font-family: 'W95FA', monospace, sans-serif;
}

@media (max-width: 768px) {
    .retro-showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   STOCK PORTFOLIO PERFORMANCE WORKSTATION (WINDOWS 95 STYLE)
   ============================================================= */

.port-app-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 20px 0px 20px;
    box-sizing: border-box;
    font-family: 'W95FA', monospace, sans-serif;
}

.port-window {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    min-height: 600px;
}

.port-window .inner-retro-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.port-window .win-title-text {
    font-size: 16.5px;
}

.port-window .win-menubar .win-menu-item {
    font-size: 15.5px;
}

/* Scrollable Document Body */
.port-scroll-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px 28px 20px;
    background-color: #C3C3C3;
    box-sizing: border-box;
}

/* Windows 95 Scrollbar */
.port-scroll-body::-webkit-scrollbar {
    width: 16px;
}

.port-scroll-body::-webkit-scrollbar-track {
    background: #DFDFDF;
    border-left: 1px solid #828282;
}

.port-scroll-body::-webkit-scrollbar-thumb {
    background: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    box-shadow: inset 1px 1px 0 #DFDFDF, inset -1px -1px 0 #000000;
}

/* Ticker Toolbar Strip below Menu Bar */
.port-ticker-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #DFDFDF;
    border-bottom: 2px solid #000080;
    padding: 6px 14px;
    gap: 14px;
    box-sizing: border-box;
    flex-wrap: wrap;
    font-family: 'W95FA', monospace, sans-serif;
}

.port-ticker-date {
    font-size: 16px;
    font-weight: normal !important;
    color: #000080;
    white-space: nowrap;
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 3px 10px;
}

.port-benchmarks-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.port-ticker-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 3px 10px;
    box-sizing: border-box;
    font-size: 15.5px;
}

.chip-spy .chip-name { color: #000080; }
.chip-nasdaq .chip-name { color: #006666; }
.chip-dow .chip-name { color: #660066; }
.chip-bond .chip-name { color: #800000; }

.chip-name {
    font-weight: normal !important;
    font-size: 15px;
    white-space: nowrap;
}

.chip-val {
    font-weight: normal !important;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 15.5px;
    min-width: 56px;
    text-align: right;
}

.chip-chart {
    width: 64px;
    height: 20px;
}

/* Document Header inside Window */
.port-doc-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000080;
    box-shadow: 0 1px 0 #FFFFFF;
}

.port-doc-badge {
    display: inline-block;
    background-color: #000080;
    color: #FFFFFF;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border: 1px solid #000000;
    margin-bottom: 6px;
    user-select: none;
}

.port-doc-title {
    font-size: 30px;
    font-weight: normal !important;
    color: #000080;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.port-doc-sub {
    font-size: 17px;
    color: #222222;
    margin: 0;
    line-height: 1.45;
}

/* GroupBox Headers */
.port-window .retro-groupbox legend {
    font-size: 16.5px;
    font-weight: normal !important;
    padding: 0 8px;
    color: #000080;
}

/* 3-Column Summary Cards Row */
.port-summary-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1.35fr;
    gap: 14px;
    margin-bottom: 16px;
}

.port-summary-box {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

.port-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 16px;
}

.port-table th {
    background-color: #000080;
    color: #FFFFFF;
    border-top: 1px solid #3A3A9E;
    border-left: 1px solid #3A3A9E;
    border-right: 1px solid #000040;
    border-bottom: 1px solid #000040;
    box-shadow: inset 1px 1px 0 #5C5CE0, inset -1px -1px 0 #000030;
    font-weight: normal !important;
    text-align: left;
    padding: 5px 8px;
    font-size: 15.5px;
    user-select: none;
}

.port-table td {
    border: 1px solid #D4D0C8;
    padding: 5px 8px;
    color: #000000;
    font-size: 16px;
    line-height: 1.35;
}

.port-table tr:nth-child(even) td {
    background-color: #F4F7FC;
}

.port-table tr:hover td {
    background-color: #E8EEF8;
}

.port-risk-note {
    margin-top: 8px;
    font-size: 14px;
    color: #444444;
    text-align: center;
}

/* Charts Grid */
.port-charts-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.port-chart-box {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.port-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.port-pie-box,
.port-earnings-box {
    margin-bottom: 0 !important;
}

.port-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.retro-tf-btn,
.port-chart-toolbar .tf-btn {
    font-family: 'W95FA', monospace, sans-serif !important;
    font-size: 15px !important;
    background-color: #C3C3C3 !important;
    border-top: 2px solid #FFFFFF !important;
    border-left: 2px solid #FFFFFF !important;
    border-right: 2px solid #828282 !important;
    border-bottom: 2px solid #828282 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    border-radius: 0 !important;
    color: #000000 !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.retro-tf-btn:active,
.retro-tf-btn.active,
.port-chart-toolbar .tf-btn.active {
    background-color: #000080 !important;
    border-top: 2px solid #000000 !important;
    border-left: 2px solid #000000 !important;
    border-right: 2px solid #FFFFFF !important;
    border-bottom: 2px solid #FFFFFF !important;
    box-shadow: inset 1px 1px 0 #000030 !important;
    font-weight: normal !important;
    color: #FFFFFF !important;
}

.port-chart-frame {
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.port-chart-canvas {
    width: 100%;
    height: 480px;
    flex: 1;
    min-height: 480px;
}

.port-pie-canvas {
    width: 100%;
    height: 260px;
}

.port-chart-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000;
    padding: 3px 12px;
    font-size: 15.5px;
    color: #000000;
    box-sizing: border-box;
    margin-left: auto;
}

.port-chart-stats:empty {
    display: none;
}

.port-chart-stats .stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.port-chart-stats .stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333333;
}

.port-chart-stats .stat-val {
    font-weight: normal !important;
}

.port-chart-stats .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #000000;
}

/* News Section */
.port-news-box {
    margin-bottom: 0 !important;
}

.port-news-table td {
    padding: 6px 8px;
    font-size: 16px;
}

.port-news-table a {
    font-size: 16px;
}

/* Status Bar sizing in Portfolio */
.port-window .win-statusbar {
    font-size: 15px;
}

.port-window .status-panel {
    font-size: 15px;
    padding: 2px 10px;
    line-height: 18px;
}

/* Positive & Negative Color Formatting */
.pos,
.retro-table td.pos,
.port-table td.pos,
.chip-val.pos,
.port-chart-stats .stat-val.pos {
    color: #008000 !important;
    font-weight: normal !important;
}

.neg,
.retro-table td.neg,
.port-table td.neg,
.chip-val.neg,
.port-chart-stats .stat-val.neg {
    color: #CC0000 !important;
    font-weight: normal !important;
}

@media (max-width: 1024px) {
    .port-summary-grid {
        grid-template-columns: 1fr;
    }
    .port-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* C++ BANKING TERMINAL */

.controls-wrapper {
    display: flex;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    gap: 8px;
    align-items: center;

}

.button-group {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    margin-left: 3px;


}

.pie-button-group {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    margin-left: 5px;


}

.tf-btn {
    background-color: #252525;
    border: none;
    color: #ffffff;

    font-size: 14px;
    font-weight: 300;
    padding: 1px 10px;
    border-radius: 1px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tf-btn:hover {
    color: #dfdfdf;
    background-color: #383838;
    /* Darkens on hover */
}

/* The active state creates a white pill effect over the gray track */
.tf-btn.active {
    background-color: #F39F41;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}


/* STOCK PORTFOLIO TERMINAL STYLING */
@font-face {
    font-family: 'Bergoom';
    src: url('/static/fonts/Bergoom-Regular.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bergoom';
    src: url('/static/fonts/Bergoom-Semibold.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bergoom';
    src: url('/static/fonts/Bergoom-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.body-alt {
    background-color: #000000;
    color: var(--gray-1);
    margin: 0;
    padding: 0;
    position: relative;
    padding-top: 20px;
}

.terminal-title {
    color: #000000;
    font-weight: 300;
    margin: 1px 0 1px 0;
    letter-spacing: -0.0em;
    padding: 2px;
    padding-left: 8px;

}

.term-title-bar {
    display: grid;
    grid-template-columns: 330px auto;
    gap: 4px;
    margin-top: 2px;
    margin-bottom: 10px;
}

.terminal-title-2 {
    color: #ffffff;
    font-weight: 300;
    margin: 1px 0 1px 0;
    letter-spacing: -0.01em;
    padding: 2px;
    padding-right: 8px;
    text-align: right;

}

.title-box {
    background-color: #86E6E7;

}

.title-box-2 {

    background: linear-gradient(to bottom, #4fa1ff, #1570d7, #0E5EB9, #0a3a71);
}

.breakdown-label-term {

    font-family: 'Bergoom', monospace;

    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.00em;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: linear-gradient(to bottom, #767676, #777777, #5d5d5d, #454545, #393939, #202020);
    text-align: left;
    margin-right: 1px;
}

.breakdown-label-term-secondary {
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.00em;
    text-align: right;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: linear-gradient(to bottom, #767676, #777777, #5d5d5d, #454545, #393939, #202020);
}

.breakdown-label-term-secondary-news {
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.00em;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: linear-gradient(to bottom, #767676, #777777, #5d5d5d, #454545, #393939, #202020);
}

/* ===== Top movers table =====
   One set of column sizes drives both the header strip (.sect-head) and the table
   below it, so they stay lined up at every screen width. Change the sizes here only. */
.term-section {
    --col-chg: 100px;
    /* "% Chg" column */
    --col-port: 140px;
    /* "% of Portfolio" column */
    --gap: 3px;
    /* gap between the header cells */
    --divider-w: 1px;
    /* header gap (3px) + margin-right on the first label (2px) */

    position: relative;
    border: 2px solid #393939;
    border-radius: 1px;
}

/* One solid divider between column 1 and column 2, full height of the card.
   Same color as the header gap, so it reads as a continuation of it. */
.term-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--col-chg) + var(--gap) + var(--col-port));
    width: var(--divider-w);
    background: #9e9e9e;
    pointer-events: none;
}

.sect-head {
    display: grid;
    gap: var(--gap, 3px);
    grid-template-columns: 1fr var(--col-chg, 100px) var(--col-port, 140px);
    background-color: #9e9e9e;
    text-align: right;
}

.term-section.four-col {
    --col-a: 110px;
    /* 2nd column (e.g. Portfolio) */
    --col-b: 130px;
    /* 3rd column (e.g. SPY) */
    --col-c: 100px;
    /* 4th column (e.g. Alpha) */
}

/* Header strip: flexible label column + the three fixed number columns */
.term-section.four-col .sect-head {
    grid-template-columns: 1fr var(--col-a) var(--col-b) var(--col-c);
}

/* Divider between column 1 and column 2: its right edge sits at the left edge of
   column 2, which is (col-a + col-b + col-c + the 2 gaps between those columns)
   in from the right of the card. */
.term-section.four-col::after {
    right: calc(var(--col-a) + var(--col-b) + var(--col-c) + 2 * var(--gap));
}

.four-col table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* no gaps between rows */
    color: #ffffff;
    /* neutral color for numbers. Set on the table, not the
                                    cells, so .pos / .neg on a cell can still override it */
}

.four-col td {
    font-weight: 300;
    padding: 5px 4px;
    /* 4px sideways = same inset as the header cells */
    text-align: right;
}

/* column 1: label (takes whatever width is left) */
.four-col td:nth-child(1) {
    color: #86E6E7;
    text-align: left;
    padding-right: 8px;
    /* keeps text clear of the divider */
}

/* columns 2-4: each cell is its header width + the 3px gap in front of it */
.four-col td:nth-child(2) {
    width: calc(var(--col-a) + var(--gap));
}

.four-col td:nth-child(3) {
    width: calc(var(--col-b) + var(--gap));
}

.four-col td:nth-child(4) {
    width: calc(var(--col-c) + var(--gap));
}

.term-section.two-col {
    --col-a: 120px;
    /* 2nd column (e.g. Portfolio) */
}

/* Header strip: flexible label column + one fixed number column */
.term-section.two-col .sect-head {
    grid-template-columns: 1fr var(--col-a);
}

/* Divider between column 1 and column 2: with a single number column there are no
   gaps between number columns, so it sits exactly col-a in from the right. */
.term-section.two-col::after {
    right: var(--col-a);
}

.two-col table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* no gaps between rows */
    color: #ffffff;
    /* neutral color for numbers. Set on the table, not the
                                    cells, so .pos / .neg on a cell can still override it */
}

.two-col td {
    font-weight: 300;
    padding: 5px 4px;
    /* 4px sideways = same inset as the header cells */
    text-align: right;
}

/* column 1: label (takes whatever width is left) */
.two-col td:nth-child(1) {
    color: #86E6E7;
    text-align: left;
    padding-right: 8px;
    /* keeps text clear of the divider */
}

/* column 2: header width + the 3px gap in front of it */
.two-col td:nth-child(2) {
    width: calc(var(--col-a) + var(--gap));
}


/* .term-movers-table th {
    font-family: 'Bergoom', monospace;
    text-align: left;
    font-size: 22px;
    font-weight: 300;
    color: var(--gray-1);
    
    padding: 8px 0 10px 0;
    border-bottom: 1px solid var(--gray-6);
} */

.term-movers-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* no gaps between rows */
}

.term-movers-table td {
    font-weight: 300;
    padding: 5px 4px;
    /* 4px sideways = same inset as the header cells */
}

.term-movers-table th {
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.00em;
    padding: 4px;
    background: linear-gradient(to bottom, #767676, #777777, #5d5d5d, #454545, #393939, #202020);
    border-spacing: 3px;

}

.term-movers-table thead {
    column-gap: 3px;
}


/* column 1: ticker (takes whatever width is left) */
.term-movers-table td:nth-child(1) {
    color: #86E6E7;
    font-weight: 300;
    text-align: left;
    padding-right: 8px;
    /* keeps text clear of the divider */
}

.term-movers-table th:nth-child(1) {
    text-align: left;
}

/* column 2: % Chg (don't set color here, it comes from .pos / .neg) */
.term-movers-table td:nth-child(2) {
    width: calc(var(--col-chg, 100px) + var(--gap, 3px));
    text-align: right;
}

.term-movers-table th:nth-child(2) {
    text-align: right;
}

/* column 3: % of Portfolio */
.term-movers-table td:nth-child(3) {
    width: calc(var(--col-port, 140px) + var(--gap, 3px));
    text-align: right;
    color: #ffffff;
}

.term-movers-table th:nth-child(3) {
    text-align: right;
}


.dashboard-bar {
    position: relative;
    display: grid;
    grid-template-columns: 15% auto;
    align-items: center;
    min-height: 34px;
    /* Props the container open for the 24px chart */


}

.benchmark-bar {
    position: absolute;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two mathematically perfect 50% halves */
    gap: 36px;
    /* The central gap between the two halves */
}

.benchmarks {
    display: flex;
    align-items: center;
    gap: 36px;
    /* The gap between the individual indexes inside each half */
}

/* Pushes S&P and Nasdaq flush against the center gap */
.left-half {
    justify-content: flex-end;
}

/* Pushes Dow and Bond flush against the center gap */
.right-half {
    justify-content: flex-start;
}

.bench {
    display: grid;
    grid-template-columns: auto auto auto;
    /* Changed to 3 columns */
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 300;
}

.bench-chg {
    font-weight: 300;
    font-family: 'Bergoom', monospace;

}


.date {
    color: #F39F41;
    font-weight: 300;
}



.return-head {
    max-width: 1450px;
    padding-left: 40px;
}

.return {
    font-weight: 300;
    color: #ffffff;
    padding-top: 4px;
    padding-bottom: 0px;
}

.return-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    transition: font-color 0.15s ease, color 0.15s ease;
}

.return-link:hover {
    color: #c6c6c6;
}

.term-container {
    position: relative;
    z-index: 1;
    /* Above grain, but below the header */
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 10px 40px;
    padding-bottom: 40px;
}

.main-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
}

.chart-canvas {
    width: 100%;
    height: 450px;
}

.pie-chart-canvas {
    width: 100%;
    height: 350px;
}



.pie-row {
    display: grid;
    grid-template-rows: 318px auto;
    gap: 6px;
}

.chart-card {
    padding: 0px;
    border: 2px solid #393939;
    border-radius: 1px;

}

.chart-card-2 {
    padding: 0px;
    border: 2px solid #393939;
    border-radius: 1px;
    overflow: hidden;

}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 0.00em;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: linear-gradient(to bottom, #767676, #777777, #5d5d5d, #454545, #393939, #202020);
    text-align: left;
    margin-right: 0px;
}


.term-section.earnings-col {
    --col-chg: 140px;
    /* Expands the Date column so 2026-10-13 fits on one line */
    --col-port: 100px;
    /* Slims the EPS column to fit numbers like 2.61 */
}

.term-section.earnings-col td {
    white-space: nowrap;
    /* Hard safeguard against text breaking onto two lines */
}

.term-section.earnings-col td:nth-child(2) {
    color: #ffffff;
}

.term-section.four-col-news {
    --col-a: 140px;
    /* 2nd column */
    --col-b: 170px;
    /* 3rd column */
    --col-c: 155px;
    /* 4th column */
}

/* Header strip: flexible label column + the three fixed number columns */
.term-section.four-col-news .sect-head {
    grid-template-columns: 1fr var(--col-a) var(--col-b) var(--col-c);
}

/* Divider between column 1 and column 2: its right edge sits at the left edge of
   column 2, which is (col-a + col-b + col-c + the 2 gaps between those columns)
   in from the right of the card. */
.term-section.four-col-news::after {
    right: calc(var(--col-a) + var(--col-b) + var(--col-c) + 2 * var(--gap));
}

.four-col-news table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* no gaps between rows */
    color: #ffffff;
    /* neutral color for numbers. Set on the table, not the
                                    cells, so .pos / .neg on a cell can still override it */
}

.four-col-news td {
    font-weight: 300;
    padding: 5px 4px;
    /* 4px sideways = same inset as the header cells */
    text-align: right;
}

/* column 1: label (takes whatever width is left) */
.four-col-news td:nth-child(1) {
    color: #86E6E7;
    text-align: left;
    padding-right: 8px;
    /* keeps text clear of the divider */
}

/* columns 2-4: each cell is its header width + the 3px gap in front of it */
.four-col-news td:nth-child(2) {
    width: calc(var(--col-a) + var(--gap));
    text-align: left;
    padding-left: 10px;
}

.four-col-news td:nth-child(3) {
    width: calc(var(--col-b) + var(--gap));
}

.four-col-news td:nth-child(4) {
    width: calc(var(--col-c) + var(--gap));
}

.four-col-news tr:nth-child(even) {
    background-color: #121212;
}

/* Force user input to uppercase */
input[name="tickers[]"] {
    text-transform: uppercase;
}

/* Prevent the placeholder from inheriting the uppercase transformation */
input[name="tickers[]"]::placeholder {
    text-transform: none;
}

/* ============================================================
   OPTION 1: DUAL-PANE FINANCIAL WORKSTATION (WINSHARPE 95)
   ============================================================ */

/* ============================================================
   SIMPLIFIED DUAL-PANE FINANCIAL WORKSTATION (WINSHARPE 95)
   ============================================================ */

.sharpe-app-container {
    padding: 16px 20px 0px 20px;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sharpe-window {
    width: 100%;
    margin-bottom: 24px;
}

/* Formula Strip under Window Title / Menu */
.sharpe-formula-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background-color: #DFDFDF;
    border-bottom: 1px solid #828282;
    font-family: 'W95FA', monospace, sans-serif;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px;
}

.sharpe-formula-lhs {
    font-size: 14px;
    font-weight: bold;
    color: #000080;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sharpe-formula-code {
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #000000;
    padding: 2px 10px;
    color: #000000;
    font-size: 13.5px;
}

.sharpe-formula-desc {
    font-size: 12.5px;
    color: #404040;
}

/* Main Dual-Pane Workspace */
.sharpe-workspace {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    background-color: #C3C3C3;
    box-sizing: border-box;
}

.sharpe-left-pane {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
}

.sharpe-right-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Authentic Windows 95 GroupBox */
.retro-groupbox {
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #FFFFFF, inset -1px -1px #828282;
    padding: 12px 14px 14px 14px;
    margin: 0 0 14px 0;
    box-sizing: border-box;
    background-color: #C3C3C3;
    border-radius: 0;
}

.retro-groupbox legend {
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13.5px;
    font-weight: bold;
    color: #000000;
    padding: 0 6px;
    margin-left: 6px;
}

/* 2-Column Parameter Grid */
.retro-param-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.retro-field-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.retro-field-label {
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 12.5px;
    font-weight: bold;
    color: #000000;
}

/* Sunken 3D Textbox & Select */
.retro-input {
    width: 100%;
    height: 28px;
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #000000;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13.5px;
    color: #000000;
    padding: 2px 8px;
    box-sizing: border-box;
    border-radius: 0;
    outline: none;
}

.retro-input:focus {
    outline: 1px dotted #000000;
    outline-offset: -3px;
}

.retro-input.cell-right {
    text-align: right;
}

/* Windows 95 Action Buttons */
.retro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background-color: #C3C3C3;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: inset 1px 1px #DFDFDF, inset -1px -1px #828282;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13.5px;
    font-weight: bold;
    color: #000000;
    cursor: pointer;
    border-radius: 0;
    box-sizing: border-box;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
}

.retro-btn:hover,
.retro-btn:active {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #828282;
    background-color: #DFDFDF;
    padding-top: 2px;
    padding-left: 13px;
    padding-right: 11px;
    padding-bottom: 0px;
}

.retro-btn-primary {
    background-color: #000080;
    color: #FFFFFF;
    border-top: 2px solid #5C6BC0;
    border-left: 2px solid #5C6BC0;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    box-shadow: inset 1px 1px #8282FF, inset -1px -1px #000030;
}

.retro-btn-primary:hover,
.retro-btn-primary:active {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #5C6BC0;
    border-bottom: 2px solid #5C6BC0;
    box-shadow: inset 1px 1px #000030;
    background-color: #000060;
    color: #FFFF00;
    padding-top: 2px;
    padding-left: 13px;
    padding-right: 11px;
    padding-bottom: 0px;
}

/* Asset Rows List */
.retro-asset-divider {
    border: none;
    border-top: 1px solid #828282;
    border-bottom: 1px solid #FFFFFF;
    margin: 8px 0 10px 0;
}

.retro-asset-header {
    display: grid;
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    font-size: 12px;
    font-weight: bold;
    color: #404040;
    margin-bottom: 4px;
    padding: 0 2px;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-asset-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 2px;
}

.retro-asset-row {
    display: grid;
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    align-items: center;
}

.retro-del-btn {
    width: 28px;
    height: 28px;
    background-color: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    color: #C00000;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0;
    user-select: none;
}

.retro-del-btn:hover {
    background-color: #DFDFDF;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.retro-asset-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

/* Clean Windows 95 Sharpe Value Display (Sunken White Card, Navy Text) */
.retro-kpi-card {
    background-color: #FFFFFF;
    border-top: 2px solid #828282;
    border-left: 2px solid #828282;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px #000000;
    padding: 14px 18px;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

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

.retro-kpi-title {
    font-size: 12px;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'W95FA', monospace, sans-serif;
    font-weight: bold;
}

.retro-kpi-num {
    font-size: 42px;
    font-weight: bold;
    color: #000080; /* Clean Deep Windows Navy */
    line-height: 1;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-status-badge {
    padding: 5px 12px;
    font-size: 13.5px;
    font-weight: bold;
    border: 1px solid #000000;
    box-shadow: 1px 1px 0 #828282;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: 'W95FA', monospace, sans-serif;
}

.tier-excellent-badge { background-color: #E8F5E9; color: #1B5E20; border-color: #2E7D32; }
.tier-very-good-badge { background-color: #E1F5FE; color: #0277BD; border-color: #0288D1; }
.tier-good-badge { background-color: #FFFDE7; color: #F57F17; border-color: #FBC02D; }
.tier-poor-badge { background-color: #FFEBEE; color: #C62828; border-color: #D32F2F; }

/* 3-Column Metrics Row */
.retro-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.retro-metric-tile {
    background-color: #FFFFFF;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #DFDFDF;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.retro-metric-label {
    font-size: 11.5px;
    color: #555555;
    font-family: 'W95FA', monospace, sans-serif;
    font-weight: bold;
}

.retro-metric-val {
    font-size: 17px;
    font-weight: bold;
    color: #000080;
    font-family: 'W95FA', monospace, sans-serif;
}

/* Benchmark Scale Bar & Tiers */
.retro-scale-bar {
    display: flex;
    height: 22px;
    border: 2px solid #000000;
    box-shadow: inset 1px 1px #828282;
    background-color: #DFDFDF;
    margin-bottom: 4px;
}

.retro-scale-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border-right: 1px solid #000000;
    box-sizing: border-box;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-scale-seg:last-child {
    border-right: none;
}

.seg-poor-bg { background-color: #EF5350; color: #FFFFFF; }
.seg-good-bg { background-color: #FFEE58; color: #000000; }
.seg-vgood-bg { background-color: #42A5F5; color: #FFFFFF; }
.seg-exc-bg { background-color: #66BB6A; color: #FFFFFF; }

.retro-scale-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    padding: 0 4px;
    margin-bottom: 10px;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-tiers-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.retro-tier-box {
    background-color: #DFDFDF;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    box-shadow: 1px 1px 0 #000000;
    padding: 8px 10px;
    box-sizing: border-box;
}

.retro-tier-header {
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 3px 0;
    color: #000000;
    font-family: 'W95FA', monospace, sans-serif;
}

.retro-tier-text {
    font-size: 11.5px;
    color: #404040;
    line-height: 1.35;
    margin: 0;
    font-family: 'W95FA', monospace, sans-serif;
}

/* Mathematical Breakdown Table */
.retro-table-wrap {
    overflow-x: auto;
    border-top: 1px solid #828282;
    border-left: 1px solid #828282;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: inset 1px 1px #000000;
    background-color: #FFFFFF;
}

.retro-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'W95FA', monospace, sans-serif;
    font-size: 13px;
}

.retro-table th {
    background-color: #C3C3C3;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #828282;
    border-bottom: 1px solid #828282;
    box-shadow: inset 1px 1px #DFDFDF, inset -1px -1px #000000;
    font-weight: bold;
    text-align: left;
    padding: 4px 8px;
    color: #000000;
    user-select: none;
}

.retro-table td {
    border: 1px solid #D4D0C8;
    padding: 4px 8px;
    color: #000000;
}

.retro-table tr:nth-child(even) td {
    background-color: #F8F8F8;
}

@media (max-width: 900px) {
    .sharpe-app-container {
        padding: 10px 8px 40px 8px;
    }
    .sharpe-workspace {
        flex-direction: column;
    }
    .sharpe-left-pane {
        flex: 1 1 auto;
        width: 100%;
    }
    .retro-metrics-row {
        grid-template-columns: 1fr;
    }
    .retro-tiers-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'W95FA';
    src: url('/static/fonts/w95f.woff2') format('woff2'),
         url('/static/fonts/w95f.woff') format('woff'),
         url('/static/fonts/W95F.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}