/* =====================================================================
   Creckk Work Hub — one stylesheet, light and dark.
   Every colour comes from the variables below; dark mode only swaps them
   (Bootstrap's data-bs-theme="dark" on <html>, set by the theme switch).
   ===================================================================== */

:root,
[data-bs-theme="light"] {
    --wh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wh-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --wh-radius: 20px;
    --wh-radius-sm: 12px;

    --wh-accent: #5b5bd6;
    --wh-accent-hover: #4a4ac4;
    --wh-accent-rgb: 91, 91, 214;
    --wh-accent-soft: #eeeefd;
    --wh-accent-text: #4343b8;

    --wh-bg: #f4f4f9;
    --wh-surface: #ffffff;
    --wh-surface-2: #f8f8fc;      /* hover rows, quotes, inner boxes */
    --wh-surface-3: #efeff6;      /* board columns, chips */
    --wh-border: #e6e6ef;
    --wh-border-soft: #f0f0f6;
    --wh-text: #1b1d2a;
    --wh-muted: #6b6f85;
    --wh-faint: #9a9eb2;

    --wh-sidebar-text: #4a4e63;   /* chat list */

    --wh-shadow-sm: 0 1px 2px rgba(20, 22, 40, .03), 0 6px 20px -8px rgba(20, 22, 40, .08);
    --wh-shadow: 0 12px 32px -12px rgba(20, 22, 40, .18), 0 2px 6px rgba(20, 22, 40, .04);
    --wh-shadow-lg: 0 16px 40px -12px rgba(20, 22, 40, .22);

    --wh-flash: #fff3cd;
    --wh-danger-soft: #fdf1f2;

    --bs-body-bg: var(--wh-bg);
    --bs-body-color: var(--wh-text);
    --bs-secondary-color: var(--wh-muted);
    --bs-border-color: var(--wh-border);
    --bs-link-color-rgb: var(--wh-accent-rgb);
    --bs-link-hover-color-rgb: 74, 74, 196;
    --bs-primary-rgb: var(--wh-accent-rgb);
    --bs-focus-ring-color: rgba(var(--wh-accent-rgb), .25);
}

[data-bs-theme="dark"] {
    --wh-accent: #7c7cf0;
    --wh-accent-hover: #8f8ff5;
    --wh-accent-rgb: 124, 124, 240;
    --wh-accent-soft: rgba(124, 124, 240, .16);
    --wh-accent-text: #a5a5ff;

    --wh-bg: #0e1016;
    --wh-surface: #161922;
    --wh-surface-2: #1b1f2a;
    --wh-surface-3: #12151d;
    --wh-border: #262a37;
    --wh-border-soft: #1f2330;
    --wh-text: #e5e7ef;
    --wh-muted: #959ab0;
    --wh-faint: #6d7288;

    --wh-sidebar-text: #b4b8cb;

    --wh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --wh-shadow: 0 4px 16px -4px rgba(0, 0, 0, .5);
    --wh-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7);

    --wh-flash: rgba(255, 193, 7, .18);
    --wh-danger-soft: rgba(220, 53, 69, .12);

    --bs-body-bg: var(--wh-bg);
    --bs-body-color: var(--wh-text);
    --bs-secondary-color: var(--wh-muted);
    --bs-border-color: var(--wh-border);
    --bs-link-color-rgb: var(--wh-accent-rgb);
    --bs-link-hover-color-rgb: 165, 165, 255;
    --bs-primary-rgb: var(--wh-accent-rgb);
    --bs-tertiary-bg: var(--wh-surface-2);
}

/* ---- Base ---- */
body {
    font-family: var(--wh-font-body);
    font-feature-settings: "cv11", "ss01";
    background: var(--wh-bg);
    color: var(--wh-text);
    -webkit-font-smoothing: antialiased;
    font-size: .925rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--wh-font-display); font-weight: 700; letter-spacing: -.015em; }
.text-secondary { color: var(--wh-muted) !important; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
::selection { background: rgba(var(--wh-accent-rgb), .22); }
* { scrollbar-width: thin; scrollbar-color: var(--wh-border) transparent; }

/* ---- Shell: floating top dock, page heading, bottom tab bar on phones ---- */
.wh-app { min-height: 100vh; position: relative; isolation: isolate; }

/* A soft colour glow behind every page (decoration only). */
.wh-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wh-glow::before, .wh-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.wh-glow::before { width: 620px; height: 620px; top: -260px; left: -160px; background: radial-gradient(circle, rgba(139, 124, 246, .35), transparent 70%); }
.wh-glow::after { width: 560px; height: 560px; top: -200px; right: -180px; background: radial-gradient(circle, rgba(56, 189, 248, .28), transparent 70%); }
[data-bs-theme="dark"] .wh-glow::before, [data-bs-theme="dark"] .wh-glow::after { opacity: .35; }

.wh-dock-wrap { position: sticky; top: 0; z-index: 1030; padding: 12px 16px 0; }
.wh-dock {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem .45rem .7rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--wh-surface) 78%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid color-mix(in srgb, var(--wh-border) 70%, transparent);
    box-shadow: 0 8px 30px -12px rgba(20, 22, 40, .18);
}

.wh-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--wh-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--wh-text);
    text-decoration: none;
    padding-right: .5rem;
    white-space: nowrap;
}
.wh-brand:hover { color: var(--wh-text); }
.wh-brand-mark {
    width: 34px; height: 34px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #8b7cf6 0%, #5b5bd6 55%, #3b9cff 100%);
    box-shadow: 0 6px 16px -6px rgba(91, 91, 214, .8);
    font-size: 1rem;
    flex-shrink: 0;
}
.wh-brand small { display: block; font-family: var(--wh-font-body); font-weight: 500; font-size: .68rem; color: var(--wh-faint); letter-spacing: 0; }

.wh-tabs { display: flex; align-items: center; gap: .15rem; margin: 0 auto; }
.wh-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    color: var(--wh-muted);
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.wh-tab i { font-size: 1rem; }
.wh-tab:hover { color: var(--wh-text); background: var(--wh-surface-3); }
.wh-tab.active { color: #fff; background: linear-gradient(135deg, #7c6cf0, #5b5bd6); box-shadow: 0 6px 14px -6px rgba(91, 91, 214, .7); }
.wh-tab .badge { font-size: .66rem; }
.wh-tab.active .badge { background: #fff !important; color: var(--wh-accent) !important; }

.wh-dock-tools { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.wh-tabs + .wh-dock-tools { margin-left: 0; }

.wh-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: var(--wh-muted);
    position: relative;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.wh-icon-btn:hover, .wh-icon-btn[aria-expanded="true"] { background: var(--wh-surface-3); color: var(--wh-text); }
.wh-icon-btn i { font-size: 1.1rem; }
.wh-icon-btn .badge { position: absolute; top: 3px; right: 2px; font-size: .62rem; padding: .22em .45em; border: 2px solid var(--wh-surface); }
.wh-avatar-btn { border: 0; background: none; padding: 2px; border-radius: 50%; margin-left: .2rem; }
.wh-avatar-btn:focus-visible { outline: 2px solid var(--wh-accent); }

.wh-search-menu { width: 380px; max-width: calc(100vw - 1.5rem); padding: .6rem; }
.wh-search { position: relative; }
.wh-search > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--wh-faint); pointer-events: none; }
.wh-search input { padding-left: 2.4rem; height: 44px; border-radius: 12px; font-size: .95rem; }
.wh-search-hint { font-size: .76rem; color: var(--wh-faint); padding: .5rem .3rem 0; }
kbd { font-size: .7rem; background: var(--wh-surface-3); color: var(--wh-muted); border: 1px solid var(--wh-border); border-radius: 5px; padding: .05rem .35rem; box-shadow: none; }

.wh-main { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.wh-page-head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.wh-page-head h1 { font-family: var(--wh-font-display); font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }

/* Phones and tablets: tabs move to a bar at the bottom, like a phone app. */
.wh-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1030;
    display: flex; justify-content: space-around;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    border-radius: 20px;
    background: color-mix(in srgb, var(--wh-surface) 86%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid color-mix(in srgb, var(--wh-border) 70%, transparent);
    box-shadow: 0 10px 30px -10px rgba(20, 22, 40, .3);
}
.wh-tabbar a, .wh-tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .35rem 0; border: 0; background: none; border-radius: 14px;
    color: var(--wh-muted); font-size: .68rem; font-weight: 600; text-decoration: none; position: relative;
}
.wh-tabbar i { font-size: 1.25rem; }
.wh-tabbar .active { color: var(--wh-accent-text); background: var(--wh-accent-soft); }
.wh-tabbar .badge { position: absolute; top: 2px; left: 54%; font-size: .6rem; }
@media (max-width: 991.98px) {
    .wh-main { padding-bottom: 6.5rem; }
    .toast-container { bottom: 80px !important; }
}
@media (max-width: 575.98px) {
    .wh-dock-wrap { padding: 8px 8px 0; }
    .wh-main { padding: 1.1rem .75rem 6.5rem; }
    .wh-page-head h1 { font-size: 1.35rem; }
}

.wh-more { border-radius: 22px 22px 0 0; height: auto !important; max-height: 80vh; }
.wh-more .offcanvas-body { padding: .5rem 1rem 1.5rem; }
.wh-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.wh-more-grid a, .wh-more-grid button {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .9rem .25rem; border-radius: 16px; border: 0;
    background: var(--wh-surface-2); color: var(--wh-text); text-decoration: none; font-size: .78rem; font-weight: 600; text-align: center;
}
.wh-more-grid i { font-size: 1.35rem; color: var(--wh-accent); }
.wh-more-heading { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wh-faint); margin: 1rem 0 .5rem; }

/* ---- Cards & surfaces ---- */
.wh-card {
    background: var(--wh-surface);
    border: 1px solid color-mix(in srgb, var(--wh-border) 55%, transparent);
    border-radius: var(--wh-radius);
    box-shadow: var(--wh-shadow-sm);
}
.wh-card-head { display: flex; align-items: center; gap: .5rem; padding: 1.15rem 1.3rem .6rem; }
.wh-card-head h2, .wh-card-head h3 { font-size: .95rem; margin: 0; }
.wh-card-head a { font-size: .8rem; margin-left: auto; text-decoration: none; }

.dropdown-menu {
    --bs-dropdown-bg: var(--wh-surface);
    --bs-dropdown-border-color: var(--wh-border);
    --bs-dropdown-link-color: var(--wh-text);
    --bs-dropdown-link-hover-bg: var(--wh-surface-3);
    --bs-dropdown-link-hover-color: var(--wh-text);
    --bs-dropdown-link-active-bg: var(--wh-accent);
    --bs-dropdown-font-size: .875rem;
    border-radius: 12px;
    box-shadow: var(--wh-shadow-lg);
    padding: .35rem;
}
.dropdown-item { border-radius: 8px; padding: .42rem .7rem; }
.modal-content, .offcanvas { background: var(--wh-surface); }
.toast { background: var(--wh-surface); border-radius: 12px; }
.alert { border-radius: 12px; }

/* ---- Buttons ---- */
.btn { border-radius: 12px; font-weight: 600; font-size: .875rem; padding: .5rem 1rem; }
.btn-sm { border-radius: 10px; font-size: .8rem; padding: .32rem .7rem; }
.btn-primary {
    --bs-btn-bg: var(--wh-accent); --bs-btn-border-color: var(--wh-accent);
    --bs-btn-hover-bg: var(--wh-accent-hover); --bs-btn-hover-border-color: var(--wh-accent-hover);
    --bs-btn-active-bg: var(--wh-accent-hover); --bs-btn-active-border-color: var(--wh-accent-hover);
    --bs-btn-disabled-bg: var(--wh-accent); --bs-btn-disabled-border-color: var(--wh-accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    box-shadow: 0 6px 16px -8px rgba(var(--wh-accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-outline-primary {
    --bs-btn-color: var(--wh-accent-text); --bs-btn-border-color: rgba(var(--wh-accent-rgb), .45);
    --bs-btn-hover-bg: var(--wh-accent); --bs-btn-hover-border-color: var(--wh-accent);
    --bs-btn-active-bg: var(--wh-accent); --bs-btn-active-border-color: var(--wh-accent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--wh-text); --bs-btn-border-color: var(--wh-border); --bs-btn-bg: var(--wh-surface);
    --bs-btn-hover-bg: var(--wh-surface-3); --bs-btn-hover-color: var(--wh-text); --bs-btn-hover-border-color: var(--wh-border);
    --bs-btn-active-bg: var(--wh-accent-soft); --bs-btn-active-color: var(--wh-accent-text); --bs-btn-active-border-color: rgba(var(--wh-accent-rgb), .45);
}
.btn-check:checked + .btn-outline-secondary { background: var(--wh-accent-soft); color: var(--wh-accent-text); border-color: rgba(var(--wh-accent-rgb), .45); }
.btn-link { text-decoration: none; }

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--wh-border);
    background-color: var(--wh-surface);
    font-size: .9rem;
    padding: .5rem .8rem;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { border-radius: 8px; font-size: .82rem; padding: .32rem .6rem; }
.form-select-sm { padding-right: 2rem; }
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--wh-accent-rgb), .6);
    box-shadow: 0 0 0 3px rgba(var(--wh-accent-rgb), .15);
}
.form-control::placeholder { color: var(--wh-faint); }
.form-label { font-weight: 500; font-size: .84rem; margin-bottom: .35rem; }
.form-text { color: var(--wh-faint); font-size: .78rem; }
.form-check-input:checked { background-color: var(--wh-accent); border-color: var(--wh-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--wh-accent-rgb), .15); }
hr { border-color: var(--wh-border); opacity: 1; }

/* ---- Tables ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wh-text);
    --bs-table-border-color: var(--wh-border-soft);
    --bs-table-hover-bg: var(--wh-surface-2);
    margin-bottom: 0;
}
.table > thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--wh-muted);
    background: transparent;
    border-bottom: 1px solid var(--wh-border-soft);
    padding-top: .8rem; padding-bottom: .55rem;
    white-space: nowrap;
}
.table > :not(caption) > * > * { padding-left: .9rem; padding-right: .9rem; }
.wh-card > .table-responsive > .table > thead th:first-child,
.wh-card > .table > thead th:first-child { border-top-left-radius: var(--wh-radius); }
.wh-card > .table-responsive > .table > thead th:last-child,
.wh-card > .table > thead th:last-child { border-top-right-radius: var(--wh-radius); }
.table > tbody > tr:hover > * { background: var(--wh-surface-2); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.pagination {
    --bs-pagination-border-radius: 8px;
    --bs-pagination-active-bg: var(--wh-accent); --bs-pagination-active-border-color: var(--wh-accent);
    --bs-pagination-bg: var(--wh-surface); --bs-pagination-border-color: var(--wh-border);
    --bs-pagination-color: var(--wh-text); --bs-pagination-hover-bg: var(--wh-surface-3);
}

/* ---- Badges, chips, stages ---- */
.badge { font-weight: 600; border-radius: 6px; letter-spacing: .01em; }
.badge.rounded-pill { border-radius: 999px; }
.wh-chip { background: var(--wh-surface-3); color: var(--wh-muted); border: 1px solid var(--wh-border); font-weight: 500; }

.wh-status {
    --c: 108, 117, 125;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .76rem; font-weight: 600;
    padding: .2rem .6rem .2rem .5rem;
    border-radius: 999px;
    color: rgb(var(--c));
    background: rgba(var(--c), .12);
    white-space: nowrap;
}
.wh-status i { width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--c)); }
.wh-status-secondary { --c: 107, 114, 135; }
.wh-status-primary { --c: 79, 110, 247; }
.wh-status-warning { --c: 180, 118, 4; }
.wh-status-info { --c: 8, 138, 170; }
.wh-status-success { --c: 22, 150, 70; }
.wh-status-dark { --c: 71, 85, 105; }
[data-bs-theme="dark"] .wh-status-secondary { --c: 160, 166, 186; }
[data-bs-theme="dark"] .wh-status-primary { --c: 129, 156, 255; }
[data-bs-theme="dark"] .wh-status-warning { --c: 250, 204, 21; }
[data-bs-theme="dark"] .wh-status-info { --c: 34, 211, 238; }
[data-bs-theme="dark"] .wh-status-success { --c: 74, 222, 128; }
[data-bs-theme="dark"] .wh-status-dark { --c: 148, 163, 184; }
.wh-priority { white-space: nowrap; font-size: .82rem; font-weight: 500; }

/* ---- People ---- */
.wh-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3e2ff, #d4e4ff);
    color: #3b3bb0;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: -.02em;
}
/* One colour per person (partials/avatar adds .t0 … .t7 from their id), so people are told apart at a glance. */
.wh-avatar.t0 { background: #e4e1ff; color: #4b3fc4; } .wh-avatar.t1 { background: #d7f0ff; color: #0b6b9c; }
.wh-avatar.t2 { background: #dcf7e6; color: #17804a; } .wh-avatar.t3 { background: #ffe9cf; color: #a35409; }
.wh-avatar.t4 { background: #ffe0ea; color: #b4235a; } .wh-avatar.t5 { background: #e9e4ff; color: #6d3fd1; }
.wh-avatar.t6 { background: #d6f5f2; color: #0f766e; } .wh-avatar.t7 { background: #fde7f9; color: #a2309a; }
[data-bs-theme="dark"] .wh-avatar { background: #2a2d47; color: #dcdcff; }
[data-bs-theme="dark"] .wh-avatar.t0 { background: #34306e; color: #c9c2ff; } [data-bs-theme="dark"] .wh-avatar.t1 { background: #12405a; color: #a5dcff; }
[data-bs-theme="dark"] .wh-avatar.t2 { background: #164530; color: #a3ecc0; } [data-bs-theme="dark"] .wh-avatar.t3 { background: #4d3313; color: #ffd29a; }
[data-bs-theme="dark"] .wh-avatar.t4 { background: #4d1d30; color: #ffb3cc; } [data-bs-theme="dark"] .wh-avatar.t5 { background: #3a2a6b; color: #d2c2ff; }
[data-bs-theme="dark"] .wh-avatar.t6 { background: #12403c; color: #9fece3; } [data-bs-theme="dark"] .wh-avatar.t7 { background: #4a1f47; color: #f6b5ee; }
img.wh-avatar { background: none; }
.wh-avatar-stack { display: flex; }
.wh-avatar-stack .wh-avatar { border: 2px solid var(--wh-surface); }
.wh-avatar-stack > * { margin-left: -8px; }
.wh-avatar-stack > *:first-child { margin-left: 0; }

/* ---- Login & password pages ---- */
.wh-login {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(124, 108, 240, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(63, 140, 255, .14), transparent 60%),
        var(--wh-bg);
}
.wh-login-box { display: flex; width: 100%; max-width: 920px; min-height: 540px; overflow: hidden; border-radius: 20px; box-shadow: var(--wh-shadow-lg); border: 1px solid var(--wh-border); background: var(--wh-surface); }
.wh-login-art {
    flex: 1 1 50%;
    padding: 2.75rem;
    color: #fff;
    display: flex; flex-direction: column;
    background:
        radial-gradient(500px 300px at 0% 0%, rgba(255, 255, 255, .18), transparent 60%),
        linear-gradient(150deg, #6d5ff0 0%, #5151d0 45%, #2f6fe0 100%);
}
.wh-login-art .wh-brand { color: #fff; padding: 0; }
.wh-login-art .wh-brand small { color: rgba(255, 255, 255, .7); }
.wh-login-art .wh-brand-mark { background: rgba(255, 255, 255, .2); box-shadow: none; }
.wh-login-art h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin: auto 0 .75rem; line-height: 1.2; }
.wh-login-art p { color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.wh-login-art ul { list-style: none; padding: 0; margin: 1.75rem 0 auto; }
.wh-login-art li { display: flex; gap: .7rem; align-items: center; margin-bottom: .85rem; color: rgba(255, 255, 255, .92); }
.wh-login-art li i { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; }
.wh-login-form { flex: 1 1 50%; padding: 2.75rem; display: flex; flex-direction: column; justify-content: center; }
.wh-login-form h1 { font-size: 1.45rem; margin-bottom: .25rem; }
@media (max-width: 767.98px) { .wh-login-art { display: none; } .wh-login-box { min-height: 0; } .wh-login-form { padding: 2rem 1.5rem; } }

/* ---- Home ---- */
.wh-hello { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.wh-hello h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.wh-hello p { margin: .25rem 0 0; color: var(--wh-muted); }
.wh-kpi {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem; height: 100%;
    color: inherit; text-decoration: none;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
a.wh-kpi:hover { color: inherit; transform: translateY(-1px); box-shadow: var(--wh-shadow); border-color: rgba(var(--wh-accent-rgb), .35); }
.wh-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.wh-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.wh-kpi-label { font-size: .8rem; color: var(--wh-muted); }
.wh-tone-indigo { background: rgba(91, 91, 214, .12); color: #5b5bd6; }
.wh-tone-amber { background: rgba(217, 119, 6, .12); color: #c26a05; }
.wh-tone-cyan { background: rgba(8, 145, 178, .12); color: #0a86a4; }
.wh-tone-rose { background: rgba(225, 29, 72, .11); color: #d61c45; }
.wh-tone-green { background: rgba(22, 163, 74, .12); color: #15924a; }
[data-bs-theme="dark"] .wh-tone-indigo { color: #a5a5ff; }
[data-bs-theme="dark"] .wh-tone-amber { color: #fbbf24; }
[data-bs-theme="dark"] .wh-tone-cyan { color: #22d3ee; }
[data-bs-theme="dark"] .wh-tone-rose { color: #fb7185; }
[data-bs-theme="dark"] .wh-tone-green { color: #4ade80; }

.wh-list-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.15rem; border-top: 1px solid var(--wh-border-soft); color: inherit; text-decoration: none; min-width: 0; }
.wh-list-row:first-child { border-top: 0; }
a.wh-list-row:hover { background: var(--wh-surface-2); color: inherit; }
.wh-list-row .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-list-row .meta { font-size: .78rem; color: var(--wh-muted); }
.wh-code { font-size: .75rem; font-weight: 600; color: var(--wh-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wh-empty { text-align: center; color: var(--wh-muted); padding: 2rem 1rem; font-size: .88rem; }
.wh-empty i { display: block; font-size: 1.8rem; color: var(--wh-faint); margin-bottom: .4rem; }
.wh-project-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.wh-progress { height: 6px; background: var(--wh-surface-3); border-radius: 99px; overflow: hidden; }
.wh-progress span { display: block; height: 100%; border-radius: 99px; }

/* ---- Projects ---- */
.wh-project-card { border-left: 4px solid var(--wh-accent); transition: box-shadow .15s, transform .15s; }
.wh-project-card:hover { box-shadow: var(--wh-shadow); transform: translateY(-1px); }
.wh-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wh-member-option {
    display: flex; align-items: center; gap: .6rem;
    border: 1px solid var(--wh-border);
    border-radius: var(--wh-radius-sm);
    padding: .45rem .7rem;
    cursor: pointer;
    min-width: 0;
    background: var(--wh-surface);
}
.wh-member-option:has(input:checked) { border-color: var(--wh-accent); background: var(--wh-accent-soft); }
.wh-rights-group { border: 1px solid var(--wh-border); border-radius: var(--wh-radius-sm); padding: .9rem 1rem; height: 100%; background: var(--wh-surface); }
.wh-rights-group h3 { font-size: .92rem; font-weight: 600; margin-bottom: .6rem; }

/* ---- Tickets ---- */
.wh-pre { white-space: pre-line; overflow-wrap: anywhere; }
.wh-ticket-table td { padding-top: .65rem; padding-bottom: .65rem; }
.wh-ticket-facts dt { font-size: .7rem; font-weight: 600; color: var(--wh-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.wh-ticket-facts dd { margin-bottom: .9rem; }
.wh-rich { overflow-wrap: anywhere; line-height: 1.6; }
.wh-activity { padding: .35rem .25rem .35rem 1rem; border-left: 2px solid var(--wh-border); margin: 0 0 .5rem .75rem; }

/* ---- Board ---- */
.wh-board { display: flex; gap: .85rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.wh-board-col { flex: 0 0 272px; background: var(--wh-surface-3); border: 1px solid var(--wh-border-soft); border-radius: var(--wh-radius); padding: .55rem; }
.wh-board-col-head { display: flex; align-items: center; padding: .4rem .45rem .65rem; border-top: 3px solid; border-radius: .25rem; font-size: .86rem; font-weight: 600; }
.wh-board-list { min-height: 80px; display: flex; flex-direction: column; gap: .5rem; }
.wh-board-card { padding: .7rem .8rem; font-size: .88rem; transition: box-shadow .12s, border-color .12s; }
.wh-board-card:hover { box-shadow: var(--wh-shadow); border-color: rgba(var(--wh-accent-rgb), .3); }
.wh-board-card.wh-draggable { cursor: grab; }
.wh-board-ghost { opacity: .4; }

/* ---- Chat ---- */
.wh-chat { display: flex; height: calc(100vh - 136px); min-height: 420px; overflow: hidden; }
.wh-chat-list { flex: 0 0 264px; flex-direction: column; border-right: 1px solid var(--wh-border); overflow-y: auto; padding: .5rem 0; display: flex; background: var(--wh-surface-2); }
.wh-chat-list-head { display: flex; align-items: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--wh-faint); padding: .75rem 1rem .3rem; }
.wh-chat-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; margin: 0 .45rem 1px; border-radius: 9px; color: var(--wh-sidebar-text); text-decoration: none; font-size: .9rem; }
.wh-chat-item:hover { background: var(--wh-surface-3); color: var(--wh-text); }
.wh-chat-item.active { background: var(--wh-accent-soft); color: var(--wh-accent-text); }
.wh-chat-item.unread { font-weight: 600; color: var(--wh-text); }
.wh-chat-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--wh-accent-soft); color: var(--wh-accent-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wh-chat-icon-sm { width: 26px; height: 26px; font-size: .8rem; border-radius: 8px; }
.wh-chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--wh-surface); }
.wh-chat-head { display: flex; align-items: center; padding: .7rem 1.1rem; border-bottom: 1px solid var(--wh-border); }
.min-w-0 { min-width: 0; }
.wh-chat-messages { flex: 1; overflow-y: auto; padding: .5rem 0 1rem; display: flex; flex-direction: column; }
.wh-chat-day { text-align: center; margin: 1rem 0 .5rem; position: relative; font-size: .74rem; font-weight: 600; color: var(--wh-faint); }
.wh-chat-day::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; border-top: 1px solid var(--wh-border-soft); }
.wh-chat-day span { background: var(--wh-surface); padding: .1rem .75rem; position: relative; border: 1px solid var(--wh-border-soft); border-radius: 99px; }
.wh-msg { display: flex; gap: .7rem; padding: .4rem 1.1rem; position: relative; }
.wh-msg:hover { background: var(--wh-surface-2); }
.wh-msg-compact { padding-top: .05rem; }
.wh-msg-avatar { flex: 0 0 36px; }
.wh-msg-main { flex: 1; min-width: 0; }
.wh-msg-head { display: flex; align-items: baseline; gap: .5rem; }
.wh-msg-body { overflow-wrap: anywhere; line-height: 1.55; }
.wh-msg-quote { display: block; border-left: 3px solid rgba(var(--wh-accent-rgb), .45); padding: .15rem .65rem; margin: .15rem 0 .3rem; font-size: .85rem; color: var(--wh-muted); text-decoration: none; background: var(--wh-surface-2); border-radius: 0 8px 8px 0; }
.wh-msg-actions { position: absolute; right: 1rem; top: -.65rem; display: none; gap: .2rem; background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: 10px; padding: .15rem; box-shadow: var(--wh-shadow); }
.wh-msg:hover .wh-msg-actions, .wh-msg:focus-within .wh-msg-actions { display: flex; }
.wh-msg-actions .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .4rem; }
@keyframes wh-flash { from { background: var(--wh-flash); } to { background: transparent; } }
.wh-msg-flash { animation: wh-flash 2s ease-out; }
.wh-msg-media { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.wh-msg-media img { max-width: 260px; max-height: 200px; border-radius: 10px; border: 1px solid var(--wh-border); object-fit: cover; display: block; }
.wh-msg-media video { max-width: 360px; max-height: 240px; border-radius: 10px; background: #000; }
.wh-file-card { display: flex; align-items: center; gap: .6rem; max-width: 360px; padding: .5rem .75rem; margin: .3rem 0; border: 1px solid var(--wh-border); border-radius: 12px; color: inherit; text-decoration: none; background: var(--wh-surface); }
a.wh-file-card:hover { border-color: var(--wh-accent); }
.wh-pending-files { display: flex; flex-wrap: wrap; gap: .4rem; }
.wh-pending-files:not(:empty) { margin-bottom: .5rem; }
.wh-pending-file { display: flex; align-items: center; gap: .4rem; font-size: .82rem; background: var(--wh-surface-2); border: 1px solid var(--wh-border); border-radius: 8px; padding: .25rem .5rem; max-width: 100%; }
.wh-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.wh-pending-bar { width: 60px; height: 4px; background: var(--wh-surface-3); border-radius: 2px; overflow: hidden; }
.wh-pending-bar span { display: block; height: 100%; width: 0; background: var(--wh-accent); transition: width .2s; }
.wh-pending-file.done .wh-pending-bar { display: none; }
.wh-pending-file.done i { color: #198754; }
.wh-pending-file.failed { background: var(--wh-danger-soft); border-color: #f5c2c7; color: #b02a37; }
.wh-pending-file.failed .wh-pending-bar { display: none; }
.wh-chat-pane.wh-dropping { outline: 3px dashed var(--wh-accent); outline-offset: -6px; }
.wh-chat-composer { border-top: 1px solid var(--wh-border); padding: .8rem 1.1rem; }
.wh-chat-composer textarea { resize: none; max-height: 160px; }
.wh-chat-replying { display: flex; align-items: center; font-size: .85rem; color: var(--wh-muted); background: var(--wh-surface-2); border-left: 3px solid rgba(var(--wh-accent-rgb), .45); padding: .3rem .6rem; margin-bottom: .5rem; border-radius: 0 8px 8px 0; }
.wh-chat-replying span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-live { white-space: nowrap; }
.wh-live i { font-size: .55rem; vertical-align: middle; }
@media (max-width: 575.98px) { .wh-msg-media img, .wh-msg-media video { max-width: 100%; } }
@media (max-width: 767.98px) {
    .wh-chat-list { flex: 1; border-right: 0; }
    .wh-main:has(.wh-chat) { padding: .5rem .5rem 0; }
    .wh-chat { height: calc(100vh - 160px); }
}

/* ---- Links, mentions, ticket boxes ---- */
.wh-mention { background: var(--wh-accent-soft); color: var(--wh-accent-text); border-radius: 5px; padding: 0 .25rem; font-weight: 500; }
.wh-ticket-ref { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: 0 .45rem; border: 1px solid var(--wh-border); border-radius: 7px; background: var(--wh-surface-2); text-decoration: none; font-size: .88em; font-weight: 600; vertical-align: baseline; }
.wh-ticket-ref:hover { border-color: var(--wh-accent); }
.wh-ticket-ref-title { font-weight: 400; color: var(--wh-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-ticket-ref-dot { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.wh-chat-mention { display: block; padding: .45rem 0; border-top: 1px solid var(--wh-border-soft); color: inherit; text-decoration: none; }
.wh-chat-mention:first-of-type { border-top: 0; }
.wh-chat-mention:hover .text-truncate { color: var(--wh-accent); }
.wh-mention-menu { position: absolute; bottom: 100%; left: 0; z-index: 30; min-width: 220px; margin-bottom: .3rem; background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: 12px; box-shadow: var(--wh-shadow-lg); padding: .3rem; }
.wh-mention-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--wh-text); padding: .4rem .65rem; border-radius: 8px; font-size: .88rem; }
.wh-mention-item.active, .wh-mention-item:hover { background: var(--wh-accent-soft); color: var(--wh-accent-text); }

/* ---- Bell ---- */
.wh-bell-menu { width: 380px; max-width: calc(100vw - 1rem); padding: 0; overflow: hidden; }
#bellList { max-height: 440px; overflow-y: auto; }
.wh-notice { display: flex; gap: .75rem; padding: .7rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--wh-border-soft); }
.wh-notice:last-child { border-bottom: 0; }
.wh-notice:hover { background: var(--wh-surface-2); color: inherit; }
.wh-notice.unread { background: var(--wh-accent-soft); }
.wh-notice.unread .wh-notice-text { font-weight: 600; }
.wh-notice-icon { color: var(--wh-accent); font-size: 1rem; width: 30px; height: 30px; border-radius: 9px; background: var(--wh-accent-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wh-notice.unread .wh-notice-icon { background: var(--wh-surface); }
.wh-notice-text { font-size: .875rem; overflow-wrap: anywhere; }

/* ---- Reports ---- */
.wh-stat { padding: 1.05rem 1.15rem; height: 100%; }
.wh-stat-label { font-size: .78rem; font-weight: 500; color: var(--wh-muted); }
.wh-stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.2; margin: .2rem 0; letter-spacing: -.02em; }
.wh-stat-note { font-size: .76rem; color: var(--wh-faint); }
.wh-report-table > thead th { color: var(--wh-muted); border-bottom-color: var(--wh-border); background: transparent; }
.wh-report-table td { border-bottom-color: var(--wh-border-soft); }
.wh-num { font-variant-numeric: tabular-nums; }
.wh-bar { height: 8px; min-width: 60px; background: var(--wh-surface-3); border-radius: 99px; overflow: hidden; }
.wh-bar span { display: block; height: 100%; background: var(--wh-accent); border-radius: 99px; }

/* ---- Senior/QA, time, repeating ---- */
.wh-review { border-left: 3px solid var(--bs-warning); }
.wh-review-reason { margin: .35rem 0 .1rem; padding: .45rem .65rem; border-left: 3px solid var(--bs-danger); background: var(--wh-danger-soft); color: var(--wh-text); white-space: pre-line; border-radius: 0 8px 8px 0; }
.wh-topbar-timer { background: var(--wh-danger-soft); border-radius: 999px; padding: .2rem .25rem .2rem .7rem; }
.wh-topbar-timer a { color: var(--wh-text); }
#time details summary { cursor: pointer; }
[data-freq][hidden] { display: none !important; }

/* ---- Theme switch: show the icon of the theme you'd switch to ---- */
[data-bs-theme="dark"] .wh-theme-to-dark, [data-bs-theme="light"] .wh-theme-to-light { display: none; }

/* ---- Small fixes after looking at the screens ---- */
.wh-report-table > thead th { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.wh-kpi.wh-kpi-auto { height: auto; }
[data-bs-theme="light"] .wh-priority.text-warning, [data-bs-theme="light"] .wh-board-card .text-warning { color: #b45309 !important; }

/* ---- Ticket files (Google Drive) ---- */
.wh-dropzone { border: 2px dashed var(--wh-border); border-radius: var(--wh-radius-sm); padding: .9rem 1rem; text-align: center; color: var(--wh-muted); font-size: .85rem; margin-bottom: 1rem; transition: border-color .12s, background .12s; }
.wh-dropzone i { font-size: 1.1rem; margin-right: .35rem; vertical-align: -2px; }
.wh-dropzone.active { border-color: var(--wh-accent); background: var(--wh-accent-soft); color: var(--wh-accent-text); }
.wh-uploads:not(:empty) { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.wh-upload { border: 1px solid var(--wh-border); border-radius: var(--wh-radius-sm); padding: .5rem .75rem; font-size: .85rem; background: var(--wh-surface-2); }
.wh-upload-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wh-upload-bar { height: 5px; background: var(--wh-surface-3); border-radius: 99px; overflow: hidden; margin-top: .4rem; }
.wh-upload-bar span { display: block; height: 100%; width: 0; background: var(--wh-accent); border-radius: 99px; transition: width .25s; }
.wh-upload.failed { background: var(--wh-danger-soft); border-color: rgba(220, 53, 69, .35); }
.wh-upload.failed .wh-upload-note { color: var(--bs-danger) !important; }
.wh-upload.failed .wh-upload-bar { display: none; }
.wh-tfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.wh-tfiles:empty { display: none; }
.wh-tfile { border: 1px solid var(--wh-border); border-radius: var(--wh-radius-sm); background: var(--wh-surface); overflow: hidden; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; }
.wh-tfile:hover { border-color: rgba(var(--wh-accent-rgb), .4); box-shadow: var(--wh-shadow-sm); }
.wh-tfile-thumb { display: block; aspect-ratio: 16 / 10; background: var(--wh-surface-3); border-bottom: 1px solid var(--wh-border-soft); }
.wh-tfile-thumb img, .wh-tfile-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.wh-tfile-thumb img { background: var(--wh-surface-3); }
.wh-tfile-info { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; }
.wh-tfile-icon { font-size: 1.35rem; color: var(--wh-accent); flex-shrink: 0; }
.wh-tfile-name { display: block; font-size: .84rem; font-weight: 500; color: var(--wh-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wh-tfile-name:hover { color: var(--wh-accent); }
.wh-tfile-meta { font-size: .74rem; color: var(--wh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-contents { display: contents; }

/* =====================================================================
   Motion & little joys. Everything here is decoration: switched off for
   people who ask their computer for less motion (bottom of this section).
   JS side: public/js/delight.js.
   ===================================================================== */
@keyframes wh-rise { from { transform: translateY(10px); } to { transform: none; } }   /* no fade: a fading parent would switch off the glass blur inside it */
@keyframes wh-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wh-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, 70px) scale(1.12); } }
@keyframes wh-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-110px, 90px) scale(.92); } }
@keyframes wh-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(10deg); } }
@keyframes wh-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes wh-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
@keyframes wh-ripple { to { transform: scale(4); opacity: 0; } }
@keyframes wh-landed { 0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(var(--wh-accent-rgb), .5); } 60% { transform: scale(1.02); } 100% { transform: none; box-shadow: 0 0 0 10px rgba(var(--wh-accent-rgb), 0); } }
@keyframes wh-load { 0% { transform: scaleX(0); } 30% { transform: scaleX(.45); } 70% { transform: scaleX(.75); } 100% { transform: scaleX(.92); } }


/* The glow behind pages drifts slowly. */
.wh-glow::before { animation: wh-drift-a 26s ease-in-out infinite; }
.wh-glow::after { animation: wh-drift-b 32s ease-in-out infinite; }

/* Thin loading line at the very top while the next page opens. */
.wh-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; transform-origin: left; transform: scaleX(0); opacity: 0;
    background: linear-gradient(90deg, #7c6cf0, #38bdf8, #34d399); box-shadow: 0 0 10px rgba(124, 108, 240, .6); }
.wh-loadbar.on { opacity: 1; animation: wh-load 6s cubic-bezier(.1, .7, .2, 1) forwards; }

/* Cards and rows answer the mouse. */
.wh-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.wh-card:hover, .wh-board-card:hover { transform: translateY(-3px); box-shadow: var(--wh-shadow); }
a.wh-kpi:hover { transform: translateY(-3px); }
.wh-kpi-icon { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
a.wh-kpi:hover .wh-kpi-icon { transform: rotate(-8deg) scale(1.12); }
a.wh-list-row { transition: background .15s, padding-left .2s ease; }
a.wh-list-row:hover { padding-left: 1.4rem; }
.wh-project-dot { transition: transform .2s; }
a.wh-list-row:hover .wh-project-dot { transform: scale(1.35) rotate(45deg); }
.wh-card-head a i { display: inline-block; transition: transform .2s; }
.wh-card-head a:hover i { transform: translateX(4px); }
.wh-avatar-stack > * { transition: transform .2s; }
.wh-avatar-stack > *:hover { transform: translateY(-3px); z-index: 1; position: relative; }
.wh-progress span { transform-origin: left; animation: wh-fill 1.1s .25s cubic-bezier(.2, .8, .2, 1) both; }

/* Dock: brand mark spins a little, tabs lift. */
.wh-brand-mark { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.wh-brand:hover .wh-brand-mark { transform: rotate(90deg) scale(1.06); }
.wh-tab { transition: background .2s, color .2s, transform .15s; }
.wh-tab:hover { transform: translateY(-1px); }
.wh-icon-btn { transition: background .15s, color .15s, transform .15s; }
.wh-icon-btn:active { transform: scale(.9); }
#themeToggle i { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
#themeToggle:hover i { transform: rotate(-25deg); }
.wh-ringing > i { animation: wh-ring .8s ease; transform-origin: 50% 10%; }
.wh-bump { animation: wh-bump .45s ease; }
.wh-tabbar a, .wh-tabbar button { transition: color .15s, background .2s, transform .15s; }
.wh-tabbar a:active, .wh-tabbar button:active { transform: scale(.92); }

/* Menus, alerts and toasts pop in. */
.dropdown-menu.show { animation: wh-pop .16s ease-out; transform-origin: top right; }
.alert { animation: wh-pop .3s ease-out both; }
.toast.showing, .toast.show { animation: wh-rise .35s cubic-bezier(.2, .75, .25, 1); }

/* Buttons: soft press and a ripple where clicked. */
.btn { position: relative; overflow: hidden; transition: transform .12s, box-shadow .2s, background-color .15s, border-color .15s, color .15s; }
.btn:active { transform: scale(.97); }
.btn-primary:hover { box-shadow: 0 8px 20px -8px rgba(var(--wh-accent-rgb), .8); transform: translateY(-1px); }
.wh-ripple { position: absolute; border-radius: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none;
    background: currentColor; opacity: .22; transform: scale(0); animation: wh-ripple .55s ease-out forwards; }

/* Home: the hand waves hello. */
.wh-wave { display: inline-block; transform-origin: 70% 75%; animation: wh-wave 2.2s ease .6s 2; }

/* Board: a card that just landed in a new column. */
.wh-board-card.wh-landed { animation: wh-landed .6s ease-out; }
.wh-board-ghost { opacity: .45; border: 2px dashed rgba(var(--wh-accent-rgb), .6) !important; background: var(--wh-accent-soft) !important; }
.wh-board-col { transition: background .2s, box-shadow .2s; }
.wh-board-list.sortable-over, .wh-board-col:has(.wh-board-ghost) { box-shadow: inset 0 0 0 2px rgba(var(--wh-accent-rgb), .25); }

/* Chat: new messages slide up; the empty state breathes. */
.wh-msg-new { animation: wh-rise .35s cubic-bezier(.2, .75, .25, 1); }
.wh-empty i { animation: wh-float 3.5s ease-in-out infinite; }
@keyframes wh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Login page eases in. */
.wh-login-box { animation: wh-rise .6s cubic-bezier(.2, .75, .25, 1) both; }

/* Light/dark switch fades instead of flashing. */
.wh-theme-anim, .wh-theme-anim *, .wh-theme-anim *::before, .wh-theme-anim *::after {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease !important; }

/* Confetti canvas (delight.js draws on it when a ticket is Done). */
.wh-confetti { position: fixed; inset: 0; z-index: 2100; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    a.wh-list-row:hover { padding-left: 1.15rem; }
}


/* =====================================================================
   Look: clean (Linear / Plane style). Plain calm surfaces, hairline
   borders, one indigo accent, colour only where it means something.
   Overrides the plainer rules above. The --wh-glass-* names are kept
   (later sections use them) but now hold solid colours. The old glass
   look is kept in docs/design-backup/ to switch back.
   ===================================================================== */
:root, [data-bs-theme="light"] {
    --wh-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wh-radius: 14px;
    --wh-radius-sm: 10px;

    --wh-accent: #5b5bd6;
    --wh-accent-hover: #4b4bc8;
    --wh-accent-rgb: 91, 91, 214;
    --wh-accent-soft: #efeffc;
    --wh-accent-text: #4747c2;

    --wh-bg: #fafafb;
    --wh-surface: #ffffff;
    --wh-surface-2: #f7f7f9;
    --wh-surface-3: #f1f1f4;
    --wh-border: #e7e7ec;
    --wh-border-soft: #efeff3;
    --wh-text: #16171d;
    --wh-muted: #6b6f7b;
    --wh-faint: #a0a3ad;

    --wh-shadow-sm: 0 1px 2px rgba(16, 17, 26, .04);
    --wh-shadow: 0 8px 24px -10px rgba(16, 17, 26, .14), 0 1px 2px rgba(16, 17, 26, .04);
    --wh-shadow-lg: 0 18px 48px -14px rgba(16, 17, 26, .22), 0 2px 6px rgba(16, 17, 26, .05);

    --wh-glass: var(--wh-surface);
    --wh-glass-strong: var(--wh-surface);
    --wh-glass-menu: var(--wh-surface);
    --wh-glass-inner: var(--wh-surface-2);
    --wh-glass-line: var(--wh-border);
    --wh-glass-field: var(--wh-border);
    --wh-glass-blur: none;
    --wh-glass-shadow: var(--wh-shadow-sm);
    --wh-glass-shadow-hover: var(--wh-shadow);
    --wh-wash: none;
}
[data-bs-theme="dark"] {
    --wh-accent: #7b7bea;
    --wh-accent-hover: #8d8df0;
    --wh-accent-rgb: 123, 123, 234;
    --wh-accent-soft: rgba(123, 123, 234, .14);
    --wh-accent-text: #a9a9ff;

    --wh-bg: #0e0f13;
    --wh-surface: #16171c;
    --wh-surface-2: #1b1c22;
    --wh-surface-3: #202128;
    --wh-border: #26272e;
    --wh-border-soft: #1f2026;
    --wh-text: #ededf0;
    --wh-muted: #9497a1;
    --wh-faint: #686b75;

    --wh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --wh-shadow: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .4);
    --wh-shadow-lg: 0 20px 50px -14px rgba(0, 0, 0, .8);
}

/* Plain page: no colour wash, no glow. */
body { background: var(--wh-bg); letter-spacing: -.003em; }
.wh-glow { display: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 650; letter-spacing: -.02em; }

/* Surfaces: solid, hairline border, the faintest shadow. */
.wh-card, .wh-hero, .toast, .modal-content, .offcanvas, .wh-mention-menu {
    background: var(--wh-surface); border: 1px solid var(--wh-border); box-shadow: var(--wh-shadow-sm);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.wh-card { border-radius: var(--wh-radius); }
.dropdown-menu { background: var(--wh-surface); border: 1px solid var(--wh-border); box-shadow: var(--wh-shadow-lg); border-radius: 12px; }
a.wh-card:hover, .wh-board-card:hover { border-color: color-mix(in srgb, var(--wh-border) 40%, var(--wh-faint)); box-shadow: var(--wh-shadow); }

/* Top bar: nearly solid, a thin line, a light shadow. Only the bar keeps a little blur (content scrolls under it). */
.wh-dock-wrap { padding-top: 10px; }
.wh-dock {
    border-radius: 14px; padding: .4rem .45rem .4rem .6rem;
    background: color-mix(in srgb, var(--wh-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid var(--wh-border); box-shadow: 0 1px 2px rgba(16, 17, 26, .04), 0 8px 24px -16px rgba(16, 17, 26, .18);
}
.wh-tabbar { background: color-mix(in srgb, var(--wh-surface) 92%, transparent); border: 1px solid var(--wh-border); box-shadow: var(--wh-shadow); border-radius: 16px; }
.wh-tabbar .active { background: var(--wh-surface-3); color: var(--wh-text); }
.wh-brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: .9rem; background: var(--wh-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.wh-tab { font-weight: 500; padding: .42rem .8rem; color: var(--wh-muted); }
.wh-tab i { font-size: .95rem; }
.wh-tab:hover { background: var(--wh-surface-3); color: var(--wh-text); }
.wh-tab.active { background: var(--wh-surface-3); color: var(--wh-text); box-shadow: none; font-weight: 600; }
.wh-tab.active .badge { background: var(--bs-danger) !important; color: #fff !important; }
.wh-icon-btn { width: 34px; height: 34px; border-radius: 9px; }
.wh-icon-btn i { font-size: 1rem; }
.wh-avatar-btn .wh-avatar { box-shadow: none; }

/* Page heading. */
.wh-main { padding-top: 1.6rem; }
.wh-page-head { margin-bottom: 1.2rem; }
.wh-page-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
@media (max-width: 575.98px) { .wh-page-head h1 { font-size: 1.35rem; } }

/* Card headings with a small tinted icon square. */
.wh-card-head { padding: 1rem 1.15rem .55rem; }
.wh-card-head h2, .wh-card-head h3 { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; }
.wh-card-head h2 > i.bi:first-child, .wh-card-head h3 > i.bi:first-child {
    width: 26px; height: 26px; margin-right: .55rem !important; border-radius: 7px; font-size: .8rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, currentColor 11%, transparent);
}

/* Rows: tighter, a quiet grey on hover. */
.wh-list-row { padding: .6rem 1.15rem; }
a.wh-list-row:hover { background: var(--wh-surface-2); padding-left: 1.15rem; }
.table > :not(caption) > * > * { padding-left: 1rem; padding-right: 1rem; }
.table > thead th { font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--wh-faint); padding-top: .7rem; padding-bottom: .5rem; }
.wh-ticket-table td { padding-top: .55rem; padding-bottom: .55rem; }
.table > tbody > tr > * { transition: background-color .12s; }
.table > tbody > tr:hover > * { background: var(--wh-surface-2); }

/* Buttons: compact, solid accent, quiet outlines. */
.btn { border-radius: 9px; font-weight: 550; font-size: .85rem; padding: .44rem .9rem; }
.btn-sm { border-radius: 8px; font-size: .78rem; padding: .28rem .62rem; }
.btn-primary { background-image: none; box-shadow: 0 1px 2px rgba(16, 17, 26, .12), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn-primary:hover { box-shadow: 0 6px 16px -6px rgba(var(--wh-accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn-outline-secondary {
    --bs-btn-bg: var(--wh-surface); --bs-btn-border-color: var(--wh-border);
    --bs-btn-hover-bg: var(--wh-surface-2); --bs-btn-hover-border-color: color-mix(in srgb, var(--wh-border) 50%, var(--wh-faint));
    box-shadow: var(--wh-shadow-sm);
}

/* Fields: white, a hairline, an indigo ring on focus. */
.form-control, .form-select { background-color: var(--wh-surface); border-color: var(--wh-border); border-radius: 9px; font-size: .88rem; }
.form-control:hover, .form-select:hover { border-color: color-mix(in srgb, var(--wh-border) 55%, var(--wh-faint)); }
.form-control:focus, .form-select:focus { background-color: var(--wh-surface); border-color: rgba(var(--wh-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--wh-accent-rgb), .14); }
.form-control, .form-select { transition: border-color .15s, box-shadow .15s; }

/* Stage pills: smaller and calmer; the colour glides when it changes. */
.wh-status { font-size: .72rem; font-weight: 550; padding: .14rem .5rem .14rem .42rem; gap: .35rem; background: rgba(var(--c), .1); box-shadow: none;
    transition: color .3s, background-color .3s; }
.wh-status i { width: .4rem; height: .4rem; transition: background-color .3s; }
.wh-status-secondary { --c: 110, 114, 128; }
.wh-status-primary { --c: 91, 91, 214; }
.wh-status-warning { --c: 183, 121, 8; }
.wh-status-info { --c: 3, 132, 199; }
.wh-status-success { --c: 22, 152, 82; }
.wh-status-dark { --c: 82, 92, 112; }
[data-bs-theme="dark"] .wh-status-primary { --c: 150, 150, 255; }
[data-bs-theme="dark"] .wh-status-info { --c: 56, 189, 248; }
.wh-chip { background: var(--wh-surface-3); border-color: transparent; color: var(--wh-muted); }
.badge.wh-chip { font-weight: 600; }

/* Empty lists: a small tinted icon square. */
.wh-empty i {
    width: 44px; height: 44px; margin: 0 auto .6rem; border-radius: 12px; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center; color: var(--wh-muted); background: var(--wh-surface-3);
}

/* Board: grey lanes, white cards. */
.wh-board-col { background: var(--wh-surface-2); border: 1px solid var(--wh-border-soft); border-radius: var(--wh-radius); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wh-board-col-head { border-top: 0; padding: .35rem .45rem .6rem; }
.wh-board-card { background: var(--wh-surface); border-radius: 10px; }

/* Tabs such as List / Board: a grey switch with a white pill. */
.nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--wh-surface-3); }
.nav-tabs .nav-link { margin: 0; border: 0 !important; border-radius: 8px; color: var(--wh-muted); font-weight: 550; font-size: .85rem; padding: .34rem .85rem; background: none; transition: color .15s, background-color .15s; }
.nav-tabs .nav-link:hover { color: var(--wh-text); }
.nav-tabs .nav-link.active { color: var(--wh-text); background: var(--wh-surface); box-shadow: 0 1px 2px rgba(16, 17, 26, .08), 0 0 0 1px var(--wh-border); }

/* Chat. */
.wh-chat-list { background: var(--wh-surface-2); }
.wh-chat-pane { background: var(--wh-surface); }
.wh-chat-day span { background: var(--wh-surface); }
.wh-chat-item.active { background: var(--wh-surface-3); color: var(--wh-text); font-weight: 600; }
.wh-chat-icon { border-radius: 9px; }

/* ---- Home hero: a clean welcome panel ---- */
.wh-hero { position: relative; padding: 1.6rem 1.7rem 1.4rem; margin-bottom: 1.4rem; border-radius: 18px; }
.wh-hero-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.wh-hero-bg::before {   /* a faint dotted grid fading out to the right */
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--wh-faint) 45%, transparent) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 100%); mask-image: linear-gradient(105deg, transparent 45%, #000 100%);
    opacity: .55;
}
.wh-hero-top { position: relative; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.wh-hero-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500; color: var(--wh-muted); }
.wh-hero h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 700; letter-spacing: -.035em; margin: .4rem 0 .25rem; }
.wh-hero p { color: var(--wh-muted); margin: 0; font-size: .94rem; }
.wh-hero-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wh-hero-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 9px;
    font-size: .8rem; font-weight: 550; color: var(--wh-muted); background: var(--wh-surface-2); border: 1px solid var(--wh-border);
}
.wh-hero-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: 1.35rem; }
.wh-hstat {
    display: flex; align-items: center; gap: .8rem; padding: .85rem .95rem; border-radius: 12px; min-width: 0;
    color: inherit; text-decoration: none; background: var(--wh-surface); border: 1px solid var(--wh-border); overflow: hidden;
    transition: border-color .2s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.wh-hstat:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--wh-shadow); border-color: color-mix(in srgb, var(--wh-border) 40%, var(--wh-faint)); }
.wh-hstat-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.wh-hstat .wh-kpi-value { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.wh-hstat-text { min-width: 0; max-width: 100%; }
.wh-hstat-label { display: block; font-size: .82rem; font-weight: 600; margin-top: .2rem; }
.wh-hstat-note { display: block; font-size: .72rem; color: var(--wh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-hstat.hot { border-color: rgba(225, 29, 72, .28); }
.wh-hstat.hot .wh-kpi-value { color: #e11d48; }
[data-bs-theme="dark"] .wh-hstat.hot .wh-kpi-value { color: #fb7185; }
@media (max-width: 991.98px) { .wh-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .wh-hero { padding: 1.2rem 1rem 1rem; border-radius: 16px; }
    .wh-hero-actions { margin-left: 0; }
    .wh-hero-stats { gap: .5rem; }
    .wh-hstat { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Login: a plain page; the left panel is one calm indigo. */
.wh-login { background: var(--wh-bg); }
.wh-login-box { background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: 18px; box-shadow: var(--wh-shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wh-login-art { background: radial-gradient(420px 260px at 0% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(160deg, #5b5bd6, #3f3fb0); }

/* Links between things. */
.wh-ticket-ref { border-radius: 6px; }
.wh-mention { border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { .wh-hstat, .wh-hstat:hover { transition: none; transform: none; } }

/* =====================================================================
   Quiet touches (JS: delight.js, layouts/app). Small, slow, and all
   switched off under prefers-reduced-motion at the end of this section.
   ===================================================================== */

/* Cards fade up as they come into view (the glass block itself fades, never its parent). */
.wh-reveal { opacity: 0; transform: translateY(14px); }
.wh-reveal.wh-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .75, .25, 1); transition-delay: var(--d, 0ms); }

/* Top tabs: a soft pill glides under the mouse. */
.wh-tabs.has-glider { position: relative; }
.wh-tabs.has-glider .wh-tab { position: relative; z-index: 1; }
.wh-tabs.has-glider .wh-tab:not(.active):hover { background: transparent; }
.wh-tab-glider {
    position: absolute; top: 50%; height: 36px; margin-top: -18px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
    background: var(--wh-glass-inner); box-shadow: inset 0 0 0 1px var(--wh-glass-field); opacity: 0;
    transition: left .35s cubic-bezier(.3, .9, .3, 1), width .35s cubic-bezier(.3, .9, .3, 1), opacity .25s;
}
.wh-tab-glider.on { opacity: 1; }

/* Glass shine: a faint light under the content, following the mouse. */
.wh-card, .wh-hstat { position: relative; isolation: isolate; }
.wh-card::after, .wh-hstat::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 55%);
}
[data-bs-theme="dark"] .wh-card::after, [data-bs-theme="dark"] .wh-hstat::after {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 55%);
}
.wh-card:hover::after, .wh-hstat:hover::after { opacity: 1; }
@media (hover: none) { .wh-card::after, .wh-hstat::after { display: none; } }

/* The "Working" stage dot breathes, so live work stands out. */
@keyframes wh-breathe { 0% { box-shadow: 0 0 0 0 rgba(var(--c), .55); } 70%, 100% { box-shadow: 0 0 0 5px rgba(var(--c), 0); } }
.wh-status-primary i { animation: wh-breathe 2.2s ease-out infinite; }

/* Bell: shimmering placeholder rows, then notices slide in one by one. */
@keyframes wh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.wh-skeleton { padding: .8rem 1rem; display: grid; gap: .75rem; }
.wh-skeleton span { display: block; height: 38px; border-radius: 10px;
    background: linear-gradient(90deg, var(--wh-glass-inner) 25%, var(--wh-border-soft) 50%, var(--wh-glass-inner) 75%); background-size: 200% 100%;
    animation: wh-shimmer 1.4s linear infinite; }
.wh-skeleton span:nth-child(2) { width: 85%; } .wh-skeleton span:nth-child(3) { width: 65%; }
@keyframes wh-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wh-stagger > * { animation: wh-slide-in .35s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--n, 0) * 45ms); }

/* Moving between pages: a soft cross-fade while the dock stays put (browsers that support it). */
@view-transition { navigation: auto; }
.wh-dock { view-transition-name: wh-dock; }
.wh-tabbar { view-transition-name: wh-tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }

/* Light/dark switch: the new look spreads out in a circle from the button. */
@keyframes wh-reveal-circle {
    from { clip-path: circle(0 at var(--wh-vt-x, 50%) var(--wh-vt-y, 0)); }
    to { clip-path: circle(150vmax at var(--wh-vt-x, 50%) var(--wh-vt-y, 0)); }
}
html.wh-theme-switch .wh-dock, html.wh-theme-switch .wh-tabbar { view-transition-name: none; }
html.wh-theme-switch::view-transition-old(root) { animation: none; }
html.wh-theme-switch::view-transition-new(root) { animation: wh-reveal-circle .65s cubic-bezier(.4, 0, .2, 1); mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .wh-reveal { opacity: 1; transform: none; }
    .wh-card::after, .wh-hstat::after { display: none; }
}

/* =====================================================================
   Page polish: Notifications, Users, Profile, Projects, empty lists.
   ===================================================================== */

/* A centred column for one-list pages (Notifications). */
.wh-narrow { max-width: 760px; margin-inline: auto; }
.wh-notice-page { overflow: hidden; }
.wh-card-bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--wh-border-soft); }

/* Filters on one line with the main button (Users). */
.wh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wh-toolbar > .btn { margin-left: auto; }
.wh-toolbar-filters { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.wh-toolbar-filters .form-select { width: auto; min-width: 9rem; }
.wh-search-field { position: relative; flex: 0 1 260px; min-width: 12rem; }
.wh-search-field i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--wh-faint); pointer-events: none; }
.wh-search-field .form-control { padding-left: 2.3rem; }
@media (max-width: 575.98px) {
    .wh-toolbar > .btn { margin-left: 0; width: 100%; }
    .wh-search-field, .wh-toolbar-filters .form-select { flex: 1 1 100%; }
}

/* Two-way switch, e.g. Active / Archived. */
.wh-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--wh-glass-inner); box-shadow: inset 0 0 0 1px var(--wh-glass-field); }
.wh-seg a { padding: .35rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--wh-muted); text-decoration: none; transition: background .2s, color .2s; }
.wh-seg a:hover { color: var(--wh-text); }
.wh-seg a.active { background: var(--wh-glass-strong); color: var(--wh-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

/* Project cards: a colour tile instead of the old thick left edge. */
.wh-project-card { border-left: 0; }
.wh-project-tile {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--wh-font-display); font-weight: 700; font-size: 1.2rem; color: #fff;
    background: linear-gradient(135deg, var(--pc, var(--wh-accent)), color-mix(in srgb, var(--pc, var(--wh-accent)) 70%, #000));
    box-shadow: 0 6px 16px -6px var(--pc, var(--wh-accent));
}
.wh-project-go { color: var(--wh-faint); transition: transform .2s, color .2s; }
.wh-project-card:hover .wh-project-go { color: var(--wh-text); transform: translateX(3px); }

/* Profile photo: click the face (or the button) to pick, with a live preview. */
.wh-photo-pick { display: flex; align-items: center; gap: 1rem; }
.wh-photo-pick-face { position: relative; cursor: pointer; flex-shrink: 0; border-radius: 50%; }
.wh-photo-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wh-photo-pick-cam {
    position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; color: #fff; background: var(--wh-accent); box-shadow: 0 0 0 3px var(--wh-glass-strong); transition: transform .2s;
}
.wh-photo-pick-face:hover .wh-photo-pick-cam { transform: scale(1.1); }
.wh-photo-pick:has(input:focus-visible) .wh-photo-pick-face { outline: 2px solid var(--wh-accent); outline-offset: 3px; }
.wh-locked-field {
    display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border-radius: var(--bs-border-radius);
    background: var(--wh-glass-inner); border: 1px dashed var(--wh-glass-field); color: var(--wh-muted); overflow-wrap: anywhere;
}
.wh-locked-field i { color: var(--wh-faint); }

/* Empty lists inside a table read as a friendly note, not a grey line. */
td > .wh-empty { padding: 1.6rem 1rem; }
.table > tbody > tr:only-child > td:has(> .wh-empty) { border-bottom: 0; }

/* =====================================================================
   Smooth motion (clean look). Short and quick: nothing over ~0.35s,
   so the app feels fast. JS: delight.js (rows, tab pill), palette.js.
   All off under prefers-reduced-motion at the end.
   ===================================================================== */
:root { --wh-ease: cubic-bezier(.2, .8, .2, 1); --wh-spring: cubic-bezier(.3, 1.35, .5, 1); }

/* Calmer versions of the earlier effects. */
.wh-loadbar { height: 2px; background: var(--wh-accent); box-shadow: 0 0 8px rgba(var(--wh-accent-rgb), .5); }
a.wh-card:hover, .wh-board-card:hover { transform: translateY(-2px); }
.wh-card { transition: transform .22s var(--wh-ease), box-shadow .22s var(--wh-ease), border-color .22s; }
.wh-brand:hover .wh-brand-mark { transform: scale(1.06) rotate(-6deg); }
.wh-tab:hover { transform: none; }
.wh-empty i { animation: none; }
.wh-ripple { opacity: .12; }
.btn:active { transform: scale(.97); transition-duration: .06s; }
.btn-primary:hover { transform: none; }

/* Light under the mouse: a faint accent glow on the solid cards. */
.wh-card::after, .wh-hstat::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--wh-accent-rgb), .045), transparent 60%); }
[data-bs-theme="dark"] .wh-card::after, [data-bs-theme="dark"] .wh-hstat::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .035), transparent 60%); }

/* Page opens: the content rises 6px and fades in. */
@keyframes wh-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wh-main { animation: wh-enter .28s var(--wh-ease) both; }

/* Cards further down still fade up when scrolled to (a little quicker than before). */
.wh-reveal { opacity: 0; transform: translateY(8px); }
.wh-reveal.wh-in { transition: opacity .4s ease, transform .45s var(--wh-ease); }

/* Tab pill slides to the tab under the mouse and rests on the open tab. */
.wh-tabs.has-glider .wh-tab.active, .wh-tabs.has-glider .wh-tab:hover { background: transparent; }
.wh-tab-glider { height: 32px; margin-top: -16px; background: var(--wh-surface-3); box-shadow: none;
    transition: left .32s var(--wh-spring), width .32s var(--wh-spring), opacity .2s; }
.wh-tab-glider.still { transition: none; }

/* Lists: rows arrive one after another, very quickly. */
@keyframes wh-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wh-row-in { animation: wh-row-in .3s var(--wh-ease) both; animation-delay: calc(var(--r, 0) * 22ms); }

/* Menus grow out of the button that opened them. */
@keyframes wh-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-menu.show { animation: wh-pop .16s var(--wh-ease); transform-origin: top right; }
.dropdown-menu:not(.dropdown-menu-end).show { transform-origin: top left; }
.dropdown-item { transition: background-color .1s, color .1s; }
.modal.fade .modal-dialog { transform: scale(.97) translateY(6px); transition: transform .22s var(--wh-ease); }
.modal.show .modal-dialog { transform: none; }

/* Board: the dragged card tilts and lifts; the others slide aside; a grey slot shows where it lands. */
.wh-board-drag { rotate: 2.5deg; box-shadow: var(--wh-shadow-lg) !important; opacity: 1 !important; cursor: grabbing; }
.wh-board-ghost { opacity: 1; background: var(--wh-surface-3) !important; border: 1px dashed color-mix(in srgb, var(--wh-border) 30%, var(--wh-faint)) !important; box-shadow: none !important; }
.wh-board-ghost > * { visibility: hidden; }
.wh-board-list.sortable-over, .wh-board-col:has(.wh-board-ghost) { box-shadow: inset 0 0 0 1px rgba(var(--wh-accent-rgb), .3); }

/* Loading placeholder shimmer (bell). */
.wh-skeleton span { background: linear-gradient(90deg, var(--wh-surface-2) 25%, var(--wh-surface-3) 50%, var(--wh-surface-2) 75%); background-size: 200% 100%; }

/* ---- Ctrl + K: jump to anything (palette.js) ---- */
.wh-palette { position: fixed; inset: 0; z-index: 2050; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.wh-palette[hidden] { display: none; }
.wh-palette-backdrop { position: absolute; inset: 0; background: rgba(10, 11, 16, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: wh-fade .18s ease both; }
[data-bs-theme="dark"] .wh-palette-backdrop { background: rgba(0, 0, 0, .55); }
.wh-palette-box {
    position: relative; width: 100%; max-width: 620px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--wh-surface); border: 1px solid var(--wh-border); border-radius: 16px; box-shadow: var(--wh-shadow-lg);
    animation: wh-palette-in .22s var(--wh-spring) both;
}
@keyframes wh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wh-palette-in { from { opacity: 0; transform: scale(.96) translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes wh-palette-out { to { opacity: 0; transform: scale(.97); } }
.wh-palette.closing .wh-palette-box { animation: wh-palette-out .12s ease-in both; }
.wh-palette.closing .wh-palette-backdrop { animation: wh-fade .12s ease-in reverse both; }
.wh-palette-input { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--wh-border); }
.wh-palette-input i { color: var(--wh-faint); font-size: 1.05rem; }
.wh-palette-input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--wh-text); font-size: 1.02rem; min-width: 0; }
.wh-palette-input input::placeholder { color: var(--wh-faint); }
.wh-palette-list { overflow-y: auto; padding: .4rem; }
.wh-palette-group { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--wh-faint); padding: .6rem .7rem .3rem; }
.wh-palette-item {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 9px; color: var(--wh-text); text-decoration: none; font-size: .9rem; cursor: pointer;
    animation: wh-row-in .22s var(--wh-ease) both; animation-delay: calc(var(--r, 0) * 18ms);
}
.wh-palette-item:hover { color: var(--wh-text); }
.wh-palette-item > i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--wh-surface-3); color: var(--wh-muted); flex-shrink: 0; font-size: .9rem; transition: background-color .12s, color .12s; }
.wh-palette-item .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; margin: 0 9px; }
.wh-palette-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-palette-item .wh-code { min-width: 3.6rem; }
.wh-palette-item.active { background: var(--wh-surface-3); }
.wh-palette-item.active > i { background: var(--wh-accent); color: #fff; }
.wh-palette-item .go { opacity: 0; color: var(--wh-faint); transition: opacity .12s, transform .15s; }
.wh-palette-item.active .go { opacity: 1; transform: translateX(2px); }
.wh-palette-empty { text-align: center; color: var(--wh-muted); font-size: .88rem; padding: 1.6rem 1rem; }
.wh-palette-foot { display: flex; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--wh-border); font-size: .74rem; color: var(--wh-faint); background: var(--wh-surface-2); }
.wh-palette-foot kbd { margin-right: .2rem; }
@media (max-width: 575.98px) { .wh-palette { padding-top: 4vh; } .wh-palette-foot { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .wh-main, .wh-row-in, .wh-palette-item, .wh-palette-box, .wh-palette-backdrop { animation: none !important; }
    .wh-board-drag { rotate: none; }
}

/* Clean look: flatter project tiles, quieter unread notices (a dot instead of a tinted row). */
.wh-project-tile { width: 40px; height: 40px; border-radius: 11px; font-size: 1.1rem; background: var(--pc, var(--wh-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.wh-notice { position: relative; transition: background-color .12s; }
.wh-notice.unread { background: rgba(var(--wh-accent-rgb), .045); }
.wh-notice.unread::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--wh-accent); }
.wh-notice.unread .wh-notice-text { padding-right: 1rem; }
.wh-notice-icon { background: var(--wh-surface-3); color: var(--wh-muted); border-radius: 8px; }
.wh-notice.unread .wh-notice-icon { background: var(--wh-accent-soft); color: var(--wh-accent); }

/* Phones: the tabs are hidden, so push the top-bar icons to the right. */
@media (max-width: 991.98px) { .wh-tabs + .wh-dock-tools { margin-left: auto; } }

/* =====================================================================
   Colour & life (on top of the clean look). The layout stays calm; colour
   comes in as a soft glow behind the page, a lively welcome panel,
   coloured tiles and friendly empty states. Tone colours: --t (r, g, b).
   ===================================================================== */
:root, [data-bs-theme="light"] {
    --wh-dots: rgba(91, 91, 214, .13);
    --wh-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #0ea5e9 100%);
    --wh-grad-text: linear-gradient(100deg, #4f46e5 0%, #8b5cf6 45%, #0ea5e9 100%);
}
[data-bs-theme="dark"] {
    --wh-dots: rgba(160, 160, 255, .09);
    --wh-grad-text: linear-gradient(100deg, #a5b4fc 0%, #c4b5fd 45%, #7dd3fc 100%);
}
.t-indigo { --t: 99, 102, 241; } .t-amber { --t: 245, 158, 11; } .t-cyan { --t: 6, 182, 212; }
.t-rose { --t: 244, 63, 94; } .t-green { --t: 16, 185, 129; } .t-violet { --t: 139, 92, 246; }

/* Behind every page: a faint dot grid and two slow colour glows near the top. */
.wh-glow { display: block; -webkit-mask-image: linear-gradient(#000 0, #000 35%, transparent 90%); mask-image: linear-gradient(#000 0, #000 35%, transparent 90%);
    background-image: radial-gradient(var(--wh-dots) 1px, transparent 1px); background-size: 22px 22px; }
.wh-glow::before, .wh-glow::after { filter: blur(80px); opacity: .7; }
.wh-glow::before { width: 640px; height: 520px; top: -260px; left: 4%; background: radial-gradient(circle, rgba(139, 92, 246, .32), transparent 70%); }
.wh-glow::after { width: 600px; height: 500px; top: -240px; right: 2%; background: radial-gradient(circle, rgba(14, 165, 233, .26), transparent 70%); }
[data-bs-theme="dark"] .wh-glow::before, [data-bs-theme="dark"] .wh-glow::after { opacity: .45; }

/* Brand mark and main buttons: the indigo-violet gradient. */
.wh-brand-mark { background: var(--wh-grad); box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary { background-image: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #6366f1, #5b5bd6 55%, #7c5cf5); border-color: transparent;
    box-shadow: 0 4px 12px -4px rgba(var(--wh-accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(var(--wh-accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .2); transform: translateY(-1px); }

/* Tabs: the pill is a soft indigo; the open tab reads in indigo. */
.wh-tab-glider { background: var(--wh-accent-soft); }
.wh-tab.active { color: var(--wh-accent-text); }
.wh-tabs:not(.has-glider) .wh-tab.active { background: var(--wh-accent-soft); }

/* ---- Welcome panel ---- */
.wh-hero {
    border: 1px solid transparent; overflow: hidden;
    background:
        linear-gradient(120deg, rgba(99, 102, 241, .09), rgba(139, 92, 246, .05) 40%, rgba(14, 165, 233, .07) 100%) padding-box,
        linear-gradient(var(--wh-surface), var(--wh-surface)) padding-box,
        linear-gradient(120deg, rgba(99, 102, 241, .45), rgba(139, 92, 246, .2) 45%, rgba(14, 165, 233, .4)) border-box;
    box-shadow: 0 18px 40px -24px rgba(79, 70, 229, .45);
}
.wh-hero-bg::before {   /* drifting colour lights instead of the dot grid */
    content: ""; position: absolute; inset: auto; width: 360px; height: 360px; top: -170px; right: 8%; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .3), transparent 70%); opacity: 1; -webkit-mask-image: none; mask-image: none;
    animation: wh-drift-a 18s ease-in-out infinite;
}
.wh-hero-bg::after {
    content: ""; position: absolute; width: 320px; height: 320px; bottom: -200px; right: 30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, .25), transparent 70%); animation: wh-drift-b 22s ease-in-out infinite;
}
.wh-hero h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.wh-grad-text { background: var(--wh-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wh-hero-chip { background: color-mix(in srgb, var(--wh-surface) 70%, transparent); }
.wh-hero .btn-outline-secondary { background: color-mix(in srgb, var(--wh-surface) 75%, transparent); }

/* Tiles: each in its own colour. */
.wh-hstat {
    background: linear-gradient(150deg, rgba(var(--t, 99, 102, 241), .1), rgba(var(--t, 99, 102, 241), 0) 65%), var(--wh-surface);
    border-color: rgba(var(--t, 99, 102, 241), .2);
}
.wh-hstat:hover { border-color: rgba(var(--t), .45); box-shadow: 0 14px 30px -14px rgba(var(--t), .55); transform: translateY(-3px); }
.wh-hstat-icon { color: #fff !important; background: linear-gradient(135deg, rgba(var(--t), .85), rgb(var(--t))) !important;
    box-shadow: 0 6px 14px -6px rgba(var(--t), .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .35s var(--wh-spring); }
.wh-hstat:hover .wh-hstat-icon { transform: scale(1.08) rotate(-6deg); }
.wh-hstat .wh-kpi-value { font-size: 1.75rem; }
.wh-hstat.hot { border-color: rgba(var(--t), .45); }
.wh-hstat-note { color: var(--wh-muted); }

/* Card headings: solid little colour squares with a white icon. */
.wh-card-head h2 > i.bi:first-child, .wh-card-head h3 > i.bi:first-child {
    background: currentColor; box-shadow: 0 4px 10px -4px currentColor;
}
.wh-card-head h2 > i.bi:first-child::before, .wh-card-head h3 > i.bi:first-child::before { color: #fff; }

/* Empty states: a floating gradient badge with a soft glow, not a grey box. */
.wh-empty { padding: 2.2rem 1rem; }
.wh-empty i {
    width: 58px; height: 58px; border-radius: 18px; font-size: 1.5rem; margin-bottom: .8rem;
    color: #fff; background: var(--wh-grad);
    box-shadow: 0 12px 24px -10px rgba(99, 102, 241, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation: wh-float 3.6s ease-in-out infinite !important;
}
.wh-empty a { font-weight: 600; text-decoration: none; }

/* List rows: the project dot grows into a bar on hover. */
.wh-list-row .wh-project-dot { transition: height .2s var(--wh-ease), border-radius .2s; }
a.wh-list-row:hover .wh-project-dot { height: 22px; border-radius: 4px; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .wh-empty i, .wh-hero-bg::before, .wh-hero-bg::after { animation: none !important; }
}

/* =====================================================================
   Fun to use: animations people notice (JS: delight.js). Each one is
   short or slow and soft, and all stop under prefers-reduced-motion.
   ===================================================================== */
@property --wh-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wh-spin-angle { to { --wh-a: 360deg; } }
@keyframes wh-word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wh-ring-fill { from { stroke-dashoffset: 100; } }
@keyframes wh-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } }
@keyframes wh-sheen { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }
@keyframes wh-mark-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes wh-pop-num { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }

/* Welcome panel: a soft light runs around its border. */
.wh-hero {
    background:
        linear-gradient(120deg, rgba(99, 102, 241, .09), rgba(139, 92, 246, .05) 40%, rgba(14, 165, 233, .07) 100%) padding-box,
        linear-gradient(var(--wh-surface), var(--wh-surface)) padding-box,
        conic-gradient(from var(--wh-a), rgba(99, 102, 241, .25), rgba(139, 92, 246, .95), rgba(14, 165, 233, .9), rgba(236, 72, 153, .6), rgba(99, 102, 241, .25)) border-box;
    animation: wh-spin-angle 7s linear infinite;
}

/* Greeting appears word by word. */
.wh-words .w { display: inline-block; animation: wh-word-in .55s var(--wh-ease) both; animation-delay: calc(120ms + var(--i) * 70ms); }
.wh-words .w.wh-grad-text { padding-right: .04em; }

/* "Done this week" ring fills up. */
.wh-ring { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .75rem .3rem .3rem; border-radius: 999px;
    background: color-mix(in srgb, var(--wh-surface) 70%, transparent); border: 1px solid var(--wh-border); }
.wh-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); flex-shrink: 0; }
.wh-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.wh-ring .track { stroke: var(--wh-surface-3); }
.wh-ring .fill { stroke: #10b981; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); filter: drop-shadow(0 0 3px rgba(16, 185, 129, .6));
    animation: wh-ring-fill 1.4s .35s cubic-bezier(.3, .8, .2, 1) both; }
.wh-ring-num { position: absolute; left: .3rem; width: 40px; text-align: center; font-weight: 700; font-size: .92rem; }
.wh-ring-label { font-size: .7rem; font-weight: 600; line-height: 1.15; color: var(--wh-muted); }

/* Tiles tilt toward the mouse (delight.js sets --rx / --ry). */
.wh-hero-stats { perspective: 700px; }
.wh-hstat { transform-style: preserve-3d; will-change: transform; }
.wh-hstat:hover { transform: translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out, box-shadow .2s, border-color .2s; }
.wh-hstat .wh-kpi-value { animation: wh-pop-num .6s var(--wh-spring) both; animation-delay: calc(.35s + var(--n, 0) * 80ms); }

/* Cards: a thin light runs along the border under the mouse. */
@media (hover: hover) {
    .wh-card::before, .wh-hstat::before {
        content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
        background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--wh-accent-rgb), .75), rgba(14, 165, 233, .35) 40%, transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
    .wh-card:hover::before, .wh-hstat:hover::before { opacity: 1; }
    .wh-hero::before { display: none; }
}

/* Main buttons: a light sweeps across on hover. */
.btn-primary::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-120%) skewX(-20deg);
}
.btn-primary:hover::before { animation: wh-sheen .75s ease; }

/* Tabs and top-bar icons give a little wiggle. */
.wh-tab i, .wh-icon-btn i, .wh-tabbar i { display: inline-block; }
.wh-tab:hover i, .wh-icon-btn:hover > i:not(.wh-theme-to-dark):not(.wh-theme-to-light) { animation: wh-wiggle .5s ease; }
.wh-tabbar a:active i { animation: wh-wiggle .4s ease; }

/* The logo's colours flow slowly. */
.wh-brand-mark { background: linear-gradient(135deg, #6366f1, #8b5cf6, #0ea5e9, #6366f1); background-size: 250% 250%; animation: wh-mark-flow 8s ease-in-out infinite; }

/* Avatars: a colour ring on hover. */
.wh-avatar-btn .wh-avatar { transition: box-shadow .25s, transform .25s var(--wh-spring); }
.wh-avatar-btn:hover .wh-avatar { box-shadow: 0 0 0 2px var(--wh-surface), 0 0 0 4px rgba(var(--wh-accent-rgb), .6); transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .wh-hero, .wh-brand-mark, .wh-words .w, .wh-ring .fill, .wh-hstat .wh-kpi-value { animation: none !important; }
    .wh-hstat:hover { transform: none; }
}