body {
    font-family: Arial, sans-serif;
    margin: 10px;
    background-color: #f5f5f5;
    padding-bottom: 20px;
}
.container {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow-x: auto;
}

/* --- Table Styling --- */
.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.index { font-weight: bold; }
.timestamp { text-align: right; color: black; }

table {
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
}

th, td {
    padding: 6px 4px;
    text-align: right;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

th:nth-last-child(2), td:nth-last-child(2) { text-align: center; }

th {
    background-color: #e0e0e0;
    font-weight: bold;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

tr:nth-child(even) { background-color: #f9f9f9; }

/* --- Arrows --- */
.arrow-up { font-weight: bold; }
.arrow-down { font-weight: bold; }
.arrow-none { color: #ccc; }
.trend-indicator {
    font-weight: bold;
    margin-right: 4px;
}

/* --- Row Highlight --- */
.highlight { background-color: #ffff99 !important; }

/* --- Logic-Based Text Colors --- */
.style-flat, .style-flat a { color: black !important; }
.style-rise-small, .style-rise-small a { color: #4169E1 !important; }
.style-rise-big, .style-rise-big a { color: #0000ff !important; }
.style-fall-small, .style-fall-small a { color: #FF4500 !important; }
.style-fall-big, .style-fall-big a { color: red !important; }

/* --- NEW: Tick Background Colors (Very Light) --- */
.bg-tick-up { background-color: #e6f7ff !important; }   /* Very Light Blue */
.bg-tick-down { background-color: #fff1f0 !important; } /* Very Light Red */

/* --- Link Styling --- */
.stock-link {
    text-decoration: none;
    cursor: pointer;
    display: block;
    font-weight: normal;
}
.stock-link:hover {
    text-decoration: underline;
}

.stock-no { text-align: right; font-weight: normal; }
.stock-name { text-align: right; font-weight: normal; }
.rt-quote { text-align: right; font-weight: bold; }

.resizer {
    display: inline-block;
    width: 10px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    cursor: col-resize;
    z-index: 10;
}
.resizer:hover { background: rgba(0, 0, 0, 0.1); }
.resizer.isResizing { background: rgba(0, 0, 255, 0.3); }

/* --- Control Panel --- */
.controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f7ff;
    border-radius: 5px;
    align-items: center;
    border-top: 1px solid #ddd;
    flex-wrap: wrap;
}
.control-group { display: flex; align-items: center; gap: 5px; }
.controls input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.input-code { width: 120px; }
.input-interval { width: 60px; }
.input-message {
    font-size: 12px;
    color: #8a1f11;
    min-width: 120px;
}
.input-message.success { color: #1f6f2a; }

.btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; }
.btn-add { background-color: #28a745; }
.btn-add:hover { background-color: #218838; }
.btn-set { background-color: #007bff; }
.btn-set:hover { background-color: #0056b3; }
.btn-sort { background-color: #17a2b8; }
.btn-sort:hover { background-color: #117a8b; }
.btn-reset { background-color: #6c757d; margin-left: auto; font-size: 0.9em; }
.btn-delete { background-color: #dc3545; color: white; border: none; border-radius: 3px; width: 24px; height: 24px; cursor: pointer; line-height: 24px; text-align: center; padding: 0; font-size: 14px; }
.btn-delete:hover { background-color: #c82333; }
.divider { width: 1px; height: 30px; background-color: #ccc; margin: 0 10px; }

.row-error {
    background-color: #fff6f6 !important;
    color: #a30000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .header {
        justify-content: flex-start;
    }
    .timestamp {
        width: 100%;
    }
    .controls {
        gap: 10px;
    }
}