/* ===== Topbar, Filters, Period ===== */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0 }
#topbar { background: #fff; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; padding: 0 14px; gap: 7px; flex-shrink: 0; flex-wrap: wrap; box-shadow: 0 1px 4px rgba(0,0,0,.05); min-height: var(--topbar-h) }
.topbar-title { font-family: "Syne", sans-serif; font-size: 14px; font-weight: 700; color: var(--purple-dark); flex: 0 0 auto }
.period-tabs { display: flex; gap: 3px; flex-wrap: wrap }
.period-tab { padding: 3px 7px; border-radius: 5px; font-size: 11px; cursor: pointer; border: 1px solid var(--gray-200); color: var(--gray-600); background: #fff; transition: all .15s; white-space: nowrap }
.period-tab.active { background: var(--purple); color: #fff; border-color: var(--purple); font-weight: 500 }
.date-range-wrap { display: flex; align-items: center; gap: 5px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 7px; padding: 3px 8px }
.date-range-wrap label { font-size: 10px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; white-space: nowrap }
.date-range-wrap input[type=date] { border: none; background: transparent; font-size: 12px; font-family: "DM Sans", sans-serif; color: var(--gray-800); outline: none; cursor: pointer; width: 115px }
.date-sep { font-size: 11px; color: var(--gray-400) }
#content { flex: 1; overflow-y: auto; padding: 14px 18px; -webkit-overflow-scrolling: touch }
.page { display: none }
.page.active { display: block }
#periodBanner { background: #f3e8ff; border: 1px solid #d8b4fe; border-radius: 7px; padding: 5px 10px; font-size: 11px; color: var(--purple); display: flex; align-items: center; gap: 6px; font-weight: 500; margin-bottom: 12px; flex-wrap: wrap }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 12px; background: #fff; border-radius: 8px; border: 1px solid var(--gray-200) }
.filter-label { font-size: 11px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap }
.overflow-table { overflow-x: auto; -webkit-overflow-scrolling: touch }
.overflow-table .data-table, .overflow-table .ind-table { min-width: 520px }