/* ---------- top bar ---------- */
            #topbar {
                background: var(--chrome);
                color: #e8eef3;
                flex: 0 0 auto;
                display: flex;
                align-items: stretch;
                gap: 0;
                padding: 0 14px;
                height: 46px;
            }
            .wordmark {
                display: flex;
                align-items: center;
                gap: 8px;
                padding-right: 16px;
                font-family: "Instrument Serif", Georgia, serif;
                font-style: italic;
                font-size: 20px;
                color: #fff;
                letter-spacing: 0.2px;
                user-select: none;
            }
            .wordmark .dot {
                width: 8px;
                height: 8px;
                border-radius: 2px;
                background: var(--accent);
                transform: rotate(45deg);
            }
            .wordmark.clickable {
                cursor: pointer;
                border-radius: 6px;
                padding: 2px 6px;
                margin-left: -6px;
            }
            .wordmark.clickable:hover {
                background: var(--chrome2);
            }
            .basename {
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 0 14px 0 16px;
                font-weight: 600;
                font-size: 13px;
                color: #c9d4dd;
                border-left: 1px solid #16303f;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 220px;
                flex: 0 0 auto;
            }
            .basename:hover {
                color: #e8eef3;
            }
            .basename .bicon {
                font-size: 14px;
                line-height: 1;
            }
            .basename .bdot {
                width: 9px;
                height: 9px;
                border-radius: 3px;
                flex: 0 0 auto;
            }
            .topgear {
                display: grid;
                place-items: center;
                width: 34px;
                color: #9fb0bc;
                font-size: 15px;
            }
            .topgear:hover {
                color: #e8eef3;
            }
            #tabs {
                display: flex;
                align-items: flex-end;
                margin-left: 18px;
                overflow-x: auto;
                scrollbar-width: none;
            }
            #tabs::-webkit-scrollbar {
                display: none;
            }
            .tab {
                padding: 0 14px;
                height: 46px;
                display: flex;
                align-items: center;
                gap: 6px;
                white-space: nowrap;
                color: #9fb0bc;
                font-weight: 500;
                border-bottom: 2px solid transparent;
                font-size: 13px;
            }
            .tab:hover {
                color: #e8eef3;
                background: var(--chrome2);
            }
            .tab.active {
                color: #fff;
                border-bottom-color: var(--accent);
            }
            .tab .caret {
                opacity: 0.55;
                font-size: 10px;
            }
            .tab-add {
                padding: 0 12px;
                height: 46px;
                color: #9fb0bc;
                font-size: 16px;
            }
            .tab-add:hover {
                color: var(--accent);
            }
            #topbar .spacer {
                flex: 1;
            }
            .chrome-note {
                display: flex;
                align-items: center;
                color: #5e7385;
                font-size: 11px;
                gap: 6px;
            }
            @media (max-width: 720px) {
                .chrome-note {
                    display: none;
                }
                .basename {
                    display: none;
                }
            }

            /* ---------- view bar ---------- */
            #viewbar {
                background: var(--paper);
                border-bottom: 1px solid var(--line);
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 6px 10px;
                flex: 0 0 auto;
                flex-wrap: nowrap;
                overflow-x: auto;
            }
            .vbtn {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 5px 10px;
                border-radius: var(--r);
                color: #3e4c5b;
                font-weight: 500;
                white-space: nowrap;
                border: 1px solid transparent;
            }
            .vbtn:hover {
                background: var(--hover);
            }
            .vbtn.iconvbtn {
                padding: 5px 7px;
            }
            .vbtn.rowh-btn {
                padding: 5px 7px;
            }
            .vbtn[disabled] {
                opacity: 0.38;
                cursor: default;
            }
            .vbtn[disabled]:hover {
                background: none;
            }
            .vbtn.iconvbtn .ic {
                opacity: 0.85;
            }
            .vbtn .ic {
                width: 14px;
                height: 14px;
                flex: 0 0 auto;
                opacity: 0.75;
            }
            .vbtn.viewname {
                font-weight: 600;
                color: var(--ink);
                border: 1px solid var(--line);
                padding: 5px 12px;
            }
            .vbtn.on-filter {
                background: var(--tint-filter-bg);
                color: var(--tint-filter-tx);
            }
            .vbtn.on-sort {
                background: var(--tint-sort-bg);
                color: var(--tint-sort-tx);
            }
            .vbtn.on-group {
                background: var(--tint-group-bg);
                color: var(--tint-group-tx);
            }
            .vbtn.on-hide {
                background: var(--tint-hide-bg);
                color: var(--tint-hide-tx);
            }
            .vbtn.on-color {
                background: var(--tint-color-bg);
                color: var(--tint-color-tx);
            }
            .vb-sep {
                width: 1px;
                height: 18px;
                background: var(--line);
                margin: 0 6px;
                flex: 0 0 auto;
            }
            #viewbar .spacer {
                flex: 1;
                min-width: 8px;
            }
            #searchwrap {
                display: flex;
                align-items: center;
                gap: 6px;
                border: 1px solid var(--line);
                border-radius: var(--r);
                padding: 4px 8px;
                background: var(--field-bg);
            }
            #searchwrap input {
                border: 0;
                outline: none;
                width: 150px;
                font-size: 13px;
                background: transparent;
            }
            #rowcount {
                color: var(--faint);
                font-size: 12px;
                padding: 0 8px;
                white-space: nowrap;
            }