/* Tab frame: header with the mode switch, page area, full-tab overlay, balance bar (PhoneCallBalanceController). */
.tab { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--window-bg); }
.tab-header { height: 60px; flex: none; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--card-border); }
.tab-header .grow { flex: 1; }
.tab-header .segmented { border-radius: 9px; padding: 3px; }
.tab-header .segmented button { height: 26px; }
.tab-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.tab-body > * { flex: 1; min-height: 0; }
.tab > .body-override { flex: 1; min-height: 0; overflow: auto; }
.tab-overlay { position: absolute; inset: 0; z-index: 20; background: var(--window-bg); display: flex; flex-direction: column; }
.tab-overlay > * { flex: 1; min-height: 0; }

.balancebar { height: 58px; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 24px; border-top: 1px solid var(--separator); background: var(--chrome-bg); }
.balancebar .grow { flex: 1; }
.balancebar .balance-text { font-size: 15px; margin-right: 14px; }
.balancebar .balance-text b { font-weight: 600; }
.balancebar .buy { min-width: 140px; }

.infobar .signin { font-size: 12px; font-weight: 500; color: #0068DA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .infobar .signin { color: #419CFF; } }

/* two-column page frame (makeColumns + addSectionHeader) */
.cols { display: flex; flex: 1; min-height: 0; }
.cols > .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cols > .col + .col { border-left: 1px solid var(--card-border); }
.section-header { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.section-header h2 { margin: 0; font-size: 22px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-scroll { flex: 1; min-height: 0; overflow: auto; }

@media (max-width: 900px) {
    .cols { flex-direction: column; overflow: auto; }
    .cols > .col { flex: none; }
    .cols > .col + .col { border-left: 0; border-top: 1px solid var(--card-border); }
    .col-scroll { overflow: visible; }
    .balancebar { padding-left: 16px; }
    .balancebar .balance-text { font-size: 13px; margin-right: 4px; }
    .balancebar .buy { min-width: 0; }
    .tab-header { padding: 0 16px; }
    .tab-header .grow { display: none; }
    .tab-header .segmented { margin: 0 auto; }
}