:root {
    --color-positive: #2b97fa;
    --color-negative: #e23546;
}

body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }

/* chart */
.revenue-table { width: 90%; max-width: 600px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; }
.revenue-table th, .revenue-table td { padding: 10px; text-align: center; border-bottom: 1px solid #ddd; }
.revenue-table th { background: #f4f4f4; }
.revenue-table td { border-right: none; } /* 縦線なし */
.positive { color: var(--color-positive); font-weight: bold; } 
.negative { color: var(--color-negative); font-weight: bold; } 
#total-revenue { font-size: 18px; font-weight: bold; margin-top: 10px; }

/* profit */
#tag-filter { margin-top: 10px; }
canvas { width: 100%; max-width: 800px; margin: auto; }
#view-mode { margin-top: 15px; }
.view-btn {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}
.view-btn.active {
    background-color: #0056b3;
}