.cn-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.cn-summary .value { overflow-wrap: anywhere; }
.cn-summary .cn-net { border-top: 3px solid var(--green, #16734b); }
.cn-summary .cn-issued { border-top: 3px solid #bd4848; }
.cn-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.cn-controls label { display: grid; gap: 6px; font-size: 14px; }
.cn-controls select, .cn-controls input { min-height: 42px; max-width: 100%; }
.cn-controls .cn-search { flex: 1 1 240px; }
.cn-status { margin: 12px 0 0; font-size: 14px; color: var(--muted, #536171); line-height: 1.6; }
.cn-status[data-state="waiting"], .cn-status[data-state="error"] { color: #9d3838; }
.cn-graphs { display: grid; gap: 18px; }
.cn-graph-scroll { overflow-x: auto; padding-top: 12px; }
.cn-graph { height: 285px; min-width: 670px; position: relative; margin: 0 15px 25px 40px; }
.cn-graph .bar { background: #bd4848; }
.cn-graph .bar[title$="RM 0"] { height: 0 !important; }
.cn-table-wrap { overflow: auto; max-height: 530px; }
.cn-table-wrap th { position: sticky; top: 0; background: var(--panel, #fff); z-index: 1; }
.cn-total { font-weight: 700; border-top: 2px solid #d7dee6; }
.cn-table-wrap td, .cn-table-wrap th { font-size: 14px; }
.cn-unavailable { display: grid; place-content: center; min-height: 240px; color: var(--muted, #536171); text-align: center; padding: 24px; }
.cn-month-button { padding: 5px 8px; font: inherit; }
@media(max-width: 850px) { .cn-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 520px) { .cn-summary { grid-template-columns: 1fr; gap: 10px; } .cn-controls label { flex: 1 1 130px; } }