/* Work board: full-page start screen (layouts/workboard-layout). Brand colour comes from the theme (--bs-primary). */
:root {
    --wb-brand: var(--bs-primary, #233d89);
    --wb-brand-rgb: var(--bs-primary-rgb, 35, 61, 137);
    --wb-ink: var(--ap-text, #1d1d1f);
    --wb-muted: var(--ap-muted, #6e6e73);
    --wb-line: var(--ap-line, #e5e5ea);
    --wb-surface: var(--ap-surface, #fff);
    --wb-canvas: var(--ap-canvas, #f5f5f7);
    --wb-fill: rgba(118, 118, 128, .08);
    --wb-danger: #d92d20;
    --wb-warning: #c76a00;
    --wb-success: #1a8a4a;
    --wb-radius: 20px;
    --wb-ease: cubic-bezier(.2, .7, .2, 1);
}

body.px-workboard { background: var(--wb-canvas); }
body.px-workboard #page-topbar { left: 0 !important; }
body.px-workboard .vertical-menu-btn, body.px-workboard .vertical-menu { display: none !important; }
/* no sidebar here, so the logo the sidebar normally carries goes in the top bar */
body.px-workboard .navbar-header .navbar-brand-box { display: flex; width: auto; padding: 0 1rem 0 clamp(.75rem, 2vw, 1.75rem); border-bottom: 0; background: transparent; }
body.px-workboard .navbar-header .navbar-brand-box .logo { line-height: 1; }
body.px-workboard .navbar-header .navbar-brand-box .admin-logo-lg { max-height: 40px; width: auto; }
body.px-workboard .main-content { margin-left: 0 !important; }
body.px-workboard .page-content { padding: calc(70px + 1.25rem) clamp(.75rem, 2vw, 1.75rem) 2.5rem; }
.wb-wrap { max-width: 1680px; margin: 0 auto; }

/* ------------------------------------------------------------ hero */
.wb-hero {
    position: relative; overflow: hidden; border-radius: 26px; padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.1rem, 2.6vw, 2rem);
    color: #fff; margin-bottom: 1rem;
    background:
        radial-gradient(1200px 300px at 110% -40%, rgba(255, 255, 255, .18), transparent 60%),
        radial-gradient(600px 240px at -10% 120%, rgba(255, 255, 255, .10), transparent 60%),
        linear-gradient(135deg, rgb(var(--wb-brand-rgb)) 0%, color-mix(in srgb, rgb(var(--wb-brand-rgb)) 70%, #000) 100%);
    box-shadow: 0 18px 40px rgba(var(--wb-brand-rgb), .25);
}
.wb-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='59' fill='none' stroke='white' stroke-opacity='.05'/%3E%3C/svg%3E") right -30px top -30px / 260px no-repeat; pointer-events: none; }
.wb-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.wb-hello .wb-eyebrow { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; font-weight: 600; }
.wb-hello h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; margin: .15rem 0 .2rem; letter-spacing: -.025em; }
.wb-hello p { margin: 0; opacity: .85; font-size: .92rem; }
.wb-clock { text-align: right; }
.wb-clock b { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.wb-clock span { font-size: .8rem; opacity: .75; }

.wb-pulse { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: 1.1rem; position: relative; z-index: 1; }
.wb-pulse a { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border-radius: 16px; color: #fff; text-decoration: none;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); transition: transform .2s var(--wb-ease), background .2s; }
.wb-pulse a:hover, .wb-pulse a:focus-visible { background: rgba(255, 255, 255, .18); transform: translateY(-2px); color: #fff; }
.wb-pulse i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; background: rgba(255, 255, 255, .16); flex: none; }
.wb-pulse b { display: block; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.wb-pulse small { display: block; opacity: .8; font-size: .74rem; margin-top: .2rem; line-height: 1.2; }
.wb-pulse a[data-tone="danger"] i { background: #ff6b5e; }
.wb-pulse a[data-tone="warning"] i { background: #f5a524; }
.wb-pulse a[data-tone="success"] i { background: #34c759; }
.wb-pulse .wb-pulse-skel { height: 62px; border-radius: 16px; background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ toolbar */
.wb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.wb-command { flex: 1 1 320px; max-width: 620px; display: flex; align-items: center; gap: .6rem; height: 46px; padding: 0 .9rem; border-radius: 14px;
    background: var(--wb-surface); border: 1px solid var(--wb-line); color: var(--wb-muted); text-align: left; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: border-color .2s, box-shadow .2s; }
.wb-command:hover, .wb-command:focus-visible { border-color: rgba(var(--wb-brand-rgb), .45); box-shadow: 0 0 0 4px rgba(var(--wb-brand-rgb), .08); outline: none; }
.wb-command i { font-size: 1.15rem; }
.wb-command span { flex: 1; }
.wb-kbd { font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .25rem .4rem; border-radius: 6px; background: var(--wb-fill); color: var(--wb-muted); border: 1px solid var(--wb-line); }
.wb-tool { height: 46px; border-radius: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .95rem; font-weight: 600; font-size: .9rem;
    background: var(--wb-surface); border: 1px solid var(--wb-line); color: var(--wb-ink); transition: all .2s; text-decoration: none; }
.wb-tool:hover { border-color: rgba(var(--wb-brand-rgb), .4); color: var(--wb-brand); }
.wb-tool i { font-size: 1.15rem; }
.wb-tool.wb-tool-primary { background: var(--wb-brand); border-color: var(--wb-brand); color: #fff; }
.wb-tool.wb-tool-primary:hover { filter: brightness(1.1); color: #fff; }
.wb-tool[aria-pressed="true"] { background: rgba(var(--wb-brand-rgb), .1); border-color: var(--wb-brand); color: var(--wb-brand); }
.wb-toolbar .wb-spacer { flex: 1; }

/* ------------------------------------------------------------ add panel */
.wb-add-panel { background: var(--wb-surface); border-radius: var(--wb-radius); padding: 1rem 1.1rem; margin-bottom: 1rem; border: 1px dashed rgba(var(--wb-brand-rgb), .35); animation: wbIn .3s var(--wb-ease); }
.wb-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.wb-add-card { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem; border-radius: 14px; border: 1px solid var(--wb-line); background: var(--wb-surface); text-align: left; transition: all .2s; width: 100%; }
.wb-add-card:hover { border-color: var(--wb-brand); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .06); }
.wb-add-card b { display: block; font-size: .9rem; }
.wb-add-card small { color: var(--wb-muted); font-size: .78rem; line-height: 1.3; display: block; }
.wb-add-card .bx-plus { margin-left: auto; color: var(--wb-brand); font-size: 1.2rem; }

/* ------------------------------------------------------------ cards */
.wb-grid { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.wb-card { --wb-accent: var(--wb-brand); --wb-accent-rgb: var(--wb-brand-rgb);
    height: 100%; display: flex; flex-direction: column; background: var(--wb-surface); border-radius: var(--wb-radius); border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 10px 30px rgba(0, 0, 0, .04); transition: box-shadow .25s var(--wb-ease), transform .25s var(--wb-ease); position: relative; animation: wbIn .45s var(--wb-ease) both; }
.wb-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .07); }
.wb-card-head { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem .5rem; }
.wb-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex: none;
    color: rgb(var(--wb-accent-rgb)); background: rgba(var(--wb-accent-rgb), .11); }
.wb-card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; letter-spacing: -.015em; line-height: 1.2; }
.wb-card-head .wb-sub { display: block; font-size: .74rem; color: var(--wb-muted); font-weight: 500; margin-top: 1px; }
.wb-titles { flex: 1; min-width: 0; }
.wb-count { min-width: 26px; height: 26px; padding: 0 .5rem; border-radius: 999px; display: none; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
    background: rgba(var(--wb-accent-rgb), .12); color: rgb(var(--wb-accent-rgb)); }
.wb-count.on { display: inline-flex; }
.wb-count[data-tone="danger"] { background: #fee4e2; color: var(--wb-danger); }
.wb-count[data-tone="warning"] { background: #fff1d6; color: var(--wb-warning); }
.wb-count[data-tone="success"] { background: #e3f6ea; color: var(--wb-success); }
.wb-actions { display: flex; gap: .15rem; opacity: .55; transition: opacity .2s; }
.wb-card:hover .wb-actions, .wb-card:focus-within .wb-actions { opacity: 1; }
.wb-act { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--wb-muted); display: grid; place-items: center; font-size: 1.1rem; transition: background .15s, color .15s; }
.wb-act:hover { background: var(--wb-fill); color: var(--wb-ink); }
.wb-act.spinning i { animation: wbSpin .8s linear infinite; }
.wb-lock { color: var(--wb-muted); font-size: 1rem; }
.wb-card-body { padding: .35rem 1.1rem 1rem; flex: 1; transition: opacity .25s; }
.wb-card-body.wb-fresh { animation: wbFade .35s ease; }
.wb-card-foot { padding: .55rem 1.1rem .75rem; border-top: 1px solid var(--wb-line); font-size: .72rem; color: var(--wb-muted); display: flex; justify-content: space-between; gap: .5rem; }
.wb-card.collapsed .wb-card-body, .wb-card.collapsed .wb-card-foot { display: none; }
.wb-card.collapsed .wb-collapse i { transform: rotate(180deg); }
.wb-collapse i { transition: transform .25s var(--wb-ease); }

/* customizing */
.wb-tools { display: none; align-items: center; gap: .2rem; }
body.wb-customizing .wb-tools { display: flex; }
body.wb-customizing .wb-card[draggable="true"] { cursor: grab; outline: 2px dashed rgba(var(--wb-brand-rgb), .25); outline-offset: -2px; }
body.wb-customizing .wb-card[draggable="true"]:active { cursor: grabbing; }
.wb-size { width: auto; height: 30px; padding: 0 1.6rem 0 .5rem; border-radius: 9px; font-size: .78rem; }
.wb-handle { display: none; color: var(--wb-muted); font-size: 1.2rem; }
body.wb-customizing .wb-card[draggable="true"] .wb-handle { display: inline-block; }
.wb-col.wb-dragging { opacity: .35; }
.wb-col.wb-drop-before > .wb-card { box-shadow: -4px 0 0 var(--wb-brand), 0 10px 30px rgba(0, 0, 0, .06); }

/* expanded (focus) view */
.wb-card.expanded { position: fixed; inset: clamp(70px, 9vh, 90px) clamp(12px, 6vw, 120px) clamp(16px, 4vh, 40px); z-index: 1060; height: auto; overflow: auto; animation: wbZoom .3s var(--wb-ease); }
.wb-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 35, .45); backdrop-filter: blur(3px); z-index: 1055; animation: wbFade .2s ease; }

/* ------------------------------------------------------------ building blocks inside widgets */
.wb-num { font-size: 1.75rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.wb-label { color: var(--wb-muted); font-size: .76rem; font-weight: 500; }
.wb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .55rem; }
.wb-stat { border-radius: 14px; padding: .7rem .8rem; background: var(--wb-fill); color: inherit; text-decoration: none; display: block; transition: background .2s, transform .2s; position: relative; }
a.wb-stat:hover { background: rgba(var(--wb-accent-rgb), .1); transform: translateY(-1px); color: inherit; }
.wb-stat i { position: absolute; right: .7rem; top: .65rem; font-size: 1.05rem; color: rgb(var(--wb-accent-rgb)); opacity: .8; }
.wb-stat.tone-danger .wb-num { color: var(--wb-danger); }
.wb-stat.tone-success .wb-num { color: var(--wb-success); }
.wb-stat.tone-warning .wb-num { color: var(--wb-warning); }

.wb-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .1rem; border-top: 1px solid var(--wb-line); }
.wb-row:first-child { border-top: 0; }
.wb-row .wb-grow { flex: 1; min-width: 0; }
.wb-row .wb-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--wb-ink); }
.wb-row .wb-detail { font-size: .76rem; color: var(--wb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
a.wb-row { color: inherit; text-decoration: none; border-radius: 10px; transition: background .15s; }
a.wb-row:hover { background: var(--wb-fill); }
.wb-list { max-height: 330px; overflow: auto; margin: 0 -.1rem; scrollbar-width: thin; }

.wb-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; flex: none; letter-spacing: 0; }
.wb-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--wb-fill); color: var(--wb-ink); white-space: nowrap; }
.wb-chip.danger { background: #fee4e2; color: var(--wb-danger); }
.wb-chip.warning { background: #fff1d6; color: var(--wb-warning); }
.wb-chip.success { background: #e3f6ea; color: var(--wb-success); }
.wb-chip.brand { background: rgba(var(--wb-brand-rgb), .1); color: var(--wb-brand); }
.wb-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.wb-btn { border: 0; border-radius: 10px; padding: .4rem .75rem; font-size: .8rem; font-weight: 600; white-space: nowrap; transition: all .15s; display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.wb-btn-primary { background: var(--wb-brand); color: #fff; }
.wb-btn-primary:hover { filter: brightness(1.12); color: #fff; }
.wb-btn-soft { background: rgba(var(--wb-accent-rgb), .1); color: rgb(var(--wb-accent-rgb)); }
.wb-btn-soft:hover { background: rgba(var(--wb-accent-rgb), .18); color: rgb(var(--wb-accent-rgb)); }
.wb-btn-success { background: var(--wb-success); color: #fff; }
.wb-btn:disabled { opacity: .55; }
.wb-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

/* ring */
.wb-ring { position: relative; flex: none; }
.wb-ring svg { transform: rotate(-90deg); display: block; }
.wb-ring circle { fill: none; stroke-linecap: round; }
.wb-ring .track { stroke: var(--wb-fill); }
.wb-ring .value { stroke: rgb(var(--wb-accent-rgb)); transition: stroke-dashoffset 1s var(--wb-ease); }
.wb-ring .wb-ring-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.wb-ring .wb-ring-text b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wb-ring .wb-ring-text small { display: block; font-size: .64rem; color: var(--wb-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wb-hero-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .7rem; }

/* bars */
.wb-meter { height: 8px; border-radius: 999px; background: var(--wb-fill); overflow: hidden; display: flex; }
.wb-meter span { display: block; height: 100%; transition: width .9s var(--wb-ease); }
.wb-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .35rem .9rem; margin-top: .75rem; font-size: .8rem; }
.wb-legend span { display: flex; align-items: center; gap: .45rem; }
.wb-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.wb-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: none; }
.wb-columns { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 1.2rem; }
.wb-columns .col-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; position: relative; }
.wb-columns .col-bar span { width: 100%; max-width: 44px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, rgba(var(--wb-accent-rgb), .9), rgba(var(--wb-accent-rgb), .55)); min-height: 4px; transition: height .9s var(--wb-ease); }
.wb-columns .col-bar.today span { background: linear-gradient(180deg, #f5a524, #e07b00); }
.wb-columns .col-bar em { position: absolute; top: 0; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--wb-ink); }
.wb-axis { display: flex; gap: 6px; font-size: .7rem; color: var(--wb-muted); margin-top: .3rem; }
.wb-axis span { flex: 1; text-align: center; }

/* links grid */
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.wb-tile { display: flex; flex-direction: column; gap: .45rem; padding: .75rem; border-radius: 14px; background: var(--wb-fill); color: var(--wb-ink); text-decoration: none; font-weight: 600; font-size: .82rem; line-height: 1.25; transition: all .2s var(--wb-ease); }
.wb-tile i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--wb-surface); color: var(--wb-brand); font-size: 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.wb-tile:hover { background: rgba(var(--wb-brand-rgb), .1); color: var(--wb-brand); transform: translateY(-2px); }

/* notes */
.wb-notes { border: 0; border-radius: 14px; background: #fffbea; padding: .9rem 1rem; min-height: 190px; resize: vertical; line-height: 1.6; font-size: .92rem;
    background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(0, 0, 0, .05) 27px, rgba(0, 0, 0, .05) 28px); background-attachment: local; }
.wb-notes:focus { box-shadow: 0 0 0 3px rgba(245, 165, 36, .35); outline: none; background-color: #fffbea; }
.wb-notes-state { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; }

/* empty + loading */
.wb-empty { text-align: center; padding: 1.3rem .5rem; color: var(--wb-muted); }
.wb-empty i { font-size: 2rem; width: 58px; height: 58px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(var(--wb-accent-rgb), .08); color: rgb(var(--wb-accent-rgb)); margin-bottom: .5rem; }
.wb-empty b { display: block; color: var(--wb-ink); font-size: .92rem; }
.wb-empty small { font-size: .8rem; }
.wb-empty-board { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; border-radius: var(--wb-radius);
    background: rgba(var(--wb-brand-rgb), .06); border: 1px dashed rgba(var(--wb-brand-rgb), .35); animation: wbIn .3s var(--wb-ease); }
.wb-empty-board-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: rgba(var(--wb-brand-rgb), .12); color: var(--wb-brand); }
.wb-empty-board-text { flex: 1 1 260px; min-width: 0; }
.wb-empty-board-text b { display: block; color: var(--wb-ink); font-size: .98rem; margin-bottom: .15rem; }
.wb-empty-board-text p { margin: 0; color: var(--wb-muted); font-size: .88rem; line-height: 1.5; }
body.wb-customizing .wb-empty-board-start { display: none; }
.wb-empty.good i { background: #e3f6ea; color: var(--wb-success); }
.wb-skel { display: grid; gap: .55rem; padding: .3rem 0 .4rem; }
.wb-skel span { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--wb-fill) 25%, rgba(118, 118, 128, .16) 37%, var(--wb-fill) 63%); background-size: 400% 100%; animation: wbShimmer 1.4s ease infinite; }
.wb-skel span:nth-child(1) { width: 55%; height: 28px; }
.wb-skel span:nth-child(3) { width: 80%; }
.wb-skel span:nth-child(4) { width: 65%; }
.wb-error { text-align: center; padding: 1rem; color: var(--wb-muted); }

/* stripes for priorities */
.wb-stripe { width: 4px; align-self: stretch; border-radius: 4px; background: var(--wb-line); flex: none; }
.wb-stripe.urgent { background: var(--wb-danger); }
.wb-stripe.high { background: #f5a524; }
.wb-stripe.normal, .wb-stripe.medium { background: rgba(var(--wb-brand-rgb), .5); }

/* timer pill (minutes waiting) */
.wb-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .78rem; padding: .2rem .5rem; border-radius: 8px; background: var(--wb-fill); }
.wb-timer.hot { background: #fee4e2; color: var(--wb-danger); animation: wbPulse 1.6s ease infinite; }
.wb-timer.warm { background: #fff1d6; color: var(--wb-warning); }

/* checklist */
.wb-check { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .85rem; }
.wb-check i { font-size: 1.2rem; flex: none; margin-top: -1px; }
.wb-check.blocker i { color: var(--wb-danger); }
.wb-check.warn i { color: var(--wb-warning); }

/* ------------------------------------------------------------ command palette */
.wb-palette .modal-dialog { max-width: 680px; margin-top: 10vh; }
.wb-palette .modal-content { border-radius: 22px; border: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.wb-palette-input { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--wb-line); }
.wb-palette-input i { font-size: 1.4rem; color: var(--wb-brand); }
.wb-palette-input input { border: 0; outline: none; flex: 1; font-size: 1.1rem; background: transparent; color: var(--wb-ink); }
.wb-palette-results { max-height: min(60vh, 520px); overflow: auto; padding: .4rem .5rem .7rem; }
.wb-palette-results h6 { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wb-muted); margin: .8rem .7rem .3rem; }
.wb-palette-results a { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 12px; color: var(--wb-ink); text-decoration: none; }
.wb-palette-results a i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--wb-fill); color: var(--wb-brand); font-size: 1.05rem; flex: none; }
.wb-palette-results a b { display: block; font-size: .9rem; font-weight: 600; }
.wb-palette-results a small { display: block; color: var(--wb-muted); font-size: .76rem; }
.wb-palette-results a.active, .wb-palette-results a:hover { background: rgba(var(--wb-brand-rgb), .08); }
.wb-palette-results a.active i { background: var(--wb-brand); color: #fff; }
.wb-palette-results mark { background: rgba(245, 165, 36, .3); color: inherit; padding: 0; border-radius: 3px; }
.wb-palette-foot { display: flex; gap: 1rem; padding: .6rem 1.2rem; border-top: 1px solid var(--wb-line); font-size: .74rem; color: var(--wb-muted); background: var(--wb-canvas); }

/* pages drawer */
.wb-pages-filter { border-radius: 12px; height: 42px; }
.wb-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.wb-links a { border: 1px solid var(--wb-line); border-radius: 12px; padding: .55rem .7rem; color: inherit; text-decoration: none; font-weight: 500; font-size: .86rem; transition: all .15s; }
.wb-links a:hover { border-color: var(--wb-brand); color: var(--wb-brand); background: rgba(var(--wb-brand-rgb), .04); }

/* toast */
.wb-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 1080; padding: .7rem 1.1rem; border-radius: 14px; background: #1d1d1f; color: #fff;
    font-size: .88rem; font-weight: 500; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); transition: all .3s var(--wb-ease); pointer-events: none; display: flex; gap: .5rem; align-items: center; }
.wb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.wb-toast.error { background: var(--wb-danger); }

@keyframes wbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wbZoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wbSpin { to { transform: rotate(360deg); } }
@keyframes wbShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes wbPulse { 50% { box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); } }

@media (max-width: 767.98px) {
    .wb-clock { text-align: left; }
    .wb-actions { opacity: 1; }
    .wb-tool span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wb-card, .wb-add-panel, .wb-card-body.wb-fresh, .wb-card.expanded, .wb-backdrop, .wb-timer.hot { animation: none; }
    .wb-ring .value, .wb-meter span, .wb-columns .col-bar span, .wb-pulse a, .wb-tile { transition: none; }
}

/* labels start with a capital whatever the language string */
.wb-stat .wb-label, .wb-ring-text small { display: block; }
.wb-stat .wb-label::first-letter { text-transform: uppercase; }