:root {
            --bg: #f4f6f8;
            --surface: #ffffff;
            --ink: #182430;
            --ink-soft: #5b6b7a;
            --ink-faint: #8b99a7;
            --line: #dfe5ec;
            --line-strong: #c9d2dc;
            --accent: #0e7490;
            --accent-ink: #ffffff;
            --accent-soft: #e6f4f7;
            --sel: #d9eef3;
            --sel-edge: #0e7490;
            --sorted: #fff7e3;
            --t-int: #155e75;
            --t-num: #0e7490;
            --t-date: #7c4a03;
            --t-str: #5b6b7a;
            --mono: ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
            --sans: -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
            --row-h: 26px;
        }

        * {
            box-sizing: border-box
        }

        html, body {
            height: 100%
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font: 14px/1.45 var(--sans);
            display: flex;
            flex-direction: column
        }

        /* ---------- top bar ---------- */
        header {
            background: var(--surface);
            border-bottom: 1px solid var(--line);
            padding: 10px 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center
        }

            header .brand {
                font-weight: 700;
                letter-spacing: .2px;
                margin-right: 6px
            }

                header .brand b {
                    color: var(--accent)
                }

        .tgroup {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap
        }

        .vr {
            width: 1px;
            align-self: stretch;
            background: var(--line);
            margin: 0 4px
        }

        button, select, input[type=text], input[type=number] {
            font: 13px var(--sans);
            color: var(--ink)
        }

        button {
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 6px;
            padding: 5px 11px;
            cursor: pointer
        }

            button:hover {
                border-color: var(--accent);
                color: var(--accent)
            }

            button.primary {
                background: var(--accent);
                border-color: var(--accent);
                color: var(--accent-ink)
            }

                button.primary:hover {
                    filter: brightness(1.08);
                    color: var(--accent-ink)
                }

            button:disabled {
                opacity: .45;
                cursor: default;
                pointer-events: none
            }

        select, input[type=text], input[type=number] {
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 6px;
            padding: 5px 8px
        }

        #fmtSel {
            width: auto;
            min-width: 0;
            padding-right: 4px
        }

        input:focus, select:focus, button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px
        }

        label.chk {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--ink-soft);
            cursor: pointer;
            white-space: nowrap
        }

        .filebtn input {
            display: none
        }

        /* ---------- options row ---------- */
        #optionsBar, #rowToolsBar {
            background: var(--surface);
            border-bottom: 1px solid var(--line);
            padding: 8px 14px;
            display: none;
            flex-wrap: wrap;
            gap: 8px 18px;
            align-items: center;
            font-size: 13px;
            color: var(--ink-soft)
        }

            #optionsBar.open, #rowToolsBar.open {
                display: flex
            }

            #optionsBar .olabel, #rowToolsBar .olabel {
                font-size: 11px;
                font-weight: 600;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--ink-faint)
            }

            #optionsBar input[type=number] {
                width: 64px
            }

        /* ---------- grid ---------- */
        #vp {
            flex: 1;
            overflow: auto;
            position: relative;
            background: var(--surface);
            outline: none
        }

        #grid {
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
            font: 13px/1 var(--mono)
        }

            #grid th, #grid td {
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
                padding: 0 8px;
                height: var(--row-h);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                background-clip: padding-box
            }

            #grid thead th {
                position: sticky;
                top: 0;
                z-index: 3;
                background: #eef2f6;
                font: 600 12px var(--sans);
                color: var(--ink);
                text-align: left;
                user-select: none;
                cursor: pointer;
                border-bottom: 1px solid var(--line-strong)
            }

                #grid thead th .hwrap {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    min-width: 0
                }

                #grid thead th .hname {
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis
                }

        .badge {
            font: 600 9px var(--sans);
            letter-spacing: .05em;
            border-radius: 3px;
            padding: 1px 4px;
            flex: none;
            color: #fff
        }

            .badge.I {
                background: var(--t-int)
            }

            .badge.N {
                background: var(--t-num)
            }

            .badge.D {
                background: var(--t-date)
            }

            .badge.S {
                background: var(--t-str);
                opacity: .55
            }

        .sortmark {
            flex: none;
            color: var(--accent);
            font-size: 10px;
            width: 9px
        }

        th .rz {
            position: absolute;
            top: 0;
            right: -3px;
            width: 7px;
            height: 100%;
            cursor: col-resize;
            z-index: 4
        }

        th.dragover-l {
            box-shadow: inset 3px 0 0 var(--accent)
        }

        th.dragover-r {
            box-shadow: inset -3px 0 0 var(--accent)
        }

        #grid thead th.rowhdr, #grid tbody td.rowhdr {
            position: sticky;
            left: 0;
            background: #eef2f6;
            color: var(--ink-faint);
            font: 11px var(--sans);
            text-align: right;
            cursor: pointer;
            z-index: 2;
            border-right: 1px solid var(--line-strong)
        }

        #grid thead th.rowhdr {
            z-index: 5
        }

        #grid tbody td {
            background: var(--surface);
            cursor: cell
        }

        #grid tbody tr:nth-child(even) td:not(.rowhdr) {
            background: #fbfcfd
        }

        #grid td.num {
            text-align: right;
            font-variant-numeric: tabular-nums
        }

        #grid td.sortedcol:not(.rowhdr) {
            background: var(--sorted) !important
        }

        #grid tr.dup td:not(.rowhdr) {
            background: var(--dup-bg,#fdecea) !important
        }

        #grid tr.dup td.rowhdr {
            background: var(--dup-hdr,#f9d2cd) !important;
            color: #7a2016
        }

        .tagdot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
            vertical-align: middle
        }

        #grid td.badcell:not(.rowhdr) {
            background: #fde7e7 !important;
            box-shadow: inset 0 0 0 1.5px #e05a5a
        }

        #rulesList .rule-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 6px 0;
            flex-wrap: wrap
        }

        #rulesList .rule-type {
            flex: 0 0 auto;
            min-width: 150px
        }

        #rulesList .rule-param {
            flex: 1 1 120px;
            min-width: 100px
        }

        #rulesList .rule-flags {
            flex: 0 0 70px;
            min-width: 60px
        }

        #rulesList .rule-js {
            font-family: var(--mono);
            font-size: 12px;
            min-height: 48px;
            width: 100%;
            flex-basis: 100%
        }

        #rulesList .rule-del {
            flex: 0 0 auto;
            border: 1px solid var(--line-strong);
            background: var(--surface);
            border-radius: 5px;
            cursor: pointer;
            color: var(--ink-faint);
            width: 26px
        }

            #rulesList .rule-del:hover {
                background: #fde7e7;
                color: #c0392b
            }

        #rulesList .rule-hint {
            color: var(--ink-faint);
            font-size: 12px;
            align-self: center;
            padding: 4px 0
        }

        #rulesList .rule-warn {
            color: #c0392b;
            font-size: 11px;
            flex-basis: 100%
        }

        #rulesList .rule-ci {
            font-size: 12px;
            color: var(--ink-soft);
            display: flex;
            align-items: center;
            gap: 3px
        }

        #rulesMatrix {
            border-collapse: collapse;
            font-size: 12px;
            width: 100%
        }

            #rulesMatrix th, #rulesMatrix td {
                border: 1px solid var(--line);
                padding: 4px 6px;
                text-align: left;
                vertical-align: middle;
                background: var(--surface)
            }

            #rulesMatrix thead th {
                background: #f0f4f8;
                position: sticky;
                top: 0;
                z-index: 1;
                font-weight: 600;
                color: var(--ink)
            }

            #rulesMatrix td.col-name {
                background: #f7f9fb;
                font-weight: 600;
                position: sticky;
                left: 0;
                z-index: 1;
                white-space: nowrap;
                max-width: 220px;
                overflow: hidden;
                text-overflow: ellipsis
            }

            #rulesMatrix input.rp {
                width: 100%;
                min-width: 70px;
                box-sizing: border-box;
                padding: 3px 5px;
                font: 12px var(--sans);
                border: 1px solid var(--line);
                border-radius: 4px;
                background: var(--surface)
            }

                #rulesMatrix input.rp:focus {
                    outline: none;
                    border-color: var(--accent);
                    box-shadow: 0 0 0 2px var(--accent-soft)
                }

                #rulesMatrix input.rp.mono {
                    font-family: var(--mono);
                    font-size: 11px
                }

            #rulesMatrix .req-cell {
                text-align: center
            }

            #rulesMatrix .adv-toggle {
                cursor: pointer;
                color: var(--accent);
                font-size: 11px;
                user-select: none
            }

                #rulesMatrix .adv-toggle:hover {
                    text-decoration: underline
                }

            #rulesMatrix tr.adv-row td {
                background: #fafcfe;
                padding: 6px 6px
            }

            #rulesMatrix tr.adv-row textarea {
                width: 100%;
                box-sizing: border-box;
                font-family: var(--mono);
                font-size: 11px;
                padding: 4px 6px;
                border: 1px solid var(--line);
                border-radius: 4px;
                min-height: 36px;
                background: var(--surface)
            }

            #rulesMatrix .adv-label {
                font-size: 11px;
                color: var(--ink-faint);
                margin-right: 6px
            }

            #rulesMatrix .adv-warn {
                color: #c0392b;
                font-size: 11px;
                margin-left: 6px
            }

            #rulesMatrix .enum-ci {
                display: block;
                margin-top: 3px;
                font-size: 10px;
                color: var(--ink-faint);
                cursor: pointer
            }

            #rulesMatrix .req-sent {
                display: block;
                margin-top: 3px;
                font-size: 9px;
                color: var(--ink-faint);
                cursor: pointer;
                white-space: nowrap
            }

                #rulesMatrix .req-sent input {
                    margin-right: 2px;
                    vertical-align: middle
                }

            #rulesMatrix .sent-override {
                display: block;
                margin-top: 3px;
                width: 100%;
                font-size: 10px;
                padding: 2px 4px
            }

            #rulesMatrix .fix-cell label {
                font-size: 10px;
                color: var(--ink-faint);
                cursor: pointer;
                display: block;
                white-space: nowrap
            }

            #rulesMatrix .auto-type {
                font-size: 10px;
                color: var(--ink-faint);
                margin-top: 3px;
                font-style: italic;
                cursor: help;
                white-space: nowrap
            }

            #rulesMatrix .enum-ci input {
                margin-right: 3px;
                vertical-align: middle
            }

            #rulesMatrix select.rp {
                width: 100%;
                min-width: 96px;
                padding: 3px 5px;
                font: 12px var(--sans);
                border: 1px solid var(--line);
                border-radius: 4px;
                background: var(--surface)
            }

        #grid tr.dupband0 td:not(.rowhdr) {
            background: #eef4fb !important
        }

        #grid tr.dupband1 td:not(.rowhdr) {
            background: #fdf3e7 !important
        }

        #grid tr.dupband0 td.rowhdr {
            background: #dde8f5 !important
        }

        #grid tr.dupband1 td.rowhdr {
            background: #f7e6cf !important
        }

        .tag-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 5px 12px
        }

        .tag-label {
            font-size: 13px;
            color: var(--ink)
        }

        .tag-dots {
            display: flex;
            gap: 5px;
            align-items: center
        }

        .tag-swatch {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            cursor: pointer;
            border: 1.5px solid rgba(0,0,0,.12)
        }

            .tag-swatch:hover {
                transform: scale(1.18)
            }

        .tag-none {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            cursor: pointer;
            border: 1.5px solid var(--line-strong);
            color: var(--ink-faint);
            font-size: 10px;
            text-align: center;
            line-height: 14px
        }

            .tag-none:hover {
                background: #f0f0f0
            }

        #grid td.sel:not(.rowhdr) {
            background: var(--sel) !important
        }

        #grid td.anchor {
            box-shadow: inset 0 0 0 2px var(--sel-edge)
        }

        #cellEd {
            position: absolute;
            display: none;
            z-index: 1;
            margin: 0;
            border: 2px solid var(--accent);
            border-radius: 0;
            padding: 0 6px;
            font: 13px var(--mono);
            background: #fff;
            outline: none;
            box-shadow: 0 2px 10px rgba(14,116,144,.25)
        }

        #filterRow input {
            width: 100%;
            border: 1px solid var(--line-strong);
            border-radius: 4px;
            font: 12px var(--mono);
            padding: 2px 5px;
            margin: 2px 0
        }

        #filterRow th.rowhdr {
            cursor: help;
            color: var(--accent);
            font-weight: 700;
            text-align: center
        }

        #filterRow th {
            position: sticky;
            top: var(--row-h);
            z-index: 3;
            background: #f6f8fa;
            cursor: default;
            padding: 0 4px
        }

        .spacer td {
            border: none !important;
            padding: 0 !important;
            background: var(--surface) !important
        }

        /* ---------- empty state ---------- */
        #empty {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none
        }

            #empty .card {
                border: 2px dashed var(--line-strong);
                border-radius: 12px;
                padding: 38px 52px;
                text-align: center;
                color: var(--ink-soft);
                background: var(--surface)
            }

                #empty .card b {
                    color: var(--ink)
                }

            #empty kbd {
                font: 12px var(--mono);
                border: 1px solid var(--line-strong);
                border-bottom-width: 2px;
                border-radius: 4px;
                padding: 1px 5px;
                background: #f4f6f8
            }

        #vp.dragging #empty .card {
            border-color: var(--accent);
            color: var(--accent)
        }

        /* ---------- footer / status ---------- */
        footer {
            background: var(--surface);
            border-top: 1px solid var(--line);
            padding: 8px 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px 14px;
            align-items: center
        }

        #fnInput {
            width: 130px
        }

        .statusbar {
            margin-left: auto;
            display: flex;
            gap: 14px;
            align-items: center;
            font: 12px var(--sans);
            color: var(--ink-soft)
        }

        .chip {
            background: var(--accent-soft);
            color: var(--accent);
            border-radius: 20px;
            padding: 2px 10px;
            font-weight: 600;
            font-family: var(--mono);
            font-size: 11px
        }

        #selStats {
            font-family: var(--mono);
            font-size: 11px
        }

        #validCount {
            font-size: 11px;
            font-weight: 600;
            color: #c0392b
        }

            #validCount:not(:empty) {
                padding: 1px 8px;
                border-radius: 20px;
                background: #fdecea
            }

            #validCount.clean {
                color: #1a7a3a
            }

                #validCount.clean:not(:empty) {
                    background: #e6f5ec
                }

        #grid td .ws {
            color: var(--accent);
            font-size: 10px;
            opacity: .85;
            padding: 0 1px;
            font-family: var(--sans)
        }

        /* ---------- cell inspector (Ctrl+E) ---------- */
        #inspect, #dateFmt, #numFmt, #rulesDlg, #splitDlg, #fieldFmt, #gapDlg, #seqDlg, #busy, #truncDlg {
            position: fixed;
            inset: 0;
            background: rgba(24,36,48,.35);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 55
        }

            #inspect[hidden], #dateFmt[hidden], #numFmt[hidden], #rulesDlg[hidden], #splitDlg[hidden], #fieldFmt[hidden], #gapDlg[hidden], #seqDlg[hidden], #busy[hidden], #truncDlg[hidden] {
                display: none
            }

        .split-opt {
            display: block;
            padding: 7px 10px;
            margin: 4px 0;
            border: 1px solid var(--line);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px
        }

            .split-opt:hover {
                background: var(--accent-soft)
            }

        .split-hint {
            color: var(--ink-faint);
            font-size: 11px
        }

        .ipanel {
            background: var(--surface);
            border-radius: 10px;
            box-shadow: 0 12px 40px rgba(20,35,50,.28);
            width: min(680px,92vw);
            padding: 14px 16px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .ihead {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px
        }

            .ihead #iTitle {
                font-weight: 600
            }

            .ihead #iMeta {
                font: 11px var(--mono);
                color: var(--ink-faint)
            }

        #iText {
            width: 100%;
            min-height: 180px;
            max-height: 55vh;
            resize: vertical;
            font: 13px/1.5 var(--mono);
            border: 1px solid var(--line-strong);
            border-radius: 6px;
            padding: 8px 10px;
            white-space: pre;
            overflow: auto
        }

        .ifoot {
            display: flex;
            align-items: center;
            gap: 8px
        }

            .ifoot .hint {
                margin-right: auto;
                font-size: 12px;
                color: var(--ink-faint)
            }

        .dflabel {
            font: 600 11px var(--sans);
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: -4px
        }

        .dfhint {
            font: 11px var(--mono);
            color: var(--ink-faint);
            margin-top: 2px
        }

        /* ---------- help panel ---------- */
        #helpPanel {
            background: var(--surface);
            border-top: 1px solid var(--line);
            font-size: 13px;
            color: var(--ink)
        }

            #helpPanel > summary {
                cursor: pointer;
                padding: 9px 14px;
                font-weight: 600;
                color: var(--accent);
                user-select: none;
                list-style-position: inside;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px
            }

                #helpPanel > summary > span:first-child {
                    flex: none
                }

                #helpPanel > summary .statusbar {
                    font-weight: 400
                }

                #helpPanel > summary:hover {
                    background: var(--accent-soft)
                }

            #helpPanel[open] > summary {
                border-bottom: 1px solid var(--line)
            }

        .help-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
            gap: 6px 28px;
            padding: 14px 20px 18px
        }

            .help-grid section {
                min-width: 0
            }

            .help-grid h4 {
                margin: 0 0 6px;
                font-size: 12px;
                letter-spacing: .06em;
                text-transform: uppercase;
                color: var(--ink-faint)
            }

            .help-grid ul {
                margin: 0 0 12px;
                padding-left: 18px
            }

            .help-grid li {
                margin: 3px 0;
                line-height: 1.5;
                color: var(--ink-soft)
            }

                .help-grid li b {
                    color: var(--ink);
                    font-weight: 600
                }

            .help-grid code {
                font: 11px var(--mono);
                background: #f4f6f8;
                border: 1px solid var(--line);
                border-radius: 3px;
                padding: 0 4px;
                color: var(--ink)
            }

        /* ---------- site footer ---------- */
        #siteFooter {
            background: var(--surface);
            border-top: 1px solid var(--line);
            padding: 6px 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 16px;
            align-items: center;
            font-size: 12px;
            color: var(--ink-faint)
        }

            #siteFooter a {
                color: var(--ink-soft);
                text-decoration: none
            }

                #siteFooter a:hover {
                    color: var(--accent);
                    text-decoration: underline
                }

            #siteFooter nav {
                margin-left: auto;
                display: flex;
                flex-wrap: wrap;
                gap: 14px
            }

        /* ---------- header rename / stats popover / find panel ---------- */
        #hdrEd {
            position: fixed;
            display: none;
            z-index: 45;
            margin: 0;
            border: 2px solid var(--accent);
            border-radius: 0;
            padding: 0 6px;
            font: 600 12px var(--sans);
            background: #fff;
            outline: none;
            box-shadow: 0 2px 10px rgba(14,116,144,.25)
        }

        #statPop {
            position: fixed;
            display: none;
            z-index: 48;
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 8px;
            box-shadow: 0 8px 28px rgba(20,35,50,.16);
            padding: 10px 14px;
            min-width: 230px;
            max-width: 320px;
            font-size: 12px
        }

            #statPop .sp-title {
                font-weight: 600;
                font-size: 13px;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                gap: 6px
            }

            #statPop .sp-row {
                display: flex;
                justify-content: space-between;
                gap: 18px;
                padding: 1px 0
            }

            #statPop .sp-act {
                margin-top: 6px;
                padding: 4px 8px;
                background: var(--accent-soft);
                color: var(--accent);
                border-radius: 5px;
                cursor: pointer;
                font-weight: 600;
                text-align: center;
                font-size: 11px
            }

                #statPop .sp-act:hover {
                    background: var(--accent);
                    color: #fff
                }

            #statPop .sp-row span:first-child {
                color: var(--ink-faint)
            }

            #statPop .sp-row span:last-child {
                font-family: var(--mono);
                font-size: 11px;
                text-align: right;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 200px;
                white-space: nowrap
            }

            #statPop hr {
                border: none;
                border-top: 1px solid var(--line);
                margin: 6px 0
            }

        #findPanel {
            position: fixed;
            top: 104px;
            right: 16px;
            z-index: 44;
            width: 280px;
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 10px;
            box-shadow: 0 10px 32px rgba(20,35,50,.2);
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

            #findPanel[hidden] {
                display: none
            }

            #findPanel .fp-head {
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            #findPanel .fp-x {
                border: none;
                background: none;
                font-size: 16px;
                padding: 0 4px;
                color: var(--ink-faint)
            }

            #findPanel input[type=text] {
                width: 100%;
                font-family: var(--mono);
                font-size: 12px
            }

            #findPanel .fp-opts {
                display: flex;
                flex-wrap: wrap;
                gap: 4px 12px;
                font-size: 12px
            }

            #findPanel .fp-foot {
                display: flex;
                align-items: center;
                gap: 8px
            }

            #findPanel #fpCount {
                margin-right: auto;
                font-size: 11px;
                color: var(--ink-faint);
                font-family: var(--mono)
            }

        /* ---------- context menu ---------- */
        #ctx {
            position: fixed;
            z-index: 50;
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 8px;
            box-shadow: 0 8px 28px rgba(20,35,50,.16);
            padding: 5px;
            min-width: 190px;
            display: none
        }

            #ctx div {
                padding: 6px 12px;
                border-radius: 5px;
                cursor: pointer;
                font-size: 13px;
                display: flex;
                justify-content: space-between;
                gap: 16px
            }

                #ctx div span.k {
                    color: var(--ink-faint);
                    font: 11px var(--mono)
                }

                #ctx div:hover {
                    background: var(--accent-soft);
                    color: var(--accent)
                }

            #ctx hr {
                border: none;
                border-top: 1px solid var(--line);
                margin: 5px 3px
            }

            #ctx div.off {
                opacity: .4;
                pointer-events: none
            }

            #ctx div.head {
                font: 600 10px var(--sans);
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--ink-faint);
                cursor: default;
                padding: 5px 12px 2px
            }

                #ctx div.head:hover {
                    background: none;
                    color: var(--ink-faint)
                }
            /* flyout submenu */
            #ctx div.submenu {
                position: relative
            }

                #ctx div.submenu > span.arrow {
                    color: var(--ink-faint);
                    font: 11px var(--sans)
                }

        #ctxSub {
            position: fixed;
            z-index: 51;
            background: var(--surface);
            border: 1px solid var(--line-strong);
            border-radius: 8px;
            box-shadow: 0 8px 28px rgba(20,35,50,.16);
            padding: 5px;
            min-width: 180px;
            display: none
        }

            #ctxSub div {
                padding: 6px 12px;
                border-radius: 5px;
                cursor: pointer;
                font-size: 13px;
                display: flex;
                justify-content: space-between;
                gap: 16px
            }

                #ctxSub div:hover {
                    background: var(--accent-soft);
                    color: var(--accent)
                }

                #ctxSub div.off {
                    opacity: .4;
                    pointer-events: none
                }

        /* ---------- spinner / toast ---------- */
        #busy {
            position: fixed;
            inset: 0;
            background: rgba(244,246,248,.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 60
        }

            #busy .sp {
                width: 34px;
                height: 34px;
                border: 4px solid var(--line);
                border-top-color: var(--accent);
                border-radius: 50%;
                animation: spin .7s linear infinite
            }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        #toast {
            position: fixed;
            bottom: 56px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--ink);
            color: #fff;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            opacity: 0;
            transition: opacity .25s;
            pointer-events: none;
            z-index: 70
        }

            #toast.show {
                opacity: .94
            }

        @media(prefers-reduced-motion:reduce) {
            #busy .sp {
                animation-duration: 1.6s
            }

            #toast {
                transition: none
            }
        }