/* Whiteboard (wwwroot/js/whiteboard.js) — the drawing surface the Editor mounts in place
   of the textarea for a .whiteboard file. Colours come from _Layout's theme tokens
   (--bg, --panel, --text, ...) — the canvas reads its ink/paper colours from .wb-stage's
   computed color/background, so changing these two is enough to restyle the drawing. */
.wb-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wb-root[hidden] { display: none; }

.wb-bar {
    display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap;
    padding: 5px 10px; background: var(--panel); border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    font-family: var(--sans);
    /* A toolbar tap must never start a page scroll or a stroke. */
    touch-action: manipulation;
}
.wb-group { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.wb-group + .wb-group { padding-left: 8px; border-left: 1px solid var(--border); }
.wb-more { margin-left: auto; }
.wb-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.wb-menu-spacer { display: inline-block; width: 14px; }
.wb-menu-item.active { color: var(--accent); }
.wb-menu-item:disabled { opacity: .45; cursor: default; }
.wb-end { margin-left: auto; }
/* Read-only keeps only the exports: a viewer of a shared board still wants the annotated PDF. */
.wb-bar-readonly .wb-group:not(.wb-end) { display: none; }
.wb-bar-readonly .wb-end { margin-left: 0; }
.wb-readonly-badge { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.wb-bar-readonly .wb-readonly-badge { display: inline-flex; }

.wb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 34px; height: 34px; padding: 0 8px;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: .12s; white-space: nowrap;
}
.wb-btn:hover { color: var(--text); background: var(--panel-alt); }
.wb-btn.active { color: var(--accent); background: var(--panel-alt); border-color: var(--accent); }
.wb-btn:disabled { opacity: .4; cursor: default; }
.wb-btn:disabled:hover { background: transparent; color: var(--text-dim); }
.wb-btn svg { flex-shrink: 0; }
/* The bar is icons only — one row that stays out of the way on a tablet; the names are
   in the tooltips and the help card. Labels show where there is room for them (viewbox). */
.wb-btn-label { display: none; }

.wb-swatch {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border);
    padding: 0; min-width: 0; cursor: pointer; position: relative; flex-shrink: 0;
    box-shadow: inset 0 0 0 2px var(--panel);
}
.wb-swatch.active { border-color: var(--accent); transform: scale(1.12); }
.wb-swatch-custom { background: conic-gradient(#e53935, #fb8c00, #ffeb3b, #43a047, #1e88e5, #8e24aa, #e53935); display: inline-block; }
.wb-color-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.wb-size-dot { display: inline-block; border-radius: 50%; background: currentColor; }

.wb-select {
    height: 34px; padding: 0 8px; border-radius: 7px;
    background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
    font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* The canvas plane. `touch-action: none` hands every finger/pen gesture to the
   pointer-event code — the page must not scroll or pinch-zoom underneath a stroke. */
.wb-stage {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    background: var(--bg); color: var(--text);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    cursor: crosshair; outline: none;
}
/* The laser draws its own dot; readonly's grab cursor must not win over it (order matters). */
.wb-stage.wb-tool-select { cursor: default; }
.wb-stage.wb-tool-text { cursor: text; }
.wb-stage.wb-tool-snapshot { cursor: crosshair; }
/* The textarea a text box is written in, laid exactly over the box (see positionTextEditor). */
.wb-text-editor {
    position: absolute; z-index: 7; margin: 0; padding: 0; border: 1px dashed var(--accent); border-radius: 3px;
    background: rgba(255,255,255,0.85); color: var(--text); font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    resize: none; overflow: hidden; outline: none; white-space: pre-wrap; word-break: break-word; box-sizing: content-box;
}
.wb-text-editor[hidden] { display: none; }
.wb-stage.wb-tool-eraser { cursor: cell; }
.wb-stage.wb-readonly, .wb-stage.wb-pan { cursor: grab; }
.wb-stage.wb-panning { cursor: grabbing; }
.wb-stage.wb-tool-laser { cursor: none; }
.wb-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.wb-canvas { position: absolute; top: 0; left: 0; display: block; }
.wb-canvas-live { pointer-events: none; }

.wb-hint {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4;
    padding: 7px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    color: var(--text-dim); font-family: var(--sans); font-size: 12px; pointer-events: none;
    text-align: center; max-width: min(80%, 520px); opacity: 1; transition: opacity .6s;
}
.wb-hint.wb-hint-fade { opacity: 0; }
.wb-hint[hidden] { display: none; }

.wb-zoom {
    position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.15); touch-action: manipulation;
}
.wb-zoom .wb-btn { height: 28px; min-width: 28px; padding: 0 6px; }
.wb-zoom-label { font-family: var(--mono); font-size: 11.5px; min-width: 48px; }

@media (max-width: 720px) {
    .wb-bar { gap: 6px; padding: 5px 6px; }
    .wb-group + .wb-group { padding-left: 6px; }
    .wb-btn { min-width: 32px; height: 32px; padding: 0 5px; }
    .wb-zoom { right: 8px; bottom: 8px; }
}

/* PDF pages under the strokes (see drawPages in whiteboard.js): the plane behind the
   white sheets becomes a desk rather than paper, in both themes. */
.wb-group[hidden] { display: none; }
.wb-stage.wb-has-pages { background: var(--panel-alt); }
.wb-menu {
    position: fixed; z-index: 60; min-width: 220px; max-width: 320px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 6px;
}
.wb-menu[hidden] { display: none; }
.wb-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: transparent; border: none; color: var(--text); font-family: var(--sans);
    padding: 7px 8px; border-radius: 5px; font-size: 12.5px; cursor: pointer;
}
.wb-menu-item:hover { background: var(--panel-alt); }
.wb-menu-item svg { flex-shrink: 0; }
.wb-menu-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-menu-danger { color: #d9534f; }
.wb-menu-label { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px; padding: 8px 8px 3px; }
.wb-btn[hidden] { display: none; }

/* Pen badge: which input is writing (see setPenDown in whiteboard.js). */
.wb-pen-badge {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 0 9px; height: 26px; border-radius: 13px; margin-left: 6px;
    background: var(--panel-alt); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.wb-pen-badge.active { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.wb-pen-badge[hidden] { display: none; }

/* Favourite pens (a tool + colour + width each) in a palette floating over the stage,
   docked to whichever edge it was dragged to (see placeDock). */
.wb-dock {
    position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2); touch-action: none; user-select: none;
}
.wb-dock[hidden] { display: none; }
.wb-dock-left, .wb-dock-right { flex-direction: column; }
.wb-dock-items { display: flex; align-items: center; gap: 2px; }
.wb-dock-left .wb-dock-items, .wb-dock-right .wb-dock-items { flex-direction: column; }
.wb-dock-grip { display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: grab; padding: 4px; border-radius: 6px; }
.wb-dock-grip:hover { background: var(--panel-alt); color: var(--text); }
.wb-dock-dragging { opacity: .85; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.wb-dock-dragging .wb-dock-grip { cursor: grabbing; }
.wb-preset { min-width: 34px; height: 34px; padding: 0 4px; }
.wb-preset-dot { display: inline-block; border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.wb-preset-pen.wb-preset-thin { width: 8px; height: 8px; }
.wb-preset-pen.wb-preset-medium { width: 12px; height: 12px; }
.wb-preset-pen.wb-preset-thick { width: 17px; height: 17px; }
.wb-preset-highlighter { border-radius: 4px !important; opacity: .75; }
.wb-preset-highlighter.wb-preset-thin { width: 12px; height: 8px; }
.wb-preset-highlighter.wb-preset-medium { width: 16px; height: 11px; }
.wb-preset-highlighter.wb-preset-thick { width: 20px; height: 14px; }
.wb-preset-add { color: var(--text-dim); }

/* Floating actions above a selection (see positionSelBar). */
.wb-selbar {
    position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 3px; padding: 3px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2); touch-action: manipulation;
}
.wb-selbar[hidden] { display: none; }
.wb-selbar .wb-btn { height: 30px; padding: 0 9px; gap: 5px; font-size: 12px; }
.wb-selrow { flex-wrap: wrap; max-width: min(520px, calc(100vw - 24px)); }
.wb-colors-laser .wb-swatch-custom { display: none; }
.wb-selfields { display: flex; align-items: center; gap: 6px; }
.wb-selfields[hidden] { display: none; }
.wb-selfield { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-dim); font-family: var(--sans); }
.wb-selfield input {
    width: 58px; height: 26px; padding: 0 5px; border-radius: 5px;
    background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
    font-family: var(--mono); font-size: 12px;
}
.wb-selrow { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.wb-selstyle { display: flex; align-items: center; gap: 6px; padding: 0 6px; border-left: 1px solid var(--border); }
.wb-selstyle:empty { display: none; }
.wb-swatch-current { width: 24px; height: 24px; }
.wb-selstyle-btn { height: 28px; min-width: 0; padding: 0 7px; gap: 5px; font-family: var(--mono); font-size: 11.5px; }
.wb-stylepop { padding: 6px; }
.wb-stylepop-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 300px; }
.wb-stylepop input[type=number] {
    width: 60px; height: 28px; padding: 0 5px; border-radius: 5px; margin-left: 4px;
    background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
    font-family: var(--mono); font-size: 12px;
}
.wb-selstyle-group { display: inline-flex; align-items: center; gap: 3px; }
.wb-selstyle-label { font-size: 11px; color: var(--text-dim); font-family: var(--sans); margin-right: 2px; white-space: nowrap; }
.wb-selstyle-value { font-family: var(--mono); font-size: 11px; color: var(--text-dim); min-width: 34px; }
.wb-selstyle .wb-swatch { width: 22px; height: 22px; }
.wb-selstyle .wb-size { height: 28px; min-width: 28px; padding: 0 4px; }
.wb-selstyle input[type=number] {
    width: 54px; height: 26px; padding: 0 5px; border-radius: 5px;
    background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
    font-family: var(--mono); font-size: 12px;
}
.wb-swatch-none { background: linear-gradient(135deg, transparent 45%, #d9534f 45%, #d9534f 55%, transparent 55%), var(--panel-alt) !important; }
.wb-range { width: 70px; accent-color: var(--accent); }

/* Function plot dialog (see openPlotDialog). */
.wb-plot { width: 300px; padding: 8px; }
.wb-plot-field { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 12.5px; color: var(--text); font-family: var(--sans); }
.wb-plot-field > span:first-child { min-width: 70px; color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }
.wb-plot-field input:not([type=checkbox]) {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 6px;
    background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
    font-family: var(--mono); font-size: 13px;
}
.wb-plot-check { gap: 8px; }
.wb-plot-error { color: #d9534f; font-size: 12px; padding: 2px 4px; min-height: 16px; font-family: var(--sans); }
.wb-plot-hint { color: var(--text-dim); font-size: 11px; padding: 2px 4px 6px; font-family: var(--sans); line-height: 1.4; }
.wb-plot .wb-stylepop-row { justify-content: flex-end; }
.wb-plot-ok { color: var(--accent-contrast); background: var(--accent); }
.wb-plot-ok:hover { color: var(--accent-contrast); background: var(--accent); filter: brightness(1.1); }

/* Pages panel (see renderPagesPanel): thumbnails down the left edge of the stage. */
.wb-pages {
    position: absolute; left: 8px; top: 8px; bottom: 8px; z-index: 6; width: 150px;
    display: flex; flex-direction: column; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-family: var(--sans); color: var(--text); touch-action: pan-y; user-select: none;
}
.wb-pages[hidden] { display: none; }
.wb-pages-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 10px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
.wb-pages-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.wb-page-thumb { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 8px; border: 2px solid transparent; }
.wb-page-thumb.active { border-color: var(--accent); }
.wb-page-thumb.wb-page-dragging { opacity: .45; }
.wb-page-thumb.wb-page-drop { box-shadow: 0 -3px 0 0 var(--accent); }
.wb-pages.wb-page-drop-end .wb-page-thumb:last-child { box-shadow: 0 3px 0 0 var(--accent); }
.wb-page-pic { position: relative; cursor: pointer; align-self: center; line-height: 0; }
.wb-page-pic canvas { display: block; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.2); background: #fff; }
.wb-page-num { position: absolute; left: 4px; bottom: 4px; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
.wb-page-tag { position: absolute; right: 4px; top: 4px; font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 4px; background: #e53935; color: #fff; font-weight: 700; }
.wb-page-tools { display: flex; align-items: center; justify-content: center; gap: 1px; }
.wb-page-tools .wb-btn { min-width: 24px; height: 24px; padding: 0; font-size: 13px; }
.wb-page-grip { cursor: grab; touch-action: none; }
.wb-pages-foot { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--border); }
.wb-pages-foot .wb-btn { flex: 1; height: 28px; font-size: 12px; padding: 0 6px; gap: 4px; }
@media (max-width: 720px) { .wb-pages { width: 128px; } }

/* Custom width popover (see toggleSizePopover) and the nib menu. */
.wb-size-custom { min-width: 34px; font-family: var(--mono); font-size: 11px; }
.wb-sizepop { width: 300px; padding: 6px; }
.wb-sizepop .wb-menu-row { gap: 8px; flex-wrap: wrap; }
.wb-range-wide { flex: 1; min-width: 110px; }
.wb-menu-unit { color: var(--text-dim); font-size: 11px; }
.wb-size-preview { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
.wb-menu-hint { display: block; width: 100%; color: var(--text-dim); font-size: 11px; padding-left: 22px; line-height: 1.3; }
.wb-menu-item { flex-wrap: wrap; }

/* Sticker panel (see openStickerPanel): saved stickers and the built-in set. */
.wb-stickers { width: 300px; max-height: min(420px, calc(100vh - 40px)); overflow: auto; padding: 4px; }
.wb-sticker-grid { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 6px; }
.wb-sticker { position: relative; }
.wb-sticker-btn { width: 44px; height: 44px; padding: 3px; font-size: 26px; line-height: 1; justify-content: center; }
.wb-sticker-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wb-sticker-del { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 12px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); }

/* Page setup dialog (see openPageDialog): the plot dialog's look, a little wider. */
.wb-pagedlg { width: 340px; max-height: calc(100vh - 40px); overflow: auto; }
.wb-pagedlg .wb-plot-field > span:first-child { min-width: 90px; }
.wb-pagedlg .wb-plot-field .wb-select { flex: 1; min-width: 0; height: 30px; }
.wb-pagedlg .wb-plot-field[hidden] { display: none; }
.wb-page-custom input { width: 70px; flex: 0 0 auto !important; }
.wb-page-custom > span:not(:first-child) { color: var(--text-dim); font-size: 12px; }
.wb-pagedlg .wb-menu-swatches { padding: 0; flex-wrap: wrap; }
.wb-tpl-list { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 6px; }
.wb-tpl-row { display: flex; align-items: center; gap: 4px; }
.wb-tpl-apply { flex: 1; justify-content: flex-start; height: 30px; padding: 0 8px; font-size: 12.5px; font-family: var(--sans); }
.wb-page-actions { justify-content: flex-start !important; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
.wb-page-actions .wb-btn, .wb-pagedlg .wb-stylepop-row .wb-btn { height: 30px; padding: 0 10px; font-size: 12.5px; font-family: var(--sans); }

/* Shortcut help (see toggleHelp): a card over the stage. */
.wb-helpoverlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; background: rgba(0,0,0,.35); overflow: auto; touch-action: pan-y; }
.wb-helpoverlay[hidden] { display: none; }
.wb-helpcard { width: min(1040px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.3); padding: 14px 18px 18px; font-family: var(--sans); color: var(--text); }
.wb-helpcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wb-helpcard h3 { margin: 0; font-size: 16px; }
.wb-helpcard h4 { margin: 0 0 6px; font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); }
.wb-helpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 28px; }
/* The keys take what they need, up to a bit under half the column; the description the rest,
   so a long key combination wraps rather than squeezing the words beside it into a sliver. */
.wb-helpsection dl { display: grid; grid-template-columns: minmax(auto, 45%) 1fr; gap: 5px 12px; margin: 0; align-items: baseline; }
.wb-helpsection dt { font-size: 12px; }
.wb-helpsection dt kbd { white-space: normal; }
.wb-helpsection dd { margin: 0; font-size: 12.5px; color: var(--text); }
.wb-helpsection kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--panel-alt); font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.wb-bar[hidden] { display: none; }
/* Read-only: the laser switch and the exports sit right above the zoom box. */
.wb-viewbox {
    position: absolute; right: 12px; bottom: 56px; display: flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.15); touch-action: manipulation;
}
.wb-viewbox[hidden] { display: none; }
.wb-viewbox .wb-btn { height: 30px; min-width: 30px; padding: 0 8px; gap: 5px; font-size: 12px; }
.wb-viewbox .wb-btn-label { display: inline; }
@media (max-width: 720px) { .wb-viewbox { right: 8px; bottom: 50px; } }
.wb-menu-row { display: flex; align-items: center; gap: 5px; padding: 4px 8px; }
.wb-menu-rowlabel { font-size: 12px; color: var(--text-dim); font-family: var(--sans); }
.wb-menu-mini { min-width: 26px; height: 26px; padding: 0; font-size: 15px; }
.wb-menu-num { width: 56px; height: 26px; padding: 0 5px; border-radius: 5px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); font-family: var(--mono); font-size: 12px; }
.wb-menu-swatches { flex-wrap: wrap; gap: 4px; }
.wb-menu-swatches .wb-swatch { width: 22px; height: 22px; }
.wb-swatch-theme { background: linear-gradient(135deg, #fff 50%, #1c1e22 50%) !important; }

/* -- Sticky notes: the picker (colour, shape) and the textarea while a note is typed. -- */
.wb-notes { width: 260px; padding: 4px; }
.wb-note-shapes { display: flex; gap: 6px; padding: 4px 8px 8px; flex-wrap: wrap; }
.wb-note-shape { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-alt); cursor: pointer; padding: 0; }
.wb-note-shape:hover { border-color: var(--accent); }
.wb-note-shape.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.wb-text-editor-note { background: transparent; border-color: rgba(0,0,0,0.35); }
.wb-textstyle { flex-direction: row; gap: 4px; }
.wb-textstyle-btn { width: 30px; justify-content: center; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; }
.wb-textstyle-btn.active { border-color: var(--accent); color: var(--accent); }