/* --- General Setup & Resets --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Saira", sans-serif;
            background-color: rgba(255, 255, 255, 0.7); /* bg-slate-100 */
            color: #6b7280; /* text-slate-700 */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* --- Main Layout --- */
        .main-container {
            min-height: 100vh;
            padding: 1rem;
        }

        .content-wrapper {
            max-width: 56rem; /* max-w-4xl */
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 0.75rem; /* rounded-xl */
            /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -4px rgba(0, 0, 0, 0.1),
            0 -6px 12px -4px rgba(0, 0, 0, 0.1); */
            overflow: hidden;
        }

        /* --- Header --- */
        .header {
            padding: 0rem 1.5rem;
            border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
        }
        .header h1 {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 500;
            color: #002A77; /* text-slate-800 */
        }
        .header p {
            color: #000; /* text-slate-500 */
            margin-top: 0.25rem;
            font-size: 0.875rem; /* text-sm */
        }

        /* --- Trade List --- */
        .trade-list-container {
            display: flex;
            flex-direction: column;
        }
        
        /* --- Status Message (Loading/Error) --- */
        .status-message {
            color: #64748b;
            text-align: center;
            padding: 2rem;
            font-style: italic;
        }

        /* --- Trade Row Styling --- */
        .trade-row {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Mobile first: 2 columns */
            gap: 0.5rem 1rem;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
            transition: background-color 0.2s ease;
            position: relative;
            padding-left: 2.5rem; /* Space for the timeline indicator */
        }
        
        .trade-row:last-child {
            border-bottom: none;
        }

        /* .trade-row:hover {
            background-color: #f8fafc; /* hover:bg-slate-50 */
        } */
        
        /* The colored timeline indicator line */
        .trade-row::before {
            content: '';
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 50%;
            border-radius: 2px;
            background-color: #6b7280; /* Default/Neutral color */
        }

        /* Timeline Indicator Colors */
        .trade-row.price-up::before { background-color: #22c55e; } /* Green */
        .trade-row.price-down::before { background-color: #ef4444; } /* Red */
        
        /* Row Data Sections */
        .trade-data-point .label {
            font-size: 0.75rem; /* text-xs */
            color: #000; /* text-slate-500 */
            margin-bottom: 0.125rem;
            display: block;
        }
        
        .trade-data-point .value {
            font-weight: 600;
            font-size: 1rem;
            color: #000;
        }

        .trade-data-point .price-value {
            font-weight: 700;
            font-size: 1.125rem;
        }
        
        /* .trade-data-point .volume-value {
            font-family: monospace;
        } */

        .poweredby {
            font-size: 8px;
            color: #999999;
            text-align: right;
            margin: 15px auto 0 auto;
            padding-right: 8px;
            padding-top: 5px;
            letter-spacing: 2px;
            height: 10px;
            border-top: 1px solid #e2e8f0;
            padding: 5px 0;
            max-width: 896px;
        }
        
        .poweredby img {
            height: 10px;
            margin-top: 5px;
        }

        /* Price Color Classes (for text) */
        .price-up .price-value { color: #22c55e; } /* text-green-800 */
        .price-down .price-value { color: #AE1326; } /* text-red-800 */
        
        /* --- Responsive Design --- */
        @media (min-width: 640px) { /* sm breakpoint */
            .trade-row {
                grid-template-columns: 0.75fr 1fr 1fr; /* 3 columns for desktop */
                align-items: center;
                gap: 1.5rem;
            }
        }